La proiectarea unui aspect site-ul există unele greșeli comune, care de multe ori pop-up, mai ales cu stagiarii și noi designeri. În această listă de pași pentru realizarea unui aspect perfect al site-ului, vom acoperi ceea ce fiecare nou constructor de site-ul de lucru într-o agenție digitală ar trebui să știe și să facă înainte de a începe un proiect nou, și ceea ce ar trebui să acorde atenție în timpul procesului pentru a evita aceste greșeli.

Aceste principii nu numai aspecte înveliș de design, dar, de asemenea, sfaturi generale de lucru care va face treaba bine. Urmați-le și veți fi în curând pe cale de a crea machete profesionale pentru site.

01. Definiți ce înseamnă succes

Discutați cu clienții dumneavoastră pentru a afla ce obiectivele sunt
Înainte de a începe munca pe care trebuie să știți "ce este de proiectat?". Pe lângă descrierea site-ului, trebuie să știți ce așteptările sunt pentru ea. Ia un site de știri, de exemplu, care este scopul? Este pentru a face face cât mai multe afișări de anunțuri posibil sau este de a oferi cea mai bună experiență de lectură? Cum aceste obiective vor fi măsurate?

Remodelări bune nu sunt neapărat cele mai ostentative, dar care îmbunătățesc performanța în timp. Vorbind cu clienții dumneavoastră înainte de a începe design-ul este cheia pentru a defini toate acestea. Ai nevoie pentru a afla ce preocupările și obiectivele lor .

02. Pune gândurile pe hârtie mai întâi

Site-ul schiță inițială

Schițe foarte timpurii ale unei serii ilustrație despre orașe din întreaga lume (faceți clic pe pictograma din dreapta sus pentru a mări imaginea)
Acest lucru pare foarte evident, dar l-am găsit prea multe ori ca designerii sari direct în activitatea lor înainte de a da gândit la problema pe care încearcă să rezolve. Design-ul este despre rezolvarea problemelor, iar aceste probleme nu pot fi rezolvate prin gradienti sau umbre, ci mai degrabă printr-un aspect bun și o ierarhie clară.

Gândiți-vă la conținutul, aspectul și funcționalitatea înainte de a începe să scadă umbre. Asigurați-vă că aceste gânduri sunt în concordanță cu obiectivele clientului dvs. și nu ezitați să le împărtășiți. Nici un client vreodată a depus o plângere la mine cu privire la supra-comunicarea de idei.

03. Start schitand un cadru de nivel superior

Site-ul layouts UX schiță

Schiță un wireframe de bază va ajuta să structurați aspectul (click pe pictograma din dreapta sus pentru a mări imaginea)
Când am cerut să creeze un aspect si sa se simta pentru un proiect, primul lucru pe care îl fac este de a veni cu un cadru de nivel superior care rezolvă toate problemele de proiectare. Cadrul este UI care înconjoară conținutul și ajută utilizatorul să efectueze acțiuni și să navigați prin ea. Acesta include navigarea și componente cum ar fi barele laterale și bare de fund.

Dacă vă apropiați de design din această perspectivă, veți avea o înțelegere clară a ceea ce nevoile dvs. de aspect va fi la proiectarea secțiuni dincolo de pagina de pornire.

04. Adăugați o grilă

Un exemplu de o grilă 978 cu o valoare initiala 10px
Este la fel de simplu cum pare. Înainte de a începe pentru a proiecta orice ai nevoie de o grilă corespunzătoare. Nu există scuze valabile pentru a începe fără o grilă - și dacă nu, pot să vă asigur, design-ul nu va arata la fel de bine. O grilă va ajuta să structurați aspectul diferitelor secțiuni; vă va ghida prin cerințele specifice dimensiunea ecranului, și să vă ajute să creați șabloane receptiv, deci sunteți consecvent în ceea ce privește spațierea precum și multe alte probleme de proiectare.

Pentru a afla cum să facă acest lucru, să ia o privire la acest ghid pentru a crea o grilă care se adaptează la toate dimensiunile de ecran .

05. Alegeți tipografia dvs. - fonturile

Site-ul machete tipografie

O regulă generală de degetul mare este de a utiliza mai mult de două tipuri de caractere diferite, într-un aspect site
Explorarea diferite culori, fonturi și face parte din faza de descoperire a unui proiect. Mi-ar recomandăm să nu utilizați mai mult de două tipuri de caractere diferite, într-un site web, dar depinde numai de natura sa. În general, pentru a alege un font care este usor de citit pentru bucăți mari de text și să fie mai jucaus, cu titluri și îndemnuri. Nu vă fie teamă de a folosi fonturi mari și să fie creativi și consecvent atunci când se utilizează tipografie.

06. Selectați tema de culoare

Site-ul layouts culori

Instrumente precum Color Hunt sunt proiectate pentru a vă ajuta să alegeți o paletă
În timpul procesului de alegere a unui set de fonturi, ar trebui să înceapă explorarea ce culori vei folosi în interfața de utilizare, fundaluri și textul. Vă recomandăm utilizarea unui set limitat de culori și tonuri pentru interfața de utilizator generală.

Este important să se aplice în mod coerent în cele UI în funcție de funcționalitatea elementului. Gândiți-vă la aspectul de site-uri precum Facebook, Twitter, Quora și Vimeo. Pe lângă interfața de utilizare nu ar trebui să fie nici o restricție de culoare pentru ilustrații sau detalii grafice, atâta timp cât acestea nu interferează cu funcționalitatea componentelor.

Dacă rămâneți blocat, aruncați o privire la lista noastră de aplicații gratuite pentru a alege o schemă de culori.

07. Împărțiți aspectul

Site-ul layouts pagina de start B tambururi

Aspecte simple tind să fie mai ușor de navigat
Mai simplă structura site-ului, cu atât mai ușor este să navigheze. Fiecare secțiune din site-ul dvs. trebuie să spună o poveste; ea are nevoie de un motiv și un rezultat final pentru utilizator. Layout-ul ar trebui să ajute conținutul pentru a evidenția care sunt cele mai importante piese din acea poveste.

În realitate nu ar trebui să fie prea multe îndemnuri pe o pagină - totul ar trebui să conducă la această finală „Ce pot să fac aici?“ Gândiți-vă la aspectul cel mai simplu vă puteți imagina pentru un scop simplu și începe adăugarea de componente, care sunt necesare. În final vei fi surprins cât de greu este să-l păstrați simplu.

08. Regândim stabilit

Site-ul layouts buton de căutare

Butoanele de căutare devin 
Chiar avem nevoie de un buton de căutare ? În cele mai multe cazuri, răspunsul este nu. Ca designeri modelam modul în care utilizatorii naviga pe internet, este de până la noi pentru a decide câți pași o acțiune simplă va lua și cât de eficient site-ul nostru va fi.

Unele convenții sunt acolo pentru că locul de muncă, dar unele sunt acolo pentru că nimeni nu a petrecut suficient timp de evaluare a acestora. Este important să se regândească modelele interactive stabilite ale tuturor componentelor pentru a vedea cum le putem îmbunătăți.

09. Gândiți-vă în mișcare

Propunerea este esențială pentru conceperea unor experiențe interactive. Nici un design poate fi judecat ca atare sau ca comp statică mai; fiecare componentă este definită prin relația sa cu sistemul, și că relația noastră are nevoie de mișcare să fie transmise în mod corespunzător. Propunerea poate ilustra efectele dinamice asupra conținutului sau stări interactive în cadrul aspectul. În acest scop, al doilea Vă recomandăm să luați desenele dumneavoastră un pic mai departe în realizarea de prototipuri.

10. prototip, prototip, prototip

Prototyping este cel mai bun mod de a testa interacțiunile și tehnologie. Există o mulțime de instrumente de prototipuri pe care le face ușor în zilele noastre, și nu trebuie să fie un guru de codificare pentru a crea prototipuri eficiente. Acesta este încă un alt fel puteți obține clientul excitat și la bord , cu concepte și idei care altfel ar avea nevoie de o mulțime de explicații.

11. Provocare-te

Îi încurajez pe fiecare designer de acolo să se provocare pe fiecare proiect. Inovația nu este întotdeauna o cerință pentru proiect, deci este de până la noi să vină cu ceva nou. Exemple de provocări diferite ar putea include utilizarea unui nou sistem de grilă, creând o nouă componentă, sau chiar provocări minore, cum ar fi evitarea modurilor de îmbinare sau folosind o anumită culoare.

12. Acordați atenție la detalii

Site-ul scheme de plasare a jocului în curs de desfășurare

Lucrări în curs: vizualizare detalii
Această afirmație a fost prea des folosit în ultimul timp, dar nu este întotdeauna vizibil în produsul final. În funcție de conceptul din spatele proiectului, că o „atenție la detalii“ poate însemna lucruri diferite.

Ar putea fi o interacțiune mică, o animație neașteptată sau o notă estetică ca un pic de gradient într-un buton sau un accident vascular cerebral subtil în jurul valorii de o cutie în fundal. Dar, în general această atingere este esențială - și va veni natural, dacă într-adevăr se bucure de ceea ce faci.

13. Căutare în fiecare componentă

Site-ul layouts componentă video

Se tratează fiecare componentă ca și cum ar fi fost pentru un concurs de design
Se tratează fiecare componentă ca și cum ar putea fi prezentat la un concurs de design. Dacă acorde o atenție la fiecare componentă, întregul va fi mai mult decât suma părților sale. Trebuie să recunosc că această bucată de sfat nu este a mea. L-am auzit în trecut la o agenție anterioară și am fost șocat de cât de clar și adevărat a fost această afirmație.

Fiecare componentă trebuie să fie conceput ca s-ar putea sta singur ca cel mai bun component vreodată. Uneori designerii lăsați anumite părți ale unui site pana la ultima lor pe lista de rezolvat, și sfârșesc prin a nu le arăta mult respect.

14. Ascute munca - contrast corect

Site-ul layouts pixeli neclare

Setați contrastul corect între accidente vasculare cerebrale și de fond
Pentru a evita pixeli neclare, încercați să setați contrastul corect între accidente vasculare cerebrale și de fundal sau culori de fundal. În afară de orice considerente estetice, există câteva lucruri comune care trebuie evitate pentru a crea o bucată curată și corectă a muncii.

Unele lucruri pe care ar trebui să fie cu ochii în patru pentru atunci când încearcă să ascuți munca includ gradienți banding, marginile neclare, opțiunile de fonturi de redare (unele fonturi, în funcție de mărimea lor sunt cel mai bine vizualizate, pe un anumit modul de randare), și accident vascular cerebral care fuzioneaza prost cu fundalul.

Acestea sunt doar câteva exemple de bază de probleme pentru a căuta, dar în realitate lista este fără sfârșit. Intotdeauna uita-te la design-ul ca un întreg pentru a vedea dacă totul funcționează bine și apoi să analizeze fiecare component individual, cu mai multă atenție.

15. Faceți ordine fișierele de proiectare

Acest lucru (împreună cu utilizarea unei rețele) este una dintre cele mai importante piese de consiliere, indiferent de ce instrument de design pe care îl utilizați. Indiferent de dimensiunea proiectului și numărul de designeri care lucrează pe ea, aveți nevoie pentru a păstra fișierele curate. Acest lucru va face mai ușor de a exporta secțiuni diferite, pentru a accelera procesul de proiectare și de a lucra în colaborare cu alți designeri.

16. Proiectarea cel mai bun caz; se pregătească pentru cel mai rău

Site-ul aplicației layouts Clear

Țineți cont de modul în care aspectul dvs. va funcționa pe diferite dispozitive și dimensiuni de ecran
Țineți cont de modul în care aspectul dvs. va funcționa pe diferite dispozitive și dimensiuni de ecran. Ca designeri de locuri de muncă nostru este de a rezolva problemele prin diferite constrângeri. Cu web design, constrângerile variază de la probleme conceptuale și tehnice la problemele legate de conținut.

Avem nevoie de a construi un site care poate lucra nu numai în scenariul ideal, dar, de asemenea, în cel mai rău caz. De exemplu, un utilizator ar putea fi folosind un ecran foarte mic și verificați site-ul atunci când există abia orice conținut pe ea așa se pare rupt.

Cu toate acestea, în scopul de a prezenta munca noastră întotdeauna am recomandăm cu tărie construirea cel mai bun caz pentru ea. Prin urmare, vom afișa cantitatea ideală de text și vom arăta site-ul în interiorul dimensiunea ideală browser-ul pe care ar trebui să fie cel mai frecvent scenariu pentru majoritatea utilizatorilor care îl utilizează.

17. obsedează asupra design până când îl urăsc

Daca esti pasionat de design Sunt sigur că acest lucru este ceva ce deja faci. Ori de câte ori termin un comp mă simt mândru de, am tendința de a face ca comp o parte din viata mea. Eu iau capturi de ecran de ea, verifica-l diferit dispozitive, face imagini de fundal de ea și chiar imprima si agata-l pe perete.

Ca rezultat al acestui proces, am ajunge la un punct în cazul în care în cele din urmă am ajuns urî designul meu. Am începe să vedeți tot ce e în neregulă cu ea și în cele din urmă l-am schimba. Neplăcerea munca anterioară este un semn de maturitate, și aceasta înseamnă că sunt în cele din urmă de învățare din propriile greșeli.

18. Ponderea modele cu clienții timpuriu

Atunci când propune un concept interactiv sau un „look and feel“ de design, trebuie să se asigure că și clientul sunt ambele pe aceeași pagină cât mai curând posibil. Evitați petrece prea mult timp pe un concept înainte de a partaja cu clientul.

Odată ce conceptul inițial este aprobat vă puteți relaxa un pic și începe producția. Dar, după prezentarea primului concept, în cazul în care clientul nu se încadrează în dragoste cu ea, ar trebui să adune suficient feedback-ul pentru a aduce un al doilea concept de mai adecvat în tabel.

19. Fii cel mai bun prieten dezvoltator dvs.

Dezvoltatorii sunt oameni creativi si le place locurile lor de muncă la fel de mult ca și tine. Dar ei nu sunt întotdeauna incluse într-un proiect de la bun început, și de multe ori se implice doar în cazul în care conceptul este decis și rolul lor creativ a fost înlocuită.

Acest proces este greșit; unele dintre cele mai bune idei vin de la echipa de dezvoltare, astfel încât asigurați-vă că echipa cu ei de la începutul proiectului. Schimbul de concepte și entuziasm cu ei va duce la idei mai bune și o execuție mai bună în cele din urmă.

20. cele prezente cât mai clar posibil

Este la fel de important pentru a produce o mare de lucru, deoarece este să-l prezinte. Cel mai bun design-ul poate fi ignorat sau aruncat, dacă nu-l prezintă în mod corespunzător. Când vine vorba de prezentări, pe care doriți să explice munca ta ca te-l arată la un copil de patru ani. Păstrați-vă întotdeauna în vedere faptul că ceea ce este cu totul clar pentru tine s-ar putea să nu fie clar pentru cineva a vedea design-ul pentru prima dată.

21. Nu te prea atașat de ideile tale

Există o linie subțire între a ști când să pledeze pentru ideile și de a învăța să recunoască atunci când echipa sau clientul dvs. nu le vedea ca fiind „cea“. Ca un designer trebuie să crezi cu tărie în ceea ce faci, dar ar trebui să fie, de asemenea, deschis pentru a transforma rapid peste oricare dintre ideile tale și de a veni cu altceva. Nu uitați că există mai mult de o soluție.

22. Urmați design-ul în dezvoltare

Dacă lucrați în interiorul unei agenții veți ști, probabil, cât de ușor este de a găsi te lupta cu proiectarea unui nou proiect, atunci când cel anterior este în curs de elaborare. Contrar părerii generale, munca pe un proiect nu se încheie atunci când PSD și foaia de stil sunt livrate.

Dacă îți pasă cu adevărat desenele și ideile de interacțiune fiind bine executate, check-in pe cei mai buni prieteni vechi dezvoltatorii din timp în timp, și de a le ajuta la fel de mult ca și de care au nevoie pentru a se asigura de fiecare pixel mic este perfect.

23. Arătați activitatea în curs

foi Website aspecte de stil

Distribuiți foile de stil și de a lucra în componente de progres cu comunitatea
Ca parte a unei comunități de designeri, ne place să vedem nu numai rezultatele finale, ci și lucrările în curs de desfășurare. Uneori, cea mai bună parte a unui proiect este lăsat afară din mai multe motive și se pierde în dosarul Arhivă.

Odată ce proiectul se face și veți obține aprobarea din partea clientului / producătorul îl promovează, și, dacă este posibil, a crea un studiu de caz cu lucrările în curs de desfășurare și desene sau modele care nu-l face la eliberarea finală. Vei fi ajuta de a contribui la cunoștințele comunității și veți obține un feedback valoros în schimb.