5 tips de diseñadores a maquetadores... y viceversa
TRANSCRIPT
![Page 1: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/1.jpg)
Diseñadores vs. Maquetadores5 tips para la supervivencia de ambos
![Page 2: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/2.jpg)
![Page 3: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/3.jpg)
![Page 4: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/4.jpg)
El Problema
![Page 5: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/5.jpg)
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”
![Page 6: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/6.jpg)
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”
![Page 7: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/7.jpg)
Que hacer?
![Page 8: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/8.jpg)
DESIGNERS VS. CODERS
![Page 9: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/9.jpg)
5 tipsDiseñador > Maquetador
![Page 10: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/10.jpg)
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
![Page 11: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/11.jpg)
“Háblame de funcionalidades”2
Diseñador > Maquetador | tip 2
Qué pasa si...
Antes de... ...Después de
![Page 12: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/12.jpg)
![Page 13: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/13.jpg)
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é?
![Page 14: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/14.jpg)
![Page 15: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/15.jpg)
4“El buen código es aquel que favorece la UX”
Diseñador > Maquetador | tip 4
Ajax
Modal Windows
Optimización de carga
![Page 16: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/16.jpg)
Disqus - The signup form guesses your name based on the first part of your email address as you type
![Page 17: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/17.jpg)
“los detalles importan”5Diseñador > Maquetador | tip 5
márgenes
paddings
paleta de colores
pixel-perfect
![Page 18: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/18.jpg)
![Page 19: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/19.jpg)
5 tipsMaquetador > Diseñador
![Page 20: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/20.jpg)
1“Es una aplicación, no una revista”
Maquetador > Diseñador | tip 1
El DPI no existe
Peso
Son Píxeles, no cm
![Page 21: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/21.jpg)
![Page 22: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/22.jpg)
“CRAPes vital”2
Maquetador > Diseñador | tip 2
ContrasteAlineaciónRepeticiónPosicionamiento
![Page 23: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/23.jpg)
![Page 24: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/24.jpg)
“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”
![Page 25: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/25.jpg)
![Page 26: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/26.jpg)
“Se flexible, piensa lo impensable”4
Maquetador > Diseñador | tip 4
Pantallas
Accesibilidad
IE6
Diseña API
![Page 27: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/27.jpg)
![Page 28: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/28.jpg)
5“Diseña, no dibujes”
Maquetador > Diseñador | tip 5
Estandariza
Organiza
Explica
Piensa en los estados
Strip it down
![Page 29: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/29.jpg)
![Page 30: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/30.jpg)
Un último par de cosas...
![Page 31: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/31.jpg)
Gestalt
Proximidad
Similaridad
Cierre
Buena ContinuaciónSimetría
Figura y Fondo
Experiencia
![Page 32: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/32.jpg)
Hacer las cosas 90% bien, toma 90% del tiempo
el otro 10%, toma otro 90% del tiempo
![Page 33: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/33.jpg)
Muchas Gracias!
delicious.com/webjac/ux
![Page 34: 5 tips de diseñadores a maquetadores... y viceversa](https://reader033.vdocuments.site/reader033/viewer/2022052600/557ad8e3d8b42a590b8b459d/html5/thumbnails/34.jpg)