Am creat primul meu site web ca proiect școlar când aveam 14 ani. Sarcina a fost simplă: crearea unui site foarte simplu, care să conțină text, imagini și un tabel. Atitudinea mea obișnuită față de proiectele școlare era să uit complet de ele și mai târziu să găsesc o soluție de ultim moment. Dar, de data aceasta, am înnebunit.

De la primul meu site web, am acordat întotdeauna prioritate ca lucrurile să arate bine. Recunoașteți sau nu, oamenii judecă lucrurile pe baza aspectului. Dacă ceea ce faci arată bine, de parcă știi ce faci, oamenii vor avea mai multă încredere în el. Așa stau lucrurile.

Un ghid al dezvoltatorului pentru designul web pentru non designeri

De-a lungul anilor în care am făcut proiecte secundare, mi-am concentrat din ce în ce mai mult atenția asupra dezvoltării abilităților mele de design, decât pe perfecționarea programării mele. Vedeți, a fi un algoritm care scrie monstrum vă ajută până acum. În timp ce urmăriți visul de a lansa un proiect secundar profitabil, va trebui să faceți o mulțime de sarcini diferite. A fi designer este unul dintre ei. La fel ca sportivii Cross-fit, fondatorii solo trebuie să fie bine rotunjiți pentru a performa bine.

Un design superb nu este neapărat cel cu cele mai multe voturi pozitive Dribbble. Este cea pe care nu o vei observa în primul rând. Este un echilibru perfect între „bunica ta ar putea face asta” și „wow, este al naibii de drăguț”. Designul poate fi avantajul tău competitiv sau unghia în sicriu.

Nu este vorba de talent

Când eram mai tânăr, jucam mult Minecraft. Am văzut toate aceste clădiri minunate făcute de oameni. Dar când am făcut ceva, părea o cutie. Urât și fără stil. Cum faci chiar ceva frumos în Minecraft, nu?

Așadar, am găsit un tip pe YouTube și am construit o copie exactă a ceea ce a construit el. Câteva săptămâni mai târziu, îmi dezvoltasem propriul stil și puteam construi singur. Dintr-o dată, creațiile mele nu arătau ca o porcărie. La naiba, am câștigat chiar și un concurs de construcții.

Proiectarea este o abilitate și, ca orice altă abilitate, poate fi învățată.

Un ghid al dezvoltatorului pentru designul web pentru non designeri

Alegerea instrumentului potrivit pentru job

În programare, puteți utiliza Notepad și puteți scrie o aplicație la fel de bună ca și cum ar fi scrisă într-un IDE complet … deși viața dvs. ar putea fi destul de nenorocită făcându-l și probabil va dura mult mai mult. În lumea designului web, MS Paint ar lua rolul Notepad și, ca și Notepad, puțini oameni aleg să proiecteze cu el … Sper.

1611206230 71 Un ghid al dezvoltatorului pentru designul web pentru non designeri
  • Schiță, un singur instrument MacOS care, similar cu React, pare a fi codificat în fiecare listă de locuri de muncă. 99 USD / an.
  • Adobe XD, un instrument multiplataforma de utilizat gratuit, care preia rolul Vue. Are o comunitate mai mică, dar este foarte ușor să începeți.
  • Adobe Photoshop, cuțitul elvețian pentru orice sarcină de proiectare cunoscută de toată lumea. A luat locul … ai ghicit, jQuery. 9,99 USD / lună.

Aproape nu există nicio diferență dacă folosiți codul Sublim sau VS pentru a scrie aplicații. Sau dacă folosiți React sau Vue pentru frontend. Este doar o chestiune de preferință. Același lucru este valabil și pentru instrumentele de proiectare, deoarece fiecare are avantajele și dezavantajele sale.

Folosesc Adobe XD. Principalul motiv pentru mine este că este multiplataformă, deci nu sunt ținut ostatic de ecosistemul Apple. De asemenea, este susținut de Adobe, așa că va fi aici pentru o vreme. Cel mai bun lucru pentru noii veniți este că, din mai 2018, Adobe XD poate fi utilizat gratuit cu doar câteva limitări (pe care este puțin probabil să vă împiedicați oricum).

Reglarea mentalității

Cea mai mare provocare venită în lumea designului web pentru mine a fost ajustarea mentalității mele. Eram obișnuit să vin cu designul pe măsură ce codam site-ul web. Totul avea o comandă. Debitul a fost de la stânga la dreapta și de sus în jos. Faptul este că această abordare te face să fii un designer mai rău.

Instrumentele de proiectare sunt haotice, deoarece vă obligă să proiectați, așa cum fiecare element este poziționat absolut. Îmbrățișați această schimbare. Vă va oferi libertatea de a schimba lucrurile rapid și va face experimentarea mai ușoară. Și acest lucru este esențial, deoarece designul este un proces continuu. Se așteaptă să schimbi lucrurile mult înainte de a obține un rezultat excelent.

Învățarea instrumentelor

Când codificați, utilizați elemente HTML, cum ar fi divs, întinderi și intrări și lăsați browserul să le transforme în ceva vizual. Cu instrumentele de proiectare, aveți puterea să săriți intermediarul și să utilizați direct elemente vizuale precum forme și text.

Am ales cele mai utilizate 4 instrumente de proiectare, astfel încât să puteți petrece mai puțin timp învățând și mai mult timp proiectând. În acest fel, puteți începe să exersați cât mai curând posibil. Mai jos, vă voi arăta cum funcționează și cum să le utilizați.

Instrument dreptunghiular

Dreptunghiurile sunt forma cea mai universală. Te vei găsi folosindu-le tot timpul. Gândiți-vă la asta ca la un div. Este util pentru tot felul de lucruri, de la crearea de intrări de text la containere.

Un ghid al dezvoltatorului pentru designul web pentru non designeri

Instrument de text (etichetă)

Instrumentul de text, așa cum sugerează titlul, vă permite să creați text. Totuși, nu este atât de simplu, deoarece instrumentul de text are două stări: una pentru text cu o singură linie și cealaltă pentru mai multe paragrafe. Din fericire, sunt extrem de ușor de învățat să se utilizeze corect.

Prima stare este un container de text cu o singură linie care își ajustează dimensiunea în funcție de dimensiunea textului. Este similar cu un , cu excepția faptului că nu se va încheia decât dacă faceți o întrerupere de linie. Avantajul acestei stări este că va regla automat dimensiunea casetei de text pe baza înălțimii liniei și a dimensiunii fontului.

Pentru a-l crea, trebuie doar să faceți clic cu instrumentul Text selectat și să scrieți. De regulă, utilizați această stare pentru orice lucru care nu are nevoie de o lățime specifică și este o singură linie. De exemplu, titluri și etichete cu o singură linie.

1611206231 599 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Instrument de text (paragraf)

A doua stare este un container de text cu o dimensiune specifică care se comportă ca un

cu o lățime specifică sau

în interiorul unei coloane de grilă. Avantajul acestei stări este că puteți controla dimensiunea casetei de text. Pentru a crea un paragraf, faceți clic cu instrumentul de text selectat și țineți apăsat pentru a crea o selecție. Ca regulă generală, utilizați această stare pentru paragrafe și titluri pe mai multe rânduri.

1611206232 81 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Selectați instrumentul

Mutați, redimensionați, copiați. Acesta este instrumentul pentru asta. Aceste linii roz vă arată distanța față de elementele înconjurătoare. Liniile albastre vă ajută să obțineți elemente pentru a se alinia corect.

1611206233 643 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Instrument de linie

Uneori, o linie este la îndemână pentru a separa părțile de design. De aceea instrumentul de linie este aici. În schimb, ați putea folosi instrumente dreptunghiulare, dar hei, astfel încât div ar putea fi folosit pentru orice.

1611206233 713 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Sfaturi și tehnici de proiectare

Aspect

În dezvoltarea web, un aspect este cel mai frecvent descris ca antet, meniu, conținut și subsol. Aceasta este o parte din el, dar un aspect este mai mult decât atât. Este literalmente modul în care toate elementele sunt așezate.

De exemplu, când proiectam informațiile despre proiect SidemailAm distribuit elemente în interiorul unui card în mod uniform, ceea ce îl face să se simtă mai complet și să pară mai curat.

1611206234 56 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Culori

Pentru a vă ajuta să găsiți culoarea perfectă pentru următorul dvs. proiect, luați în considerare psihologia culorilor (colorpsychology.org). Un instrument util pentru a găsi combinația perfectă de culori bazată pe culoarea dvs. primară este Paletton.

Utilizați nuanțe de culori primare și culori de text pentru a crea o ierarhie vizuală. Încercați nuanțe mai întunecate sau mai deschise pentru text atunci când utilizați un fundal colorat.

1611206234 878 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Tipografie

Tipurile de caractere afectează în mare măsură brandingul proiectului dvs., deci alegeți cu înțelepciune. Tipurile de caractere premium tind să arate mai bine decât cele de pe Google Fonts, dar când începeți, nu cumpărați unul. Chiar și pe Google Fonts, există câteva pietre ascunse.

Un truc pe care îl folosesc foarte des pentru a sparge vizual textul este de a face etichetele cu majuscule cu spațiere mai mare între litere. Textul cu majuscule este simetric și arată bine din punct de vedere vizual, dar nu îl folosiți excesiv, deoarece este mult mai greu de citit.

1611206235 696 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Proiectarea unei pagini de pornire (sau a unei pagini de destinație)

Încerc mereu să evit tentația de a proiecta elemente la modă și apoi să-mi înghesui mesajul în el. Mai degrabă, vin cu beneficii (nu cu funcții), le pun într-o poveste și spun acea poveste printr-o pagină atrăgătoare din punct de vedere vizual.

După ce stabilesc ceea ce vreau să spun, de obicei caut inspirație. O resursă excelentă pentru asta este land-book.com, un vast director de pagini de destinație cu aspect extraordinar pe care oamenii pot vota. O altă pagină grozavă cu inspirație de design este interfețe.pro unde puteți filtra în funcție de categorii precum prețuri, 404 sau despre noi. Răsfoiesc doar până când găsesc suficiente site-uri care îmi plac și se potrivesc stilului meu dorit.

1611206235 878 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Partea grea este de a pune totul împreună. Din păcate, nu există nicio comandă rapidă. Trebuie doar să iterați mult până când veți obține un rezultat cu care sunteți mulțumit.

S-ar putea să vă întrebați dacă este normal ca un design cu care ați fost complet fericit acum o săptămână să se simtă brusc astăzi nu suficient de bun sau chiar urât. Răspunsul este că este perfect normal și de fapt un lucru bun. Este în esență pentru că crești, înveți și devii mai bun. Provocarea de ieri nu este atât de provocatoare astăzi. Rețineți acest lucru pentru a nu vă bloca într-o cursă de șobolani.

Concluzii:

  • Tipul de caractere unic face o mare diferență
  • Grafica este foarte importantă, încercați să utilizați cel puțin unele ilustrații sau imagini
  • Obțineți importanța vizuală corect utilizând mai multe nuanțe de culori. Textul și culorile primare nu sunt suficiente.
  • Nu utilizați containere prea largi – aproximativ 1100 px este suficient de larg
  • Îmbrățișați spațiul negativ
  • Vorbește despre beneficii, nu despre funcții
  • Căutați în jur inspirație dacă vă blocați

Proiectarea unei aplicații web (sau a unui tablou de bord)

Ca și în cazul proiectării unei pagini de destinație, nu treceți direct în proiectare. De data aceasta, nu încercați să spuneți o poveste. În schimb, scopul este ușurința utilizării. Luați un pix și hârtie și planificați modul în care ar trebui să funcționeze aplicația dvs., ce ar trebui să depindă de ce și cum să navigați cu ușurință.

Realizați câteva schițe sau rame de sârmă, dacă este necesar. Efectuați o inspecție adecvată a proiectului concurentului pentru a vedea singur ceea ce lipsește și poate fi realizat mai bine sau chiar transformat într-un avantaj competitiv. Uneori, este mai bine să faceți o pauză înainte de a face planuri pe hârtie și de a proiecta.

Cel mai bun sfat pe care îl pot oferi, care nu este specific cazului de utilizare, este să aleg un aspect de pagină adecvat. În general, toate aplicațiile web utilizează două aspecte de pagină diferite, în funcție de scopul aplicației: container cu lățime fixă ​​sau container pentru lichide care vă umple întregul ecran.

1611206235 749 Un ghid al dezvoltatorului pentru designul web pentru non designeri

Container fix

Prefer recipientul fix, deoarece este mult mai ușor să te concentrezi pe o zonă îngustă, deoarece împiedică mișcarea inutilă a ochilor. Aplicațiile fixe pentru containere tind, de asemenea, să fie mai curate și mai puțin copleșitoare pentru utilizatorii noi. Cu toate acestea, din cauza lățimii mai mici, aplicațiile de containere fixe sunt mai greu de proiectat.

Exemple: Stare de nervozitate, Tampon, DigitalOcean, Netlify, GitHub

Recipient de lichid

Aplicațiile pentru containere fluide sunt potrivite excelent pentru aplicațiile de chat, aplicațiile pentru foi de calcul și alte aplicații în care sunt esențiale mai multe lucruri pe ecran. Dar rețineți că o mulțime de date pe un ecran pot deveni copleșitoare.

Exemple: Slăbiciune, Interfon, Hotjar, Foi de calcul Google, Trello, Spotify

Este important să alegeți containerul potrivit, deoarece întregul aspect al paginii dvs. va depinde de el, iar schimbarea acestuia mai târziu este o mulțime de lucru. Fiecare proiect este unic și solicită soluții unice, așa că nu vă fie teamă să experimentați!

Concluzii:

  • Nu te complica
  • Folosiți o literă lizibilă
  • Utilizați ierarhia vizuală atunci când afișați o mulțime de date
  • Profitați de alegerile slabe de design ale concurentului

Înfășurându-se

Amintiți-vă, designul poate fi avantajul dvs. competitiv – deci folosiți-l și creați ceva minunat.

Începeți călătoria dvs. de proiectare obținerea unui șablon Adobe XD Am realizat pagina de destinație a celui mai nou proiect al meu. Pur şi simplu abonați-vă la noua mea listă de e-mailuri și va ateriza în cutia poștală.

De asemenea, veți fi primul care va primi notificări despre următoarea mea postare, unde voi împărtăși 69 de zile de progrese pe care le-am făcut Sidemail – un proiect SaaS la care lucrez. Acesta va include lucruri precum numărul de abonați, vizitele pe site, cheltuielile și schițele de proiectare. Ar trebui să fie de la sine înțeles, dar garantez absolut niciun spam. Nici măcar nu am timp pentru acea porcărie.

DM-urile mele de pe Twitter sunt deschise, deci, dacă vă blocați la realizarea desenelor sau aveți alte întrebări, nu ezitați să mă loviți.