diseño gráfico de la pantalla crap – contraste, repetición, alineación, proximidad las mallas...
TRANSCRIPT
![Page 1: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/1.jpg)
Diseño Gráfico de la Pantalla
CRAP – contraste, repetición, alineación, proximidadLas Mallas (Grids) son esenciales para el diseño gráficoOtros conceptos de diseño visual:
consistencia relacionesclaves organizacionales claridad y legibilidady navegacionales uso de imágenes apropiadonomenclatura familiar
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.
Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
![Page 2: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/2.jpg)
Saul Greenberg
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
![Page 3: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/3.jpg)
![Page 4: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/4.jpg)
![Page 5: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/5.jpg)
Original
![Page 6: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/6.jpg)
Proximidad
![Page 7: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/7.jpg)
Alineación
![Page 8: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/8.jpg)
Contraste
![Page 9: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/9.jpg)
Repetición
![Page 10: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/10.jpg)
Saul Greenberg
Mallas (Grids)
Líneas horizontales y verticales para ubicar los componentes de las ventanas
– Se alinean componentes relacionados
Organización– Contraste para elementos dominantes– Grupos de elementos por proximidad– Estructura organizacional– Alineación
Consistencia– Ubicación– Formato– Repeticón de elementos– Organización Separación entre
componentes y borde de la
ventana
Espacios entre componentes
No Ok
Message text in Arial 14, left adjusted
Standard icon set
Componentes fijos
Formato de contenidos variables
![Page 11: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/11.jpg)
No Ok
Message text in Arial 14, left adjusted
Standard icon set
No Ok
Do you really want to delete the file “myfile.doc” from the folder “junk”?
?
Ok
Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.
!
Apply
Cancel
The file was destroyed
![Page 12: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/12.jpg)
Jerarquía de dos niveles•sangrías•contraste
Agrupamiento por espaciado
La alineación conecta los elementos visuales en una secuencia
Lógica de flujo organizacional
![Page 13: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/13.jpg)
Saul Greenberg
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
mmmm mmmmmm
Okay
!
Help
mmmm mmmmmm mmm
Okay
?
Tip of the day: Monday, Mar 12
mmmm mmmmmm
Dismiss
![Page 14: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/14.jpg)
Saul Greenberg
Relacionar elementos de la pantalla
Grupos por proximidadAlineaciónEspacio en blanco (negativo)Estructura explícita
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
![Page 15: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/15.jpg)
Saul GreenbergWebforms
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
![Page 16: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/16.jpg)
IBM's Aptiva Communication Center
No se fijaron en el orden y la
organización
![Page 17: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/17.jpg)
Distribución sin orden
Mullet & Sano
![Page 18: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/18.jpg)
Arreglo de la distribución
Mullet & Sano
![Page 19: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/19.jpg)
Tensión espacial
Mullet & Sano
![Page 20: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/20.jpg)
Aquí se usa la estructura explícita como apoyo
Mullet & Sano
![Page 21: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/21.jpg)
El uso excesivo de efectos 3-d hacen que la ventana se veainnecesariamente amontonada
WebForms
![Page 22: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/22.jpg)
¿Cómo se puede escoger algo si no se puede discernir entre un elemento y otro?
GIF Construction Set Microsoft Access 2.0
![Page 23: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/23.jpg)
Saul Greenberg
Pistas de navegación
Proveer de enfoque inicial
El orden debe seguir la secuencia del modelo conceptual del usuario
![Page 24: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/24.jpg)
Se rediseñó la distribución utilizando alineación y agrupamiento
Mullet & Sano
![Page 25: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/25.jpg)
Saul Greenberg
La importancia del espacio negativo y la alineación
Mullet & Sano
![Page 26: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/26.jpg)
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
NNNN
MMMM
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
MMMM
NNNN
![Page 27: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/27.jpg)
Se arregló la densidad excesiva de componentes
Mullet & Sano
![Page 28: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/28.jpg)
Las Pestañas (Tabs)– Una forma excelente de agrupar elementos relacionados– Pero puede ser sobreutilizada
![Page 29: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/29.jpg)
Saul Greenberg
Claridad y legibilidad
Los caracteres, símbolos y elementos gráficos deben ser fácilmente perceptibles y distinguibles
Text set in Braggadocio
Text set in Helvetica
Text set in Courier
TEXT SET INCAPITOLS
Text set in Times Roman
![Page 30: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/30.jpg)
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
LargeMediumSmall
LargeMediumSmall
Readable
Design components to be inviting and attractive
Design components to be inviting and attractive
Unreadable
Design components to be inviting and attractive
Design components to be inviting and attractive
![Page 31: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/31.jpg)
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 andunderstand. Design components to be inviting and attractive
![Page 32: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/32.jpg)
Popkin Software’s System Architect
![Page 33: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/33.jpg)
Por como se ven, estas opciones deberían ser muy importantes, pero no lo son
Time & Chaos
![Page 34: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/34.jpg)
Estos ejemplos en gris son difíciles de leer, ¿porqué no hacerlos de una vez negros?
Regional preferences in Windows 95
![Page 35: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/35.jpg)
Esta orientación del texto es difícil de leer
Microsoft Word
![Page 36: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/36.jpg)
Saul Greenberg
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
![Page 37: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/37.jpg)
Distintos niveles de abstracción
Mullet & Sano
![Page 38: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/38.jpg)
Metáforas refinadas contra excesivamente literales
Mullet & Sano
![Page 39: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/39.jpg)
¿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
![Page 40: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/40.jpg)
Saul Greenberg
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)
Menús tradicionales Menú de cascada
Elemento de caja de diálogo
Barras de herramientas
Manipulación de la ventana
Controles tipográficos
estándar
Archivo
Pantallas WYSIWYG
Microsoft Powerpoint
![Page 41: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/41.jpg)
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
![Page 42: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/42.jpg)
Se muestra la funcionalidad básica
Apple MacPaint & Macwrite, from mullet & Sano
![Page 43: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/43.jpg)
Saul Greenberg
Componentes y complejidad
¿Cómo se puede reducir la navegación?– Evitar rutas largas– Evitar jerarquías profundas
![Page 44: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/44.jpg)
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
![Page 45: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/45.jpg)
Construyendo un grid1. 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.
![Page 46: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/46.jpg)
Usando el grid3. Determinar relaciones, estructura navegacional
• Asociar la estructura navegacional con el grid
4. Economía• Juntar dos ventanas en una• Cortar ventana de sonido
![Page 47: 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](https://reader033.vdocuments.co/reader033/viewer/2022051401/5665b4961a28abb57c92709d/html5/thumbnails/47.jpg)
Usando el grid5. Evaluar desplegando ejemplos actuales
6. Economizar más• Decida cual prefiere
vs