Diseño Gráfico de la Pantalla
CRAP – contraste, repetición, alineación, proximidad
Las Mallas (Grids) son esenciales para el diseño gráfico
Otros conceptos de diseño visual:
consistencia
claves organizacionales
y navegacionales
nomenclatura familiar
relaciones
claridad y legibilidad
uso de imágenes apropiado
Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained.
Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
CRAP
Contraste
–
–
–
–
Hacer que las cosas diferentes se vean diferentes
Resaltar los elementos dominantes
Opacar elementos no importantes
Crea dinamismo
Repetición
– Repetir el diseño por toda la interfaz
– consistencia
– crea unidad
Alineación
– Conecta visualmente los elements
– Crea un flujo visual
Proximidad
– Agrupar elementos relacionados
– Separar los no relacionados
Robin Williams Non-Designers Design Book, Peachpit Press
Saul Greenberg
Original
Proximidad
Alineación
Contraste
Repetición
Mallas (Grids)
Líneas horizontales y verticales para ubicar los componentes
de las ventanas
– Se alinean componentes relacionados
Formato de
contenidos
variables
Organización
–
–
–
–
Contraste para elementos dominantes
Grupos de elementos por proximidad
Estructura organizacional
Standard
Alineación
icon set
Consistencia
–
–
–
–
Message text in
Arial 14, left
adjusted
Espacios entre
componentes
Ubicación
Formato
Repeticón de elementos
Organización
Separación entre
componentes y
borde de la
ventana
No
Ok
Componentes
fijos
Saul Greenberg
Standard
icon set
Message text in
Arial 14, left
adjusted
?
No
Ok
Do you really want
to delete the file
“myfile.doc” from
the folder “junk”?
No
Apply
The file was
destroyed
Cancel
!
Ok
Cannot move the
file “myfile.doc” to
the folder “junk”
because the disc is
full.
Ok


Jerarquía de dos
niveles
•sangrías
•contraste
La alineación
conecta los
elementos visuales
en una secuencia
Lógica de flujo
organizacional
Agrupamiento
por espaciado
Consistencia visual (repetición)
Consistencia interna
– Los elementos siguen las mismas convenciones y reglas
– Se usa un conjunto de mallas específicas para la aplicación
Consistencia externa
– Se siguen convenciones de la plataforma y del estilo de interfaz
– Utilizar mallas propias de la plataforma y de los componentes
Sólo desviarse de esto cuando haya un claro beneficio para el
usuario
Warning
Help
?
mmmm mmm
mmm mmm
Okay
!
mmmm mmm
mmm
Okay

Tip of the day: Monday, Mar 12
mmmm mmm
mmm
Dismiss

Saul Greenberg
Relacionar elementos de la pantalla
Grupos por proximidad
Alineación
Espacio en blanco (negativo)
Estructura explícita
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:

Mmmm:
Mmmm:
Mmmm:

Saul Greenberg
Terrible alineación
– no hay flujo
Mal contraste
– No se puede distinguir las etiquetas de color de los campos
editables
Mala repetición
– Los botones no parecen botones
Mala estructura explícita
– Los bloques compiten con la alineación
Webforms
Saul Greenberg
No se fijaron en el
orden y la
organización
IBM's Aptiva Communication Center
Distribución sin orden
Mullet & Sano
Mullet & Sano
Arreglo de la
distribución
Mullet & Sano
Tensión espacial
Mullet & Sano
Aquí se usa la estructura
explícita como apoyo
El uso excesivo de efectos 3-d hacen que la ventana se vea
innecesariamente amontonada
WebForms
¿Cómo se puede escoger algo si no se puede
discernir entre un elemento y otro?
GIF Construction Set
Microsoft Access 2.0
Pistas de navegación
Proveer de enfoque inicial
El orden debe seguir la secuencia del modelo conceptual del
usuario


Saul Greenberg
Se rediseñó la distribución utilizando alineación y agrupamiento
Mullet & Sano
La importancia del espacio negativo y la alineación
Mullet & Sano
Saul Greenberg
La economía de los elementos visuales
Minimizar el número de controles
Incluir sólo aquellos que son necesarios
– Eliminar o relegar otros a ventanas secundarias
Minimizar el amontonamiento
– De tal manera que no se oculte información
MMMM
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
NNNN
MMMM
xxx: ____
xxx: ____
xxx: ____
NNNN
xxx: ____
xxx: ____
xxx: ____

xxx: ____

Saul Greenberg
Mullet & Sano
Se arregló la densidad excesiva de componentes
Las Pestañas (Tabs)
– Una forma excelente de agrupar elementos relacionados
– Pero puede ser sobreutilizada
Claridad y legibilidad
Los caracteres, símbolos y elementos gráficos deben ser
fácilmente perceptibles y distinguibles
Text set in
Helvetica
Text set in
Times Roman

TEXT SET IN
CAPITOLS
Text set in
Braggadocio
Text set in
Courier

Saul Greenberg
Claridad y legibilidad
Uso apropiado de la tipografía
– Sólo 1-2 tipos de letra (3 máximo)
– Normales, itálicas, negritas
– 1-3 tamaños máximo
Large
Large
Medium
Medium
Small
Small
Readable
Unreadable
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Design components to be
inviting and attractive
Design components to be
inviting and attractive


Saul Greenberg
Claridad y legibilidad
Uso del tipo de letra
–
–
–
–
–
El tamaño en puntos
Espaciado de palabras y líneas
Longitud del renglón
Sangrías
Color
Legible
Design components to be
inviting and attractive
Design components to be
inviting and attractive

Ilegible: Design components
to be easy to interpret and
understand. Design components to
be inviting and attractive

Saul Greenberg
Popkin Software’s System Architect
Por como se ven, estas opciones
deberían ser muy importantes, pero no
lo son
Time & Chaos
Regional preferences in Windows 95
Estos ejemplos en gris son difíciles de
leer, ¿porqué no hacerlos de una vez
negros?
Microsoft Word
Esta orientación del
texto es difícil de leer
Uso de imágenes
Signos, íconos, símbolos
– La correcto es escoger algo entre concreto y abstracto
El diseño de íconos es muy difícil
– A excepción de los más familiares, siempre conviene
etiquetarlos
La posición de la imagen y su tipo siempre deben
estar relacionados
– Uso de “familias” de imágenes
Uso consistente y relevante de imágenes
Familia parcial de íconos
Saul Greenberg
Distintos niveles de abstracción

Mullet & Sano




Mullet &
Sano
Metáforas refinadas contra excesivamente literales


¿Qué significan estas imágenes?
• No hay etiquetas para los íconos
• Curiosamente, una de las pestañas es un glosario que
las explica, ¿pero cual?
Novell GroupWise 5.1
Convenciones
Formas familiares de usar componentes gráficos
– Apropiado para usuarios casuales y expertos
– Se fundamenta en literatura computacional
– Se debe usar con cuidado en sistemas de demostración (tipo
kiosko)
Archivo
Manipulación de la ventana
Barras de herramientas
Controles
tipográficos
estándar
Pantallas WYSIWYG
Microsoft Powerpoint
Menús tradicionales
Menú de cascada
Elemento de caja de diálogo
Saul Greenberg
Cómo escoger los componentes
apropiados
¿Qué componentes deben estar en la pantalla?
– Acciones frecuentes
• Manipulación directa para actividades básicas
• Botones/formas/barras de herramientas/herramientas especiales
para acciones frecuentes/inmediatas
• Menús/ventana de propiedades para acciones menos frecuentes
• Ventanas secundarias para acciones poco frecuentes
¿Cómo relacionar los componentes?
– Organizar los elementos relacionados en “bonches” o grupos
Saul Greenberg
Se muestra la funcionalidad básica
Apple MacPaint & Macwrite, from
Componentes y complejidad
¿Cómo se puede reducir la navegación?
– Evitar rutas largas
– Evitar jerarquías profundas


Saul Greenberg
Ejercicio
Rediseño Gráfico
Crear un grid enfatizando:
– Consistencia visual
– relationes entre
elementos de la interfaz
– Señales de navegación
– economía
– legibilidad y disponibilidad
– imagenes
Saul Greenberg
Construyendo un grid
1. Manteniendo la consistencia con el estilo de la GUI
• Ubicar componentes estándares – barra de título, controles de ventana,
…
2. Decidir la distribución navegacional + epacios en blanco +
legibilidad + tipografía
• El grid muestra la ubicación de componentes genéricos
• Dichos componentes genéricos pueden tener sus propios grids.
Usando el grid
3. Determinar relaciones, estructura navegacional
• Asociar la estructura navegacional con el grid
4. Economía
• Juntar dos ventanas en una
• Cortar ventana de sonido
Usando el grid
5. Evaluar desplegando ejemplos actuales
6. Economizar más
• Decida cual prefiere
vs
Descargar

Graphical Design