Upload
udl
View
351
Download
3
Embed Size (px)
DESCRIPTION
consideracions generals per dissenyar una pàgina web
Citation preview
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.