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

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

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

Juan Carlos Barbaran Meza

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

Luis Glex

Hace 8 años

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

Excelente explicación @luis.glex :D

¿Qué herramienta usas para tus moodboards?

Salvador Salva

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

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

Pinterest ayuda mucho para inspirarte

Joel Subiabre Aravena

Hace 3 años

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

Efraín Hernández García

Ver ciencia ficción para inspirarse

Carolina Gómez

Antonio Alexander Estrella Gómez

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

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

Los keywords son el mejor punto de partida.

Levi Nuñez

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

• 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

Hace 5 años

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

Juan Esteban Deossa Pertuz

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 Galindo

¿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 Galindo

Aquí esta la respuesta del profe

Daniela Sthephania Castaño

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

Yareli Ramos

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

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

Jhon Ramirez

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

Carolina Gómez