El documento presenta los principios básicos de diseño de sitios web, incluyendo la planificación, organización, mapas de sitios, prototipos y principios como alineación, proximidad, repetición y contraste. Explica la importancia de utilizar estos principios para crear sitios web accesibles y de fácil navegación.

1. Principios de d ise ño gráfico Universidad de Puerto Rico en Aguadilla Dr. José M. Planas Dr. Jesús Lee-Borges Universidad de Puerto Rico en Aguadilla

2. Objetivos El participante podrá Planificar y organizar sitios web Evaluar la calidad de un sitio web en función de principios básicos de diseño

3. ¿Qué es una página Web ? Páginas de texto con mensajes codificados que le indican a un browser o lector lo que tiene que hacer Código html – hypertext markup language

4. Planificación y organización de cartapacios

5. ¿Cómo diseñar un sitio web? Utilizar lápiz y papel en la etapa inicial Enumerar los temas que se interesan incluir Agrupar los temas relacionados: establecer categorías Dibujar un diagrama o mapa conceptual del sitio ( site map ) Dibujar el storyboard Crear prototipo Realizar pruebas de uso Incorporar cambios sugeridos

7. Características del mapa del sitio Web Bloques representan una página Nombre del archivo o documento Breve descripción de la página Organización jerárquica Preferiblemente un máximo de 3 niveles Líneas representan enlaces entre las páginas

8. Características del storyboard

9. Prototipo

10. Prototipo Versión parcial del producto final para determinar posibles problemas con el sitio web Plantilla para las demás páginas web Todas las páginas tendrán un título. Éste aparecerá en la barra de título

11. Principios de diseño

12. Principios de diseño Alineación Posición de unos elementos respecto a otros Proximidad Cercanía entre elementos relacionados Repetición Reaparición continua de elementos distintivos Contraste Destaque de un elemento al compararse con otro elemento del mismo tipo

13. Alineación

14. Alineación Todos los art ículos, objetos o texto, están alineados unos con respecto a los demás Es una fuerza unificadora Útil cuando se presenta mucha información Seleccione un tipo de alineación para su sitio web Prefiera alineaciones hacia la derecha o hacia la izquierda Modifique la alineación de forma limitada para llamar la atención

15. Alineación Ventajas Evita la distracción y el cansancio al mover los ojos através de toda la página Facilita la búsqueda de información Provee la sensación de páginas profesionales o sofisticadas

16. Proximidad

17. Proximidad Relación que se produce cuando los objetos y los textos se colocan cerca Objetos físicamente cercanos producen el efecto de estar relacionados Los espacios producen el efecto de establecer jerarquías en la información

18. Repetición

19. Repetición

20. Repetición Repetición de elementos a través de todo el proyecto Establece relación entre todas las páginas o secciones Ejemplo de elementos Botones Estilo colores

21. Repetición Ventaja Usuario sabe donde se encuentra y como buscar información

22. Contraste Característica que se caracteriza por destacar una cosa al compararse con otra. ¿Cuál ofrece el mejor contraste? Característica que se caracteriza por destacar una cosa al compararse con otra. Característica que se caracteriza por destacar una cosa al compararse con otra.

23. Contraste

24. Contraste

25. Contraste

26. Contraste Creando contraste, un elemento se puede resaltar al compararlo con otro elemento del mismo tipo Puede establecerse mediante color, atributos del texto o localización de objetos o texto en una página Crea jerarquía en la información mediante comparación Ayuda a definir lo que es importante

27. Repaso: Principios de dise ño San Diego State University Encyclopedia of Educational Technology

28. Interfase Apariencia de una página Forma en la cual los usuarios interactúan Navegación

29. Navegación Forma en la cual los usuarios se mueven a través de las páginas Sencilla y clara Accesible Pueden ser botones, texto, gráficas, etc. Imágenes deben incluir textos alternos Debe proveerse más de un método Ser repetitiva Proveer un índice o un mapa del sitio

30. Características de un buen diseño

31. Características de un buen diseño Provea en la página inicial Una idea clara del sitio Impresión visual Ancho de 640 pixels (para páginas académicas utilice 600 pixels debido al espacio que ocupa el menu de la izquierda) No utilice letras mayúsculas para el cuerpo del documento Seleccione fondos claros Evite confusión presentando texto que aparente ser un enlace

32. Características de un buen diseño Tome en consideración la audiencia Utilice tablas para organizar texto y gráficas Utilice oraciones y párrafos cortos Incluya un título en todas las páginas Coloque la información más importante al comienzo de la página

33. Características de un buen diseño

34. Características de un buen diseño

35. Características de un buen diseño

36. Características de un buen diseño

37. Características de un buen diseño

38. Práctica: Características de un buen diseño Instrucciones Busque en la Internet un ejemplo que haga uso de los principios de diseño Busque en la Internet un ejemplo que no haga uso de los principios de diseño

39. Gráficas y tipografía

40. Gráficas o imágenes Formatos o atributos GIF Graphic Interchange Format Pueden observarse en cualquier tipo de computadora Son comprimidas Utilizan una escala de 256 colores Útiles para íconos, texto, dibujos digitales con pocos colores

41. Gráficas o imágenes Formatos o atributos JPEG Joint Photographic Experts Group Pueden observarse en cualquier tipo de computadora Son comprimidas Pueden tener millones de colores Útiles para fotos o imágenes con combinaciones de colores complejas

42. Gráficas o imágenes Resolución para la Internet 72 dpi (puntos por pulgada) Si necesita mayor resolución, cree un enlace que abra otra página con la misma imagen pero con la resolución deseada Thumbnails – imagen de baja resolución Ejemplo: catálogos en línea

43. Tipografía La facilidad para leer en línea aumenta cuando: Se utilizan caracteres con adornos para el cuerpo de la página ( Serif ) Caracteres sin adornos se conocen como Sans Serif El espacio entre caracteres es proporcional a su tamaño ( Proportional type ) El tamaño de los caracteres está entre 10 y 14 puntos El número de palabras por línea es de 9 a 12

44. Storyboard: una asignación En papel, diseñe una unidad de su módulo (página web principal y subpáginas asociadas). El dibujo debe incluir Distribución espacial de texto, figuras y otros, de acuerdo con su Plan Didáctico Sugerencias de colores Identificación de elementos de repetición (íconos, colores, subtítulos, etc.) Indicación de elementos internos de navegación (enlaces, botones, “bookmarks”) Aplique los principios aprendidos

45. Recursos en línea Web Page Design for Designers http:// www.wpdfd.com/index.htm Vincent Flanders: Web Pages that Suck http:// www.webpagesthatsuck.com / Web Page Design - From Planning to Posting http:// www.essdack.org/webdesign / Eyewire http:// www.eyewire.com/magazine/columns/robin/index.htm The Enciclopedia of Educational Technology http:// coe.sdsu.edu/eet / Principles for One Stop Information and Training http:// clipt.sdsu.edu/posit/tx/db.htm Research Based: Web Design and Usability Guidelines http:// www.usability.gov /guidelines/