Tiparul de tip Z este o metoda grozava pentru a incepe orice proiect web fiindca acesta se axeaza pe elementele de baza a oricarui website:brand, ierarhie, structura, un buton pentru a convinge utilizatorul in legatura cu ceva.Chiar daca tiparul Z nu ar fi alegrea perfecta pentru orice website, cu siguranta este un sablon efectiv care ar trebui sa exista in arsenalul oricarui webmaster.
Tine minte ca o intelegere mai buna a acestor sabloane de design poate influenta experienta unui user pe website!
Da este adevarat!Experienta unui user se poate schimba de la un website la altul!In ce sens?Un design ce se bazeaza pe un sablon Z va concentra atentia utilizatorului pe anumite portiuni ale unui website.Acest tutorial marcheaza a doua parte dintr-o serie de tutoriale in care am analizat o varietate larga de paradigme ce exista in web design.In tutorialul anterior ne-am uitat la designul de tip F si am vazut ca este recomandat pentru bloguri.
Introducere in designul de tip Z
Premisa in designul de tip Z este foarte simpla:imagineaza-ti litera Z marita si plaseaza pentru un design.Pune ce vrei sa vada prima oara vizitatorii in partea superioara a literei Z.Ei apoi instictiv vor urma acel tipar, asa ca la final de obicei e bine sa adaugi un buton mare(Cumpara, Inscrie-te etc.)Pe tot parcursul cararii poti adauga mici bucatele de informatii care sa conduca la final la buton sau concluzie.
Uita-te la numarul de puncte de mai sus.Punctele de mai sus sunt locurile cheie unde vizitatorii isi vor indrepta atentia.
Iar acum transpus intr-un design:
Acum sa suprapunem diagrama peste design si sa vedem ce obtinem!
Nu-i greu, asa-i?Dupa cum vezi nu este nimic complicat la acest design, dar misca rapid si eficient ochiul de la 1 la 4 intr-o ordine logica, terminandu-se cu butonul Sign Up Now.Totusi, o sa mai adaugam cateva artificii de design pentru a-i oferi un plus de frumusete.
- Un fundal pentru a concentra atentia vizitatorului in continutul designului nostru
- Un logo atractiv pentru a atrage atentia in punctul 1
- Un buton Sign Up colorat pentru a atrage atentia la punctul 2
- Un slider de imagini amplasat in centru pentru a separa antetul de partea de jos, dar si pentru a facilita o deplasare mai buna a ochiului
- Cateva informatii si imagini in punctul 3 ce vor facilitat citirea titlurilor pana cand vizitatorul ajunge la marele buton Sign Up Now.
- Cu ajutorul fundalului, acum acest buton iese in evidenta
Acum vedeti ca noul buton Sign Up din navigatie iese mai mult in evidenta, sliderul avand rol de centrare a atentiei utilizatorului inauntrul continutului.Micile imagini din continut au un mic efect, dar poti adauga cate layere doresti in proiectele tale.totusi, nu uita cat de puternic poate fi un website simplu si concis.
De ce este eficient?
Este eficient fiindca, cum am spus si mai spus, acopera 4 din lucrurile principale din web design.
- Branding
- Ierarhie
- Structura
- Un buton pentru a convinge in legatura cu ceva
Merge fiindca majoriatea cititorilor din Occident vor scana site-ul ca pe o carte>de sus in jos, de la stanga la dreapta.De la aceasta fundatie simpla poti sa faci practic orice!Poti sa modifici inaltimea z-ului, sa adaugi mai mult continut sau butoane etc.Mai jos o sa ne uitam la cateva exemple de website-uri ce folosesc acest tipar.Totusi, ca o nota, vreau sa va aduc aminte ca Z-ul este variabil.Unii poate nu vor dori sa pune la final un buton cu „Sign Up” ci poate un link catre un portofoliu, un magazin online etc.Daca vei observa tiparul de tip Z in website-uri o sa iti dai seama ca este ca 1, 2, 3 Actiune!Incearca sa gasesti tiparul si sa te gandesti cum ar putea influenta pe vizitatorii website-ului.
In EverNote designul de tip Z se termina cu butonul Download Now.
Aici designul de tip Z de termina cu butonul Get in Touch!
In Code Monkey Z-ul se termina cu buronul Get Started!
Este mai greu sa observi aici tiparul de tip Z, dar aceasta creeaza de fapt tot website-ul.
Exemplul acesta se termina cu butonul mare si tipator „Starting at 750$”.
Poate cel mai usor de reperat, aici fiind lovite toate punctele.
Este important de stiut ca designul de tip Z nu este singura pandigrama de pe net.Citeste si Designul de tip F ca sa vezi diferentele dintre cele doua tipare.Designul de tip Z este poate si unul din cele mai utilizate, fiindca este la baza usor de inteles si folosit.Totusi, in unele cazuri acest tipar nu mai este recomandat, ca de exmplu la unele bloguri, unde adminul nu vrea sa prezinte un produs sau sa te convinga sa faci ceva.
Netinand cont de orice structura in web design, utilizatorii isi vor indrepta atentia de cele mai multe ori spre cele mai stralucitoare si indraznete parti ale unui website.
Tiparul de tip Z va merge cel mai bine pe website-uri simple, unde vrei sa adaugi ordine si claritate in design, dar intr-un design complicat acest tipar s-ar putea impotmoli.