Disseny Web

Consideracions generals per dissenyar una pàgina web.

Webs autònomes Disseny del lloc Disseny de la pàgina Tipografia.

1-Webs autònomes

Per a què la nostra pàgina sigui clara i entenedora per a l’usuari, cal fer-hi constar:

Qui hi ha al darrera dels continguts (credibil·litat) Què, titulació clara (URL i +…), que capti l’atenció de

l’usuari Quan, datació, actualitzacions… On, localització: és diferent el WWW, del lloc d’origen

físic. Incloure l’URL als documents per descarregar.

2-Disseny del lloc

Pensar sempre en l’usuari potencial, facilitar-li la feina, evitar la complexitat exessiva.

Exemple: una pàgina principal, serà un ajut o impacientarà a l’usuari expert?

Consultar i observar és una bona manera de comprovar l’usabilitat del lloc.

2-Disseny del lloc

Pensar en l’usuari

2-Disseny del lloc

Per arribar a la informació: el mínim de passos

Menus d’entre 5 i 7 passos màxim.

Poques capes més complexes són millor que moltes de simplificades

Cal evitar que l’usuari quedi en un carrer sense sortida

Accessibilitat: W3C.com segons el consorci WWW

2-Disseny del lloc

Cal evitar els carrers sense sortida

2-Disseny del lloc

Accesibilitat W3C

2-Disseny del lloc

Navegació

2-Disseny del lloc

Organitzar la informació, mapa del lloc, estandars de disseny…

Dividir el contingut en unitats lògiques Establir la jerarquia de les unitats Construir un lloc d’acord a l’estructura de la informació

proposada

Notícies Vendes Ensenyament Oci…

2-Disseny del lloc

Estructura jeràrquica

De xarxa

2-Disseny del lloc

3- Disseny de la pàgina

La claredat i l’ordre

Lògica visual Coherència de disseny Dimensions de la pàgina, àrea segura Retícules…

Disseny de la pàgina

Lògica visual

Disseny de la pàgina

Lògica visual: diferenciar, destacar

Disseny de la pàgina

Coherència del disseny

Disseny de la pàgina

Coherència del disseny: gràfics

Disseny de la pàgina

Dimensions

Disseny de la pàgina

Les dimensions de la zona segura per a impressió en paper:

Amplada màx.= 535/60 píxels Alçada màx. = 410 píxels visibles Ús de barres de desplaçament

Dimensions per a pantalles 800x600

Amplada màx. = 760 píxels Alçada màx. = 410 píxels

Disseny de la pàgina

Àrea segura

Disseny de la pàgina

Retícules: donen consistència i lògica de l’espai de la pàgina

Disseny de la pàgina

Tipografia

La disposició del text i la tipografia ens fan reconèixer una forma visual que és el punt de partida per a la lectura immediata.

Tipografia

Les formes textuals, destaquen amb la puntuació i els paràgrafs o també posant èmfasi en paraules o frases.

Majúscules, cursives, negreta, color del text, aliniació, sangrat, espaiat…

Quant a la llegibilitat, un text imprés té una resolució per sobre els 1200 dpi, un text a la pantalla la té de 85 dpi.

Tipografia

Aliniació, espaiat, justificat

Tipografia

Cal tenir en compte que no sabem del cert com veurà la pàgina l’usuari.

Hi intervenen les interaccions entre: navegador- servidor- sistema operatiu…

Tipografia

Tipografia La lectura es fa difícil si se’ns obliga a moure molt els ulls i

encara més si hem de moure el coll: línies molt llargues, paràgrafs…

Tipografia

Per controlar la llegibilitat, es poden emprar taules:

BORDER=“0” i 365 píxels. Aquests paràmetres, amb la TNR de 12 punts,

permeten un espai per a 50 tipos.

Tipografia

Tipografia

Tipografia

La TNR és idònia per a textos que s’hagin d’imprimir, en canvi té una llegibilitat mitjana a la web

Times New Roman

Les Georgia, Verdana, Trebuchet, són True types dissenyades per a la web, l’alçada relativa és més gran que la TNR i són més llegibles.

Georgia, Verdana, Trebuchet MS

Tipografia

Imatge text

Tipografia

GIF (1920x…14 Kb), JPG (900x… 49 Kb ), JPG (236X…22 Kb). Accesibilitat: valorar el text Alt.