Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

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

Ad

El Problema

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 34 Ad
1 of 34 Ad
Advertisement

More Related Content

Advertisement

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

  1. 1. Diseñadores vs. Maquetadores 5 tips para la supervivencia de ambos
  2. 2. El Problema
  3. 3. 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”
  4. 4. 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”
  5. 5. Que hacer?
  6. 6. DESIGNERS VS. CODERS
  7. 7. 5 tips Diseñador > Maquetador
  8. 8. 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
  9. 9. 2 Diseñador > Maquetador | tip 2 Qué pasa si... “Háblame de funcionalidades” Antes de... ...Después de
  10. 10. 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
  11. 11. 4 Diseñador > Maquetador | tip 4 Ajax Optimización de carga “El buen código es aquel que favorece la UX” Modal Windows
  12. 12. Disqus - The signup form guesses your name based on the first part of your email address as you type
  13. 13. 5 Diseñador > Maquetador | tip 5 paleta de colores márgenes “los detalles importan” pixel-perfect paddings
  14. 14. 5 tips Maquetador > Diseñador
  15. 15. 1 Maquetador > Diseñador | tip 1 Peso “Es una aplicación, no una revista” Son Píxeles, no cm El DPI no existe
  16. 16. 2 Maquetador > Diseñador | tip 2 “CRAP es vital” Contraste Alineación Repetición Posicionamiento
  17. 17. 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
  18. 18. 4 Maquetador > Diseñador | tip 4 Accesibilidad Diseña API “Se flexible, piensa lo impensable” Pantallas IE6
  19. 19. 5 Maquetador > Diseñador | tip 5 Organiza Piensa en los estados “Diseña, no dibujes” Strip it down Estandariza Explica
  20. 20. Un último par de cosas...
  21. 21. Proximidad Experiencia Similaridad Gestalt Cierre Figura y Fondo Simetría Buena Continuación
  22. 22. Hacer las cosas 90% bien, toma 90% del tiempo el otro 10%, toma otro 90% del tiempo
  23. 23. Muchas Gracias! delicious.com/webjac/ux

×