Aprendiendo el proceso de Design to Code
Aunque no seas diseñador y nunca hayas usado software de diseño, aún puedes lanzar productos que cumplan su función y estén bien diseñados. Los siguientes pasos que te voy a guiar se pueden dividir en tres partes: Planificación Diseño Programación No es un proceso UX completo, pero te permitirá…
Aunque no seas diseñador y nunca hayas usado software de diseño, aún puedes lanzar productos que cumplan su función y estén bien diseñados.
Los siguientes pasos que te voy a guiar se pueden dividir en tres partes:
- Planificación
- Diseño
- Programación
Está lejos de ser un proceso UX completo, pero te permitirá coger tu propio diseño y hacerlo realidad.
1. Planifícalo
En tu fase inicial de planificación necesitas conocer tu objetivo, y qué quieres lograr con tu proyecto.
Cuando sepas para qué propósito estás construyendo tu app o tu producto, necesitas saber quién lo va a usar.
Deberías pensar en tu audiencia de tres formas diferentes.
>Quién: Demografía, edad, género, profesión, etc.
>Dónde: En qué contexto usarán tu producto.
>Qué: El tipo de dispositivo en el que usan tu producto.
Coge esta información y deja que influya en tus decisiones mientras diseñas.
El siguiente paso es hacer un flowchart básico, es decir, ver cómo el usuario avanza por tu producto, paso a paso, en lugar de simplemente programarlo directamente.
Cuando haces un flowchart evitas cometer errores que te obligan a volver atrás y hacer grandes cambios. Un ejemplo de flowchart que he usado en Quipu está en la imagen para darte una idea general, pero si quieres profundizar — aquí hay un vídeo explicando el proceso usando Sketch.
La última parte de la planificación es definir una definición funcional de cada página de tu producto. Es un documento que será tu documentación o base de conocimiento sobre lo que hace cada pantalla, qué muestra, y qué rutas y acciones se pueden tomar desde ahí.
Así que si estás construyendo una app, deberías tener una página con la siguiente información para cada interfaz:
Nombre de la vista (o del módulo) –> El propósito de la página –> Información completa –> Información parcial –> Información en lista –> Rutas/acciones.
Si hiciste tu flowchart correctamente, la documentación dependerá en gran medida de ese Flow Chart.
2. Diséñalo
Lo más importante como diseñador novato o cuando trabajas en un proyecto que has programado tú mismo, es usar patrones establecidos.
No hay ninguna razón para reinventar la rueda otra vez.
Un lugar donde puedes encontrar preguntas y respuestas para la mayoría de problemas es ux.stackexchange.com. Es similar a stackoverflow.com, pero para diseño, y sabemos lo importante que es eso para la mayoría de diseñadores, así que no tengas miedo de buscar inspiración y ayuda de gente con más experiencia.
Después empieza con tu wireframing. Traduce tu flujo y definición funcional a una pantalla de baja fidelidad que contenga todo excepto el acabado del diseño. Es decir, céntrate en tener todas las rutas, acciones, botones y contenido bien antes de hacer que se vea bonito.
Una de las cosas más importantes del proceso de diseño es diseñarlo como lo programarías. Recomiendo usar Sketch, pero usa el software con el que te sientas más cómodo, como Illustrator o Photoshop.
Diseñar como lo programarías simplemente significa usar contenedores transparentes sin relleno para imitar contenedores y wrappers. También usa convenciones de nomenclatura para capas y grupos igual que las usarías al programar tus componentes.
- Si quieres ver ejemplos hechos con Sketch, échale un vistazo aquí.
Lo último que quiero mencionar en cuanto a diseño, es usar los principios de Atomic Design, que es una forma de diseñar interfaces que amplía lo que hemos cubierto en la parte de “Diseñar como lo programarías” de arriba.
Habla de estructurar tu diseño, y definirlo en átomos (colores, fuentes, formas) y formar moléculas usándolos (botones, inputs, listas, etc.), para finalmente hacer organismos. Un organismo se convierte entonces en una plantilla. Por ejemplo, una barra de navegación que tiene un menú, una barra de búsqueda y un logo (unas cuantas moléculas).
3. Prográmalo
Como diseñador no voy a enseñarte a programar, la mayoría de vosotros probablemente sois programadores más talentosos que yo, así que solo mencionaré el software que deberías usar para conseguir todos los estilos CSS que vayas a necesitar.
Zeplin.io es un software que toma diseños de Sketch, exporta estilos CSS y te da todos los tamaños, márgenes, paddings, bordes que necesitas para traducir tu diseño a código sin perder la calidad y el nivel de detalle en el que tanto trabajaste.
Si seguiste el atomic design, y diseñaste como lo programarías, entonces este proceso es simple, rápido y con errores mínimos.
Puedo decir honestamente que en Quipu, donde hago el diseño, esta es la herramienta que más tiempo me ha ahorrado de todas las que he encontrado. Redujo drásticamente tanto el coste como el tiempo empleado en traducir el aspecto de nuestras apps y web a todos los navegadores.
También puedes leer:
Por qué deberías apuntar tu diseño UX/UI a zombies
Este post fue escrito por la media manager de itnig, Sindre Hopland, basado en la presentación del lead designer en Quipu, Kamil Jura.