8 Webdesignværktøjer, der skal bruges i 2018

I det moderne websamfund er der mange værktøjer til webdesign. Der er klassikerne - grafikredaktører som Photoshop og Sketch - og programmer, der kombinerer både design og layout.

Ud over at bruge hovedværktøjet bruger designeren som regel et antal hjælpetjenester og værktøjer, der forenkler arbejdet.

Outline2Design team valgte en liste over de mest interessante og nyttige ressourcer, som vi blev tilsluttet.

Hurtig brugergrænseflade

RapidUI er webdesignplatformen, der giver designere mulighed for at omdanne deres PSD- og Sketch-filer til fuldt funktionelle websteder uden at skrive en enkelt kodelinje.

Fordele: automatiseret interfaceudvikling.

Hvert element i design kan udføre en handling. For eksempel kan du nemt konvertere kort til interaktive kort, firkanter til knapper og baggrundsbilleder til parallax.

Ulemper: forældet interface design. Dette er dog ikke den vigtigste ting.

Den store ulempe er, at værktøjet ikke læser lag og overlejrer effekter godt. Hvis du allerede har valgt det, skal du bruge lidt tid på at forberede kvalitetskilder.

Webflow

Webflow er et webstedsudviklingsværktøj, hvis stærke side er en visuel editor med elementstyring via træk og slip-interface, samt en ubegrænset gratis billetpris med mulighed for at være vært for et websted.

Oprettelse af websteder kræver ikke særlig viden og programmeringsevner, så tjenesten er velegnet til begyndere inden for webstedsopbygning såvel som erfarne brugere.

Fordele: For det første er det et gratis værktøj. Den største forskel mellem denne service og de andre ligger i det faktum, at designeren kan lave intuitivt funktionelt design uden hjælp af en programmør.

Som en bonus har Webflow også givet et udvalg af topdesignere og en mulighed for dig at se de forskellige værker.

Ulemper: du har brug for minimal viden om HTML / CSS for at arbejde med dette værktøj. På den anden side er det ikke så slemt.

Atom og Proto

Vi tror, ​​at disse værktøjer er identiske i funktionalitet. Hovedretningen er prototype til adskillige enheder.

Fordele: du behøver ikke at lære programmering for at tilføje yderligere funktioner. Web-baserede platforme giver enhver bruger mulighed for at tilføje disse elementer på én gang.

Atomic er gratis. Det har et ubegrænset antal prototyper, og alle er gratis.

Den store fordel ved Proto.io er dens integration med tre brugertestplatforme: Lookback, UserTesting og Validally, hvilket gør det meget mere praktisk til brugertestformål.

Ulemper: Proto.io har sine egne plug-ins til både Sketch og Photoshop, men desværre eksporteres alle lag til statisk grafik, så de redigeres ikke i Proto.io. En anden ulempe er, at for Proto.io skal du betale $ 24 månedligt for en person og op til fem projekter.

Figma

Figma er tværplatformværktøjet for designere og giver flere mennesker mulighed for at arbejde på det samme projekt i realtid. Figma foretrækkes især af webudviklere. Det er en fornøjelse at lave en grafisk brugergrænseflade til en mobilapp.

Derudover er det som i Google Dokumenter muligt at give kommentarer direkte på arbejdsfeltet, hvilket er meget praktisk til teamwork.

Viacheslav, senior UX / UI Designer mener, at:

”En af de vigtigste fordele ved Figma er samarbejdstilstand, når flere designere kan arbejde på et layout ad gangen. Jeg tror, ​​at dette værktøj vil være nyttigt for junior-novice-designere. Jeg vil også bemærke, at Figma er et online værktøj, og jeg kan bruge det fra mange platforme. Alt hvad jeg har brug for til dette er internettet. ”

Fordele:

  • Opdateringer til dette værktøj kommer ganske ofte ud. Den sidste blev frigivet den 25. januar 2018. Udviklingsteamet har foretaget mange ændringer, hvoraf den ene er muligheden for at trække Sketch-filer til et åbent dokument.
  • Kræver ikke kodningskendskab, i modsætning til med Webflow.
  • Designet konverteres automatisk til CSS-kode.

Prototype på papir

”De fleste UX-designere starter designprocessen med skitser på papir, først nu kan du teste nogle hypoteser dybest set, når du opretter en interaktiv prototype. POP giver designere på skitsestadiet mulighed for at oprette fungerende prototyper og deler dem med teamet til test og identificering af fejlagtige løsninger i de indledende stadier. Jeg mener, at denne applikation letter og fremskynder processen med at designe mobile grænseflader og udsender standardprocessen til et nyt moderne niveau. ”
Roman, Senior UX / UI Designer hos Outline2Design

Hvis du foretrækker de gamle skolemetoder, da prototyperne blev tegnet for hånd på grund af manglen på en række moderne værktøjer, vil POP blive en rigtig ven for dig.

Alt er forenklet til en vis grad: du tegner idéerne til applikationen i din skissebog, tager billeder og tilføjer links mellem knapper og layout. Efter det skal du synkronisere prototyperne med Dropbox og få en færdiglavet prototype.

Fordele: minimumsudgifter til tid og ressourcer. Det er meget praktisk at teste stier til mobile apps.

Ulemper: Vi fandt ikke nogen globale mangler. En ting, som vi gerne vil bemærke, er den ubehagelige tegningsfunktion inde i applikationen. Men dette gælder ikke for den vigtigste POP-funktion. Dette er sandsynligvis en ekstra funktion.

Webværktøjer til VR

A-Frame

Den virtuelle virkelighed udvikler sig med lysets hastighed. Og vi kunne ikke gå forbi de værktøjer, der hjælper med at skabe det. Vi har gennemgået nogle open source-værktøjer.

A-Frame er en webramme fra Mozilla, der blev oprettet til nem og kraftfuld oprettelse af VR-indhold. Det er et uafhængigt open source-projekt, der har et stort VR-samfund. Der er endda et interaktivt kursus til Web VR fra A-Frame. Der er en HTML-baseret stærk enhedskomponentramme indlejret i kernen af ​​værktøjet.

Fordele:

  • Virkelig kraftfuldt værktøj, der understøtter de fleste VR-headset som Vive, Rift, Daydream osv.
  • Cross-Platform VR: Byg VR-applikationer til Vive, Rift, Daydream, GearVR og Papp med støtte til alle respektive controllere.
  • Kompatibel med de fleste biblioteker, rammer og værktøjer, herunder React, Preact, Vue.js, d3.js, Ember.js og jQuery.

Ulemper: du har brug for kendskab til HTML for at arbejde med dette værktøj.

Hologram

Skabere præsenterer denne app som et alt-i-et-web-VR-skabelsesværktøj. Det er faktisk et desktop-program til oprettelse og prototype af VR til enhver. Dette værktøj indeholder flere grænseflader til flere mål:

Scene

3D visuelt interfaceværktøj designet til dem, der ikke ved noget om 3D og VR. Det er let at bruge og meget intuitivt. Denne grænseflade hjælper med at skabe 3D-miljø som en første fase, inden de går ind i kodning og omdanner 3D-scene til VR.

Coding

Dette er den vigtigste grænseflade, hvor magien sker. Hologramskabere beviser, at der ikke er behov for at vide, hvordan man koder, før man starter. Sproget viser sig virkelig at være ret let at forstå.

Aktiver

Denne grænseflade giver dig mulighed for hurtigt at gennemse projektets aktiver, og det er integreret med Google Blocks, så det er let at bruge 3D-objekter oprettet af dette community.

Fordele: let at bruge, et behageligt værktøj til VR-oprettelse. Det kræver ikke meget viden for at begynde.

Ulemper: preview-animation tager lang tid.

Som du kan se, er disse værktøjer mere end nok. Hvert af vores team vælger det ene eller det andet. Vores råd - vælg det der passer bedst til dig, afhængigt af opgaverne.