Anatomia unei pagini web

Care este anatomia unei pagini web 

Daca reusim sa cunoastem elementele individuale ale unei pagini web, o putem structura mai bine si ne ajuta si in procesul de design si creatie. Structura unei pagini te ajuta mai ales daca esti la inceputurile programarii web si ale design-ului web.

Fiecare pagina are urmatoarele parti:

Antet

Nu exista un inceput mai bun decat antetul care este prima parte a unei pagini web. Foarte multe site-uri au in antet date de contact, meniuri si un logo sau titlul site-ului impreuna cu un slogan. Alte elemente care se mai regasesc in atent ar putea fi slidere, meniul de limbi si meniul profilelor sociale.

Unii dezvoltatori web aleg sa faca antetul lipicios, mai ales partea meniului principal. Asta inseamna ca navigatia site-ului te va urma indiferent cat de in jos vei rula site-ul. De obicei, antetul este un element identic global, asta inseamna ca este existent pe toate paginile si arata la fel. Daca apesi pe logo-ul site-ului, ar trebui sa fi redirectionat la prima pagina. De asemenea, printre elementele meniului principal se regasesc deseori pagini ca Acasa, Despre, Contact. Iar ca si elemente ale meniului secundar se gasesc diferite elemente in functie de scopul site-ului. Pentru site-urile de prezentare, putem gasi: Termeni si conditii, Politica cookies, Politica de confidentialitate. Pentru magazine online, avem un meniu in plus, care de obicei este cel secundar, dar in alte cazuri este al treilea meniu. Acesta contine elemente ca si Contul meu, Cos, Finalizare. Pe langa toate elementele amintite, si casuta de cautare isi mai are locul in antet. Uneori si un buton evidentiat cu un fundal diferit fata de celelalte elemente isi are locul tot in aceasta zona.

Partea de continut

Partea de continut poate fi impartita in mai multe coloane. Cele mai dese structuri pentru aceasta parte sunt cea in doua coloane si cea cu o coloana. In cea cu doua coloane, una este o bara laterala fie in stanga, fie in dreapta cu diferite piese. A doua coloana, reprezinta continutul paginii sau a articolului respectiv. In ceea cu o coloana, avem doar partea de continut, de multe ori fie extinsa pe latime maxima sau nu.

Despre piese am mai scris si aici: Piese folositoare pentru WordPress.

Ca si design, fiecare piesa are un titlu si o functionalitate. Fie ca sunt afisate ultimele articole sau cele mai populare sau comentate, fie ca este un formular de contact, o casuta de cautare sau altceva, piesele fac parte din site. 

Partea de continut propriu-zisa incepe cu titlul, care in cazul paginilor nu este afisat, de obicei. Apoi, continua fie direct cu continutul, fie cu date cum ar fi categorie, cuvinte cheie, data postarii si numele autorului. In unele cazuri, aceasta parte este afisata dupa continut. La final, apare zona de comentarii cu formularul de comentarii si uneori, butoane de distributie pe canalele sociale media. In functie de tipul paginii, elementele pot diferite. De exemplu, la pagina de produs, sub titlu, se pun in doua coloane informatii legate de produs. In prima coloana imagini intr-un slide, iar in a doua coloana o descriere scurta si informatii de baza.  Alte elemente care mai pot aparea ar fi produse/ articole similare.

Subsolul

Ultima parte a unei pagini web este subsolul. Zona este marcata de un fundal de culoare inchisa. Poate cuprinde diferite coloane cu alte piese sau pur si simplu o singura coloana cu un meniu identic sau similar cu cel secundar. La finalul ei, ar trebui sa apara si copyright-ul unde este mentionat anul si firma care a dezvoltat pagina web. Si aceasta parte este de obicei globala si identica la fel ca si antetul.

Alte elemente ale unei pagini web

Link-urile

Elemente importante care alcatuiesc si ajuta structura unei pagini web ar fi link-urile care se regasesc in proportie de 99.99% din paginile web. Acestea sunt bazele site-ului ajutand atat la optimizarea motoarelor de cautare, dar si la navigatie si experienta de utilizare. Ele pot fi regasite in meniuri, imagini, text, butoane si nu numai. Au diferite culori pentru a fi evidentiate si de multe ori sunt folosite in CTA (call to action). CTA este procesul de indemnare a unui utilizator de a face ceva ce tie, proprietar de site, iti este benefic. Ca si exemplu, putem mentiona adaugarea in cos a unui produs in cazul magazinelor online. Toate link-urile trebuie sa fie interactive si chiar animate pe cat posibil.

Navigatia

Un alt element este navigatia. Aceasta este formata din link-urile anterior mentionate si isi are locul cu siguranta in antet si uneori in bara laterala sau subsolul paginii web. Aceasta este folosita chiar si in cazul landing-page-urilor, adica a paginilor formate dintr-o singura pagina. In acest caz, fiecare element din navigatie te duce la o sectiune a paginii, ruland site-ul mai sus sau mai jos in functie de sectiunea aleasa. Poti sa faci navigatia sa fie orizontala sau verticala. Pentru dispozitivele mobile, navigatia este reprezentata de un buton burger care are mai multe linii. Odata apasat se extind elementele navigatiei ca o lista de tip dropdown. Oricum ai face navigatia, aceasta trebuie sa fie clara, vizibila si usor de accesata de pe orice dispozitiv. Poti adauga si o casuta de cautare, mai ales daca ai un blog, dar si categorii si sub-categorii in meniu. Nu uita si de firmiturile de navigare.

Imaginea erou

Imaginea erou este poate imaginea cea mai reprezentativa a site-ului care se regaseste doar pe prima pagina. Uneori apare ca fiind un slide si mereu ar trebui sa aibe un element CTA langa un text bine scris. CTA-ul poate fi un link sau un buton. Unele site-uri au bannere in loc de o imagine erou cum ar fi un logo mai mare.

Bara laterala

Bara laterala, mentionata si anterior, este optionala, dar are o valoare foarte mare putand fi folosita ca si o unealta de navigatie.

Daca vrei sa realizezi un site corect din punct de vedere structural, dar si sa oferi o experienta deosebita utilizatorilor tai, atunci foloseste acest mic ghid in procesul de creatie a site-ului tau. Te va ajuta sa iti popularizezi afacerea si brandul propriu.