diseño gráfico universidad de puerto rico en aguadilla prof. awilda meléndez 16 de abril de 2004

Diseño gráfico

Universidad de Puerto Rico en Aguadilla

Prof. Awilda Meléndez16 de abril de 2004

2

Objetivos Planificar y organizar sitios

web Conocer los principios básicos

de diseño para páginas web

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 usabilidad Incorporar cambios sugeridos

6

Mapa del sitio web

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

Características del storyboard

10

Características del storyboard

11

Características del storyboard

Dibujo de la organización de la página web (page layout)

Un dibujo por cada nivel Contenido de cada dibujo

Navegación Tipo de material Principios de diseño

Correspondencia con el mapa del sitio

12

Prototipo

Título

13

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

14

Prototipo

Título

15

Prototipo

Título

16

Prototipo

17

Prototipo

18

Prueba de usabilidad Evaluación del sitio web (usuarios)

Objetivos Facilidad para localizar información

(navegación) Facilidad para conocer el lugar en el que se

encuentran Organización de la página Principios de diseño Enlaces funcionales Imágenes o gráficas Contratiempos o dificultades

Proceso continuo

19

Prueba de usabilidad

Selección de nombres para cartapacios y

documentos

21

Organización de cartapacios en Páginas Académicas

22

Organización sugerida dentro de las unidades

Pre-prueba Contenido (instrucción) Práctica Aplicaciones Post-prueba

23

Recomendaciones Seleccione prefijos que indiquen lo

que contiene un documento hd – headline nav - navegación

Comenzar con la misma letra o grupo de letras

Utilice letras minúsculas

24

Recomendaciones No incluya espacios Seleccione nombres cortos Guárdelos con las extensiones htm o html Nombre la página principal (home page)

index.html

Nota: En el caso de Páginas Académicas, recuerde utilizar la nomenclatura establecida para cada cartapacio (Páginas Académicas, Unidad 04 – Estructura y contenido de los archivos).

25

Organización de un cartapacio

Seleccione un nombre para el cartapacio principal

Cree dos subcartapacios Uno para todo los documentos de

referencia, imágenes originales,etc. Otro para almacenar la página que

publicará Cada subcartapacio tendrá otros

cartapacios para guardar los documentos según sus características

Principios de diseño

27

Práctica: Principios de diseño

Instrucciones En el cartapacio My Documents, abra

el documento Prototipo Cambie el nombre al documento

añadiéndole el número 1 y su nombre Ejemplo: Prototipo1_Jose

Realice cambios en la organización de la página y a los atributos del texto

Guarde el documento

28

Práctica: Principios de diseño

29

Principios de diseño

Alineación Proximidad Repetición Contraste

30

Alineación

31

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

32

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

33

Proximidad

34

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

35

Repetición

36

Repetición

37

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

38

Repetición

Ventaja Usuario sabe donde se encuentra y

como buscar información

39

Contraste

40

Contraste

Característica de una página que atrae la atención visual

Crea jerarquía en la información Ayuda a definir lo que es

importante

41

Repaso: Principios de diseño

San Diego State University Encyclopedia of Educational

Technology

42

Práctica: Principios de diseño

Instrucciones En el cartapacio My Documents, abra el

documento Prototipo Cambie el nombre al documento

añadiéndole el número 2 y su nombre Ejemplo: Prototipo2_Jose

Realice cambios en la organización de la página y en los atributos del texto

Guarde el documento Compare el documento con el

Prototipo1

43

Práctica: Principios de diseño

Interfase y navegación

45

Interfase Apariencia de una página Forma en la cual los usuarios

interactúan Navegación

46

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

48

Características de un buen diseño

Provea en la página inicial Una idea clara del sitio Impresión visual Espacio de 640 x 460 pixels (ancho por

largo) No utilice letras mayúsculas para el

cuerpo del documento Seleccione fondos claros Evite confusión presentando texto que

aparente ser un enlace

49

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 Mantenga el tamaño de las páginas web

igual o menor a 30,000 bytes Coloque la información más importante al

comienzo de la página Utilice recursos gráficos con resolución de

72dpi

50

Características de un buen diseño

Utilice texto alterno en las gráficas e imágenes

Provee información Reduce el tiempo para acceder enlaces Aparecen aún cuando las gráficas no

se observen Provee información a los programados

utilizados por personas con limitaciones visuales. Programados convierten el texto a sonido

51

Características de un buen diseño

52

Características de un buen diseño

53

Características de un buen diseño

54

Características de un buen diseño

55

Características de un buen diseño

56

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

Color, gráficas y tipografía

58

Color

Utilizar modelo RGB (Red, Green, Blue)

Modo que utilizan las pantallas o monitores de computadoras

Browser safe colors Cada color puede tener

una escala de 256 colores (0 al 255)

59

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

60

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

61

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

62

TipografíaLa facilidad para leer en línea aumenta cuando:

Se utilizan caracteres sin adornos para el cuerpo de la página (Sans Serif) Caracteres con adornos se conocen como 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

63

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 Technologyhttp://coe.sdsu.edu/eet/

Principles for One Stop Information and Traininghttp://clipt.sdsu.edu/posit/tx/db.htm

Research Based: Web Design and Usability Guidelineshttp://www.usability.gov/guidelines/