Elemente de Web Design Mare polonez

Când am pus împreună modele, eu de obicei o fac în două faze - Aspect și polonez. În timpul fazei de aranjare, așezăm obiectele principale pe pagină, de obicei terminând cu ceva care pare relativ complet. În cea de-a doua etapă - poloneză - mă duc peste design și ajustează culorile, tratamentele de tip, umbrele, straturile și, în general, curățesc totul. În această primă serie de tutoriale privind designul web, vom examina polonezii.

O scurtă prefață

Spre deosebire de efectele Photoshop, designul web nu poate fi învățat cu adevărat într-un set de pași ușor de repetat. Dacă vă uitați la cele mai bune modele web, nu este dificil de reprodus tehnic. Probabil ați putea să capturați un desen, să îl puneți în Photoshop și apoi să replicați același strat de design pe strat. Trucul, cu toate acestea, vine cu acest design, în primul rând.

Din acest motiv, în aceste tutoriale pe Web design am de gând să încerc câteva tehnici diferite pentru a transmite diferite aspecte ale procesului pe care eu personal trec prin proiectarea unui site Web.

Astăzi, ne uităm la un site pe care l-am pus împreună la începutul acestui an numit Not By The Hour, care este un subsite pentru un alt blog, numit FreelanceSwitch. Din fericire, când l-am proiectat cu luni în urmă, am păstrat o versiune a fișierului PSD înainte și după ce l-am lustruit, așa că, la fel ca într-o pierdere în greutate comercială, vom face un pic "înainte și după" ...

Înainte de a explica câteva dintre lucrurile pe care le-am făcut pentru a lustrui site-ul Web, este important să te uiți la înainte și după.

VIZUALIZAȚI ÎNAINTE ȘI DUPĂ

Pasul 1 - Claritate:

Mă veți auzi spunând din când în când, dar când proiectați pentru Web, este vorba despre pixeli. Unul dintre scopurile dvs. trebuie să fie mereu să păstrați lucrurile ascuțite și curate. Aceasta înseamnă, de exemplu:

Claritatea textului
Atunci când puneți un text, trebuie să vă gândiți la ce folosiți Anti-Aliasing. Pentru a face acest lucru, veți aduce panoul Caracter, pe care îl puteți face accesând fereastra> Caracter sau când aveți selectat tipul de instrument și textul evidențiat, apăsați Ctrl-T (da este aceeași comandă rapidă pentru transformare, deci trebuie să asigurați-vă că textul este selectat). În panoul Caracter, jos în partea dreaptă jos puteți alege între Nici una | Sharp | Crisp | Puternic. Pentru diferite fonturi și dimensiuni diferite, ar trebui să experimentați. Eu folosesc cea mai mare parte setarea Sharp care va forța câțiva pixeli să fie aliniate și, uneori, denaturează puțin fontul la setări mai mici. Dar, de exemplu, în imaginea de sub text Efectuarea este setat la ascuțit, motiv pentru care atunci când aplic un contur de 1px este foarte clar definit.
Căptuşeală
După cum puteți vedea între barele gri mai gri și gri mai închis, am adăugat o linie slab 1px. Acest truc mimează efectul filtrului de ascuțire. Dacă ați rulat vreodată unul dintre filtrele de ascuțit pe o fotografie veți observa că încep să apară mici frontiere. Acest lucru se datorează faptului că sublinierea frontierei face ca cele două părți să pară mai separate de ochi și, prin urmare, mai clare. De multe ori, voi folosi o linie slabă pentru a accentua granița și pentru a face ca cele două părți să pară mai clare.
Colorare
Culoarea poate avea, de asemenea, o mare diferență în ascuțirea lucrurilor. În acest caz, am desaturat fundalul dintr-un fel de culoare gri / verde până la gri pur. Acest lucru înseamnă că seiful, care are un ton verzui, se evidențiază mai mult din fundal și se învârte cu aspect mai strâns.
Curățarea obiectelor
Un alt lucru pe care nu l-am făcut în această imagine, dar pe care îl puteți face pentru a ascuți lucrurile este să treceți prin obiecte precum logo-ul sau siguranța și asigurați-vă că marginile sunt aliniate la pixeli. De exemplu, aruncați o privire la marginea din stânga a seifului în comparație cu marginea din dreapta. Veți vedea că marginea dreaptă pare puțin neclară. Am putea rezolva acest lucru folosind Tool Polygonal Lasso (L) și selectând o margine mică din partea dreaptă și lovind Delete. Desigur, acest lucru nu este esențial și nu vreau să-mi sun sufletul, dar este o idee bună să vă gândiți la aceste detalii și să vă asigurați că totul este frumos și clar!

Un alt element pentru a discuta aici este că pe text veți vedea un efect de gradient slab / accident vascular cerebral. Acest lucru se realizează cu două stiluri de straturi, un curs interior de 1px și un gradient subtil. Am folosit acest lucru aici, deoarece face parte din brandul FreelanceSwitch și este, de asemenea, destul de un fel de efect Web 2.0. Este cel mai bine realizat cu textul Sharp așa cum am menționat anterior. Puteți vedea stilurile de strat exact din exemplul PSD de mai jos.

Pasul 2 - Lumina și umbra:

Gradienți, Gradienți, Gradienți. Unii ar spune că acestea sunt semnul distinctiv al designului Web 2.0, și trebuie să recunosc că le folosesc constant în desenele mele. În imaginea de mai jos, veți vedea că am adăugat umbre și înclinări în câteva locuri diferite pentru a da designului mai multă profunzime.

Una dintre principalele diferențe dintre imprimare și designul web, în opinia mea, este cantitatea de adâncime de care aveți nevoie în designul dvs. Ceea ce vreau să spun este că în designul tipărit, dacă aveați o broșură acoperită cu o culoare dreaptă și plată, de multe ori va părea încântătoare din cauza hârtiei sau a celulozelor care ar putea fi aplicate și a reacției de lumină la acea hârtie / acoperire. Deci, în "design" ar putea arăta ca o culoare plată simplu, dar în producția va avea adâncime, totuși. Pe ecran nu aveți acest efect.

Acest lucru nu înseamnă că nu aveți fundații plate sau panouri de culoare în designul web, totuși, toți designerii de imprimare pe care i-am creat vreodată pentru a crea site-uri Web, cele mai frecvente două erori pe care le-am observat sunt

Nu se concentrează pe claritatea și claritatea designului
În imprimare, faceți zoom-ul rar pentru a modifica pixelii individuali, de când se imprimă ceva, acel nivel de detaliu va scăpa adesea din ochi oricum. Crezi că în milimetri nu pixeli.
Nu reușesc să adauge indicații de adâncime și un interes vizual suficient
În general, gradienții nu funcționează atât de bine în imprimare, dar pe ecran funcționează un tratament. În mod similar, adăugarea umbrelor slabe și a evidențierilor funcționează bine pe ecran. Împreună pot face un site mult mai atrăgător din punct de vedere vizual, pe măsură ce diferitele elemente de pe ecran se joacă unul împotriva celuilalt. În imaginea de mai jos, de exemplu, pungile de bani, care au fost inițial imagini vectoriale drepte cu colorare plată, au primit graduări foarte subtile folosind Burn Tool (O), astfel încât acestea arătau mai moi.

Pasul 3 - Precedere:

Precedenta este singurul aspect vizual cel mai important al designului informațional. Și întrucât Web design-ul se referă în mare măsură la modul în care vă prezentați și prezentați informații utilizatorilor dvs., prioritatea este, prin urmare, de cea mai mare importanță.

Ce vreau să spun prin prioritate? Ei bine, când te uiți la pagină trebuie să te întrebi pe tine, la ce mă uit la început, la ce urmează, la ce urmează, și așa mai departe. Și de ce te uiți la anumite lucruri într-o anumită ordine?

Prioritatea vizuală este un amestec de factori:

mărimea
Este evident că ceva mare va avea prioritate față de ceva mic. Prin urmare, în acest design, titlul principal și cel principal au prioritate de vârf. Când privești pagina, primul lucru pe care îl observați sunt acele două elemente.
Culoare
Culoarea creează, de asemenea, precedență. De exemplu, în imaginea Înainte, veți vedea că subtitrările din zona marcată cu 4 din acea imagine de mai jos au fost inițial aceleași în albastru închis cu cuvintele Bună! Aceasta a însemnat că există o diferență mai mică între cele două și nu era atât de clară care trebuia să fie citită mai întâi. Îndepărtându-le înapoi la un bej, li se acordă o importanță mai mică și este mai evident că ele au o importanță mai mică în ierarhia de informații.
Culoare de fundal
Cu atât culoarea de fundal, cât și culoarea în general, lucrurile importante nu sunt atât de multe lucruri specifice culorilor, cât și de ceea ce culorizează totul altceva în relație. De exemplu, dacă totul este neagră pe o pagină și există un obiect alb, evident că obiectul alb va sări spre tine. În acest caz, prin contrastul galben strălucitor cu griul închis se accentuează. Deci, chiar dacă primul lucru pe pagina pe care o vedeți ar putea fi sigur și cuvintele Efectuarea unui venit pasiv, probabil veți observa Un ghid pentru următor, și Partea 1 Partea 2... navigare secunde. Acest lucru este în scop, deoarece vreau ca utilizatorul să vadă mai întâi o imagine vizuală și un titlu, astfel încât să știe ce privește, apoi vreau să vadă navigarea primară pentru a înțelege cum se poate ajunge în jurul site-ului.
Poziţie
În cele din urmă, poziția în structură face de asemenea o diferență în modul în care sunt percepute elementele. După cum probabil ați auzit, studiile arată că ochiul utilizatorului merge de la stânga sus la dreapta în jos, în unele variante (am văzut ambele studii care spun că merge la stânga sus în dreapta sus și apoi la stânga jos în dreapta jos și, alternativ, că se duce într-un fel de arc de la colț la colț.) Lucrul important aici este faptul că având ceva mai sus, de obicei, dă mai multă prioritate, și având ceva ce mai rămâne, de obicei, dă ceva mai multă prioritate.

Pasul 4:

Am mai spus-o, o voi spune din nou ... E vorba de pixeli!

În această imagine, veți vedea ceea ce pare a fi un gradient destul de simplu. De fapt, există trei gradienți desenate și trei linii de 1 pixel folosite. Este destul de subtil și, fără îndoială, nu face acea diferență, dar, în opinia mea, fiecare detaliu contează spre sfârșit.

Pasul 5:

Cineva din comentarii a întrebat despre tipurile de stiluri Web 2.0. Iată un efect simplu în care dați un contur de 1 sau 2 pixeli și apoi un gradient slab pentru un fundal. Dacă nu ați fi observat deja deja, veți începe să realizați că este peste tot, posibil puțin mai mult, dar oricum frumos.

Pasul 6:

În această imagine, puteți vedea cum uneori, în timpul polonei, puteți schimba chiar și informațiile reale din pagină. În acest caz, am hotărât că, deși era mai bogat din punct de vedere informațional, având toate titlurile pentru diferitele părți aflate sub buzunarele banilor, părea atât de murdar încât nu credeam că este foarte informativ - deși acest lucru este oarecum discutabil. Deci, am eliminat excesul de maroniu pe textul maro și l-am înlocuit cu un galben îndrăzneț, pe gri închis, care, din cauza contrastului, scapă.

Și acolo aveți!

Deci, există primul meu tutorial de design web. Vă rugăm să anunțați-mă în comentarii, dacă acest lucru este informativ. Este o provocare explicând designul web! De asemenea, țineți cont de faptul că stilul meu de web design este bineînțeles gustul meu, mai ales că eu sunt clientul meu în 99% din proiectele pe care le fac în zilele noastre :-)

Data viitoare când am un site Web pentru a proiecta, plănuiesc să înregistrez totul cu un program de captare a ecranului, apoi să-l accelerez în câteva minute. Deci, puteți aștepta la asta! Cred ca va fi destul de cool, desi sunt putin nervos deoarece, ca toti designerii, in cateva zile este usor, iar cateva zile este o foaie goala in interior.

Oricare ar fi speranța că te-ai bucurat de tutorial. Dați-i un Digg dacă ați făcut-o!

Sample PSD

O notă rapidă despre acest PSD, nu am etichetat nici unul dintre straturi sau le-am grupat. Acest lucru este chiar literalmente PSD-ul pe care l-am construit site-ul de pe care am zip pentru a vă uita prin. Designul și conținutul PSD sunt furnizate pur pentru scopuri instructive. Drepturile de autor pentru proiectare și ilustrații revin proprietarilor respectivi. Nu folosiți elemente ale designului în altă parte.

Descărcați PSD pentru acest tutorial

Design & Illustration