Módulo 4: Diseño de Interfaz

Gonzalo García de Vinuesa Díaz del Río
UXER SCHOOL
Published in
3 min readMar 19, 2019

UX / UI Design Bootcamp

El diseño de interfaz, que toma en cuenta los elementos tanto para diseñar (las tipografías, el color, las imágenes…) como el soporte en el que convivirán (pantallas de ordenador, tablets, smart tv, smartphones…) es decir, cualquier entorno digital con el que interactuamos en nuestro día a día, permite establecer una comunicación entre marca y usuario, por lo que puedes llegar a comprender el valor de este punto en la estrategia de diseño de un producto digital.

Comenzamos la sesión abordando un elemento fundamental en cualquier producto digital: el branding, desde el concepto, la definición de qué es una marca, tips y ejemplos. Para ponerlo en práctica, los UXERS realizan un ejercicio en el que definen el canvas de la marca y el mapa de audiencias.

Pasamos entonces a los fundamentos de diseño; qué es diseño y qué es arte, ¡la eterna discusión! y realizamos un ejercicio de creación de moodboards, herramienta gracias a la cual conseguirás tener las ideas muy claras para avanzar o arrancar un proyecto.

Posteriormente, nos adentramos en la identidad de marca, definiendo su personalidad y desarrollando arquetipos, definimos el naming y la identidad visual.

Continuamos nuestra experiencia formativa aprendiendo sobre guías de estilo, las cuales recogen la identidad verbal y visual, encajando con el sistema de marca como lo haría la maquinaria interna de un reloj. Asentamos conocimientos creando una guía de estilo con InVision donde incluimos el naming, el brand canvas, el logo y los colores.

Seguimos teniendo presentes los Dark Patterns, definiendo qué tipos hay y qué beneficios e inconvenientes tienen cada uno.

Nos grabamos a fuego que un producto digital debe ser responsive y multidispositivo, haciendo una revisión a vectores, ejemplos de distintos dispositivos táctiles y flujos de trabajo del proceso de diseño.

Dedicamos buena parte del módulo a los Sistemas de Diseño, descubriendo su historia y evolución desde los años 20, con ejemplos de aplicaciones en productos físicos, diferencias entre Atomic Design y Sistemas de Diseño, ejemplos actuales de “Design Systems”, cómo empezar a construirlos, cómo se forman equipos, y el control de versiones.

Respecto a las herramientas a las que recurriremos en esta fase, tomaremos un primer contacto con Sketch, incluyendo plugins, símbolos y librerías. Avanzaremos aprendiendo a prototipar de forma nativa en este programa, usaremos Craft y definiremos flujos e interacciones con Marvel para ver ventajas e inconvenientes.

Un aspecto importante en este punto es mantener una comunicación correcta entre diseño y desarrollo, y para ello, hacemos uso de herramientas como Zeplin, que nos permitirá dejar todo listo para que los responsables de front-end no tengan que tomar decisiones y surjan impedimentos a la hora de programar.

Si buscas tener una vista general del curso, accede a la bitácora en la que podrás ver los diferentes módulos de los que se compone nuestro UX / UI Design Bootcamp.

¿Quieres saber más acerca del planteamiento, los mentores o bien, que hablemos del curso? Solicita una llamada en la página:

--

--