Share
Bine ați venit la cea de-a opta lecție a seriei noastre Web Design pentru copii, "Bazele de proiectare"!
De-a lungul acestei serii ne-am concentrat pe a aduce un design la viață, dar nu am vorbit încă despre deciziile care au intrat în acest design pentru a începe cu. În acest tutorial vom trece prin câteva dintre cele de bază concepte de proiectare care fac parte din crearea unui site bun.
Nu uitați să puneți întrebări în secțiunea de comentarii din partea de jos a acestei pagini!
Altceva despre care am vorbit mult despre pînă acum este utilizator (sau vizitator). Fiecare decizie pe care o facem în designul web și în fiecare concept de design despre care vorbim în acest tutorial are tot același scop: de a face site-ul să fie cât mai ușor de utilizat și de înțeles posibil.
Acest utilizator este fericit?Designul vizează rezolvarea problemelor. Dacă utilizatorii noștri consideră că este greu să folosească site-ul nostru, ei vor pleca pur și simplu. Este de datoria noastră să scăpăm de orice dificultăți pentru ei, să le facem ușor să citiți și să le oferim o experiență super-plăcută. Deciziile noastre implică lucruri precum conținut, organizare, aspect, spațiu gol, grafică, culoare și tipografie.
Conţinut este cea mai importantă parte a web design-ului. Nu va contează cu adevărat cât de frumos arată site-ul nostru dacă nu avem conținut pe care utilizatorii doresc să îl citească. Un lucru pe care ni-l putem pune atunci cand dorim sa construim un site este "Oamenii au nevoie de asta?" Si daca da, "Ce informatii sunt esenţial?“.
Poate fi tentant să includeți cât mai mult conținut pe un site web. Curățarea și micșorarea conținutului vor ajuta de fapt utilizatorul să obțină mai multe informații în final, deoarece ceea ce este important nu se va pierde pe pagină.
După ce ne pregătim conținutul, trebuie să îl organizăm în categorii sau în grupuri relevante, astfel încât utilizatorul să găsească totul fără probleme.
Cel mai bun site web va curge foarte natural și va fi sigur că utilizatorul nu trebuie să se gândească prea mult despre unde ar putea fi ceva.
Site-ul web Tuts + Town nu are o mulțime de conținut, așa că am reușit să centrăm totul și să evidențiem imaginile minunate ale noastre. Dacă vom avea mai mult text pe site, cu toate acestea, acest aspect ar putea să nu funcționeze la fel de bine.
Pentru a vă asigura că site-ul nostru este ușor de navigat și plăcut pentru utilizator, trebuie să ne gândim la acesta arata si simti. Aici se găsesc imagini, ierarhie (clarificând cât de important este totul, în comparație cu orice altceva), tipografie și culoare.
În acest moment știm totul despre utilizarea imaginilor pe un site web. Am inclus patru imagini pe site-ul nostru Tuts + Town și am trecut prin diferitele tipuri de imagini pe care le putem folosi pe web într-un tutorial anterior.
Cand și unde să folosești aceste imagini și grafică este de asemenea important să te gândești. Toate imaginile incluse pe site-ul nostru din Tuts + Town au avut sens lângă conținutul la care au fost plasate. De exemplu, site-ul nostru este despre Tuts + Town, deci avem o imagine clară chiar în partea de sus a unei clădiri importante din orașul nostru. Cele trei imagini care urmează să fie urmate de aceasta sunt legate de grupurile de întreprinderi de lângă acestea: hoteluri, restaurante și cumpărături generale.
Am folosit aceste imagini pentru a oferi utilizatorului un sentiment mai bun simți a orașului, precum și cum ar fi cumpărăturile în clădirile noastre frumoase. Este important să nu atragem atenția unui utilizator asupra unei imagini care nu are nimic de-a face cu conținutul real.
Pictogramele sunt grafice mici pe care sunt folosite reprezinta ceva.
O pictogramă bună este bine înțeleasă și poate face găsirea unor biți de informații importante pe un site mult mai rapid.
Iată câteva exemple de icoane deosebit de utile:
Știți ce înseamnă probabil aceste icoane?Există atât de multe lucruri pe care le putem comunica fără a folosi textul și folosirea icoanelor în locul textului în situația potrivită ne va oferi un site mai curat și mai ușor de utilizat.
Ierarhia vizuală vizează alegerea a ceea ce se evidențiază și a arăta relația dintre informații. Ierarhia părților unui site web poate fi arătată printr-o serie de opțiuni diferite de stil, cum ar fi: culoarea, dimensiunea, utilizarea spațiului gol și poziționarea. Toate aceste opțiuni vă vor ajuta să spuneți utilizatorului ceea ce este foarte important, ceea ce nu este la fel de important și ce informații sunt legate.
Ierarhia nu este arătată numai prin dimensiunea textului și imaginilor noastre, ci și prin distanța dintre ele. Conținutul similar ar trebui grupat aproape împreună și distanțat de conținutul care nu are legătură.
Această imagine a cerului Tuts + Town a fost proiectată pentru a se asigura că balonul atrage mai întâi atenția spectatorului, urmată de nori. Orice altceva în imagini a fost făcut mai puțin clar pentru a vă asigura că balonul și norii stau mai mult.
Imaginea de mai sus arată o schimbare în ceea ce ne concentrăm mai întâi. Crezi că vezi norii de data asta, apoi balonul?
Se întâmplă multe în această imagine și nu suntem siguri de unde să ne uităm mai întâi. Nu există schimbare de culoare, nici o organizație și nici o distanțare care să ne spună ce este important, ceea ce face puțin greu de urmat.
Spațiul alb este spațiul gol de pe un site; nu avea pentru a fi alb, totuși! Sunt acele locuri unde nu există text și nici imagini. În cazul în care alegem să avem acest spațiu gol este cu adevărat important, deoarece determină ce părți ale unui site apar și cât de bine putem citi conținutul.
Imaginea de mai sus este un exemplu de site care nu folosește spațiul alb. Există o mulțime de conținut și imagini și nu suficient spațiu între ele pentru a ne arăta ceea ce este cel mai important.
Să vedem dacă putem curăța asta!
Mult mai bine. Am aruncat niște conținuturi neesențiale și am creat un ierarhie cu mult mai mult spațiu și o organizare mai bună, ceea ce face mai ușor de citit.
Spațiul liber pe care l-am folosit pe site-ul nostru din Tuts + Town este de fapt galben deschis.
Avem locuri mari de spațiu gol în dreapta și la stânga paginii, precum și între imagini. Acest spațiu ajută la evidențierea conținutului nostru, asigurându-ne că nimic nu este prea aglomerat.
Tine minte! Este la fel de important să te gândești la ce e nu pe site ca fiind ceea ce este, și asta este locul în care spații libere intră în joc.
Tipografia și culoarea sunt atât de importante pentru designul web, încât vor avea propriile tutoriale să o urmeze, așa că le vom contacta rapid aici.
Tipografia este arta selectării și aranjării tipului într-un mod care îl face cât mai atrăgător și mai lizibil posibil. În timp ce site-ul nostru Tuts + Town nu are prea mult text, a existat, de fapt, o mulțime de gândire care a intrat în alegerea fontului și aranjarea acestuia.
Alegerea culorilor este, de asemenea, o parte foarte puternică a designului. Culorile au sens și pot ajuta utilizatorii să aibă anumite sentimente legate de o marcă sau de un site. Culorile orașului Tuts + contribuie la crearea unei simțuri plăcute și plăcute pentru orașul nostru.
Dar, din nou, vom vorbi mult mai repede despre aceste lucruri!
În acest tutorial am atins câteva concepte de design foarte importante. După ce avem gata de conținut, trebuie să prezentăm acest conținut utilizatorului nostru în modul cel mai ușor, cât mai ordonat posibil.
Design-ul este vorba despre a face lucrurile ușor și plăcut pentru oameni. Am realizat acest lucru cu site-ul nostru Tuts + Town prin aspect, imagini, culoare și spații.
În continuare vom discuta tipografie, arta de selecție și aranjare de tip; una dintre cele mai interesante și distractive părți ale designului.
Ne vedem în jurul orașului!
Accentsconagua