Diseñadores vs. Maquetadores    5 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”         ...
LOS DISEÑADORES DICEN...“Necesitan un diseño hasta el diálogo de         Olvido su password?”                             ...
Que hacer?
DESIGNERS VS. CODERS
5 tipsDiseñador > Maquetador
1Diseñador > Maquetador | tip 1                                 Prueba nuevas cosas     Tu no eres un usuario     “Haz Cód...
2Diseñador > Maquetador | tip 2  Qué pasa si...                   “Háblame de                 funcionalidades”         Ant...
3Diseñador > Maquetador | tip 3                                          PH Qué?  Tus Divs no importan  “La interfaz y el ...
4Diseñador > Maquetador | tip 4         Ajax                                 Optimización de carga     “El buen código es ...
Disqus - The signup form guesses your name based on the first part of your                        email address as you type
5Diseñador > Maquetador | tip 5                                        paleta de colores      márgenes       “los detalles...
5 tipsMaquetador > Diseñador
1Maquetador > Diseñador | tip 1                                 Peso    “Es una aplicación, no una             revista”   ...
2Maquetador > Diseñador | tip 2                             “CRAP                             es vital”  Contraste  Alinea...
3Maquetador > Diseñador | tip 3     “del caos emerge un        orden mayor”          “No temas a la       complejidad, per...
4Maquetador > Diseñador | tip 4                                 Accesibilidad     Diseña API          “Se flexible, piensa ...
5Maquetador > Diseñador | tip 5                                 Organiza     Piensa en los estados           “Diseña, no d...
Un último par de cosas...
Proximidad                   Experiencia               Similaridad             Gestalt            Cierre  Figura y Fondo  ...
Hacer las cosas 90% bien,   toma 90% del tiempo      el otro 10%,toma otro 90% del tiempo
Muchas Gracias! delicious.com/webjac/ux
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
Upcoming SlideShare
Loading in …5
×

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

3,421 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,421
On SlideShare
0
From Embeds
0
Number of Embeds
875
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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 tipsDiseñador > Maquetador
  8. 8. 1Diseñ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. 2Diseñador > Maquetador | tip 2 Qué pasa si... “Háblame de funcionalidades” Antes de... ...Después de
  10. 10. 3Diseñ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. 4Diseñ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. 5Diseñador > Maquetador | tip 5 paleta de colores márgenes “los detalles importan” pixel-perfect paddings
  14. 14. 5 tipsMaquetador > Diseñador
  15. 15. 1Maquetador > Diseñador | tip 1 Peso “Es una aplicación, no una revista” Son Píxeles, no cm El DPI no existe
  16. 16. 2Maquetador > Diseñador | tip 2 “CRAP es vital” Contraste Alineación Repetición Posicionamiento
  17. 17. 3Maquetador > 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. 4Maquetador > Diseñador | tip 4 Accesibilidad Diseña API “Se flexible, piensa lo impensable” Pantallas IE6
  19. 19. 5Maquetador > 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

×