cum să înveți web design (în 9 pași)

înțelegeți conceptele cheie ale designului vizual

linie

fiecare literă, margine și diviziune într-un aspect este alcătuită din linii care alcătuiesc structura lor mai mare. Învățarea designului web înseamnă înțelegerea aplicațiilor liniilor în crearea ordinii și echilibrului într-un aspect.

forme

cele trei forme de bază în designul vizual sunt pătrate, cercuri și triunghiuri. Pătratele și dreptunghiurile funcționează pentru blocuri de conținut, cercurile funcționează pentru butoane, iar triunghiurile sunt adesea folosite pentru pictograme care însoțesc un mesaj important sau un apel la acțiune. Formele au, de asemenea, un sentiment de emoție, cu pătrate asociate cu forța, cercuri cu armonie și confort și triunghiuri cu importanță și acțiune.

Texture

Texture reproduce ceva în lumea reală. Prin textură, ne facem o idee dacă ceva este dur sau neted. Texturile pot fi văzute pe tot parcursul web design-ului. De la fundaluri asemănătoare hârtiei până la șuvițele colorate ale unei neclarități gaussiene, fiți conștienți de diferitele tipuri de texturi care vă pot face desenele mai interesante și le pot oferi un sentiment de fizicitate.

culoare

pentru a crea modele care nu sunt o tulpină a ochilor, ar trebui să vă educați în teoria culorilor. Înțelegerea roții de culori, a culorilor complementare, a culorilor contrastante și a emoțiilor de care sunt legate diferite culori vă va face un designer web mai bun.

grile

grilele își au rădăcinile în primele zile ale designului grafic. Ele funcționează atât de bine în aducerea pentru imagini, texte și alte elemente într-un design web. Aflați cum să vă structurați aspectele web folosind grile.

cunoașteți elementele de bază ale HTML

Hypertext markup language (HTML) oferă instrucțiunile pentru modul în care conținutul, imaginile, navigarea și alte elemente ale unui site web se afișează în browserul web al cuiva. Deși nu trebuie să fii expert în HTML, totuși te ajută să te familiarizezi cu modul în care funcționează, chiar dacă folosești o platformă de design bazată pe vizual, cum ar fi Webflow.

etichetele HTML sunt instrucțiunile pe care un browser le folosește pentru a genera un site web. Titlurile, paragrafele, linkurile și imaginile sunt toate controlate de aceste etichete. Veți dori mai ales să știți cum sunt utilizate etichetele antet precum etichetele H1, H2 și H3 pentru ierarhia conținutului. Pe lângă faptul că afectează structura layout-ului, etichetele antet sunt importante în modul în care crawlerele web clasifică un design și afectează modul în care acestea apar în clasamentele de căutare organică.

pentru a afla mai multe despre conceptele de bază ale HTML (există și o secțiune despre CSS), consultați această lecție pe care am pus-o împreună în Webflow University.

înțelege CSS

CSS (sau cascading Style sheets) oferă instrucțiuni de stil și instrucțiuni suplimentare despre modul în care va apărea un element HTML. A face lucruri precum aplicarea fonturilor, adăugarea căptușelii, setarea alinierii, alegerea culorilor și chiar crearea de grile sunt toate posibile prin CSS.

știind cum funcționează CSS vă va oferi abilitățile de a crea site-uri cu aspect unic și de a personaliza șabloanele existente. Să trecem peste câteva concepte cheie ale CSS.

clase CSS

o clasă CSS este o listă de atribute care vin împreună în styling un element individual. Ceva ca textul corpului ar putea avea fontul, dimensiunea și culoarea Toate o parte dintr-o singură clasă CSS.

CSS clase combo

o clasă combo este construit pe o clasă de bază existentă. Moștenește toate atributele, cum ar fi dimensionarea, culoarea și alinierea, care ar putea fi deja în vigoare. Atributele pot fi apoi modificate. Clasele Combo vă economisesc timp și vă permit să configurați variații ale unei clase pe care le puteți aplica oriunde aveți nevoie într-un design web.

cunoașterea modului în care funcționează CSS este esențială atunci când învățați designul web. După cum sa menționat în secțiunea despre HTML, vă recomandăm să mergeți la Webflow University pentru a vedea mai multe despre cum funcționează CSS.

aflați bazele UX

UX este magia care aduce la viață un site web, transformându-l dintr-un aranjament static de elemente în ceva care se angajează cu emoțiile cuiva care derulează prin el.

schema de culori, conținutul, tipografia, aspectul și imaginile se reunesc pentru a vă servi publicul. Designul experienței utilizatorului este despre precizie și evocarea sentimentelor. Oferă cuiva nu numai o călătorie lină, ci și o experiență care îi conectează cu entitatea sau marca din spatele designului web.

iată câteva principii UX pe care trebuie să le cunoașteți.

personas utilizator

web design înseamnă înțelegerea utilizatorilor finali. Ar trebui să învățați cum să faceți cercetări ale utilizatorilor și cum să creați persoane de utilizator. În plus, va trebui să știți cum să utilizați aceste informații pentru a crea un design optimizat pentru nevoile lor.

arhitectura informațiilor

fără o organizare clară, oamenii se vor confunda și vor sări. Arhitectura informațională și maparea conținutului oferă un model pentru modul în care site-ul web și fiecare secțiune vor lucra împreună pentru a oferi o călătorie clară a clienților.

fluxuri de utilizatori

construirea fluxurilor de utilizatori poate intra în joc atunci când lucrați până la proiecte de proiectare mai extinse, dar veți fi mai bine în viitor dacă începeți să vă gândiți la acestea și să le construiți pentru proiectele dvs. timpurii. Fluxurile de utilizatori comunică modul în care oamenii se vor deplasa printr-un design. Acestea vă ajută să acordați prioritate celor mai importante secțiuni și să vă asigurați că oamenii le pot accesa.

Wireframes

wireframes arată unde pe o pagină web vor fi plasate titluri, text, imagini, formulare și alte elemente. Chiar dacă construiți un design web simplu de o singură pagină, cartografierea unui wireframe vă va oferi un ghid solid din care să lucrați. Pe măsură ce treceți la site-uri web mai complicate, wireframes sunt esențiale în crearea unei experiențe consistente, structurarea machetelor și nu lipsesc nimic care trebuie inclus.

prototipuri

prototipuri pot avea diferite niveluri de fidelitate, dar acționează ca o reprezentare a unui design funcțional. Imaginile, interacțiunile, conținutul și alte elemente importante sunt toate la locul lor și reproduc designul din lumea reală. Prototipurile sunt folosite pentru a obține feedback și pentru a regla fin un design pe tot parcursul procesului.

familiarizați-vă cu UI

o interfață de utilizator este un mecanism care pune o bucată de tehnologie în acțiune. O clanță este o interfață de utilizator. Controlul volumului de pe radioul mașinii pe care celălalt semnificativ nu îl va opri este o interfață de utilizator. Iar tastatura în care introduceți codul PIN la un bancomat este o interfață de utilizator. La fel cum butoanele și alte mecanisme din lumea reală permit cuiva să interacționeze cu mașinile, elementele interfeței cu utilizatorul de pe un site web permit cuiva să pună acțiuni în mișcare.

să trecem în revistă două principii cheie UI: design intuitiv și simplitate.

cum se creează interfețe intuitive

interacțiunea și angajarea cu un site web ar trebui să fie consecvente și să urmeze modele repetabile. Oamenii de aterizare pe un site web ar trebui să înțeleagă imediat sistemele care sunt în loc în navigarea prin ea.

face UI simplu

UI există pentru a optimiza gradul de utilizare. Aceasta înseamnă a face comenzile ușor de utilizat, precum și evidente în funcționalitatea lor. Indiferent dacă minimizați numărul de opțiuni de navigare, faceți procesul de plată rapid sau integrați alte elemente interactive care cresc accesibilitatea, înțelegerea UI vă va ajuta să eficientizați experiența cuiva în interacțiunea cu un site web.

desigur, UI este un subiect vast care nu poate fi capturat în doar câteva paragrafe. Vă sugerăm să consultați postarea pe blog ” 10 sfaturi esențiale de proiectare UI (Interfață utilizator)” ca primer pentru UI.

Related citește: UX vs UI: diferențe cheie Fiecare designer ar trebui să știe

înțelege elementele de bază ale creării machete

ochii noștri se fixează automat pe anumite modele de design, făcând un traseu ușor printr-un design web. Știm intuitiv unde să ne uităm pentru că am văzut aceleași tipare de nenumărate ori pe măsură ce am consumat media de-a lungul vieții noastre. Cunoașterea modelelor de design vă va ajuta să creați site-uri web care au un flux lin către conținut și imagini. Două modele comune de aspect web trebuie să știți despre sunt Z-modele și F-modele.

z-model

pentru machete cu o economie de cuvinte și imagini și cantități generoase de spațiu negativ, z-model face pentru un mod eficient de croazieră prin intermediul unui site web. Când începeți să acordați atenție locului în care ochii dvs. trec printr-un design, veți recunoaște imediat când un model Z este în loc.

F-model

modele grele pe text, cum ar fi pentru o publicație online sau un blog, de multe ori urmați un F-model distinct. În partea stângă a ecranului, veți vedea o listă de articole sau postări, iar în corpul principal al paginii, veți vedea rânduri de informații conexe. Acest model este optimizat pentru a oferi oamenilor toate informațiile de care au nevoie, chiar dacă se uită rapid prin el.

Related citește: aspect pagină Web: anatomia site-ului web Fiecare designer trebuie să învețe

aflați despre tipografie

fonturile pot conferi diferite tonuri sau emoții, precum și pot afecta lizibilitatea. Dacă învățați despre designul web, este esențial să știți cum să utilizați tipografia.

Tipografia servește mai multor scopuri în designul web. În primul rând, servește scopului utilitar de a face conținutul lizibil. Dar poate servi și ca decor, iar utilizarea cu gust a tipografiei stilizate poate adăuga estetica generală.

iată trei concepte tipografice de bază pe care ar trebui să le cunoașteți.

Serif

serifele au linii minuscule cunoscute sub numele de serifuri care grațiază fiecare literă. Acest stil tipografic poate fi urmărit înapoi la imprimare.

Sans serif

după cum sugerează și numele, fonturile sans serif nu au liniile de identificare ale caracterelor serif. Aceste typesfaces se găsesc prin tărâmul digital al site-urilor web și al aplicațiilor.

Display

fonturi de afișare sunt adesea folosite pentru titluri și pot fi fie mari și de impact sau realizate din linii ascuțite, subțiri. De obicei, au forme de scrisori sofisticate și sunt menite să atragă atenția cuiva.

Related citește: design tipografic: stiluri de fonturi și resurse pentru designeri

puneți-vă cunoștințele în acțiune și construiți ceva

puteți viziona tutoriale, citi posturi pe blog, se înscrie în cursuri online, și de a absorbi toate teoria și informațiile pe care le puteți despre web design, dar singura modalitate de a deveni un web designer este de a începe web design.

începeți cu un proiect simplu. Poate că cineva pe care îl cunoașteți are nevoie de ajutor în crearea unui portofoliu sau are o agitație laterală care lipsește orice fel de prezență web. Oferiți-le să le proiectați ceva gratuit.

un blog este, de asemenea, un alt proiect excelent pentru începători. Acest lucru vă va oferi o experiență practică de proiectare în a învăța cum să utilizați lucruri precum un CMS, precum și să oferiți o vitrină pentru abilitățile dvs. de scriere.

construirea unui site web pentru o companie sau o afacere falsă este un alt exercițiu creativ distractiv în dezvoltarea cotletelor dvs. de design. În plus, îl puteți adăuga în portofoliul dvs.

obțineți un mentor

mentorii sunt valoroși pentru că au fost acolo unde vă aflați — chiar de la început — și au dorința de a vă ajuta prin lecțiile câștigate cu greu pe care le-au învățat. Ei au un bine profund de expertiză și cunoștințe. Sunt o resursă excelentă pentru a obține feedback cu privire la munca dvs. și pentru a găsi ceea ce faceți corect și ceea ce are nevoie de îmbunătățiri.

în căutarea mentorului potrivit, asigurați-vă că găsiți pe cineva care face tipul de design pe care îl admirați și este specializat în ceea ce doriți să învățați. Mentorii vă pot oferi o cale clară din anii petrecuți în domeniu, astfel încât să nu trebuie să vă poticniți prin învățarea designului web.

niciun cod nu oferă o intrare ușoară în Web design

a fost o vreme, nu cu mult timp în urmă, când trebuia să aveți o înțelegere profundă a HTML și CSS pentru a scrie manual codul din spatele unui web design. Astăzi, fără instrumente de cod precum Webflow, este posibil să creați un site web și să îl lansați într-un timp scurt. Ceea ce a durat zile sau săptămâni se poate întâmpla acum în ore.

desigur, atât de mult merge în crearea unui bun web design. Învățarea fundamentelor din spatele designului vizual, elementele de bază ale UI și UX și cunoașterea modului în care funcția front-end și back-end vă vor face un designer mai bine rotunjit.

fie că sunteți doar la început sau sunt un expert, Webflow oferă o platformă intuitivă bazată pe vizual pentru a vă împuternici în realizarea creativitatea. Împreună cu un mod ușor de utilizat pentru a lansa site-uri web, Webflow are o întreagă comunitate pentru a vă oferi sfaturi și pentru a vă ajuta să vă ridicați abilitățile. Așteptăm cu nerăbdare să vă vedem lucrând în vitrina noastră.