Disseny Web

download

of 34

  • date post

    03-Jul-2015
  • Category

    Education
  • view

    342
  • download

    3

Embed Size (px)

description

consideracions generals per dissenyar una pgina web

transcript

  • 1. Disseny Web Consideracions generals per dissenyar una pgina web.

2.

  • Webs autnomes
  • Disseny del lloc
  • Disseny de la pgina
  • Tipografia.

3. 1-Webs autnomes

  • Per a qu la nostra pgina sigui clara i entenedora per a lusuari, cal fer-hi constar:
    • Quihi ha al darrera dels continguts (credibillitat)
    • Qu , titulaci clara (URL i +), que capti latenci de lusuari
    • Quan , dataci, actualitzacions
    • On , localitzaci: s diferent el WWW, del lloc dorigen fsic. Incloure lURL als documents per descarregar.

4. 2-Disseny del lloc

  • Pensar sempre en lusuari potencial, facilitar-li la feina, evitar la complexitat exessiva.
  • Exemple: una pgina principal,ser un ajut o impacientar a lusuari expert?
  • Consultar i observar s una bona manera de comprovar lusabilitat del lloc.

5. 2-Disseny del lloc

  • Pensar en lusuari

6. 2-Disseny del lloc

  • Per arribar a la informaci:el mnim de passos
    • Menus dentre 5 i 7 passos mxim.
    • Poques capes ms complexes sn millor que moltes de simplificades
    • Cal evitar que lusuari quedi en un carrer sense sortida
    • Accessibilitat: W3C.com segons el consorci WWW

7. 2-Disseny del lloc

  • Cal evitar els carrers sense sortida

8. 2-Disseny del lloc

  • Accesibilitat W3C

9. 2-Disseny del lloc

  • Navegaci

10. 2-Disseny del lloc

  • Organitzar la informaci, mapa del lloc, estandars de disseny
    • Dividir el contingut en unitats lgiques
    • Establir la jerarquia de les unitats
    • Construir un lloc dacord a lestructura de la informaci proposada
          • Notcies
          • Vendes
          • Ensenyament
          • Oci

11. 2-Disseny del lloc

  • Estructura jerrquica
  • De xarxa

12. 2-Disseny del lloc 13. 3- Disseny de la pgina

  • La claredat i lordre
      • Lgica visual
      • Coherncia de disseny
      • Dimensions de la pgina, rea segura
      • Retcules

14. Disseny de la pgina

  • Lgica visual

15. Disseny de la pgina

  • Lgica visual:diferenciar, destacar

16. Disseny de la pgina

  • Coherncia del disseny

17. Disseny de la pgina

  • Coherncia del disseny:grfics

18. Disseny de la pgina

  • Dimensions

19. Disseny de la pgina

  • Les dimensions de la zona segura per a impressi en paper:
    • Amplada mx.= 535/60 pxels
    • Alada mx.= 410 pxels visibles
    • s de barres de desplaament
  • Dimensions per a pantalles 800x600
    • Amplada mx. = 760 pxels
    • Alada mx.= 410 pxels

20. Disseny de la pgina

  • rea segura

21. Disseny de la pgina

  • Retcules: donen consistncia i lgica de lespai de la pgina

22. Disseny de la pgina 23. Tipografia

  • La disposici del text i la tipografia ens fan reconixer una forma visual que s el punt de partida per a la lectura immediata.

24. Tipografia

  • Les formes textuals, destaquen amb la puntuaci i els pargrafs o tamb posant mfasi en paraules o frases.
    • Majscules, cursives, negreta, color del text, aliniaci, sangrat, espaiat
  • Quant a la llegibilitat, un text imprs t una resoluci per sobre els 1200 dpi, un text a la pantalla la t de 85 dpi.

25. Tipografia

  • Aliniaci, espaiat, justificat

26. Tipografia

  • Cal tenir en compte que no sabem del cert com veur la pgina lusuari.
  • Hi intervenen les interaccions entre: navegador- servidor- sistema operatiu

27. Tipografia 28. Tipografia

  • La lectura es fa difcil si sens obliga a moure molt els ulls i encara ms si hem de moure el coll: lnies molt llargues, pargrafs

29. Tipografia

  • Per controlar la llegibilitat, es poden emprar taules:
    • BORDER=0 i 365 pxels.
    • Aquests parmetres, amb la TNR de 12 punts, permeten un espai per a 50 tipos.

30. Tipografia 31. Tipografia 32. Tipografia

  • La TNR s idnia per a textos que shagin dimprimir, en canvi t una llegibilitat mitjana a la web
        • Times New Roman
  • Les Georgia, Verdana, Trebuchet, snTrue typesdissenyades per a la web, lalada relativa s ms gran que la TNR i sn ms llegibles.
        • Georgia,Verdana,Trebuchet MS

33. Tipografia

  • Imatge text

34. Tipografia

  • GIF(1920x14 Kb), JPG (900x 49 Kb ), JPG (236X22 Kb). Accesibilitat: valorar el text Alt.