Disseny Web

451 visualizaciones

Publicado el

consideracions generals per dissenyar una pàgina web

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
451
En SlideShare
0
De insertados
0
Número de insertados
19
Acciones
Compartido
0
Descargas
4
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Disseny Web

  1. 1. Disseny Web Consideracions generals per dissenyar una pàgina web.
  2. 2. <ul><li>Webs autònomes </li></ul><ul><li>Disseny del lloc </li></ul><ul><li>Disseny de la pàgina </li></ul><ul><li>Tipografia. </li></ul>
  3. 3. 1-Webs autònomes <ul><li>Per a què la nostra pàgina sigui clara i entenedora per a l’usuari, cal fer-hi constar: </li></ul><ul><ul><li>Qui hi ha al darrera dels continguts (credibil·litat) </li></ul></ul><ul><ul><li>Què , titulació clara (URL i +…), que capti l’atenció de l’usuari </li></ul></ul><ul><ul><li>Quan , datació, actualitzacions… </li></ul></ul><ul><ul><li>On , localització: és diferent el WWW, del lloc d’origen físic. Incloure l’URL als documents per descarregar. </li></ul></ul>
  4. 4. 2-Disseny del lloc <ul><li>Pensar sempre en l’usuari potencial, facilitar-li la feina, evitar la complexitat exessiva. </li></ul><ul><li>Exemple: una pàgina principal, serà un ajut o impacientarà a l’usuari expert? </li></ul><ul><li>Consultar i observar és una bona manera de comprovar l’usabilitat del lloc. </li></ul>
  5. 5. 2-Disseny del lloc <ul><li>Pensar en l’usuari </li></ul>
  6. 6. 2-Disseny del lloc <ul><li>Per arribar a la informació: el mínim de passos </li></ul><ul><ul><li>Menus d’entre 5 i 7 passos màxim. </li></ul></ul><ul><ul><li>Poques capes més complexes són millor que moltes de simplificades </li></ul></ul><ul><ul><li>Cal evitar que l’usuari quedi en un carrer sense sortida </li></ul></ul><ul><ul><li>Accessibilitat: W3C.com segons el consorci WWW </li></ul></ul>
  7. 7. 2-Disseny del lloc <ul><li>Cal evitar els carrers sense sortida </li></ul>
  8. 8. 2-Disseny del lloc <ul><li>Accesibilitat W3C </li></ul>
  9. 9. 2-Disseny del lloc <ul><li>Navegació </li></ul>
  10. 10. 2-Disseny del lloc <ul><li>Organitzar la informació, mapa del lloc, estandars de disseny… </li></ul><ul><ul><li>Dividir el contingut en unitats lògiques </li></ul></ul><ul><ul><li>Establir la jerarquia de les unitats </li></ul></ul><ul><ul><li>Construir un lloc d’acord a l’estructura de la informació proposada </li></ul></ul><ul><ul><ul><ul><ul><li>Notícies </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Vendes </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Ensenyament </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Oci… </li></ul></ul></ul></ul></ul>
  11. 11. 2-Disseny del lloc <ul><li>Estructura jeràrquica </li></ul><ul><li> De xarxa </li></ul>
  12. 12. 2-Disseny del lloc
  13. 13. 3- Disseny de la pàgina <ul><li>La claredat i l’ordre </li></ul><ul><ul><ul><li>Lògica visual </li></ul></ul></ul><ul><ul><ul><li>Coherència de disseny </li></ul></ul></ul><ul><ul><ul><li>Dimensions de la pàgina, àrea segura </li></ul></ul></ul><ul><ul><ul><li>Retícules… </li></ul></ul></ul>
  14. 14. Disseny de la pàgina <ul><li>Lògica visual </li></ul>
  15. 15. Disseny de la pàgina <ul><li>Lògica visual: diferenciar, destacar </li></ul>
  16. 16. Disseny de la pàgina <ul><li>Coherència del disseny </li></ul>
  17. 17. Disseny de la pàgina <ul><li>Coherència del disseny: gràfics </li></ul>
  18. 18. Disseny de la pàgina <ul><li>Dimensions </li></ul>
  19. 19. Disseny de la pàgina <ul><li>Les dimensions de la zona segura per a impressió en paper: </li></ul><ul><ul><li>Amplada màx.= 535/60 píxels </li></ul></ul><ul><ul><li>Alçada màx. = 410 píxels visibles </li></ul></ul><ul><ul><li>Ús de barres de desplaçament </li></ul></ul><ul><li>Dimensions per a pantalles 800x600 </li></ul><ul><ul><li>Amplada màx. = 760 píxels </li></ul></ul><ul><ul><li>Alçada màx. = 410 píxels </li></ul></ul>
  20. 20. Disseny de la pàgina <ul><li>Àrea segura </li></ul>
  21. 21. Disseny de la pàgina <ul><li>Retícules: donen consistència i lògica de l’espai de la pàgina </li></ul>
  22. 22. Disseny de la pàgina
  23. 23. Tipografia <ul><li>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. </li></ul>
  24. 24. Tipografia <ul><li>Les formes textuals, destaquen amb la puntuació i els paràgrafs o també posant èmfasi en paraules o frases. </li></ul><ul><ul><li>Majúscules, cursives, negreta, color del text, aliniació, sangrat, espaiat… </li></ul></ul><ul><li>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. </li></ul>
  25. 25. Tipografia <ul><li>Aliniació, espaiat, justificat </li></ul>
  26. 26. Tipografia <ul><li>Cal tenir en compte que no sabem del cert com veurà la pàgina l’usuari. </li></ul><ul><li>Hi intervenen les interaccions entre: navegador- servidor- sistema operatiu… </li></ul>
  27. 27. Tipografia
  28. 28. Tipografia <ul><li>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… </li></ul>
  29. 29. Tipografia <ul><li>Per controlar la llegibilitat, es poden emprar taules: </li></ul><ul><ul><li>BORDER=“0” i 365 píxels. </li></ul></ul><ul><ul><li>Aquests paràmetres, amb la TNR de 12 punts, permeten un espai per a 50 tipos. </li></ul></ul>
  30. 30. Tipografia
  31. 31. Tipografia
  32. 32. Tipografia <ul><li>La TNR és idònia per a textos que s’hagin d’imprimir, en canvi té una llegibilitat mitjana a la web </li></ul><ul><ul><ul><ul><li>Times New Roman </li></ul></ul></ul></ul><ul><li>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. </li></ul><ul><ul><ul><ul><li>Georgia, Verdana, Trebuchet MS </li></ul></ul></ul></ul>
  33. 33. Tipografia <ul><li>Imatge text </li></ul>
  34. 34. Tipografia <ul><li>GIF (1920x…14 Kb), JPG (900x… 49 Kb ), JPG (236X…22 Kb). Accesibilitat: valorar el text Alt. </li></ul>

×