Designul web poate fi înșelător de dificil, deoarece implică realizarea unui design atît de folositor și plăcut, care să furnizeze informații și să construiască un brand, este solid din punct de vedere tehnic și coerent din punct de vedere vizual.
Adăugați la acest lucru faptul că mulți designeri web (eu însumi inclusi) sunt autodidactați, că designul web este încă destul de nou pentru a fi doar un subiect lateral în multe instituții de design și că mediul se schimbă la fel de frecvent ca și tehnologia de bază.
Așa că astăzi mi-am pus cele 9 principii pentru un design Web bun. Acestea sunt numai opiniile mele și am încercat să mă conectez la mai multe lecturi pe subiecte, astfel încât să nu auziți doar vocea mea. Evident, am o mulțime de disclaimers: regulile sunt făcute pentru a fi rupte, diferite tipuri de lucrări de proiectare în mod diferit, și eu nu întotdeauna trăiesc până la sfatul meu. Deci, vă rugăm să citiți aceste lucruri așa cum sunt intenționate - doar câteva observații pe care le împărtășesc ...
Capture the Valley utilizează bare de culoare pentru a vă îndrepta ochii prin secțiuni de sus în jos ...
1. Precedenta (ghidarea ochiului)
Designul Web bun, poate chiar mai mult decât alt tip de design, este despre informații. Unul dintre cele mai mari instrumente din arsenalul dvs. pentru a face acest lucru este precedenta. Când navigați printr-un design bun, utilizatorul ar trebui să fie condus de designer în jurul ecranului. Eu numesc această prioritate, și este vorba despre cât de multă greutate vizuală au diferite părți ale designului tău.
Un exemplu simplu de prioritate este că în majoritatea site-urilor, primul lucru pe care îl vedeți este logo-ul. Acest lucru este adesea pentru că este mare și stabilit la ceea ce sa arătat în studii ca fiind primul loc pe care oamenii îl privesc (partea stângă sus). este un lucru bun, deoarece probabil că doriți ca un utilizator să știe imediat ce site-ul vizionează.
Dar prioritatea ar trebui să meargă mult mai departe. Ar trebui să direcționați ochii utilizatorului printr-o secvență de pași. De exemplu, ați putea dori ca utilizatorul dvs. să treacă de la logo / marcă la o instrucțiune de poziționare primară, lângă o imagine perversă (pentru a da personalitatea site-ului), apoi la textul corpului principal, cu navigație și o bară laterală ocupând o poziție secundară secvența.
Ceea ce ar trebui să vă uitați utilizatorul dvs. depinde de dvs., designerul web, să vă dați seama.
Pentru a obține prioritate, aveți la dispoziție multe instrumente:
Poziţie - În cazul în care ceva este pe o pagină, influențează în mod clar în ce ordine îl vede utilizatorul.
Culoare - Folosind culori aldine și subtile este o modalitate simplă de a le spune utilizatorului unde să se uite.
Contrast - A fi diferit face ca lucrurile să iasă în evidență, în timp ce sunt aceleași, le face secundare.
mărimea - Big are prioritate față de puțin (cu excepția cazului în care totul este mare, caz în care puțin ar putea ieși datorită contrastului)
Elemente de proiectare - dacă există o săgeată gigantică care indică ceva, ghiciți unde va arăta utilizatorul?
Citirea în continuare:
Puteți citi mai multe despre gândurile mele despre Precedență într-un vechi mesaj Psdtuts + numit Elemente de Web Design Mare - poloneză. Joshua David McClurg-Genevese discută principiile bunei design-uri și design-uri web la Digital-Web. Iosua are și cel mai lung nume :-)
Marius are un site foarte curat, foarte simplu, cu mult spațiu
2. Spațierea
Când am început proiectarea, am vrut să umplem fiecare spațiu disponibil cu lucrurile. Spațiul gol părea risipitor. De fapt, contrariul este adevărat.
Spațierea face lucrurile mai clare. În designul web există trei aspecte ale spațiului pe care ar trebui să le luați în considerare:
Spațierea liniilor Când plasați textul, spațiul dintre linii afectează în mod direct modul în care acesta poate fi citit. Spațiul prea mic face ca ochiul să se împrăștie de la o linie la alta, prea mult spațiu înseamnă că atunci când terminați o linie de text și mergeți la următoarea ochi, vă puteți pierde. Deci, trebuie să găsiți un mediu fericit. Puteți controla spațierea liniilor în CSS cu selectorul "înălțime linie". În general, găsesc că valoarea implicită este, de obicei, o spațiere prea mică. Linia de Spațiere este denumită tehnic conducere (accentuare pronunțată), care derivă din procesul pe care imprimanții l-au folosit pentru a separa linii de text în zilele noastre - prin plasarea barelor de plumb între linii.
umplutură În general, textul nu ar trebui să atingă niciodată alte elemente. Imaginile, de exemplu, nu ar trebui să atingă text, nici să nu fie marginile sau tabelele. Plăcuirea este spațiul dintre elemente și text. Regula simplă aici este că ar trebui mereu au spatiu acolo. Există excepții, desigur, în special dacă textul este un fel de titlu / grafic sau numele tău este David Carson :-) Dar, ca regulă generală, plasarea spațiului între text și restul lumii îl face infinit mai ușor de citit și mai plăcut.
Spatiu alb Mai întâi de toate, spațiul alb nu trebuie să fie alb. Termenul se referă pur și simplu la spațiul gol de pe o pagină (sau un spațiu negativ așa cum se numește uneori). Spațiul alb este folosit pentru a oferi echilibru, proporție și contrast cu o pagină. O mulțime de spațiu alb tinde să facă lucrurile să pară mai elegante și mai bune, așa că, de exemplu, dacă vă duceți la un site de arhitect scump, veți vedea aproape întotdeauna o mulțime de spațiu. Dacă doriți să învățați să utilizați spațiul alb în mod eficient, treceți printr-o revistă și analizați modul în care sunt prezentate anunțurile. Anunțurile pentru mărcile mari de ceasuri și mașini și altele similare tind să aibă o mulțime de spațiu gol utilizat ca element de design.
Citirea în continuare:
La WebDesignFromScratch există un articol grozav numit ghidul de proiectare Web 2.0, care discută despre Simplicitate - un concept care face mult uz de spațiere. Există și multe alte lucruri utile acolo!
Noodlebox face o treabă bună de a folosi stările on / off în navigația lor pentru a menține orientarea utilizatorului.
3. Navigare
Una dintre cele mai frustrante experiențe pe care le puteți avea pe un site Web este în imposibilitatea de a afla unde să mergeți sau unde vă aflați. Aș vrea să cred că pentru majoritatea designerilor web, navigația este un concept pe care l-am reușit să-l stăpânim, dar încă mai găsesc câteva exemple destul de rele acolo. Există două aspecte ale navigației care trebuie ținute în minte:
Navigare - Unde poți merge? Există câteva reguli de bun-simț care trebuie amintite aici. Butoanele pentru a călători în jurul unui site ar trebui să fie ușor de găsit - spre partea de sus a paginii și ușor de identificat. Ar trebui să arate ca butoane de navigație și să fie bine descrise. Textul unui buton ar trebui să fie destul de clar în ceea ce privește locul în care te ia. În afară de bunul simț, este de asemenea important ca navigația să fie utilizabilă. De exemplu, dacă aveți un submeniu de rollover, asigurarea că o persoană poate ajunge la elementele submeniului fără a pierde rolloverul este importantă. În mod similar, schimbarea culorii sau a imaginii în rollover este un feedback excelent pentru un utilizator.
Orientație - Unde ești acum?? Există o mulțime de moduri în care puteți orienta un utilizator, astfel încât nu există nici o scuză să nu. În site-uri mici, ar putea fi vorba doar de o rubrică mare sau o versiune "în jos" a butonului corespunzător din meniul dvs. Într-un site mai mare, puteți utiliza trasee de pâine, sub-rubrici și o hartă a site-ului pentru cei cu adevărat pierduți.
Citirea în continuare:
SmashingMagazine are o selecție de stiluri de navigare bazate pe CSS, care sunt frumoase pentru a trece prin, și # 3 este unul dintre meu! A List Apart are, de asemenea, un bun articol despre orientare numit Unde sunt eu?
4. Design pentru a construi
Viața a devenit mult mai ușoară, deoarece designerii web au trecut la layout-uri CSS, dar chiar și acum este important să ne gândim cum veți construi un site când sunteți încă în Photoshop. Luați în considerare lucruri precum:
Se poate face, de fapt? S-ar putea să fi ales un font uimitor pentru copia dvs. de corp, dar este de fapt un font HTML standard? S-ar putea să aveți un design care arată frumos, dar este de 1100px lățime și va avea ca rezultat un scroller orizontal pentru majoritatea utilizatorilor. Este important să știți ce pot și nu pot fi făcute, motiv pentru care cred că toți designerii de web ar trebui să construiască și site-uri, cel puțin uneori.
Ce se întâmplă când se redimensionează un ecran? Aveți nevoie de medii repetate? Cum vor funcționa? Designul este centrat sau aliniat la stânga?
Faceți ceva care este dificil din punct de vedere tehnic? Chiar și cu poziționarea CSS, unele lucruri cum ar fi alinierea verticală sunt încă un pic dureroase și, uneori, cel mai bine evitate.
Ar putea mici modificări în designul dvs. să simplifice foarte mult modul în care îl construiți? Câteodată mișcarea unui obiect în jurul unui design poate face o mare diferență în modul în care trebuie să codificați mai târziu CSS. În special, atunci când elementele unui design se încrucișează reciproc, aceasta adaugă o mică complexitate construirii. Deci, dacă designul dvs. are, spune trei elemente și fiecare element este complet separat unul de celălalt, ar fi cu adevărat ușor de construit. Pe de altă parte, dacă toate cele trei se suprapun unul pe celălalt, ar putea fi ușor, dar probabil va fi un pic mai complicat. Ar trebui să găsiți un echilibru între ceea ce arată bine și mici modificări care vă pot simplifica construirea.
Pentru site-uri mari, în special, puteți simplifica lucrurile? A fost o vreme când am folosit butoane de imagine pentru site-urile mele. Deci, dacă a existat un buton de descărcare, de exemplu, aș face o mică imagine descărcată. În ultimul an sau așa, am trecut la utilizarea CSS pentru a-mi face butoanele și nu m-am uitat niciodată înapoi. Sigur, înseamnă că butoanele mele nu au întotdeauna flexibilitatea pe care aș putea să o doresc, dar economiile în timpul de construcție de la a nu fi nevoie să facă zeci de mici buton imagini sunt uriașe.
Dacă cineva știe tipul bun este iLoveTypography!
5. Tipografia
Textul este cel mai comun element de design, deci nu este surprinzător faptul că o mulțime de gândire a intrat în ea. Este important să țineți cont de lucruri precum:
Alegerea fonturilor - Diferitele tipuri de fonturi spun lucruri diferite despre un design. Unele arata modern, unele arata retro. Asigurați-vă că utilizați instrumentul potrivit pentru lucrare.
Dimensiunile fontului -Cu ani în urmă, a fost trendy să aveți un text foarte mic. Din fericire, în zilele noastre oamenii au început să realizeze că textul este menit să fie citit, nu doar privit. Asigurați-vă că dimensiunile textului sunt coerente, suficient de mari pentru a fi citite și proporționale, astfel încât titlurile și subcapitolele să se evidențieze în mod corespunzător.
Spațiere - După cum sa discutat mai sus, distanța dintre linii și departe de alte obiecte este importantă în considerare. De asemenea, ar trebui să vă gândiți la spațierea dintre litere, deși pe Web aceasta este mai puțin importantă, deoarece nu aveți prea mult control.
Lungimea liniei - Nu există o regulă tare și rapidă, dar, în general, liniile dvs. de text nu ar trebui să fie prea lungi. Cu cât sunt mai lungi, cu atât mai greu trebuie să le citească. Coloanele mici de text funcționează mult mai bine (gândiți-vă la modul în care un ziar conține text).
Culoare - Unul dintre cele mai grave obiceiuri mele este textul cu contrast redus. Arată bine, dar nu citește atât de bine, din păcate. Totuși, par să o fac cu fiecare design de site web pe care l-am făcut vreodată, tsk tsk tsk.
paragrafiere - Înainte de a începe proiectarea, mi-a plăcut să justific textul în tot. A făcut margini frumoase de fiecare parte a paragrafelor mele. Din păcate, textul justificat tinde să creeze lacune ciudate între cuvintele în care au fost distanțate automat. Acest lucru nu este frumos pentru ochiul dvs. atunci când citiți, așa că lipiți în stânga, dacă nu se întâmplă să aveți un corp magic de text care se întâmplă cu spațiul afară perfect.
Citirea în continuare:
Nick La de la WebDesignerWall are un articol extraordinar despre tipografia online denumită Contrast și flux tipografic .
Happycog cunoaște gradul de utilizare în afară, iar propriul site este simplu și ușor de utilizat.
6. Utilizabilitatea
Web design-ul nu este doar despre imagini frumoase. Cu atâtea informații și interacțiuni care trebuie efectuate pe un site Web, este important ca dumneavoastră, proiectantul, să vă asigurați totul. Asta inseamna ca design-ul site-ului tau sa fie usor de utilizat.
Am discutat deja câteva aspecte ale utilizabilității - navigație, precedență și text. Iată trei mai importante:
Aderarea la standarde Există anumite lucruri pe care le așteaptă oamenii și nu le provoacă confuzii. De exemplu, dacă textul are o subliniere, vă așteptați ca acesta să fie un link. A face altfel nu este o practică bună de utilizare. Sigur, puteți sparge unele convenții, dar cea mai mare parte a site-ului dvs. Web ar trebui să facă exact ceea ce oamenii se așteaptă să facă!
Gândiți-vă la ceea ce vor face efectiv utilizatorii Prototiparea este un instrument comun folosit în design pentru a "încerca" într-adevăr un design. Acest lucru se întâmplă deoarece de multe ori când utilizați un design, observați lucruri mici care fac o mare diferență. ALA a avut un articol în urmă numit "Niciodată nu folosiți o avertizare atunci când se referă Undo", ceea ce reprezintă un exemplu excelent al unei decizii de proiectare a interfeței mici care poate face viața suge pentru un utilizator.
Gândiți-vă la sarcinile utilizatorilor Când un utilizator ajunge pe site-ul dvs., ce încearcă să facă? Listați diferitele tipuri de sarcini pe care oamenii ar putea să le facă pe un site, cum le vor atinge și cât de ușor doriți să le faceți pentru ele. Acest lucru ar putea însemna să aveți sarcini foarte obișnuite pe pagina dvs. de pornire (de exemplu, "începeți să faceți cumpărături", "aflați despre ceea ce facem" etc.) sau ar putea însemna asigurarea unui acces ușor la o casetă de căutare. La sfârșitul zilei, designul dvs. de Web este un instrument pentru oamenii de a utiliza, iar oamenii nu le place să folosească instrumente enervante!
Citirea în continuare:
AListApart are o mulțime de articole despre utilizarea pe web.
Pulpa electrică reușește să arate dură, dar dacă vă uitați atent, vă dați seama că există o rețea fermă și lucrurile se potrivesc de fapt.
7. Aliniere
Păstrarea lucrurilor aliniate este la fel de importantă în designul web, așa cum este și în designul tipărit. Asta nu înseamnă asta Tot ar trebui să fie în linie dreaptă, ci mai degrabă că ar trebui să treceți și să încercați să păstrați lucrurile în mod consecvent plasate pe o pagină. Alinierea face ca design-ul dvs. să fie mai ordonat și mai digerabil, precum și să fie mai lustruit.
Puteți dori, de asemenea, să vă bazați desenele pe o rețea specifică. Trebuie să recunosc că nu fac acest lucru conștient - deși, evident, un site ca Psdtuts + are, de fapt, o structură foarte fermă a rețelei. În acest an am văzut câteva articole foarte bune despre designul grilei, inclusiv proiectarea lui SmashingMagazine cu abordare bazată pe grilă și gândire în afara grilei. De fapt, dacă sunteți interesat de designul grilei, ar trebui să plătiți cu siguranță o vizită la casa potrivită de designByGrid.com pentru toate lucrurile griddy.
Site-ul ExpressionEngine este sufletul clarității. Totul este ascuțit și curat.
8. Claritate (Claritate)
Păstrarea creativității și a clarității designului este foarte importantă în designul web. Și când vine vorba de claritate, este vorba despre pixeli.
În CSS, totul va fi pixel perfect, astfel încât nu este nimic de îngrijorat, dar în Photoshop nu este așa. Pentru a obține un design ascuțit trebuie să:
Păstrați marginile formate în pixeli. Aceasta ar putea implica curățarea manuală a formelor, liniilor și cutiilor dacă le creați în Photoshop.
Asigurați-vă că orice text este creat utilizând setarea adecvată de aliniere. Folosesc foarte mult "Sharp".
Asigurați-vă că contrastul este mare, astfel încât marginile să fie clar definite.
Supra-accentuarea frontierelor doar ușor pentru a exagera contrastul.
Citirea în continuare:
Am scris un pic mai mult despre claritate în Elementele de Web Design Mare - poloneză. Am observat că designerii de imprimare care trec la Web design, în special, nu cred în pixeli, dar este cu adevărat vital.
Veerle face o treabă minunată de a păstra chiar și cele mai mici detalii consecvente pe plan.
9. Consistența
Consistența înseamnă că totul se potrivește. Dimensiunile căsuțelor, alegerile de fonturi, colorarea, stilurile de butoane, spațierea, elementele de design, stilurile de ilustrații, opțiunile de fotografie etc. Totul ar trebui să fie tematic pentru a face coerența dintre pagini și aceeași pagină.
Păstrarea coerenței în proiectare înseamnă să fii profesionist. Incoerențele într-un design sunt ca greșelile de scriere într-un eseu. Acestea reduc doar percepția calității. Indiferent de designul dvs. arata, păstrând-l consecvent va aduce întotdeauna o notch. Chiar dacă este un design rău, cel puțin face un design consistent și rău.
Cea mai simplă modalitate de a menține coerența este să luați decizii timpurii și să le respectați. Cu un site cu adevărat mare, cu toate acestea, lucrurile se pot schimba în procesul de proiectare. Când am proiectat FlashDen, de exemplu, procesul a durat luni și, până la sfârșit, unele dintre ideile mele pentru butoane și imagini s-au schimbat, așa că a trebuit să mă întorc și să revizuiască paginile anterioare pentru a se potrivi mai târziu exact.
Având un set bun de foi de stiluri CSS poate merge, de asemenea, un drum lung spre realizarea unui design consistent. Încercați să definiți etichete de bază cum ar fi
și
astfel încât să se potrivească în mod corespunzător cu defectele dvs. și să evitați să vă mai amintiți mereu anumite nume de clasă.
Citirea în continuare:
Articolul ThinkVitamin Cum este designul dvs. CRAP? discută Repetiția care coboară pe pagină și cât de importantă este. Articolul este scris de Mike Rundle, care proiectează 9rule, deci știi că merită citit!
Ia Cartea mea!
Bucurați-vă de acest articol? Tocmai am terminat o carte despre freelancing pe care o puteți cumpăra online ca o carte electronică. Foloseste-te pentru a afla mai multe despre Cum sa fii un Freelancer Rockstar.
Share
Accentsconagua