Principios diseño gráfico

Principios de Diseño Gráfico
Diseño gráfico
• Concibe, programa, proyecta y realiza comunicaciones visuales
• Establece el “look & feel” de la aplicación
Filosofias del diseño
• Economía en los elementos visuales
• Menos es más
• Diseño limpio y organizado: – Secuencia
– Distribución (layout) – Imaginería
– Color
– Tipografía

Principios del Diseño Gráfico
• Metáforas
•Claridad
• Consistencia • Alineación
• Proximidad • Contraste
Metáforas
• Establecer una relación de identidad entre dos elementos con contextos diferentes:
– Desktop de los S.O. www.worldwidestore.com/Mainlvl.htm

Claridad
• Cada elemento de la interface debe tener una razón para estar ahí, es necesario que dicha razón también sea clara.
• Menos es más
– A menos que más sea más
Claridad
• Importancia de zonas “blancas”:
– Dirigen al ojo
– Proporciona simetría y balance
– Fortalece el impacto del mensaje
– Permite al ojo descansar entre elementos de actividad
– Promueve simplicidad
www.schwab.com


Consistencia
• La consistencia de los elementos visuales permite la retención de información.
• Se debe ser consistente en la distribución, color, imágenes, íconos,tipografía, texto, etc.
• La consistencia también se debe mantener entre pantallas
• Cada S.O. tiene una guía de estilo, hay que respetarlo
Consistencia
www.santafean.com
Alineación • Mundo Occidental
– Iniciar arriba izquierda
• Permite al ojo recorrer la interface más rápidamente

Alineación
• Hacer uso de celdas (transparentes)
– Líneas horizontales y verticales que ayudan aposicionar componentes
– Ayudan a alinear elementos relacionados
– Ayudan a agrupar elementos logicamente – Ayudan a minimizar el número de controles
Alineación • Ejemplo de celdas

Alineación • Ejemplo de Celdas

Alineación
• Justificado de texto hacia la izquierda, Centro o derecha
Here is some Here is some Here is some new text new text new text
– Se debe elegir un tipode justificado y utilizarlo en todo el diseño
Proximidad
• Los elementos que están cercanos entre sí dan la impresión de tener una relación
• En cambio aquellos distantes no definen relación alguna
Time
Time:
Proximidad Ejemplo
Name
Name
Addr1
Addr2
City City
Name
Addr1 Addr2
City State
Addr1 Addr2
State Phone Fax
State
Phone Fax
Phone Fax
Contraste
• El manejo del contraste permite atraer al
usuario a zonas especificas de la interface
• Permite examinar rápidamente los contenidos
• Tomen en cuenta el contraste para
– Añadir áreas de interés y “energizar” la interface – Resaltar controles o actividades a realizar
Elemento importante
Ejemplo http://www.delta.com/

Ejercicio
• Observa las siguientes interfaces y nota hacia dondeson dirigidos tu ojos en primera instancia, Que elementos dominan?
• Aquello que domina, es lo más importante de la interfaz?
Desorganizada
Ruido Visual
Saturación de efectos 3D

Economía de elementos visuales
• Menos es más
• Minimizar bordes y elementos subrayados • Reducir el desorden de los elementos
• Minimizar el número de controles
Tipografía
• Caracteres y símbolosdeberían ser fácilmente leídos y distinguibles
– Evitar el uso de texto compuesto por puras letras mayúsculas
– Párrafos mezclados con mayúsculas y minúsculas son más rápidos de leer
HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST
How much fun is it to read all this text when it’s all in capitals and you never get a rest
Tipografía
• Seleccionar eltipo de letra correcto para que los textos:
– Sean más fáciles de leer
– Sean legibles,
– Evitar que el usuario haga un esfuerzo adicional para comprender el texto
Tipografía

• Serif
– Times, Bookman
• Sans serif
– Tahoma, Arial
• Onscreen fonts – Georgia
– Geneva – Verdana
• Decorativa
– Comic Sans
• Script
– Script
• Monoespaciada – Courier,
Lucida
Tipografía....