Aspectul Header-ului | Coperta siteului

Ce este si ce reprezinta un header?

Header-ul este primul lucru care este vazut de catre vizitatorii unui site. Este practic coperta (antet) care transmite prima emotie, primul lucru cu care interactioneaza cu internautul.

Proverbul care spune „Nu judeca cartea dupa coperta.” probabil ca nu se refera si la site-uri, pentru ca majoritatea oamenilor judeca dupa header. Iar din acest motiv se pune o foarte mare atentie si importanta asupra continutului din header. Este punctul in care vizitatorul decide daca merge mai departe sau nu.

Dex: JUDECÁ, júdec, vb. I. 1. Tranz. A-și forma o opinie despre cineva sau ceva, examinând argumentele, luând în considerare împrejurările, urmările etc.;

Un HEADER bine configurat consta din:

Sectiunea meniului care poate sa contina urmatoarele:

• Logo
• Meniu
• Bara de cautare
• Butoane Social Media

Sectiunea de sub meniu care ar trebui sa contina urmatoarele:

• Imagine
• Titlu
• Descriere
• Buton Call-to-action

Exemplu:

In continuare ne vom concentra asupra elementului la care sa greseste cel mai mult si anume

IMAGINEA DIN HEADER:

Marime

In primul rand imaginea pe care o alegem trebuie sa fie cel putin de 2MP (megapixeli), asta inseamna o latime de 1600 pixeli.
Recomandat ar fi 1920 pixeli pentru monitoarele FullHD, asta in cazul in care folosim stilul full-width (care permite elementelor sa fie afisate pe toata latimea ecranului de browser.

Claritate

Imaginile alese trebuie sa fie clare si de o calitate modesta, asta daca nu vrem sa folosim overlay-uri (filtre de culoare) sau alte efecte cum ar fi Gaussian Blur-ul cu care putem camufla imaginile insufucient de mari sau clare. Este important sa nu ne lasam pacaliti de imaginile marite la o anumita rezolutie dar ele fiind defapt mici. Cum facem asta ?
Marim imaginea la 100% sau pe tot ecranul si judecam „ochi-metric” daca imaginea este clara.
Asta conteaza mai mult decat densitatea imaginii in pixeli pentru ca de ex. o imagine de 800px latime se poate mari chiar si proportional(fara sa o intindem) la 1920px dar asta inseamna ca sursa practit este aceeasi, doar marita vizual, ca si cand te-ai apropia de monitor si incepi sa vezi pixelii din care este construita o imagine.

Editare

Este posibil sa avem resurse insuficiente. In cazul acesta putem sa folosim un program de editare grafica cum ar fi Photoshop cu care prelucram imaginea punandu-i un efect de ceata(Blur) cu care estompam pixelii.

Celelalte pagini

Pe home-page de obicei folosim o imagine destul de inalta, peste 500 pixeli inaltime ca sa transmitem o emotie, sentiment, impresie impreuna cu un mesaj si un buton „call to action”. Pe de alta parte la celelalte pagini este recomandat sa folosim imagini de o inaltime mult mai mica, eventual 200px si full-width astfel cream doar o linie intraductiva.

Optimizare

Dupa ce alegem si prelucram imaginea este important sa o optimizam pentru web si sa evitam incarcarea sitului cu imagini mari ca si dimensiune in MB (megabiti).

Viziune UX

Pe de alta parte trebuie sa alegem imaginile cu multa grija deoarece acestea sunt directionate catre vizitator (oameni) si urmeaza sa transmita o stare si sa interactioneze cu ei. Negativ sau pozitiv ar fi optiunile la un nivel binar, foarte simplu. Dar este defapt mult mai variat la un nivel uman. Astfel o metoda buna ar fi sa ne punem in locul vizitatorului si sa dam atentie propriilor noastre asteptari. Ce am dori sa vedem? Cat de detaliat? Cat de colorat? Cat de clar? Cat de mare? Vezi si articolur Viziunea UX de la Baboon.

Speram ca v-am ajutat sa intelegeti importanta headerului si stam la dispozitia dvs. pentru orice nelamurire in sectiunea de comentarii. Multumim!