Sfaturi simple de web design pentru rezultate bune

Există o mulțime infinită de moduri de a proiecta un site web. Având în vedere acest lucru, există și modalități infinite de a-l încurca. Există două metode principale pentru a evita căderea în a doua categorie - învățați fundamentele proiectării și aplicați-le în consecință. De asemenea, trebuie să aveți suficientă experiență pentru a învăța ce funcționează bine și ce nu.

Toți designerii urmează căi de învățare diferite și sunt adesea în diferite etape ale călătoriei lor. Dacă citiți acest lucru, sperăm că încercați să vă îmbunătățiți și mai mult munca și să produceți modele mai bune.

Din păcate, nu există nicio modalitate de a încadra toate cunoștințele necesare în 1500 de cuvinte. În schimb, vom viza doar câteva sfaturi pentru a vă face să regândiți cum puteți aborda elementele UX / UI. În mod ideal, acest mod de gândire poate fi aplicat și în alte domenii ale lucrării dvs. de proiectare.

Începeți cu o bună înțelegere a produsului / site-ului

Este extrem de greu să faci designul atunci când nu înțelegi pe deplin conținutul / site-ul web. Acum, nu trebuie să studiați medicina pentru a face un site medical, nu acesta este obiectivul. Cu toate acestea, ar trebui să știți exact cum un utilizator ar accesa oricare dintre informațiile pe care le-ar putea solicita.

Dacă doriți să proiectați o aplicație de muzică, mai întâi ar trebui să luați câteva dintre cele existente, să vă jucați cu ele pentru a le da o impresie, să citiți despre teoria din spatele ei și cum funcționează anumite elemente.

În mod ideal, ar trebui să lucrați cu clientul dvs., care ar trebui, de asemenea, să fie foarte implicat în proiect și să dorească să vă ajute să implementați un UX mai bun pentru utilizatorii lor.

Cu toate acestea, dacă nu aveți o înțelegere fundamentală despre ce este site-ul și despre ce problemă rezolvă, puteți înfrânge experiența utilizatorului sau vă puteți forța să urmăriți soluțiile existente și să le reveniți (care uneori funcționează).

Pentru site-uri web, ar trebui să aveți sitemap-ul în față pentru a lucra la o navigare adecvată și a lua decizii cu privire la elementele care ar fi potrivite pentru anumite pagini de destinație. Dacă faceți un design „fabrică de ciocolată”, puteți prezenta vizual procesul de realizare a acestuia sau puteți face o descărcare de informații. Totul depinde de obiectivele site-ului.

Toate aceste informații sunt ceva de care aveți nevoie în prealabil pentru a avea o rată de succes mai mare. Având în vedere cât de complicat este acest lucru, vi s-ar putea întâmpla dacă sunteți un designer freelance începător, așa că cel mai bine este să puneți multe întrebări chiar de la început. Dacă lucrați în echipă, nu uitați să vă consultați cu membrii echipei cu privire la conținut, UX, scop și multe altele.

Sfaturi și trucuri specifice designului:

Acum, să vedem câteva sfaturi specifice UI / UX pe care le puteți utiliza în următorul dvs. design:

1 - Contrast!

Este atât de ușor să distrugi contrastul pe un site. O modalitate rapidă de a identifica un designer mai puțin experimentat ar fi verificarea contrastului general. Vezi acest exemplu:

Sursă

Vedeți cât de ușor este textul peste tot? Butoanele verzi cu text alb, textul gri deschis ?. Să o comparăm cu o interfață de utilizare mai contrastantă:

Sursă

O mare parte a fontului este neagră (sau aproape neagră), cu informații doar mai puțin importante ușor mai gri. Verde este mai închis, ceea ce permite acum textul alb deasupra.

Sfatul aici este - când lucrați cu text, începeți cu negru pe alb sau alb pe negru. Pe măsură ce adăugați mai multe elemente și trebuie să vă separați cu ierarhia vizuală, încercați mai întâi cu caractere aldine sau cu modificarea dimensiunii fontului. Abia după aceea, dacă nu funcționează, mergeți cu modificările de culoare, dar în mod ideal nu mai mult de 30-40% diferență (în general, opacitatea este setată la 70%).

2 - Spațiu alb consistent

O altă greșeală obișnuită ar fi aceea de a avea o distanță inconsistentă în jurul elementelor. De fapt, este atât de obișnuit încât majoritatea designerilor continuă să se lupte cu acest lucru după ani de muncă și este destul de înțeles - mutăm cutiile cu mouse-ul. Este ușor să alunecați puțin și să îl mutați cu un pixel sau doi în lateral. Sau poate că nu ți-ai pregătit ochiul suficient de bine pentru a observa direct această diferență.

În exemplul următor, priviți cum diferitele componente au spații albe diferite în jurul lor. Unele sunt aglomerate, altele sunt distanțate foarte mult. Nu pare foarte coerent vizual.

În schimb, iată un exemplu cu o cantitate mai mult sau mai puțin similară de conținut / tip de componente, dar cu un aspect mai consistent:

Sursă

Există diverse modalități de a realiza acest lucru, dar de cele mai multe ori nu funcționează doar cu măsurarea. Adesea este o „senzație” atunci când o privești. Arată echilibrat? Dacă aveți cutii, puteți măsura oricând ceva de genul 30px din laturi, 30px sub titlu, 15px sub subtitlu etc. Și este o abordare bună! Dar cu elemente vizuale mai mari, cum ar fi titlurile sau imaginile, ați putea dori să măriți puțin pentru a compensa elementul mai greu.

3 - Culoare

O altă componentă fundamentală a unui design bun. Culorile trebuie să funcționeze bine împreună. O modalitate ușoară de abordare a site-urilor web este să rămâi la o singură culoare primară și să păstrezi restul monocromatic.

Următorul exemplu urmează toate cele trei sugestii de până acum - Contrast bun, echilibru și utilizare a culorii:

Sursă

O modalitate ușoară de a începe cu culorile este să urmați câteva scheme de culori bine primite de pe site-uri precum https://colorhunt.co/ sau să vă inspirați de la Dribbble pentru combinații. Lucrul cu roata de culori este util pentru a afla combinațiile, dar deseori este nevoie de puțină notă suplimentară de la designeri pentru a pune în evidență cele mai bune combinații. Rotile colorate nu produc adesea culorile perfecte pentru a fi aplicate într-un design.

Exemplu din roata de culoare Adobe:

Sursă

O culoare verde frumoasă la mijloc, dar cam greu de utilizat rezultatele din partea stângă / dreapta.

4 - Rămâneți la un stil de-a lungul site-ului

Construirea aspectului unui site web este una dintre principalele sarcini ale designerului. Deși ideea de „drăguț” este foarte greu de definit, mai ales că oamenii au adesea o viziune diferită despre ceea ce este frumos și ce nu. . În loc să vă faceți griji cu privire la acest lucru, concentrați-vă pe consecvență și rămâneți cu stilul.

Ce inseamna asta? Ei bine, să proiectăm un buton. Setăm dimensiunea fontului, fontul, culoarea, fundalul, spațiul etc. Și primim așa ceva:

Acum, dacă dorim să adăugăm o imagine și un titlu, putem realiza așa ceva poate:

Vedeți colțurile. Toate colțurile perfecte de 90 de grade, fără rotunjiri. Acum, asta înseamnă că designul nostru va urma în cea mai mare parte colțuri ascuțite. Și arată mai consistent dacă imaginea are și aceste colțuri perfecte. La fel ca dacă adăugăm intrări, toate ar avea și aceste colțuri mai clare. Să adăugăm încă un element:

Am adăugat o grilă de cutii în colțurile din dreapta sus și din stânga jos. Acestea ar fi putut fi cercuri, dar pentru a menține aspectul ascuțit, le-am setat pe pătrate. Aceeași gândire ar trebui menținută pe întregul site. Dacă începeți să schimbați elemente, atunci puteți începe să pierdeți senzația, ceea ce, la rândul său, ar duce la un design inconsecvent și ar slăbi marca.

Iată același design de sus, dar cu aspect rotunjit:

Este la fel, dar se simte atât de diferit acum.

5 - Proiectare cu componente

Componentele există în toate instrumentele de proiectare moderne, cum ar fi Figma și Adobe XD. Sunt acolo pentru un motiv foarte bun - dezvoltatorii implementează site-uri într-un mod în care pot fi refolosite cât mai mult posibil.

Dacă creați un element ca cel de mai sus, doriți să îl „copiați-lipiți” pe altă pagină și va funcționa pur și simplu. Nu este nevoie să îl codificați din nou cu ușoare diferențe. În calitate de designer, în mod ideal ați dori să vă reutilizați componentele într-un mod similar.

Dacă faceți o pagină de pornire cu 3 postări la rând, poate pur și simplu puteți reutiliza aceeași postare de pe pagina de pornire. Acest lucru vă economisește timp, economisește timp dezvoltatorului și păstrează designul coerent pentru utilizatori.

Sursă

Imaginați-vă că faceți un titlu de secțiune. Dacă trebuie să aveți 8 secțiuni cu un antet, l-ați proiecta de fiecare dată sau ați copia-lipi precedentul? În mod ideal, doriți să îl refolosiți. Dar dacă trebuie să-l schimbi de la centrat la aliniat la stânga? Poate schimba puțin dimensiunea, poate culoarea? Sfatul din aceasta este să încercați și NU să faceți asta. Încercați să îl păstrați ca original. Dacă într-adevăr aveți nevoie de vizualizări diferite (în afară de stânga / centrat / aliniat la dreapta), încercați să faceți o singură variantă. Nu cinci sau zece dintre ei.

Exemplu de DevriX

În concluzie:

Pentru a obține rezultate bune, aveți nevoie de o înțelegere puternică a elementelor fundamentale de proiectare, cum ar fi culoarea, contrastul, spațiul alb, echilibrul, ierarhia vizuală, ordinea și multe altele. Atunci când proiectați având în vedere acest lucru și vă concentrați asupra utilizabilității, a consistenței și a stilului, chiar dacă nu este un „WOW!” design, va fi solid pe toate fronturile și va funcționa bine, ceea ce produce adesea rezultate mai bune pentru o marcă pe termen lung.