El documento describe las tensiones entre diseñadores y programadores sobre cómo crear sitios web. Ofrece 5 consejos para cada rol: 1) para diseñadores, probar nuevas cosas y pensar en la funcionalidad antes del diseño; 2) para programadores, enfocarse en la interfaz y experiencia del usuario más que en detalles técnicos; 3) para ambos roles, recordar que los detalles importan y favorecer una buena experiencia de usuario.

1. Diseñadores vs. Maquetadores
5 tips para la supervivencia de ambos

4. El Problema

5. LOS PROGRAMADORES
DICEN...
“No piensa en como se verá el sitio mas
allá de las dimensiones de su PSD”
“Diseñan como si fuesen la web
fuese una imprenta”
“Exportan todo el texto en otras
fuentes como JPG”
“Utilizan el HTML que exporta
Photoshop”
“Piensan que pueden usar Overlay
en CSS”

6. LOS DISEÑADORES DICEN...
“Necesitan un diseño hasta el diálogo de
Olvido su password?”
“Asignan valores al azar a los
margins y paddings”
“Piensan que 11px es genial para
el texto del sitio (14px para
títulos)” “Te piden que exportes la imagen
de fondo así sea una línea negra
de 1px”
“No entienden el concepto de
alinear las cosas”

7. Que hacer?

8. DESIGNERS VS. CODERS

9. 5 tips
Diseñador > Maquetador

10. 1
Diseñador > Maquetador | tip 1
Prueba nuevas cosas
Tu no eres un usuario
“Haz Código Semántico”
Mejores prácticas
La mejora progresiva está bien

11. 2
Diseñador > Maquetador | tip 2
Qué pasa si...
“Háblame de
funcionalidades”
Antes de... ...Después de

13. 3
Diseñador > Maquetador | tip 3
PH Qué?
Tus Divs no importan
“La interfaz y el diseño son
el software”
La base de datos no importa

15. 4
Diseñador > Maquetador | tip 4
Ajax
Optimización de carga
“El buen código es aquel
que favorece la UX”
Modal Windows

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

17. 5
Diseñador > Maquetador | tip 5
paleta de colores
márgenes
“los detalles importan”
pixel-perfect
paddings

19. 5 tips
Maquetador > Diseñador

20. 1
Maquetador > Diseñador | tip 1
Peso
“Es una aplicación, no una
revista”
Son Píxeles, no cm
El DPI no existe

22. 2
Maquetador > Diseñador | tip 2
“CRAP
es vital”
Contraste
Alineación
Repetición
Posicionamiento

24. 3
Maquetador > Diseñador | tip 3
“del caos emerge un
orden mayor”
“No temas a la
complejidad, pero no te
quedes en ella”
http://design.activeside.net/why-designers-should-seek-complexity

26. 4
Maquetador > Diseñador | tip 4
Accesibilidad
Diseña API
“Se flexible, piensa lo
impensable”
Pantallas IE6

28. 5
Maquetador > Diseñador | tip 5
Organiza
Piensa en los estados
“Diseña, no dibujes”
Strip it down
Estandariza Explica

30. Un último par de cosas...

31. Proximidad Experiencia
Similaridad
Gestalt Cierre
Figura y Fondo
Simetría
Buena Continuación

32. Hacer las cosas 90% bien,
toma 90% del tiempo
el otro 10%,
toma otro 90% del tiempo

33. Muchas Gracias!
delicious.com/webjac/ux