5 tips de diseñadores a maquetadores... y viceversa

Diseñadores vs. Maquetadores5 tips para la supervivencia de ambos

El Problema

LOS PROGRAMADORES DICEN...

“No piensa en como se verá el sitio mas allá de las dimensiones de su PSD”

“Exportan todo el texto en otras fuentes como JPG”

“Piensan que pueden usar Overlay en CSS”

“Utilizan el HTML que exporta Photoshop”

“Diseñan como si fuesen la web fuese una imprenta”

LOS DISEÑADORES DICEN...

“Necesitan un diseño hasta el diálogo de Olvido su password?”

“Piensan que 11px es genial para el texto del sitio (14px para

títulos)”

“No entienden el concepto de alinear las cosas”

“Te piden que exportes la imagen de fondo así sea una línea negra

de 1px”

“Asignan valores al azar a los margins y paddings”

Que hacer?

DESIGNERS VS. CODERS

5 tipsDiseñador > Maquetador

1“Haz Código Semántico”

Diseñador > Maquetador | tip 1

Tu no eres un usuario

Mejores prácticas

La mejora progresiva está bien

Prueba nuevas cosas

“Háblame de funcionalidades”2

Diseñador > Maquetador | tip 2

Qué pasa si...

Antes de... ...Después de

3“La interfaz y el diseño son el software”

Diseñador > Maquetador | tip 3

Tus Divs no importan

La base de datos no importa

PH Qué?

4“El buen código es aquel que favorece la UX”

Diseñador > Maquetador | tip 4

Ajax

Modal Windows

Optimización de carga

Disqus - The signup form guesses your name based on the first part of your email address as you type

“los detalles importan”5Diseñador > Maquetador | tip 5

márgenes

paddings

paleta de colores

pixel-perfect

5 tipsMaquetador > Diseñador

1“Es una aplicación, no una revista”

Maquetador > Diseñador | tip 1

El DPI no existe

Peso

Son Píxeles, no cm

“CRAPes vital”2

Maquetador > Diseñador | tip 2

ContrasteAlineaciónRepeticiónPosicionamiento

“No temas a la complejidad, pero no te

quedes en ella”3Maquetador > Diseñador | tip 3

http://design.activeside.net/why-designers-should-seek-complexity

“del caos emerge un orden mayor”

“Se flexible, piensa lo impensable”4

Maquetador > Diseñador | tip 4

Pantallas

Accesibilidad

IE6

Diseña API

5“Diseña, no dibujes”

Maquetador > Diseñador | tip 5

Estandariza

Organiza

Explica

Piensa en los estados

Strip it down

Un último par de cosas...

Gestalt

Proximidad

Similaridad

Cierre

Buena ContinuaciónSimetría

Figura y Fondo

Experiencia

Hacer las cosas 90% bien, toma 90% del tiempo

el otro 10%, toma otro 90% del tiempo

Muchas Gracias!

delicious.com/webjac/ux