8 instrumente de proiectare web pentru a fi utilizate în 2018

În comunitatea web modernă, există multe instrumente pentru proiectarea web. Există clasici - editori de grafică precum Photoshop și Sketch - și programe care combină design și aspect.

Pe lângă utilizarea instrumentului principal, proiectantul folosește, de regulă, o serie de servicii și instrumente auxiliare care simplifică lucrarea.

Echipa Outline2Design a selectat o listă cu cele mai interesante și utile resurse pe care le-am conectat.

UI rapidă

RapidUI este platforma de design web care permite proiectanților să-și transforme fișierele PSD și Sketch în site-uri web funcționale complet, fără a scrie o singură linie de cod.

Avantaje: dezvoltarea automatizată a interfeței.

Fiecare element de proiectare poate efectua o acțiune. De exemplu, puteți converti ușor hărțile în hărți interactive, pătrate în butoane și imagini de fundal în paralaxe.

Dezavantaje: designul de interfață învechit. Totuși, acesta nu este cel mai important lucru.

Dezavantajul mare este că instrumentul nu citește bine straturile și efectele de suprapunere. Dacă l-ai ales deja, ar trebui să petreci ceva timp pregătind surse de calitate.

Webflow

Webflow este un instrument de dezvoltare a site-ului a cărui latură puternică este un editor vizual cu gestionarea elementelor prin interfața drag and drop, precum și un tarif gratuit nelimitat cu posibilitatea de a găzdui un site.

Crearea de site-uri web nu necesită cunoștințe speciale și abilități de programare, astfel încât serviciul este potrivit atât pentru începători în domeniul construirii site-urilor, cât și pentru utilizatori cu experiență.

Avantaje: în primul rând, este un instrument gratuit. Principala diferență între acest serviciu și celelalte constă în faptul că proiectantul poate realiza un design funcțional intuitiv, fără ajutorul unui programator.

De asemenea, ca bonus, Webflow a oferit o selecție de designeri de top și o oportunitate pentru a vedea diversele lucrări.

Dezavantaje: aveți nevoie de cunoștințe minime de HTML / CSS pentru a lucra cu acest instrument. Pe de altă parte, nu este atât de rău.

Atomic și proto

Credem că aceste instrumente sunt identice în funcționalitate. Direcția principală este prototipizarea pentru numeroase dispozitive.

Avantaje: nu trebuie să înveți programarea pentru a adăuga funcții suplimentare. Platformele bazate pe Web permit oricărui utilizator să adauge aceste elemente simultan.

Atomic este gratuit. Are un număr nelimitat de prototipuri și toate sunt gratuite.

Marele avantaj al Proto.io este integrarea sa cu trei platforme de testare a utilizatorilor: Lookback, UserTesting și Validally, ceea ce îl face mult mai convenabil în scopuri de testare a utilizatorilor.

Dezavantaje: Proto.io are propriile plug-in-uri atât pentru Sketch, cât și pentru Photoshop, dar, din păcate, toate straturile sunt exportate în grafică statică, deci nu sunt editate în Proto.io. Un alt dezavantaj este că pentru Proto.io trebuie să plătiți 24 de dolari lunar pentru o persoană și până la cinci proiecte.

Figma

Figma este instrumentul multiplă platformă pentru designeri și permite mai multor persoane să lucreze la același proiect în timp real. Figma este preferată mai ales de dezvoltatorii web. Este o plăcere să creăm o interfață grafică de utilizator pentru o aplicație mobilă.

În plus, aici, ca în Google Docs, este posibil să lăsați comentarii direct pe câmpul de lucru, ceea ce este foarte convenabil pentru lucrul în echipă.

Viacheslav, un Senior Designer UX / UI consideră că:

„Unul dintre cele mai importante avantaje ale Figma este modul de cooperare atunci când mai mulți designeri pot lucra la un singur aspect la un moment dat. Consider că acest instrument va fi util pentru proiectanții începători. De asemenea, vreau să notez că Figma este un instrument online și îl pot folosi de pe multe platforme. Tot ce am nevoie pentru asta este internetul. ”

avantaje:

  • Actualizările pentru acest instrument apar destul de des. Ultima a fost lansată pe 25 ianuarie 2018. Echipa de dezvoltare a făcut multe modificări, dintre care una este capacitatea de a trage fișiere Sketch într-un document deschis.
  • Nu necesită cunoștințe de codare, spre deosebire de Webflow.
  • Designul este transformat automat în cod CSS.

Prototipizarea pe hârtie

„Majoritatea proiectanților UX încep procesul de proiectare cu schițe pe hârtie, doar acum puteți testa unele ipoteze, practic, atunci când creați un prototip interactiv. POP permite proiectanților din etapa de schițe să creeze prototipuri de lucru și să le împărtășească cu echipa pentru testarea și identificarea soluțiilor eronate în etapele inițiale. Cred că această aplicație facilitează și accelerează procesul de proiectare a interfețelor mobile și scoate procesul standard la un nou nivel modern. ”
Roman, Senior UX / UI Designer la Outline2Design

Dacă preferați metodele școlii vechi, când prototipurile au fost desenate manual, din cauza lipsei de o varietate de instrumente moderne, POP va deveni un adevărat prieten pentru dumneavoastră.

Totul este simplificat într-un anumit grad: schițați ideile aplicației din caietul de schițe, faceți poze și adăugați linkuri între butoane și machete. După aceea, sincronizați prototipurile cu Dropbox și obțineți un prototip gata.

Avantaje: cheltuieli minime pentru timp și resurse. Este foarte convenabil pentru testarea căilor pentru aplicațiile mobile.

Dezavantaje: nu am găsit defecte globale. Un lucru pe care am dori să îl remarcăm este funcția de desen incomodă din aplicație. Dar acest lucru nu se aplică funcției principale POP. Cel mai probabil, aceasta este o caracteristică suplimentară.

Instrumente web pentru VR

Un cadru

Realitatea virtuală evoluează cu viteza luminii. Și nu am putut trece pe lângă instrumentele care ajută la crearea acesteia. Am analizat câteva instrumente open source.

A-Frame este un cadru web de la Mozilla care a fost creat pentru crearea ușoară și puternică a conținutului VR. Este un proiect independent open source, care are o comunitate VR mare. Există chiar și un curs interactiv pentru Web VR de la A-Frame. Există un cadru puternic de componente-entitate bazat pe HTML încorporat în miezul instrumentului.

avantaje:

  • Un instrument foarte puternic, care acceptă cele mai multe căști VR, precum Vive, Rift, Daydream etc.
  • Cross-Platform VR: Construiți aplicații VR pentru Vive, Rift, Daydream, GearVR și Card cu suport pentru toate controlerele respective.
  • Compatibil cu majoritatea bibliotecilor, cadrelor și instrumentelor, inclusiv React, Preact, Vue.js, d3.js, Ember.js și jQuery.

Dezavantaje: aveți nevoie de cunoștințe de HTML pentru a lucra cu acest instrument.

Holograma

Creatorii prezintă această aplicație ca un instrument all-in-one de creare a VR VR. Este de fapt o aplicație desktop pentru crearea și prototiparea VR pentru oricine. Acest instrument conține mai multe interfețe pentru mai multe obiective:

Scenă

Instrument de interfață vizuală 3D conceput pentru cei care nu știu nimic despre 3D și VR. Este ușor de utilizat și foarte intuitiv. Această interfață ajută la crearea mediului 3D ca primă etapă înainte de a intra în codificare și transformarea scenei 3D în VR.

Codificare

Aceasta este interfața principală unde se întâmplă magia. Creatorii de holograme dovedesc că nu este necesar să știe cum să codați înainte de a porni. Limba se dovedește a fi destul de ușor de înțeles.

bunuri

Această interfață vă permite să răsfoiți rapid activele proiectului și este integrată cu Google Blocks, astfel încât este ușor de utilizat obiecte 3D create de această comunitate.

Avantaje: ușor de utilizat, un instrument plăcut pentru crearea de VR. Nu este nevoie de multe cunoștințe pentru a începe.

Dezavantaje: animația de previzualizare durează mult timp.

După cum vedeți, aceste instrumente sunt mai mult decât suficiente. Fiecare dintre echipa noastră alege unul sau altul. Sfatul nostru - alegeți-l pe cel care vi se potrivește, în funcție de sarcini.