Creación de Mood Boards para Identidad Visual de Productos Digitales

Clase 20 de 39 • Curso de Diseño de Interfaces Únicas

Resumen

Es importante definir el estilo visual (Visual Design) de tu plataforma para eso podemos utilizar las herramientas de:

Moodboard: Pizarras que nos ayudan a construir las identidades visuales que deseamos expresar, podemos utilizar programas como Pinterest, Murally o milanote.
Suag: Elementos que hacen a tu plataforma única, comunica qué quiere lograr sólo con el ámbito visual en una pantalla.

La combinación de nuestro estilo visual con nuestro wireframe nos ayudará a poder plantear Mockups:

Un Mockup es el detalle de alta fidelidad de una pantalla de tu flujo que nos muestra visualmente los detalles con colores, estructuras, tipografías, entre otros elementos visuales de manera estática.

Recomendaciones: Para definir el estilo visual de tu plataforma enlista los conceptos que vas a necesitar y sal de tu oficina para experimentar con todo lo que pienses te pueda ayudar.

Leniel Luzardo

student•

Me da la impresion de que la clase sobre la seleccion de colores estaba muy adelantada. Es decir, nosotros seleccionamos los colores pensando en el branding y el estilo de la aplicacion. Pero no es hasta este punto donde se vuelve a tocar ese tema. Pienso que la clase sobre la eleccion de colores no va en esa posicion y confunde la comprension real del proceso para diseñar, por lo menos a mi me confunde jeje.

El bocetado, la construccion del flujo y del wireframe deberia ser lo primero, la seleccion de color y prototipado me parece que deberia ser lo siguiente y por ultimo la seleccion final del estilo de la interfaz. Alguien que por favor me corrija si este aproach no esta ni cerca de ser acertado!. Exitos👍

Daniela Gonzalez

student•

Estoy totalmente de acuerdo contigo! me parece que en este punto aún no debería definirse el estilo visual

Juan Carlos Barbaran Meza

student•

Yo no tengo experiencia en diseño y me pierdo un poco

Luis Glex

student•

Mockup: Simulación estática de una pantalla en media o alta fidelidad que incluye, colores, contraste, tipoggrafía, entre otros. Permite a las partes interesadas tener una perspectiva realista del producto digital para tomar decisiones antes de pasar a la etapa de desarrollo.

Los moodboard nos permite tener a la mano ideas, estilos, patrones o componentes que nos inspiren y, o ayuden a definir la identidad visual de nuestro producto. Mi favorito es Pinterest.

Aarón González

student•

Excelente explicación @luis.glex :D

¿Qué herramienta usas para tus moodboards?

Salvador Salva

student•

Wireframes y Mockups son siempre estáticos, funcionan a diferentes niveles de definición.

Un Prototipo puede ser interactivo, esto nos acerca a la experiencia de cómo se comportará el producto cuando ya esté desarrollado en código.

Julián Rodríguez

student•

Una recomendación para los wireframes y prototipos de baja es que sean a blanco y negro, sobretodo cuando van a ser usados en pruebas de usabilidad, para que el usuario se centre en la navegación e interacción con el producto y no en detalles como color o tipografías.

Juan Carlos Barbaran Meza

student•

Pinterest ayuda mucho para inspirarte

Joel Subiabre Aravena

student•

Es excelente, también está Dribbble y Behance!

Efraín Hernández García

student•

Ver ciencia ficción para inspirarse

Carolina Gómez

student•

Antonio Alexander Estrella Gómez

student•

20. Definición de estilo de interfaces

Wireframe Low > Prototipo Low > Wireframe hight > Mockup > Prototipo hight
Visual design: toda la parte de estilo, ilustración y Swag
Equipo de Diseño
- Diseño de interfaces
- Diseño de producto
- Visual designer
Swag: Los pequeños elementos que hace único a tu producto a nivel de diseño.
Comunicar los conceptos de diseño
- Referencias
  - Moodboard
    - Watch
    - Like
    - Repeat
Buscar referencias en el mundo exterior
Referencias en ciencia ficción y videojuegos

Beto Toro

student•

Aquí es muy valido lo aprendido en el curso de introducción al diseño. En las primeras clases nos hablan sobre el concepto, que es el punto de partida para cualquier producto o desarrollo de diseño. Les recomiendo mucho el curso.

Carlos Andrés Roa Romero

student•

Los keywords son el mejor punto de partida.

Levi Nuñez

student•

Agradezco mucho el que un profesor se tome el tiempo de dejar una descripción de cada clase, ya que antes de iniciarla la leo y me pongo en contexto y puedo entender mejor la misma, y abajo de esta puedo poner mis notas que refuerzan lo escrito por el profesor.

Debería ser una practica común.

Pedro Isaac Aguilar

student•

• Moodboard: Pizarra en la que construimos las identidades visuales que deseamos expresar (mediante coleccionar referencias gráficas), podemos valernos de sites como: Pinterest, Dribbble, Murally o Milanote. Sal al exterior, experimenta algo diferente, ve más cosas, da un paseo, ve nuevas películas, juega videojuegos, investiga nuevos temas de cultura general, escucha nuevas canciones y haz una librería visual personal de recortes de imágenes, a manera de collage. Ello nos sirve mucho para encontrar inspiración y alimentar nuestra creatividad antes de comenzar a diseñar nuestra interfaz.

Lilia Romero

student•

En Mockupworld pueden encontrar mockups gratuitos para todo tipo, no solo para interfaces. Ahí también se pueden inspirar.

Juan Esteban Deossa Pertuz

student•

El ultimo paso para comenzar a diseñar nuestro Mockup, es definir el estilo visual de la interfaz, el estilo visual es la parte encargada de darle elementos diferenciadores a nuestros desarrollos, es la que se encarga de transmitir todos los conceptos que deseamos transmitir a través del desarrollo. Para crear nuestro estilo de interface, podemos usar varias herramientas, una de las mejores herramientas son los moodboards, se trata de pasar los conceptos de nuestro desarrollo a imágenes y crear un tablero que transmita los conceptos que queremos a través de imágenes y colores.

Diana Mildred

student•

¿Como serian los flujos de trabajo que se manejan con desarrollo partiendo de tener un mockup estatico y animado? no se a que se refiere. minuto 0:40.

Diana Mildred

student•

Aquí esta la respuesta del profe

Daniela Sthephania Castaño

student•

Cuál es la diferencia entre diseño de interfaz, diseño de producto, visual design? muchas gracias

Yareli Ramos

student•

El Diseño de producto tiene mas que ver con los negocios, debe estar muy de cerca con las relaciones entre el usuario y el producto, investigar sus reacciones y comportamiento y ver como mejorar el producto con eso, analiza mucho, pero siempre esta presente durante el desarrollo del producto, desde la ideación hasta el testeo.

El diseño visual, se refiere más a la parte del prototipo. Tomar todo eso que se analizó de los usuarios y del producto, para hacer una identidad visual y de la marca. Se preocupa mas por los fundations.

El diseño de interfaz es algo que un Visual Designer hace. Tomando todo eso de los fundations y transformarlos en una pantalla.

Hay muchos roles dentro de UX, muchos de ellos incluso se conocen por diferentes normes. Te recomiendo leer artículos de Interaction Design Fundation. En concreto hay un artículo para entender más sobre el mundo del UX Design

https://www.interaction-design.org/literature/article/the-ultimate-guide-to-understanding-ux-roles-and-which-one-you-should-go-for

Jhon Ramirez

student•

me da la impresion que el wireframe= HTML, Mockuo= CSS, prototipo= Javascript

Carolina Gómez

student•

Empezar a definir la identidad de nuestro producto digital. Tenemos que entender estos conceptos, WIREFRAME + MOCKUP + PROTOTIPO. El mockup muestra con todo lo visual a real diseño, ya con esto podemos empezar a trabajar con nuestros equipos de trabajo.
Visual Design: Ilustración de tipo Osua que ya tiene una plataforma (Microstock?), ya en el equipo de diseño lleva a haber 3 factores, por ejemplo El DISEÑO DE INTERFACES, EL DISEÑO DE PRODUCTO Y EL VISUAL DESIGN. Estos 3 factores ya sean como PERSONAS o como 1 persona que tiene estos 3 conceptos aplicados a interfaces hacen el producto digital en la parte visual.
CONCEPTOS: Para definir nuestro producto tenemos que empezar por conceptos muy pequeños, palabras, empezar a tener ideas, de que es lo que queremos comunicar, puesto que ahora si vamos a meternos en un ámbito visual. Para hacer esto vamos a utilizar referencias, estas son elementos que nos ayudan a darnos idea o inspirarnos para construir la identidad visual de nuestra plataforma. (Nos da ejemplos de como hacerlo).
MOODBOARD: Juntar todas las imágenes que me lleven a lograr lo que yo quiero lograr con mi plataforma, importante hacer una LISTA DE CONCEPTOS que representen la marca, y buscar referentes en todas las plataformas posibles, desde imágenes en internet, video juegos, hasta películas o avisos en la calle, VE DE TODO, LIKE, REPITE. Así lograremos referencias lógicas para construir nuestro productos, en el proceso nos daremos cuenta de muchas cosas que necesitamos. Así identificamos según la personalidad y look and feel que queremos darle a nuestro producto. Tal cual que una marca de identidad. Entre más experimentemos, mejor quedará nuestro trabajo. Encontraremos nuevos paradigmas de patrones y diseño de usabilidad.
Conceptualizar entro de un tema no se debe tomar a la ligera, ya que las interfaces complejas agrega información mucho más compleja y el resultado puede ir más allá de una app regular.
SWAG: Elemento importante en mi plataforma, tiene que ver con el producto que estoy diseñando, pongo muchos elementos que ya definen mi app, mi swag tiene que transmitir y comunicar la personalidad, que quiero lograr en la plataforma.

Salvador Salva

student•

Diferencias entre Wireframes, Mockup y Prototipo

Salvador Salva

student•

Crear referencias para definir el estilo de la interfaz

Fabrizzio Medrano Duran

student•

xdxdxd

DANIEL RUEDA

student•

¿Es Suag? ó Swag

Carlos Hernandez

student•

Es swag