Contenido del curso
Creación de Mood Boards para Identidad Visual de Productos Digitales
Es importante definir el estilo visual (Visual Design) de tu plataforma para eso podemos utilizar las herramientas de:
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
Estudiante
Daniela Gonzalez
Estudiante
Juan Carlos Barbaran Meza
Estudiante
Luis Glex
Estudiante
Aarón González
Estudiante
Salvador Salva
EstudianteJulián Rodríguez
EstudianteJuan Carlos Barbaran Meza
Estudiante
Joel Subiabre Aravena
Estudiante
Efraín Hernández García
Estudiante
Carolina Gómez
Estudiante
Antonio Alexander Estrella Gómez
Estudiante
Beto Toro
EstudianteCarlos Andrés Roa Romero
Estudiante
Levi Nuñez
Estudiante
Pedro Isaac Aguilar
Estudiante
Lilia Romero
Estudiante
Juan Esteban Deossa Pertuz
Estudiante
Diana Mildred Galindo
EstudianteDiana Mildred Galindo
Estudiante
Daniela Sthephania Castaño
Estudiante
Yareli Ramos
Estudiante
Jhon Ramirez
EstudianteCarolina Gómez
EstudianteSalvador Salva
EstudianteSalvador Salva
Estudiante
Fabrizzio Medrano Duran
Estudiante
DANIEL RUEDA
Estudiante
Carlos Hernandez
EstudianteMe 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👍
Estoy totalmente de acuerdo contigo! me parece que en este punto aún no debería definirse el estilo visual
Yo no tengo experiencia en diseño y me pierdo un poco
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.
Excelente explicación @luis.glex :D
¿Qué herramienta usas para tus moodboards?
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.
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.
Pinterest ayuda mucho para inspirarte
Es excelente, también está Dribbble y Behance!
Ver ciencia ficción para inspirarse
X2
20. Definición de estilo de interfaces
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.
Los keywords son el mejor punto de partida.
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.
• 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.
En Mockupworld pueden encontrar mockups gratuitos para todo tipo, no solo para interfaces. Ahí también se pueden inspirar.
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.
¿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.
Aquí esta la respuesta del profe
Cuál es la diferencia entre diseño de interfaz, diseño de producto, visual design? muchas gracias
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
me da la impresion que el wireframe= HTML, Mockuo= CSS, prototipo= Javascript
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.
Diferencias entre Wireframes, Mockup y Prototipo
Crear referencias para definir el estilo de la interfaz
xdxdxd
¿Es Suag? ó Swag
Es swag
