En l’anterior entrada vam parlar sobre l’estructura interna d’una web a nivell de codi i com aquest podia ajudar en el posicionament web. En el post d’avui tornarem a parlar de l’estructura d’una web però aquesta vegada a nivell visual; què és el que l’usuari veu en entrar en una web i quina és la manera òptima de distribuir-ho.

¿Quin disseny i estructura ha de tenir una pàgina web?

Actualment hi ha una gran quantitat de dissenys d’allò més variats quan parlem d’una pàgina web, en el cas d’una web senzilla o estàndard pot seguir l’estructura que explicarem a continuació.

esquema estructura web disseny

Podem dividir la totalitat d’una pàgina web en tres apartats:

Header

Sempre estarà situat a la part superior de la pàgina web actuant de capçalera. En HTML podrem trobar l’etiqueta <header> per enquadrar-hi aquest contingut.

Com a norma general i seguint el sentit de la lectura, la cantonada superior esquerra serà la part en què l’usuari es fixarà primer. Per això s’utilitza aquest espai per a situar el logo de l’empresa o bé el títol de la pàgina web que estem visitant.

A la cantonada contrària, la superior dreta, podem situar un petit apartat de contacte el qual contingui les dades més importants com pot ser el telèfon, adreça, e-mail i les diferents xarxes socials si se’n disposa.

Just a sota d’aquests primers elements situarem el menú amb les principals pàgines del lloc web. Així, aquest menú l’anomenarem menú principal. Un consell a tenir en compte és que deixarem pel final d’aquest menú les pàgines de Contacte i Blog, així com situarem al principi un retorn a la pàgina d’Inici i l’apartat d’Empresa amb tota la seva informació.

Body

En aquest apartat trobarem el contingut desenvolupat de la pàgina web que estem visitant. En aquest cas cal no confondre amb l’etiqueta <body> d’HTML ja que no compleixen les mateixes funcions. Com vam explicar en el post anterior, <body> conté la totalitat del codi que és visible en una pàgina web.

En alguns casos podrem situar tant a la dreta com a l’esquerra una barra lateral o Sidebar que contengui un menú secundari o informació relacionada amb el contingut de la pàgina. Un exemple podria ser un e-commerce de venda de roba, on trobarem sidebars amb les diverses talles, colors o marques disponibles de l’apartat que estem visitant.

Footer

Per últim, però no menys important, el trobarem situat sempre al final de la pàgina i la seva funció serà la de finalitzar la pàgina que s’està visitant.

Per aprofitar aquest espai es pot utilitzar per facilitar a l’usuari la continuació de la seva navegació dins del nostre lloc web situant un petit menú amb les pàgines principals del web o les més visitades.

També és molt aconsellable disposar d’un resum de les dades de contacte, com la situació geogràfica, xarxes socials i un petit formulari de contacte amb el propòsit de facilitar a l’usuari una manera fàcil de posar-se en contacte amb nosaltres.

En HTML podrem trobar l’etiqueta <footer> per enquadrar tot aquest contingut dins d’ella.

 

Si vols seguir descobrint consells i trucs per a la teva pàgina web fes un cop d’ull a les nostres entrades al blog i per qualsevol cosa no dubtis en contactar amb nosaltres!

Leave a comment