20 de instrumente de web design pe care trebuie să le aveți în 2019

Designul web este una dintre acele industrii în care automulțumirea nu poate fi permisă. Trebuie să fii atent dacă vrei să rămâi productiv și să oferi rezultate din care clienții tăi pot fi inspirați. Au dispărut vremurile în care petrecea o cantitate enormă de timp în Photoshop sau în editorul tău de cod preferat. În zilele noastre, există un instrument sau o aplicație pentru aproape orice.

În plus, afluxul mare de noi designeri web a asigurat că nu există lipsă de kituri UI și modele de design. Începerea unui design proaspăt poate dura mai puțin de o oră sau două dacă sunteți priceput la ambarcațiune. Există, desigur, și alte modalități de a vă personaliza fluxul de lucru pentru design web. De la instrumente la cărți perspicace, la cadre și elemente grafice interesante.

Pentru această rezumat, pregătim cele mai bune instrumente de design web pe care să le urmărim în 2019 - toate acestea sunt succesori ai anului trecut și devin adesea părți inseparabile ale procesului de design web. S-ar putea să aveți deja Sketch și Zeplin în fluxul dvs. de lucru, dar poate că această postare vă poate face lumină asupra altor instrumente care încă nu vă vor face cunoștință.

1. Schiță

Sketch este visul designerilor web profesioniști, un software utilitar numai pentru Mac care oferă un flux de lucru de proiectare cu vectori. Abordarea vector-first înseamnă că crearea de interfețe devine o bucurie absolută. Adică, Sketch urmează un mediu strict de rețea de pixeli, asigurând o calitate superbă a designului, care poate fi transferată pe site-uri web și aplicații.

Cine știe câți utilizatori de Windows au fost nevoiți să-și golească pușculițele doar pentru a trece la un Mac pentru că acest software merită atât de mult! De asemenea, este bine cunoscut faptul că Sketch este un instrument conectabil. Drept urmare, puteți fie să creați singur plugin-uri, fie să răsfoiți din miile deja trimise de utilizatorii existenți. Este cu adevărat o aplicație revoluționară și una care merită luată în considerare dacă doriți să rămâneți la curent cu tendințele moderne de design web pentru 2019 și nu numai.

2. Adobe Illustrator

Adobe există încă, deși sub un sistem de prețuri complet nou. Acest brand de uz casnic a promovat proiectarea vectorială cu mult înainte de timp. Dar, acum că apare mai multă concurență, Adobe este provocat să-și facă produsele la înălțime. În ciuda locurilor secunde precum Figma și Sketch, Adobe Illustrator nu și-a pierdut legătura cu baza de clienți de bază.

Pe lângă instrumentele uimitoare de editare și creare a vectorilor, avantajul Adobe este integrarea sa nativă cu produse surori precum Photoshop, XD și altele. Și posibilitatea de a pune împreună aceste instrumente într-un singur flux de lucru poate duce la unele rezultate puternice de design!

3. Figma

Ai o idee de design? Ei bine, atunci mai bine te apuci de treabă. Dar înainte de a face acest lucru, luați în considerare Figma - o aplicație modernă pentru transformarea ideilor în experiențe de produs utilizabile. Figma vă permite să creați wireframes, să le convertiți în prototipuri și, în cele din urmă, să adunați feedback de la colegii tăi.

În plus, echipele pot interfețe cu utilizatorul, pot lucra împreună la idei și pot eficientiza designul UX din cadrul aplicației în sine. Un punct cheie de vânzare pentru Figma este experiența sa de produs în timp real. Toată lumea din echipă își poate pune mințile împreună simultan pentru a obține rezultate grozave.

4. Zeplin

Doriți să automatizați specificațiile de stil pentru modele și kituri UI? Zeplin face exact asta: importați documentele de design din Sketch, Figma sau alte instrumente și convertiți-le instantaneu în specificații de design utilizabile. De asemenea, Zeplin acționează ca un instrument de colaborare. Odată ce importați designul și faceți modificări — oricine poate vedea cât de puțin sau cât de mult a fost mutat un anumit element. În plus, faceți clic pe un element și alegeți „conversie” pentru a transforma magic elementul ales în cod acționabil.

5. Wireframes capricioase

Wireframes-urile sunt cele mai bune prietene ale designerilor web! Nu numai că pot fi folosite pe drum, ci sunt și grozave pentru a modifica idei de design ori de câte ori aveți un minut liber. Platforma Wireframe de la Whimsical este ideală pentru a executa idei de design atât pentru nevoile mobile, cât și pentru cele desktop. Există o cantitate suficientă de elemente UI pentru a vă ajuta să configurați un produs, o aplicație sau un site web full-frame.

6. MarvelApp

Oricare ar fi sarcina dvs. de proiectare, aceasta nu este niciodată în afara limitelor unei structuri bazate pe proces. Marvel vrea să ajute la ușurarea procesului prin dezvoltarea unui software de design all-in-one. Baza de software Marvel minimală, dar puternică, vă permite să proiectați, să încadrați, să colaborați și să prototipați în câteva minute. Utilizatorii existenți laudă capacitatea de a crea prototipuri fără a scrie cod. Și, de asemenea, capacitatea de a transfera piesele de proiectare în fragmente frontale acționabile.

7. Avocode

Lucrezi într-un grup mixt de dezvoltatori și designeri? Avocode este creat pentru a rezolva problema cronelor diferite pentru ambele părți. În schimb, cu Avocode - toată lumea poate fi pe aceeași pagină cu privire la cronologia prezisă pentru produse. Avocode acceptă importarea fișierelor din Figma, Sketch și generează automat o specificație de stil pentru fiecare design.

8. Legile UX

Experiența utilizatorului este pilonul fondator al unui design web excelent. Ori de câte ori lucrați la un design nou, prioritatea dvs. va fi întotdeauna despre modul în care utilizatorii pot interacționa cu site-ul sau aplicația dvs. Și acest lucru este valabil și pentru lucruri precum elementele de interfață. Jon Yablonski a creat o carte digitală (gratuită) care descrie o listă de 19 „legi UX”. În esență, fiecare „lege” este o referință specifică la teme care apar frecvent atât în ​​psihologie, cât și în marketing.

Legile sunt completate cu resurse precum exemple și lecturi externe. Deși nu este un site pe care trebuie să îl vizitați frecvent, amintiți-vă despre unele dintre cele mai importante principii UX din când în când nu vă vor face rău.

9. Debordare

Sunteți blocat cu gestionarea fluxurilor de utilizatori? Overflow este aici pentru a vă ajuta! Acest software nou și captivant va face cu siguranță câteva lovituri în noul an. Dar ce este și ce face? Overflow vă ajută să creați fluxuri de utilizatori folosind modelele dvs. deja prefabricate. Puteți chiar importa fișiere de design direct din Sketch și alte soluții software de proiectare.

Fluxurile pot fi stocate ca fișiere individuale pe care le puteți partaja cu echipa. Odată ajuns la etapa de dezvoltare, scoateți documentația pentru a vedea ce trebuie să faceți.

10. iotaCSS

Framework-urile merită o postare proprie, dar nu am putea rata ocazia de a evidenția iotaCSS. Această bibliotecă ușoară este o mană divină dacă doriți să bootstrap interfețe de utilizator agnostice. Există o similitudine între modelele SASS, dar în general — iotaCSS tinde să funcționeze mai mult ca un generator decât ca un cadru de sine stătător.

11. Mobbin

Un design excelent necesită răbdare, iar procesul nu garantează întotdeauna succesul. Dar, așa cum se întâmplă, există asemănări între „designele bune” larg acceptate. Și puteți afla ce face ca aplicațiile în tendințe să aibă atât de mult succes examinând modelele lor de design.

În acest caz, Mobbin oferă o bibliotecă de modele de design bazate pe mobil, construite pentru aplicațiile iOS. Biblioteca include sute dintre cele mai populare aplicații, cu câteva mii de modele pentru acces ușor. Puteți observa următoarea mare schimbare de design în aplicația dvs.?

12. Icoane8

Pictogramele și vectorii reprezintă o mare parte din procesul de design modern. Cu excepția cazului în care, desigur, proiectați site-uri minime doar pe baza containerelor și a tipografiei. Foarte puțin probabil! Cu toate acestea, dacă aveți nevoie de pictograme și vectori gratuite, asigurați-vă că verificați Icons8. Acești băieți au crescut constant în ultimii 2 ani, reușind să ofere doar aproximativ 90.000 de icoane.

Dar nu pentru asta este atât de faimos Icons8. Motivul pentru care acești tipi ies în evidență este acela al motorului lor de editare vizuală. Puteți personaliza literalmente fiecare pictogramă și/sau vector cu culori personalizate și alte opțiuni, cu mult înainte de a apăsa butonul de descărcare.

13. CodePen

CodePen este una dintre acele platforme fără de care pur și simplu nu poți trăi. Nu dacă ești web designer. Cel mai bine cunoscut pentru funcționalitatea sa simplă de partajare a codului, CodePen este o sursă uluitoare de inspirație. Utilizatorii partajează fragmente, trucuri și alte posibilități care pot fi realizate prin utilizarea CSS, HTML și JS.

Cea mai bună parte este că totul este open-source și puteți replica rapid rezultatele în propriile proiecte.

14. Dribling

Ești la curent cu cele mai recente tendințe de web design? Ușor de îndepărtat atunci când aveți un milion de clienți de servit. Nu vă faceți griji, totuși, Dribbble este încă aici și încă una dintre cele mai de încredere surse de tendințe de design. Milioane de designeri își trimit lucrările creative pe această platformă. Dacă sunteți inteligent, puteți găsi chiar și lucruri gratuite, cum ar fi kituri de interfață și diferite tipuri de ilustrații.

În cele din urmă, să faci parte din comunitatea Dribbble îți poate crește semnificativ expunerea la locul de muncă. Există o mulțime de povești de la oameni care au găsit oportunități incredibile de angajare publicând munca lor pe Dribbble! Ați lucrat la ceva uimitor? Nu fi timid și împărtășește-l lumii. Cine știe unde te va duce.

15. unDraw

Într-o lume cu cerere în creștere pentru conținut vizual, site-uri precum unDraw sunt o bucurie absolută de utilizat! Această platformă open-source oferă ilustrații gratuite pentru a fi utilizate în orice situație. Cel mai important, unDraw este popular printre design-urile paginilor de destinație, unde ilustrațiile pot ajuta la transformarea designului în viață.

Puteți căuta ilustrații după cuvinte cheie sau pur și simplu răsfoind. unDraw include un instrument personalizat de selecție a culorilor, care se aplică — mulțumesc, SVG! — culoarea ta pentru toate ilustrațiile simultan. Acest lucru este ideal atunci când trebuie să obțineți ca ilustrația să se potrivească cu o schemă de culori pe designul dvs.

16. HolaBrief

Designul fără direcție nu duce la absolut nicăieri. De fapt, lucrul la un design doar pe o idee din mintea ta va duce adesea la resurse irosite. O mulțime de lucruri sună grozav în capul nostru, dar când ajungem la muncă — uneori trec ore și am făcut doar o fracțiune din ceea ce ne-am gândit.

Și întrebarea este cum poți evita să te blochezi prea mult timp într-o idee? În primul rând, a avea instrumente (cum ar fi cele pe care le-am enumerat până acum) pentru a ușura procesul este un bun punct de plecare. Dar pentru a aduce idei cu adevărat la viață, trebuie să le „prototipezi” într-un scurt rezumat. Și HolaBrief oferă o soluție digitală simplă pentru scrierea brief-urilor de design. Se bazează pe conceptul de gândire strategică. Acest lucru înseamnă că vă puteți eficientiza întregul proces de proiectare cu ușurință.

HolaBrief oferă cartografiere a ideilor, interfețe de brainstorming, instrumente de colaborare și liste de verificare simple. Scopul este de a obține ideile dvs. în modele reale cât mai curând posibil.

17. daltonist

Accesibilitatea a fost întotdeauna un subiect de discuție, dar de-a lungul anilor a devenit o tendință definitivă pe care designerii web trebuie să o îmbrățișeze. Pe măsură ce mai mulți oameni se conectează la web, există o cerere din ce în ce mai mare de a face aplicațiile și site-urile web să pară naturale pentru toate tipurile de public.

Suntem daltoniști, așa cum se numește compania, oferă servicii pentru a ajuta mărcile să își optimizeze gradul de utilizare pe web pentru persoanele daltoniste. Cu toate acestea, ne concentrăm mai mult pe resursele oferite de această companie. Există o mulțime de materiale de lectură, exemple și studii de caz care arată modul în care daltonismul afectează experiența web. Și, desigur, detalii despre cum puteți îmbunătăți experiența menționată pentru toate proiectele dvs.

Poate că peste 10 ani de acum încolo, software-ul precum Sketch va putea face toată această muncă grea în mod automat, dar până atunci - cel mai bine este să urmați reguli stricte.

Ne-ar plăcea să auzim părerea dvs. despre combaterea daltonismului în designul web! Aveți experiență anterioară cu optimizarea pentru accesibilitatea culorilor? Distribuie-ne mai jos.

18. Lapa

Când sunteți constant cu capul întâi în proiectarea și prototiparea de noi design-uri, este ușor să rămâneți blocat într-o rutină. Folosind aceleași fonturi, aceleași animații și aceleași scheme de culori. Uneori, probabil că nici măcar nu-ți dai seama că faci asta până când altcineva nu îți spune. Și de aceea este atât de important să rămâneți inspirat și la curent cu ceea ce fac alți designeri web.

Deși există multe astfel de platforme, am găsit că Lapa.Ninja este o sursă super-fiabilă de inspirație pentru design nou. Este un amestec asortat între peste 50 de categorii de tipuri de afaceri, asigurându-vă că puteți obține cea mai mare cantitate de inspirație pentru fiecare dintre proiectele dvs. Puteți, de asemenea, să răsfoiți după culoare, pentru a încerca să găsiți modele similare folosind scheme de culori similare.

Cum te asiguri că rămâi mereu motivat și inspirat cu idei noi? Considerați că paginile de destinație construite de alți designeri sunt o resursă de încredere? Anunțați-ne în comentarii!

19. BrowserStack

Proiectele mici pot scăpa fără optimizarea pentru întregul spectru de browsere și dimensiuni de ecran. Cu toate acestea, odată ce compania dvs. începe să se dezvolte și varietatea clienților crește, este doar o chestiune de timp până când observați scăderi ale angajamentului pentru anumite segmente de utilizatori. Aici intervine BrowserStack, oferindu-vă mijloacele de a vă testa design-urile în peste 2.000 de browsere diferite.

Sună complicat? Chiar nu este. La cel mai fundamental nivel, puteți scăpa prin simpla introducere a unei adrese URL a site-ului web și verificând manual compatibilitatea. În altă parte, BrowserStack oferă instrumente care pot automatiza întregul proces de testare. Identificați diferențele de bază care sunt prezente atunci când site-ul dvs. este vizualizat pe mii de tipuri diferite de dispozitive.

20. uizard

Ce am spus la începutul acestei rezumate? Lumea designului web se schimbă rapid. Datorită ML și AI, designerii își pot transforma acum machetele în design live de site-uri web. Uizard este o nouă platformă care oferă doar acest tip de servicii. Desigur, este încă în versiune beta și, în acest moment, vă puteți înscrie doar ca începător timpuriu.

Merită remarcat faptul că Uizard cercetează în mod deschis acest concept și oferă cercetările lor gratuit oricui ar putea fi interesat. Imaginați-vă ce vor face acest tip de instrumente pentru bootstrapping-ul site-ului? Lansarea unui aspect funcțional ar putea dura doar câteva minute, oferindu-vă mult mai mult timp pentru a vă concentra pe construirea funcțiilor și altele.

Instrumente noi pentru un an nou

Capacitatea web și a browserului avansează rapid în aceste zile. Noi tendințe apar pe măsură ce lucrăm la proiectele existente, făcându-ne să ne reconsiderăm alegerile și să ne adaptăm în consecință. Și pe măsură ce mulți oameni încep să exploreze potențialul de a deveni designeri web, asistăm la deschiderea unor mari porți care oferă noi informații și informații despre design.

Această postare acoperă nu numai cele mai bune instrumente de web design din acest moment, ci și concurenți puternici pentru anul 2019. Sunt o mulțime de lucruri interesante de așteptat și cu siguranță vom vedea niște salturi majore de design și tehnologia. se intampla in anul care vine.

Ești bucuros? Împărtășiți-ne în comentarii despre instrumentele pe care le utilizați în fluxul de lucru zilnic de proiectare web. Ne-ar plăcea să auzim atât cele preferate ale comunității, cât și posibile instrumente noi despre care nimeni nu a auzit vreodată!