5 tips de diseñadores a maquetadores... y viceversa
TRANSCRIPT
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