Conţinutul principal
Curs: Programarea calculatoarelor > Unitatea 3
Lecția 9: Mai departeDesign de pagini web
Până acum ți-am arătat cum să faci pagini web, dar nu ți-am arătat cu să faci pagini web care să arate bine. Desigur, frumusețea este în ochii privitorului, așa că depinde de tine—și de utilizatorii tăi—să decizi dacă pagina ta arată sau nu bine. Totuși, îți putem da câteva trucuri și indicii!
Mai mult decât să arate bine, probabil că îți dorești ca paginile tale să fie originale, astfel încât utilizatorii să le rețină.
Adesea, aceasta reprezintă o sarcină grea—să îți faci pagina să arate bine dar să fie și originală. Ai putea să o faci remarcabilă umplându întregul spațiu cu dungi și folosind un font de 64 pixeli, dar rezultatul va fi unul încântător? Probabil că nu.
Alegerea fonturilor potrivite
În mod implicit, browser-ele pun la dispoziția paginilor web fonturi din familia generică serif, care tind să ofere un aspect formal. Te-ai putea gândi să schimbi la fonturi sans-serif sau la fonturi care se găsesc pe majoritatea calculatoarelor, ca de exemplu Garamond sau Helvetica.
Pentru a-i da paginii tale un aspect original, ai putea să folosești un font personalizat. De exemplu, Khan Academy folosește Lato în toate paginile sale, un font drăguți de tip sans-serif:
Când folosești un font web, de fapt pui browser-ul să descarce un fișier font pe calculatorul utilizatorului astfel încât să poți face referire la acel fișier din CSS. Fiind o descărcare suplimentară, nu ar trebui să exagerezi cu prea multe și nici nu ar trebui să incluzi ceva ce nu intenționezi să folosești. O sursă grozavă pentru fonturi web gratuite este Google Web Fonts. Vezi această pagină web în care Khan cademy folosește două Google Web Fonts.
Indiferent de unde iei fonturile, ai grijă să nu supraîncarci cu fonturi. În general, nu ar trebui să folosești mai mult de două sau trei familii de fonturi pe o pagină, iar ele ar trebui să se asorteze bine. Iată un site de ajutor care îți dă exemple bune de combinare a unor Google Web Fonts.
Alegerea culorilor potrivite
La proiectarea unei pagini web, sigur dorești să folosești o paletă de culori—o gamă de culori care se asortează și care pot fi folosite pentru diverse părți ale paginii tale. Aceste culori pot fi alese din culorile logo-ului companiei tale, pot fi corelate cu tema paginii sau pot pur și simplu să arate bine împreună.
Ai nevoie de ajutor pentru a alege o paletă? Dacă deja știi câteva culori pe care ai vrea să se bazeze paleta, ai putea să te uiți la Paletton, un instrument care îți permite să vizualizezi diverse tipuri de palete: monocromatică, triadă, culori adiacente și tetradă.
Dacă începi de la zero, ai putea să navighezi după palete la COLOURLovers, o comunitate de oameni care iubesc culorile și care vin cu idei legate de culori, palete, șabloane. Iată o paletă numită Giant Goldfish:
După ce ai ales o paletă de culori, ai ajuns la partea grea: să identifici ce culorare aplici fiecărei părți a paginii tale. Ce culoare ar trebui să aibă antetul? Link-urile? Fundalul? Ceea ce este extraordinar la Paletton - faptul că ei îți dau câte un exemplu de pagină pentru fiecare paletă:
Atunci când te decizi cum vei transpune paleta în CSS, ia în considerare câteva lucruri:
- Dacă schimbi prea mult stilul link-urilor față de cel implicit, utilizatorii ar putea să nu își mai dea seama că sunt link-uri.
- Culorile pentru scris/fundal ar trebui să fie suficient de contrastante încât utilizatorii să nu fie nevoiți să forțeze privirea. Verifică-ți culorile cu acest verificator de contrast.
- Mulți oameni nu disting culorile. Unele combinații de culori nu sunt suficient de contrastante pentru aceștia. Verifică-ți culorile cu acest simulator de vizibilitate.
Dacă nu știi sigur cum să folosești paleta de culori, trimite-le-o câtorva prieteni și cere-le părerea sinceră Pot ei să citească orice? Își dau ei seama pe ce ar trebui să dea clic? Îi fac culorile să strâmbe din nas? Care culori le plac?
Folosirea corespunzătoare a paginilor
Odată, mi-am întrebat un coleg—care acum este designer la Google—despre secretul lui de a crea un design minunat. Știi ce mi-a răspuns? Spațiile albe!
Spațiile albe înseamnă orice spațiu liber între elemente, iar în contextul CSS provine din proprietăți precum padding, margin și line-weight.
Prietenul meu are dreptate—spațiile libere pot avea un impact major în estetica paginii și a lizibilității. De obicei, prietenii mei designeri petrec ore î șir discutând despre spații libere care trebuie lăsate, deoarece ei știu cât de importante sunt acestea.
Pentru un exemplu relevant, iată o comparație a barei laterale din cursul nostru, cu și fără spații:
Ce îți spune ție? Este greu de precizat niște reguli clare și rapide despre spații; dar ai grijă la ele. Ori de câte ori ai două elemente alăturate, gândește-te cât de mult spațiu lași între ele. Dacă ai un element cu fundal sau bordură, gândește-te ce valoare stabilești la padding. Când creezi paragrafe și liste, gândește-te dacă niște spațiu suplimentar între linii nu le-ar face să arate mai bine.
Lucrul cu șabloane și cadre
Poate te simți intimidat după ce ai citit toate aceste sfaturi, mai ales dacă nu te consideri un bun designer. Nu te îngrijora, pentru că nu trebuie neapărat să fii un expert în design pentru ca pagina ta să arate bine. În schimb, ai putea începe cu un șablon sau cadru ca să beneficiezi de avantajele efortului depus de alți designeri în crearea acestora.
Un șablon este un HTML sau CSS care deja arată ca o pagină web completă, umplută cu un conținut fals. Poți găsi șabloane la W3Schools sau căutând pe web după "șabloane de pagini web gratuite"—și sperăm că vei găsi ceva care chiar este gratuit! După ce descarci un șablon, poți să înlocuiești conținutul și să continui să modifici CSS-ul astfel încât să fii mulțumit cu rezultatul.
Un cadru CSS este o colecție de reguli CSS care îți oferă un început pentru un site bine făcut. Există multe cadre CSS populare care îți vor face viața mai ușoară în crearea unui site web frumos stilizat—Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat și altele. Poți să verifici exemplele noastre Twitter Bootstrap și ZURB foundation aici pe Khan Academy.
După ce descarci un cadru CSS, poți să răsfoiești documentația pentru a găsi exemple—adesea, ei oferă și șabloane!—ca să îți dai seama care nume de clase CSS se potrivesc pentru ce ai tu nevoie.
Când folosești șabloane sau cadre, riști ca site-ul tău să arate exact la fel ca un alt site, ceea ce aduce riscul ca site-ul tău să nu îi rămână în minte utilizatorului. Pentru a evita asta, adaugă propriul tău logo și schimbă câteva elemente cheie precum familia de fonturi sau culoarea de fundal.
Vrei să te alături conversației?
Nici o postare încă.