DiseñO GráFico
Transcript of DiseñO GráFico
![Page 1: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/1.jpg)
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
![Page 2: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/2.jpg)
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
![Page 3: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/3.jpg)
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
![Page 4: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/4.jpg)
Planificación y organización de cartapacios
![Page 5: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/5.jpg)
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
![Page 6: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/6.jpg)
6
![Page 7: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/7.jpg)
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
![Page 8: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/8.jpg)
8
Características del storyboard
![Page 9: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/9.jpg)
9
Prototipo
![Page 10: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/10.jpg)
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
![Page 11: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/11.jpg)
Principios de diseño
![Page 12: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/12.jpg)
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
![Page 13: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/13.jpg)
13
Alineación
![Page 14: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/14.jpg)
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
![Page 15: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/15.jpg)
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
![Page 16: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/16.jpg)
16
Proximidad
![Page 17: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/17.jpg)
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
![Page 18: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/18.jpg)
18
Repetición
![Page 19: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/19.jpg)
19
Repetición
![Page 20: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/20.jpg)
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
![Page 21: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/21.jpg)
21
Repetición Ventaja
Usuario sabe donde se encuentra y como buscar información
![Page 22: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/22.jpg)
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.
![Page 23: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/23.jpg)
23
Contraste
![Page 24: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/24.jpg)
24
Contraste
![Page 25: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/25.jpg)
25
Contraste
![Page 26: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/26.jpg)
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
![Page 27: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/27.jpg)
27
Repaso: Principios de diseño
San Diego State University Encyclopedia of Educational Technology
![Page 28: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/28.jpg)
28
Interfase Apariencia de una página Forma en la cual los usuarios
interactúan Navegación
![Page 29: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/29.jpg)
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
![Page 30: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/30.jpg)
Características de un buen diseño
![Page 31: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/31.jpg)
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
![Page 32: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/32.jpg)
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
![Page 33: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/33.jpg)
33
Características de un buen diseño
![Page 34: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/34.jpg)
34
Características de un buen diseño
![Page 35: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/35.jpg)
35
Características de un buen diseño
![Page 36: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/36.jpg)
36
Características de un buen diseño
![Page 37: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/37.jpg)
37
Características de un buen diseño
![Page 38: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/38.jpg)
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
![Page 39: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/39.jpg)
Gráficas y tipografía
![Page 40: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/40.jpg)
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
![Page 41: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/41.jpg)
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
![Page 42: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/42.jpg)
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
![Page 43: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/43.jpg)
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
![Page 44: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/44.jpg)
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
![Page 45: DiseñO GráFico](https://reader034.fdocumento.com/reader034/viewer/2022052623/559b578b1a28ab10298b4768/html5/thumbnails/45.jpg)
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/