Actualment en una pàgina web, si no tens un disseny formal bo, de fàcil interacció i que tingui un bon producte, no aconseguiràs poder anar pujant en els teus objectius. En els temps en el que Internet està sempre a la nostra vida, s’ha convertit en una eina important per les empreses i pels projectes.

Per tant, dintre d’una pàgina destaquen molts factors, però un dels considerats més importants és el disseny de la pàgina web, el que es pot dir que es la imatge de la nostra empresa o projecte. Els analistes i experts en publicitat i marketing sempre ho diuen: si tens una bona pàgina web i que dona bona impressió, tens una bona part guanyada per què l’usuari continuï interessant-se.

Les empreses miren cap a Internet per vendre el seu producte (estrelladigital.es)

Després de fer un anàlisi de requisits, la part en la que enfoquem que volen fer, i un disseny conceptual (que volem explicar a la nostra web), el que s’anomena disseny formal és el tercer pas dintre de la creació d’una pàgina web.

Possiblement es un dels passos més importants dintre de la creació de la pàgina web, i és que els seus dos objectius més destacats són: esquematitzar cada pàgina amb la informació que vulguem i també dissenyar l’aspecte gràfic definitiu que pot tenir la pàgina (en altres paraules, la imatge que volem donar).

La interfície

En el començament d’aquesta part, primer de tot hem de tractar el concepte de la Interfície. El seu significat consisteix en la connexió entre dos ordinadors o màquines de qualsevol tipus donant una comunicació entre diferents nivells. En trobem diferents tipus:

  • Interfície com a instrument: des d’aquesta perspectiva la interfície és una “pròtesi” o “extensió” (segons la teoria de Marshall McLuhan) del nostre cos. El mouse és un instrument que estén les funcions de la nostra mà i les porta a la pantalla amb forma de cursor. Així, per exemple, la pantalla d’una computadora és una interfície entre l’usuari i el disc dur.
  • Interfície com a superfície: n’hi ha que consideren que la interfície ens transmet instruccions. La superfície d’un objecte (real o virtual) ens parla per mitjà de les formes, textures, colors, etc.
  • Interfície com a espai: des d’aquesta perspectiva la interfície és el lloc de la interacció; l’espai on se’n desenvolupen els intercanvis i els treballs manuals.

Però el que nosaltres tractarem és la interfície d’usuari. És el medi amb què l’usuari pot comunicar-se amb una màquina, un equip o una computadora, i comprèn tots els punts de contacte entre l’usuari i l’equip; normalment solen ser fàcils d’entendre i fàcils d’accionar. Per treballar amb un sistema, els usuaris han de ser capaços de controlar-lo i avaluar-ne l’estat.

Per poder fer aquesta interfície i començar amb el prototip de la pàgina web es important fer un esquema o guia per poder dividir els conceptes, conegut com el wireframe:

  • Wireframe: guia visual que representa l’esquelet o estructura visual d’un lloc web. esquematitza el disseny de pàgina, l’ordre del contingut del lloc, incloent elements de la interfície i sistemes de navegació, i com funcionen en conjunt.

Exemple de WireFrame (SmartDraw.com)

Després de fer el wireframe, arriba la hora d’esquematitzar les pàgines i la interfície:

  • Pàgina Principal: és com la imatge principal del teu producte: És important que contesti dues preguntes: On sóc i que trobaré. Dintre de la pàgina podem trobar punts com un directori de les àrees del lloc, un cercador o noticies i promocions.
  • Navegació: Es important que hi hagin accessos externs a la pàgina principal i a les seccions, incloure utilitats bàsiques, no crear pàgines mortes, etc.
  • Papers i monitors: Quina forma vols que estigui la teva pàgina: apaïsada, vertical… també veure el tipus de retícules, els diferents suports com ordinador, televisió, etc.

Exemple de Interfície (PWP Disseny Formal, Comunicació Digitial Interactiva)

El Disseny Gràfic Definitu

Després de haver creat la interfície i fet l’esquema de la pàgina, és el moment de cuidar els detalls. Hem de tenir un nivell de resolució inferior a la del full d’imprès (72 ppp), no hem de tenir una lletra fina, s’ha d’entendre, gràfics adaptats y, el més important, la mida de la pàgina.

Un altre part important es el referent als colors. Si es vol transmetre el missatge, es important no carregar de molts colors, crear uns de corporatius i també tenir uns colors de fons, suaus, per destacar la informació.

Si parlem dels textos, hem de dir que deuen de tenir tots una mateixa tipografia, mida, color i font.

Per últim, la navegació, punt clau per la pàgina, hem de recórrer a tècniques per poder tenir un bon disseny gràfic:

  • Textos: fàcils d’actualitzar
  • Gràfics: botons o mapes d’imatge.
  • Repetir a peu de pàgina: facilitar la navegació.
  • Enllaços relatius o absoluts.
  • Obrir noves finestres per a enllaços externs.
  • Encapçalaments i/o peus de pàgina virtuals.

En conclusió, per què una bona pagina web funcioni és important que tingui una bona imatge, un bon disseny gràfic. La imatge es important per tal de poder captar usuaris i poder aconseguir una bona reputació per el producte que presentem.

En la actualitat, amb programes com WordPress es poden fer interificies bones, pero aquest video explica com fer-ho des de WIX, on també es pot fer fàcilment. També hi podem trobar moltes exposicions sobre aquest tema tan gran.

Webgrafia 

1&1Web: Fundamentos del Diseño Web Tercera Parte: Aspectos Formales.  https://www.1and1.es/digitalguide/paginas-web/diseno-web/diseno-web-elementos-formales-de-diseno/(data consulta: 23-02-2018)

La Webera: el equilibrio del diseño web. https://www.lawebera.es/diseno-web/el-equilibrio-en-el-diseno-web.php (data consulta: 23-02-2018)

Wikipedia: Wireframe (diseño web). https://es.wikipedia.org/wiki/Wireframe_(dise%C3%B1o_web) (data consulta: 23-02-2018)