Share
La începutul săptămânii Web Design, am văzut cum poate fi amestecat un aspect simplu și se potrivesc cu fundaluri, modele și fotografii diferite, astăzi vom continua cu asta. Vom schimba complet aspectul unui site web schimbând nu doar fundalul, ci stilul general al designului.
Vom începe cu site-ul Grungy Paper Texture pe care l-am creat într-un tutorial trecut, apoi vom schimba designul pentru a arăta minimal, metalic, abstract și web2! Și apoi vom vorbi despre procesul de învățare a unei biblioteci de stiluri de design web. Deci sa începem…
Această postare este Ziua 8 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii de ședință" Ziua 9 "Așa cum reamintiți din tutorialul nostru original, design-ul site-ului arată astfel:
Este un design cu aspect uluitor, texturate, bazat pe o structură simplă, solidă, subiacentă. Ceea ce vom face este să luăm acel aspect care stau la baza și să îl tratăm ca un coautor, schimbând stiluri diferite și uitându-ne la ce funcționează fiecare aspect.
În fiecare stil există o mulțime de variații, dar aici sunt câteva semne de caractere ale unui aspect uluitor:
Un design relativ curat căsătorit cu unele elemente grungy - hârtie, texturi.
Viziteaza site-ul
Textul de plasare este dezactivat, elemente colaj și texturi.
Viziteaza site-ul
Un bun exemplu de aspect uluitor pus la ordonat utilizării într-o structură blog.
Viziteaza site-ul
O mulțime de Mai multe Exemple de toate lucrurile grungy!
Viziteaza site-ul
Primul nostru pas de proiectare este acela de a ne întoarce complet aspectul și de a scăpa de orice nu este esențial. Vrem să facem acest lucru astfel încât să avem un punct de plecare pentru celelalte modele, dar pe parcurs vom crea un fel de aspect minim.
Acestea sunt pașii care trebuie întreprinși:
Aici este versiunea noastră minimă:
Din toate privirile pe care le vom face astăzi, acesta este cel mai puțin potrivit pentru acest aspect - în special pentru zona cu tab-uri. Totuși, este o apropiere aproximativă ...
În fiecare stil există o mulțime de variații, dar aici sunt câteva semne ale unui aspect minimal:
Într-adevăr minimal cu o schemă de culori
Viziteaza site-ul
Tipografie minimă și linii curate, amestecate cu o linie de elemente de design / îndrăznețe îndrăznețe
Viziteaza site-ul
Minimal întâlnește Flash - și verificați portofoliul de lucru care include mai multe exemple de modele minime.
Viziteaza site-ul
Mai mult design minimal pentru a verifica afară
Viziteaza site-ul
Luând un aspect minim pe care tocmai l-am creat, putem adăuga acum un nou stil. De data aceasta vrem să facem un aspect metalic. Pentru asta avem nevoie de niște gri deschis, iar acestea arată în mod special minunat pe fundal întunecat.
Acestea sunt pașii care trebuie întreprinși:
Aici este versiunea noastră metalică:
Și iată câteva note:
În fiecare stil există o mulțime de variații, dar aici sunt câteva semne distinctive de aspect metalic:
Apple a folosit o bară metalică de top nav de ceva timp acum, cu mici teșite pe text, o pictogramă Apple încorporată și câteva alte efecte metalice.
Viziteaza site-ul
Lance este un maestru al designului interfeței Photoshop, verifică portofoliul său de interfețe metalice
Viziteaza site-ul
Un design metalic foarte subțire.
Viziteaza site-ul
O privire care este întotdeauna populară este să folosești un fundal abstract, o anumită transparență și o tipografie super curată. Deci, asta o să facem în continuare!
Deci, începând din nou de designul minim:
Iată versiunea noastră abstractă:
Iată câteva note despre design:
În fiecare stil există o mulțime de variații, dar aici sunt câteva semne distinctive ale acestui aspect:
Imagine de fundal uimitoare.
Viziteaza site-ul
Combină un fundal genial, cu straturi și secțiuni, pentru un efect grozav
Viziteaza site-ul
Ultima noastră oprire în stil este în terenul cliche'd al designului Web 2.0. Trebuie să recunosc că nu sunt chiar sigur de design-ul web2, dar am încercat să fac această versiune prietenoasă și accesibilă - ceea ce cred că este principala caracteristică a stilului.
Începând din nou cu designul minim:
Iată versiunea noastră Web 2.0:
Iată câteva note!
În fiecare stil există o mulțime de variații, dar aici sunt câteva semne distinctive ale unui aspect web 2.0:
Pentru mine, tipii ăștia au început cu adevărat o mulțime de ceea ce am asociat cu Web 2.0
Viziteaza site-ul
Îmi place tipul ăsta mic! Un design de ace de către SimpleBits.
Viziteaza site-ul
Un gradient super luminos face acest site.
Viziteaza site-ul
Deci, aici toți sunt, puteți face clic pe imaginea de mai jos pentru a le vedea la dimensiunea completă. De asemenea, dacă sunteți membru Plus, puteți să luați toate cele cinci fișiere PSD din zona Plus.
Deci, să fim sinceri, cele cinci planuri nu sunt în mod necesar exemple deosebit de bune ale stilurilor lor respective. Scopul meu mai degrabă în acest tutorial este să vă arăt cum vă puteți da un design un anumit aspect sau stil, urmând anumite indicații vizuale. Ar trebui să puteți observa că puteți să vă îmbracați același aspect în moduri diferite.
Pentru a produce cu adevărat un exemplu extraordinar al unui anumit stil de design, probabil că veți schimba aspectul dvs. mai exact pentru a se potrivi acelui stil. Și bineînțeles, toți aveau nevoie de mult mai mult timp decât am avut :-) Totuși, sper că această schimbare de stiluri ilustrează modul în care poți începe să te uiți la modelele web pentru a învăța diferite stiluri de design.
În articolul nostru precedent - 8 idei, tehnici și trucuri pentru Toolkit-ul dvs. de Web Design, am menționat că este o idee bună să aveți o bibliotecă de stiluri care să se bazeze pe.
Când desenați o martor atunci când începeți un nou proiect, poate fi uneori bun doar să vă întoarceți la o alegere stilistică predefinită și apoi lăsați-o să vă ghideze. În mod inevitabil, veți termina cu ceva total diferit de tot ceea ce ați proiectat înainte și cel puțin vă va ajuta să începeți. Dar fiți foarte precauți să folosiți stilul greșit doar pentru că arată foarte bine și nu pentru că este potrivit pentru client / mesaj / conținut. Singurul antidot de a face acest lucru este de a cunoaște și de a avea o mulțime de stiluri de design diferite.
În acest articol am analizat pe scurt cinci modele sau stiluri și există milioane de stiluri, subtiluri, combinații, adaptări și arăți care doar sfidează stilul împreună.
Singura modalitate reală de a învăța stilurile de design este să le privești. Acum se uită și apoi există in cautarea! O persoană obișnuită se va uita, de obicei, la un site web, un poster sau alt tip de design și doar va vedea conținutul, mesajul și poate simțirea designului. Ca designer trebuie să te uiți la totul într-un mod analitic, uite să vezi de ce un design are un anumit simt, ce mesaj dă designul însuși, ce fonturi au fost folosite, ce elemente și tehnici vizuale pe care designerul le-a folosit, cum au fost combinate și cum au fost aranjate.
Ar trebui să vă uitați întotdeauna la design - nu doar online, ci peste tot - deoarece stilurile de design nu se limitează la site-uri web. Postere, anunțuri, credite de televiziune, pliante și oriunde există design, există o oportunitate de a învăța.
Cu cât te uiți mai mult și înveți, cu atât vei avea mai mult la comanda ta. Când vă așezați să creați un nou proiect, veți putea să dezvoltați noi idei vizuale chiar și atunci când vă veți confrunta cu o pânză neagră. Când vi se dau materiale sau mărci de design, lucruri precum fonturi, logo-uri și mesaje vor declanșa alegeri stilistice ca indiciile unui mister.
Când utilizați stilurile pe care le-ați văzut înainte, trebuie să vă străduiți întotdeauna să lăsați vocea proprie de design să fie auzită. Dă-i propriul tău spin, ești propriul amestec sau look special, astfel încât vocea ta de proiectare să fie ascultată. Și mereu, întotdeauna, asigurați-vă că aplicați un design care se potrivește și îmbunătățește mesajul - nu intră în capcana gândirii doar la estetică.
Amintiți-vă că forma urmează funcția. Stilul și alegerile estetice pe care le faceți sunt pentru a ajuta site-ul să-și îndeplinească funcția.
Această postare este Ziua 8 a Sesiunii noastre de Web Design. Sesiuni de creație "Ziua sesiunii de ședință" Ziua 9 "
Accentsconagua