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

Made with Slides.com