Diseño para Desarrolladores
LET'S BUILD TOGETHER
Laura Aguirre
PRODUCT DESIGN
Desarrollador Front-end
Importante labor
Resaltar su trabajo
Realidad los diseños
Habilidades técnicas
Algunas guías fáciles de seguir...
Diseño para Desarrolladores
Empaparse del proyecto
- Conocer el producto
- Analizar el diseño
- Nunca empezar con dudas
- Estimar tiempos de trabajo
Tip 1.
Idea, Definición de producto: (documento)
Diseño de Marca
Diseño de Interfaz
Proceso de Diseño
- Briefing
- Moodboard
- Propuesta de color, tipo y forma
- Entrega final
- Diseño de wireframes
- Diseño de mockups
- Prototipo (InVision, Flinto)
- Tabla o guía de estados y componentes
(Cheatshheet) Zeplin
- Exportar assets
- Entrega final
No olvidar feedback y testing de usuario.
Diseño de Wireframes
Bajo y alto nivel
Diseño de Mockups (Desktop and mobile)
Prototipo
Assets y material gráfico
Tabla ó guía de estados y componentes
¡Ponte el sombrero creativo!
Tip 2.
- Ponte en el rol de diseñador
- Analiza con ojos de usuario
Critica el diseño con argumentos:
Usabilidad
Experiencia
Navegabilidad
Accesibilidad
Proponer ideas para mejorar!
de usuario
Iguala el diseño
Tip 3.
Tanto cómo sea posible
"Pixel perfect"
Markup
Respeta márgenes
Assets, fuentes, guías
Cariño al responsive
Hex. de los color
Perfeccionistas
Mejorar el nivel de habilidades a largo plazo
Design
VS
Markup
Que esto nos nos pase :s
El tiempo se burla de nosotros
Tip 4.
Evita agregar detalles adicionales al markup
Evita agregar adornos, colores, fuentes, iconos, imágenes, animaciones o efectos, etc.
Por lo contrario, dar ideas de mejoras para discutir con el equipo de diseño/producto.
Ojos frescos
Tip 5.
Tiempo entre versiones y revisiones
hasta que no puedas más,
¡Developer!
Trabaja tan fuerte
...ó hasta que te guste!
¡Pero hazlo!
Buena Comunicación
Tip 6.
Entre todos los miembros del equipo, especialmente con el diseñador/creativo
Front-End and Designer
Trabajo de la mano