diseñográfico

for dummies
 diseñográfico
comunicación visual
EMISOR - CODIFICADOR - RECEPTOR

PERCEPCIÓN
Good
Design
Is
Obvious
great
design is
Erik Spiekermann

transparent
Joe Sparano
 UX
user experience
Norman, D. A. (2002). Emotion and design:
Attractive things work better.

Usabilidad = Belleza
Belleza NO superior a usabilidad.

ESTÉTICA VS USABILIDAD?
La estética tiene una función en donde las
emociones juegan un papel importante la
experiencia de usuario (UX)

Si existe un diseño visual agradable, los usu-

arios se sienten más relajados, y tienden a ver
el sitio más creíble y fácil de usar.
 first impression
A positive
— usually based on looks rather than interaction —
determines the value of the website / app on the
user’s behalf.

fuente: uxmyths.com
 aprobación

vista
 Stanford Credibility Project
2500+ participantes

Importancia de: layout, tipografía, colores.

If the app doesn’t have some kind of aesthetic value,
it will not only fail to attract the user’s attention,
it will also fail to HOLD the user’s attention.”

- Max Steenbergen
UX MAGAZINE
 FORMA y FUNCIÓN

BELLEZA y CEREBRO

PLACER y USABILIDAD
Apple...
more
cognitive cost

less
cognitive cost
 “easier on the eye”.
- Jürg Nänni (Visual Perception)

El usuario asocia ciertos comportamietos con

elementos específicos basados en su APARIENCIA.
Ej. Es más fácil reconocer BOTONES con
formas curvas o redondas.
TIPOGRAFÍA
¿Cuál es el objetivo?
¿Hacia quién va dirigida?
 LEGIBILIDAD
Escoge typefaces con formas convencionales

Typefaces con “espacios generosos”

GLSMIT GLS MIT
Altura en X mayor.

a a ec ec
 LEGIBILIDAD
Escoge typefaces con formas convencionales

Typefaces con “espacios generosos”

GLSMIT GLS MIT
Altura en X mayor.

a a ec ec
 a a
sin serifas con serifas
sans serif / palo seco serif

textos cortos textos largos

 LECTURA
Justificación adecuada (evitar “ríos”)
“Force-justified” text, or hyphenless justification, always creates ugly rivers and awkward spacing which
causes the reader to lose the natural flow of the text as the eye has to make various leaps and jumps to
complete words and sentences. Currently, there is no proper native support for hyphenation in CSS, but
you could use Hyphenator.js for a proper client-side hyphenation online.

ríos = FAIL!

color: CONTRASTES y colores complementarios

interlineado mayor al puntaje de la letra.

“Force-justified” text, or hyphenless justifi- “Force-justified” text, or hyphenless justifi-
cation, always creates ugly rivers and awk- cation, always creates ugly rivers and awk-
ward spacing which causes the reader to
lose the natural flow of the text as the eye ward spacing which causes the reader to
OBJETIVO
JERARQUÍA
Teoria del color

Guía al usuario
Cuenta una historia
Maneja el humor de la persona
No se debe exagerar con el uso del color
Llama la atención del usuario
Monocromático
Un solo color
Mejor para diseños simples
Sensación atmosférica

Nice weather
Analógico
Colores adyacentes en el círculo
Agradable para la vista
Fomenta un estado de animo pacifico y comfortable
Lo usa la naturaleza

Haze
Triada
Colores equidistantes en el círculo
Díficil de lograr
Recomendado para cartoons, animación, fantasía
Complementarios
Colores opuestos
Muy popular
Atractivo para el ojo
NUNCA usarlos en 50% y 50%

Bikester
Complementario dividido
Similar al complementario pero con un lado dividido
Mas livertad creativa

Taasky
Tetrada
Dos pares de colores opuestos
Nunca usar 25% de cada uno en el espacio de
diseño
Dificil pero muy atractivo

Vine
Prestigio