diseogrfico

for dummies

diseogrfico
comunicacin visual
EMISOR - CODIFICADOR - RECEPTOR

PERCEPCIN

Good
Design
Is
Obvious
great
design is
transparent
Joe Sparano

Erik Spiekermann

UX
user experience

Norman, D. A. (2002). Emotion and design:

Attractive things work better.
Usabilidad = Belleza
Belleza NO superior a usabilidad.
ESTTICA VS USABILIDAD?

La esttica tiene una funcin en donde las

emociones juegan un papel importante la
experiencia de usuario (UX)
Si existe un diseo visual agradable, los usuarios se sienten ms relajados, y tienden a ver
el sitio ms creble y fcil de usar.

first impression

A positive
usually based on looks rather than interaction
determines the value of the website / app on the
users behalf.

fuente: uxmyths.com

aprobacin
vista

Stanford Credibility Project

2500+ participantes
Importancia de: layout, tipografa, colores.

If the app doesnt have some kind of aesthetic value,

it will not only fail to attract the users attention,
it will also fail to HOLD the users attention.
- Max Steenbergen
UX MAGAZINE

FORMA y FUNCIN
BELLEZA y CEREBRO
PLACER y USABILIDAD

Apple...
more
cognitive cost

less
cognitive cost

easier on the eye.

- Jrg Nnni (Visual Perception)

El usuario asocia ciertos comportamietos con

elementos especficos basados en su APARIENCIA.
Ej. Es ms fcil reconocer BOTONES con
formas curvas o redondas.

TIPOGRAFA

Cul es el objetivo?
Hacia quin va dirigida?

LEGIBILIDAD
Escoge typefaces con formas convencionales
Typefaces con espacios generosos

GLSMIT

GLS MIT

Altura en X mayor.

ec

ec

LEGIBILIDAD
Escoge typefaces con formas convencionales
Typefaces con espacios generosos

GLSMIT

GLS MIT

Altura en X mayor.

ec

ec

a a

sin serifas

sans serif / palo seco

textos cortos

con serifas
serif

textos largos

LECTURA
Justificacin adecuada (evitar ros)
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.

ros = FAIL!

color: CONTRASTES y colores complementarios

interlineado mayor al puntaje de la letra.
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

Force-justified text, or hyphenless justification, always creates ugly rivers and awkward spacing which causes the reader to

OBJETIVO

JERARQUA

Teoria del color

Gua al usuario
Cuenta una historia
Maneja el humor de la persona
No se debe exagerar con el uso del color
Llama la atencin del usuario

Monocromtico
Un solo color
Mejor para diseos simples
Sensacin atmosfrica

Nice weather

Analgico
Colores adyacentes en el crculo
Agradable para la vista
Fomenta un estado de animo pacifico y comfortable
Lo usa la naturaleza

Haze

Triada
Colores equidistantes en el crculo
Dficil de lograr
Recomendado para cartoons, animacin, fantasa

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
diseo
Dificil pero muy atractivo

Vine

Prestigio