La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004.

Presentaciones similares


Presentación del tema: "Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004."— Transcripción de la presentación:

1 Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004

2 2 Objetivos Planificar y organizar sitios web Conocer los principios básicos de diseño para páginas web

3 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 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 6 Mapa del sitio web

7 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 8 Características del storyboard

9 9

10 10 Características del storyboard

11 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 12 Prototipo Título

13 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 14 Prototipo Título

15 15 Prototipo Título

16 16 Prototipo

17 17 Prototipo

18 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 19 Prueba de usabilidad

20 Selección de nombres para cartapacios y documentos

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

22 22 Organización sugerida dentro de las unidades Pre-prueba Contenido (instrucción) Práctica Aplicaciones Post-prueba

23 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 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 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

26 Principios de diseño

27 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 28 Práctica: Principios de diseño

29 29 Principios de diseño Alineación Proximidad Repetición Contraste

30 30 Alineación

31 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 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 33 Proximidad

34 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 35 Repetición

36 36 Repetición

37 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 38 Repetición Ventaja Usuario sabe donde se encuentra y como buscar información

39 39 Contraste

40 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 41 Repaso: Principios de diseño San Diego State University Encyclopedia of Educational Technology

42 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 43 Práctica: Principios de diseño

44 Interfase y navegación

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

46 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

47 Características de un buen diseño

48 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 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 50 Características de un buen diseño Utilice texto alterno en las gráficas e imágenestexto alterno 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 51 Características de un buen diseño

52 52 Características de un buen diseño

53 53 Características de un buen diseño

54 54 Características de un buen diseño

55 55 Características de un buen diseño

56 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

57 Color, gráficas y tipografía

58 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 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 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 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 62 Tipografía La 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 63 Recursos en línea Web Page Design for Designers Vincent Flanders: Web Pages that Suck Web Page Design - From Planning to Posting Eyewire The Enciclopedia of Educational Technology Principles for One Stop Information and Training Research Based: Web Design and Usability Guidelines


Descargar ppt "Diseño gráfico Universidad de Puerto Rico en Aguadilla Prof. Awilda Meléndez 16 de abril de 2004."

Presentaciones similares


Anuncios Google