Principios de diseño gráfico

Universidad de Puerto Rico en Aguadilla

Dr. José M. Planas

Dr. Jesús Lee-BorgesUniversidad 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

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

6

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

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

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

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/