Setul de instrumente al designerului: fluxuri de lucru, software și site-uri web

La fel ca dezvoltatorii de software, scriitorii de conținut, oamenii de marketing și așa mai departe, designerii trebuie să aibă un set bun de instrumente care să-i ajute să se ocupe de munca zilnică. Ceea ce am încercat să facem aici este să prezentăm astfel de instrumente, fluxuri de lucru și modul în care le puteți combina pentru a vă accelera munca și a reduce șansele de greșeli și erori.

Adună informații

Când vine un nou proiect, primele câteva ore se referă în principal la colectarea de informații despre acesta - cu ce probleme se confruntă clientul, care sunt obiectivele sale, ce le place și așa mai departe. date cât mai utile, care vor fi folosite ulterior pentru a lua decizii educate.

Evernote

Evernote este un software uimitor - nu este doar o aplicație pentru a lua notițe. Poate stoca fișiere, le poate combina în colecții, etichete, grupuri etc. Prin intermediul căutării sale puternice, puteți face referire la proiectele anterioare și așa mai departe. Desigur, partea cea mai puternică a acestuia este modul în care îl folosești. Au un ghid aproximativ pentru unele abordări organizaționale.

E-mail, Slack, Zoom ...

Următorul este un altul evident, dar există un motiv pentru care l-am adăugat - amânarea unui apel, a unui mesaj sau a unei întâlniri video ar putea fi o întârziere majoră pentru un proiect. Adesea, capacitatea de a partaja un ecran și de a trece peste machete, wireframe, concepte și modele este un salvator de viață. Nu uita niciodata ca

Găsiți inspirație

Odată ce există suficiente informații, următorul pas este să vă strângeți inspirația - cum ar trebui să arate o aplicație / un site web, care este stilul, care este obiectivul etc. ? Toți designerii caută inspirație în stânga și în dreapta - site-uri web, cărți, reviste, orice.

Dribbble, Behance și site-uri web similare

Din acest motiv (și pentru ca designerii să se laude) există site-uri web precum Dribbble. Acolo, noi, designerii putem căuta idei și abordări care rezolvă problemele cu care ne confruntăm în prezent. Uneori, scopul este de a construi „o pagină de vânzări generică pentru serviciul A”. Această pagină de vânzări ar avea literalmente câteva paragrafe cu o fotografie de stoc. Un obiectiv neinspirator, dar realist. Ei bine, combinația de culori, tipografie, spații etc. poate fi un pic mai unică. Poate încercați și diferite machete! Iar ideea pentru aceasta poate veni dintr-o pagină de destinație aleatorie postată acum 3-4 ani. Pagina Discovery a 99Design este, de asemenea, un loc bun pentru a arăta!

Awwwards

Am plasat site-uri precum Awwwards într-o categorie separată, deoarece acestea prezintă de fapt ceva care a fost construit și poate fi văzut funcționând. Și, mai mult, se concentrează mai mult pe modul artistic, nu atât pe „orice lucrare de proiectare”. De cele mai multe ori, site-urile sunt atât de grele încât devin utilizabile doar pe mașini de ultimă generație, dar ai putea totuși să te inspiri din ele.

Paletă de culori / branding

Pentru o construcție nouă, în care nu există culori predefinite, unul dintre pașii pentru a începe să lucreze ar fi să alegeți ceva care să se potrivească noului site. Există două modalități de abordare - alegeți o schemă de culori existentă sau setați o culoare primară / secundară și lucrați în jurul întregii scheme pe baza acestora.

ColorHunt

Site-urile web precum Color Hunt oferă o colecție de palete de culori realizate de comunitate. Puteți alege și utiliza cele direct sau alegeți culorile principale pentru a începe. Nu este atât de frumos, dar și similar este Color Lovers.

BrandColors

BrandColors are un obiectiv ușor diferit - oferă o listă a mărcilor importante și a schemelor lor de culori. Ați putea găsi acolo câteva nuanțe și combinații grozave care vă pot inspira construcția. Culorile nu sunt sub niciun fel de drepturi de autor, dar sfatul nostru este să vă jucați puțin cu ele în loc să copiați toate culorile din locuri precum Amazon, de exemplu.

Active premium și gratuite

Nu există întotdeauna suficient timp pentru a lucra la fiecare componentă a site-ului. Uneori, cel mai bine este să luați un pachet de pictograme, o ilustrație sau o fotografie de stoc realizată de un alt designer / fotograf și să o folosiți direct.

• Font-Awesome - O colecție imensă de icoane sub formă de glifuri de font
• Envato Elements - Selecție imensă de active de calitate premium la un preț bun.
• Unsplash - Colecție imensă de fotografii de înaltă calitate gratuite
• Generatoare SVG precum squircley, getwaves, blobmaker
• Adobe Fonts (plătit) și Google Fonts (gratuit)

Cel mai bun sfat aici este să găsiți câteva site-uri ca acestea de mai sus și să le aveți în apropiere, astfel încât să reduceți cât mai mult timp și efortul pe care trebuie să-l faceți pentru a căuta și a găsi cele mai bune grafice pentru job.

Principalele instrumente de proiectare

Cu lucrările inițiale în afara drumului, este vorba de construirea efectivă a designului. Deoarece toate software-urile progresive pentru designeri au toate instrumentele necesare pentru a construi design-uri web / aplicații, vom ignora instrumentele de wireframing.

Figma

Alegerea noastră principală pentru lucrările de proiectare la DevriX este Figma. Oferă capacități excelente de colaborare, precum și aplicații bazate pe browser, care pot fi accesate de oricine din echipă, fie că este Linux, Mac sau Windows. Anterior am folosit Adobe XD, dar membrii din Linux nu l-au putut utiliza, iar Sketch este blocat numai pe Mac.

Ilustrator / Designer de afinitate

Pentru mai multe lucrări personalizate, Illustrator sau Affinity Designer sunt cu siguranță unele dintre alegerile de top. În ultimul an sau doi, ilustrațiile personalizate sunt una dintre cele mai populare părți ale site-urilor web. Grafica mare, colorată stăpânește partea de sus și mai multă experiență cu instrumentele potrivite este cu siguranță un lucru bun de făcut. În acest loc, putem adăuga, de asemenea, software 3D, cum ar fi Blender, pentru redarea modelelor 3d, care pot fi utilizate ca active pe paginile web.

Photoshop / Foto de afinitate

Photoshop a fost software-ul de top pentru designul web. Asta poate suna ciudat astăzi, mai ales că avem toate aceste instrumente grozave care se concentrează în principal pe web. Dar Photoshop este încă un instrument excelent și îl folosim adesea atunci când există fotografii care necesită o editare sau decuparea formelor / formelor.

Prezentare

Dar nu este doar munca de proiectare - un PNG static. Unii designeri care se concentrează un pic mai mult pe grafica în mișcare și interacțiuni. O demonstrație bună a modului în care elementele ar trebui să se comporte în cursă, glisare sau clic ar ajuta foarte mult munca dezvoltatorilor front-end. Atât Figma cât și Adobe XD pot ajuta în acest sens, dar ambele sunt, de asemenea, limitate.

Adobe After Effects

After effects este considerat una dintre primele opțiuni pentru grafica în mișcare. Oferă toate instrumentele necesare pentru a reprezenta toate acțiunile și animațiile. Un lucru bun pentru a reaminti designerilor de aici este că animațiile ar trebui să respecte limitele internetului. Adăugarea neclarității de mișcare nu este ceva ce puteți face. Așadar, când intrați în animații mai avansate, discutați cu siguranță despre acest lucru cu echipa dvs. de programe front-end sau citiți mai multe despre animațiile de pe web și despre ceea ce este posibil. Același lucru este valabil și pentru UX și A11y.

Depozitare

Figma și Adobe XD sunt practic concentrate pe cloud, deci nu ar trebui să vă faceți griji cu privire la pierderea muncii, dar nu totul este așa - Photoshop, fișiere Illustrator, fonturi descărcate, fotografii etc.

Cel mai bine este să le faceți copii de rezervă și să le faceți accesibile tot timpul, mai ales dacă lucrați pe mai multe mașini. Și când vine vorba de partajarea lor, este foarte ușor.

Dropbox

Cea mai bună alegere pentru acest lucru ar fi Dropbox. Cu aplicația desktop ușor de utilizat, vă va supraveghea fișierele și le va sincroniza cu cloud-ul imediat ce faceți modificări. De acolo, partajarea acestora cu clientul sau echipa dvs. este la un singur clic distanță.