Disseny Web
description
Transcript of Disseny Web
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.