Clase 10 Sistema de Diseño

Vista previa del material en texto

SISTEMA DE DISEÑO
SUPERFICIE
 Clase 10. CURSO UX-UI AVANZADO
Obligatoria siempre
RECUERDA PONER A GRABAR LA CLASE
Colocar todas las clases
LO MAS RELEVANTE DE LA CLASE 9
Identidad de Marca: Es la capacidad de generar una unidad de criterios visuales de nuestra marca sobre una base sólida de negocio que nos permitirá comunicarnos efectiva y coherentemente.
GLOSARIO:
Clase 9
Círculo de Oro: El ‘Círculo de oro’ es una herramienta para definir la visión y el propósito del proyecto que se va a llevar a cabo, nos ayudará a poder comunicar nuestra propuesta a los potenciales usuarios.
Guia de Estilos de contenidos: La guía de estilo es el manual que recoge las normas para la redacción del contenido, con el objetivo de mantener así la uniformidad y consistencia en toda la experiencia de usuario. El objetivo es facilitar el recorrido al usuario, reduciendo el tiempo y la energía que dedica a aprender cómo realizar una tarea.
GLOSARIO:
Clase 9
La guía de estilo no es un documento estático sino que evoluciona con la creación de contenido. La consecuencia de aplicar siempre -a lo largo de toda la experiencia de usuario- las normas incluidas en la guía de estilo es que el usuario podrá finalizar una tarea de manera más fácil, rápida y eficiente al reconocer cierto patrón en la interacción.
Clase 11
Motion Avanzado
CRONOGRAMA DEL CURSO
Clase 9
Identificación de Marca
Clase 10
Sistema de Diseño
CIRCULO DE ORO
UX WRITING
MINIMA IDENTIFICACIÓN VISUAL DE MARCA
REVISANDO EL PROYECTO
COREOGRAFIA UI MOTION
¿ARRANCAMOS?
Definir el sistema de diseño a partir del concepto y tono de la marca.
Identificar decisiones generales y particulares de la interfaz.
Definir los elementos mínimos de la identidad visual del proyecto.
Dotar de personalidad a la interfaz del prototipo.
OBJETIVOS DE LA CLASE
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 10
Producto Digital
Elementos de UX
James Garrett
Estrategia
Requerimientos
Estructura
ITERAR
Esqueleto
Superficie
Herramientas
Mapeo
Explorar
Construcción
Testeo
TENDENCIA VS PERSONALIDAD
AFFORDANCE
SISTEMA DE DISEÑO
¡LLEGAMOS A LA ÚLTIMA FASE! HOY BUSCAMOS RESPONDER A LA PREGUNTA
¿Cómo se verá/percibirá finalmente la experiencia de usuario?
LOS 5 ELEMENTOS DE UX - JAMES GARRETT
Usar para los subtemas de un módulo.
PRODUCTO COMO FUNCIONALIDAD
PRODUCTO COMO INFORMACIÓN
5. SUPERFICIE
4. ESQUELETO
3. ESTRUCTURA
2. REQUERIMIENTOS
1. ESTRATEGIA
DISEÑO VISUAL
OBJETIVOS DEL PRODUCTO
NECESIDADES DEL USUARIO
ESPECIFICACIONES FUNCIONALES
REQUERIMIENTOS DE CONTENIDO
DISEÑO DE LA INTERACCIÓN
ARQUITECTURA DE LA INFORMACIÓN
DISEÑO DE LA INFORMACIÓN
DISEÑO DE INTERFAZ
DISEÑO DE NAVEGACIÓN
» ¿Qué queremos obtener de este producto?
» ¿Qué quieren los usuarios obtener de este producto?
» ¿Sabemos qué vamos a construir? ¿Sabemos qué NO vamos a construir?
» ¿Cómo se organizan las funciones y la información en la app/sitio?
» ¿Cómo se distribuirán visualmente las funciones e info?
» ¿Cómo se verá/percibirá finalmente la experiencia de usuario?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
¿RECUERDAN LO QUE VIMOS LA CLASE PASADA?
Usar para los subtemas de un módulo.
Es la capacidad de generar una unidad de criterios visuales de nuestra marca sobre una base sólida de negocio que nos permitirá comunicarnos efectiva y coherentemente.
IDENTIDAD DE MARCA
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Unidad de Criterios Visuales
DISEÑO
Comunicarnos Efectiva y Coherentemente
PROPÓSITO
Base Sólida de Negocio
MODELO CANVA
DE PROPUESTA DE VALOR
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
TODO COMUNICA, EN NUESTRO VOCABULARIO DE DISEÑO NO DEBE EXISTIR LA PALABRA “LINDO”.
Usar para los subtemas de un módulo.
HOY NOS VAMOS A INTRODUCIR EN EL ADN DEL PROYECTO
Usar para los subtemas de un módulo.
“Tu marca es lo que otra gente dice de vos cuando no estás en la habitación”.
Jeff Bezos, Amazon.
Usar para slides de sólo texto con citas.
¿QUÉ SUCEDE HOY?
LAS DECISIONES MONÓTONAS ABUNDAN
¡NO SE DEJEN ATRAPAR!
Usar para los subtemas de un módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Muchas marcas en los últimos años han tomado lo que consideramos una ruta aburrida en su identidad para adaptarse a una audiencia diversa basada en dispositivos móviles. El resultado es una falta de expresión. Incluso en la industria de la moda, un hito de la creatividad y la expresión, las marcas de palabras encantadoras están dando paso a la tediosa similitud.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Parece que adaptarse a un público amplio es actualmente más importante que ser ellos mismos. Es como si cuanto más amplio fuera el público, más neutral debería ser. Esto lleva al aburrimiento final.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Escapar a las tendencias
MARCAS TIPO TEMPLATE MONOTONAS
Analizar y proponer una identificación visual acorde al proyecto
MARCAS CON PERSONALIDAD
QUE COMUNICAN CONCEPTOS Y ATRIBUTOS PROPIOS
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
HACIA DONDE ALGUNOS
DICEN QUE VAMOS
Usar para los subtemas de un módulo.
PERSONALIZACIÓN
Usar para los subtemas de un módulo.
Personalización de Ilustraciones
BRANDING MAS ALLA DEL LOGO
Usar para los subtemas de un módulo.
El logo es el 5% (y bajando)
ECO-DISEÑO
Usar para los subtemas de un módulo.
Eco-Branding
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Se plantea la reducción del 35% de uso de tinta, lo cual puede salvar millones de árboles. Este enfoque lo desarrolló InterBrand París. ¿Podemos pensar en interfaces que hagan menos uso de la luz de la pantalla?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
NO CONVIRTAMOS ESTO EN TENDENCIA.
PENSEMOS CUÁL ES LA MEJOR PROPUESTA PARA NUESTRA MARCA
Usar para los subtemas de un módulo.
MIV
MÍNIMA IDENTIFICACIÓN VISUAL
“El lenguaje visual es como cualquier otro lenguaje. Los malentendidos surgen si el lenguaje no es compartido y entendido por todos los que lo usan”.
Airbnb 
Usar para slides de sólo texto con citas.
EL OBJETIVO ES DEFINIR LOS ELEMENTOS MÍNIMOS VISUALES DE NUESTRA IDENTIFICACIÓN VISUAL DE MARCA
El diseño de logotipos no es la única representación visual de una marca. Hoy representa solo el 5% de todo lo que podemos hacer. Debemos poner en valor otros elementos para encontrar la personalidad de nuestra marca.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar quecontinúa el mismo módulo.
VEAMOS ALGUNOS EJEMPLOS DE CÓMO PERSONALIZAR NUESTRA MARCA
Usar para los subtemas de un módulo.
PERSONAJES Y TIPOGRAFÍAS
Usar para los subtemas de un módulo.
Los personajes representan la marca de una manera simbólica. Pueden formar parte del signo identificatorio o existir como un elemento de marca individual. Estos personajes pueden establecer la conexión con los usuarios y sirven como herramienta de comunicación e interacción con los usuarios, ayudando a transferir el mensaje de una manera diferente. 
PERSONAJES
Usar para slides de texto con imagen.
Una fuente tipográfica para un tipo de motivación diferente. Una fuente tipográfica para un tipo de usuario. Podemos pensar en la personalización ofreciendo diferentes alternativas al usuario.
TIPOGRAFÍA
Usar para slides de texto con imagen.
PROPUESTAS DE APP
CENTRADAS 100% EN...
Usar para los subtemas de un módulo.
La ilustración nos permite definir un estilo particular para nuestra marca. Si bien existen plataformas para la generación de ilustraciones, hay que tener cuidado de que se vuelvan tendencia y finalmente ya no sea un elemento que genere personalidad.
ILUSTRACIÓN
Usar para slides de texto con imagen.
TIPOGRAFÍA
Una propuesta de predominio tipográfico nos permite interpelar al usuario todo el tiempo, ofreciendo números y tipografías de gran tamaño. En estas propuestas nos centramos 100% en los datos y los mensajes a transmitir. 
Usar para slides de texto con imagen.
Una propuesta de predominio iconográfico nos permite pensar en íconos personalizados según el concepto de nuestra marca. En este caso se sugiere ser consistente con el estilo de icono y no tener diferentes tipos de trazos y terminaciones.
ICONOGRAFÍA
Usar para slides de texto con imagen.
Refiere a una propuesta de predominio de formas geométricas simples. Recordemos la Ley de Gestalt de Simplicidad: las formas complejas las percibimos como formas simples. Por lo tanto, en este tipo de propuestas ayudamos a que se perciban rápidamente.
GEOMETRÍA
Usar para slides de texto con imagen.
Refiere a una propuesta con predominio de la imagen como elemento rector de la misma. Las imágenes son utilizadas para dar información, para interactuar y tomar decisiones en el producto digital.
IMAGEN
Usar para slides de texto con imagen.
PROPUESTA CON UNA ESTRUCTURA
Usar para los subtemas de un módulo.
Las estructuras orgánicas se relacionan con movimiento y adaptabilidad. Implican fluidez. Nos permiten generar estructuras menos rígidas. Son propuestas donde las curvas organizan la estructura y son consistentes a lo largo del todo el proyecto.
ORGÁNICA
Usar para slides de texto con imagen.
Plantea estructuras más relacionadas con el Flat Design y el minimalismo de las formas. Son estructuras simples donde se hace foco en la información que se muestra en pantalla.
FULL PLENO
Usar para slides de texto con imagen.
Estructuras basadas en la repetición y secuencia de módulos que nos permiten organizar la información. Este tipo de estructura suele usarse en propuestas con gran cantidad de productos (ej: tiendas online.) 
MODULAR
Usar para slides de texto con imagen.
PROPUESTA CON UN ESTILO
Usar para los subtemas de un módulo.
Hoy podemos remitirnos a estilos clásicos de la historia si el proyecto lo amerita y el concepto de marca acompaña. Nos permiten combinar tipografías con ilustraciones particulares que nos darán personalidad.
CLÁSICO
Usar para slides de texto con imagen.
Relacionamos el degradé con el futuro, con estilos de app pensados en lo que vendrá, lo próximo. Esto también está dado por el imaginario o modelo mental de los usuarios acerca del futuro.
FUTURISTA
Usar para slides de texto con imagen.
¿QUÉ TIPOS DE FOTOS USAR?
Usar para los subtemas de un módulo.
NATURAL
FANTASÍA
Usar para slides de texto con imagen.
Debemos pensar -en relación a nuestro concepto- tono, voz y estilo que las imágenes deben acompañar también. Podemos pensar en diferentes niveles de estilo de fotos o decidir elegir uno preciso para nuestro proyecto.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
FINALMENTE PENSEMOS QUE, DEPENDIENDO EL PROYECTO, TENDREMOS QUE TOMAR DECISIONES
Usar para los subtemas de un módulo.
Buscamos
PERSONALIZACIÓN
A TRAVES DE:
Personaje
Tipografia
Otros
Definimos una propuesta
CENTRADA EN:
Ilustracion
Tipografia
Geometicica
Iconografia
Imagen
Con una
ESTRUCTURA:
Organica
Full Pleno
Modular
Y un
ESTILO:
Clasico
Futurista
EJE A
EJE B
Donde las
IMÁGENES
Se acercan más a:
MONOCROMATICA
FULL COLOR
DUOTONO
Donde el
CÓDIGO CROMÁTICO
Está compuesto por paleta:
100% LINEAL
100%
RELLENO
Donde la 
ICONOGRAFIA
Utilizada es:
50% LINEA Y 50% RELLENO
CUIDADO, NO PIERDAS DE VISTA EL AFFORDANCE DE LOS ELEMENTOS DE LA INTERFAZ. 
Usar para los subtemas de un módulo.
POR QUERER SER “DIFERENTES” PODEMOS TERMINAR EN UNA INTERFAZ QUE LOS USUARIOS NO ENTIENDAN, NO PUEDAN NAVEGAR O USAR.
Usar para los subtemas de un módulo.
¿PODEMOS DESCUBRIR EN QUÉ SE BASA SU PROPUESTA VISUAL DE MARCA?
Usar para los subtemas de un módulo.
PERSONALIZACIÓN:
CENTRADA EN:
ESTRUCTURA:
ESTILO:
IMÁGENES:
CÓDIGO CROMATICO:
ICONOGRAFIA:
PERSONALIZACIÓN:
Iconos
CENTRADA EN:
Iconografia e Imagen
ESTRUCTURA:
Modular
ESTILO:
Moderno
IMÁGENES:
Disfrutar / Viajar
CÓDIGO CROMATICO:
Full Color 
ICONOGRAFIA:
Lineal
PERSONALIZACIÓN:
CENTRADA EN:
ESTRUCTURA:
ESTILO:
IMÁGENES:
CÓDIGO CROMATICO:
ICONOGRAFIA:
PERSONALIZACIÓN:
Poco color
CENTRADA EN:
Ilustración
ESTRUCTURA:
Minimalista
ESTILO:
Moderno
IMÁGENES:
No usa.
CÓDIGO CROMATICO:
Monocolor.
ICONOGRAFIA:
No usa.
PERSONALIZACIÓN:
CENTRADA EN:
ESTRUCTURA:
ESTILO:
IMÁGENES:
CÓDIGO CROMATICO:
ICONOGRAFIA:
PERSONALIZACIÓN:
Estilos de fotos
CENTRADA EN:
Imagen
ESTRUCTURA:
Modular
ESTILO:
Moderno
IMÁGENES:
Personalizadas
CÓDIGO CROMATICO:
Monocolor.
ICONOGRAFIA:
No usa.
PERSONALIZACIÓN:
CENTRADA EN:
ESTRUCTURA:
ESTILO:
IMÁGENES:
CÓDIGO CROMATICO:
ICONOGRAFIA:
PERSONALIZACIÓN:
Color e Iconos
CENTRADA EN:
Iconografia
ESTRUCTURA:
Full Pleno
ESTILO:
Moderno
IMÁGENES:
No usa.
CÓDIGO CROMATICO:
Monocolor.
ICONOGRAFIA:
Lineal.
PERSONALIZACIÓN:
CENTRADA EN:
ESTRUCTURA:
ESTILO:
IMÁGENES:
CÓDIGO CROMATICO:
ICONOGRAFIA:
PERSONALIZACIÓN:
Personaje
CENTRADA EN:
Ilustración
ESTRUCTURA:
Modular
ESTILO:
Moderno
IMÁGENES:
No usa.
CÓDIGO CROMATICO:
Full Color.
ICONOGRAFIA:
Lineal.
AFFORDANCE
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios slides. No hay que usarla para todos los módulos.
Affordance es una propiedad o característica de un objeto que presenta un aviso sobre lo que se puede hacer con este objeto. En resumen, las prestaciones son señales que dan una pista de cómo los usuarios pueden interactuar con algo, ya sea físico o digital.
¿QUÉ ES?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
El término fue introducido por primera vez por el psicólogo James Gibson, quien investigó profundamente la percepción visual. Utilizó por primera vez el término en su libro 'Los sentidos considerados como sistemas perceptuales' en 1966. En 1979 aclara la definición de su terminología en el libro 'El enfoque ecológico de la percepción visual'.
James Gibson 👦
El término obtuvo su mayor desarrollo en las exploraciones de Donald Norman en el libro de 1988, "El diseño de las cosas cotidianas".
Donald Norman 👦
¿CÓMO UTILIZARLO EN NUESTRAS
INTERFACES DE USUARIO?
Primera clase
AFFORDANCE EXPLICITO (OBVIO)
E IMPLICITO (OCULTO)
Usar para los subtemas de un módulo.
Son indicaciones típicas y ampliamente conocidas que dirigen al usuario a una acción en particular.Ejemplo: cuando un botón diseñado como un elemento en el que se puede hacer clic (similar a un boton del mundo físico), el usuario comprende que puede hacer clic o tocarlo para interactuar.
Pistas obvias en la interfaz del usuario
Usar para slides de texto con imagen.
Las posibilidades implícitas no son tan obvias. Están ocultas y pueden revelarse sólo en un flujo particular de acciones de los usuarios. 
Ejemplo: elementos de navegación de múltiples capas, como un menú desplegable o botones expandibles que no se ven todo el tiempo o desde los primeros segundos de interacción, pero que se relevan después de una operación en particular.
Pistas ocultas en la interfaz del usuario
Usar para slides de texto con imagen.
AFFORDANCE GRÁFICOS
Usar para los subtemas de un módulo.
Se presentan con elementos visuales aplicados a una interfaz que ayudan a los usuarios a escanear su funcionalidad. Los gráficos se perciben y memorizan más rápidamente. 
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
Presentan el apoyo visual a la información o acciones que los usuarios pueden hacer con la app o web (comprar, comunicarse, mostrar, mirar, estudiar, escribir, etc). 
Ejemplo: si lo que buscamos es que los usuarios guarden un producto, usar imagenes que establezcan esa relación inmediata.
Establecer la asociación inmediata usando fotos apropiadas
Usar para slides de texto con imagen.
Las formas, el contraste, los colores y el contenido son de gran ayuda para que el botón se vea como lo que es. Si lo vemos como botón, todos sabemos bien qué hacer con el mismo.
Hacer visible y que se vea como botón de la interfaz de usuario
Usar para slides de texto con imagen.
Los campos presentan espacios en los que los usuarios pueden ingresar los datos necesarios. Para que sea efectivo deben invitar a que los usuarios rápidamente entiendan que pueden escribir en el. El contraste y la forma deben ser claros para que el usuario sepa que puede interactuar en él. El texto “buscar” y el icono son de gran ayuda.
Los campos deben
verse interactivos e invitar a interactuar
Usar para slides de texto con imagen.
¡PARA PENSAR!
¿Material Design es un sistema de diseño?
SI o NO
CONTESTA LA ENCUESTA DE ZOOM
Encuesta de zoom para que los estudiantes respondan.
OPCIONES:
Si
NO
Hacer un cierre en relación a las respuestas.
☕ BREAK
¡5/10 MINUTOS Y VOLVEMOS!
SISTEMA DE DISEÑO
Usar para los módulos más importantes de la clase, donde se introducen conceptos que se ven en varios slides. No hay que usarla para todos los módulos.
“Un sistema de diseño no es solo elementos tangibles, que es lo primero que uno se imagina, sino también elementos abstractos como los valores, creencias y formas de trabajo, etc”.
Jina Anne, Design System
Usar para slides de sólo texto con citas.
Un Design System tiene como objetivo aportar un lenguaje común entre las diferentes profesiones y equipos de uno o más productos. Centraliza y pone en perspectiva varios documentos construidos históricamente de forma independiente (brand book, biblioteca de componentes, código fuente, etc.).
¿QUÉ ES?
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
PARTE DE ESTE SISTEMA DE DISEÑO YA LO VENIMOS TRABAJANDO DESDE LA CLASE PASADA, CUANDO PLANTEAMOS LA GUÍA DE ESTILO DE CONTENIDOS.
Usar para los subtemas de un módulo.
LA PRIMERA PREGUNTA QUE DEBEMOS HACERNOS NO ES "¿QUÉ DEBO PONER DENTRO DE MI SISTEMA DE DISEÑO?", SINO “¿QUIÉN LO VA A UTILIZAR Y CÓMO?”
Usar para los subtemas de un módulo.
SISTEMA DE DISEÑO
Propósito y Valores Compartidos
Principios
de Diseño
Identidad e Idioma de Marca
SISTEMA DE DISEÑO
Componentes y Patrones
Guías de Estilos de Contenidos
Recursos de Marca
VEAMOS CADA UNO DE ELLOS
Usar para los subtemas de un módulo.
Antes de comenzar algo, es esencial alinear a los equipos en torno a un conjunto claro de objetivos compartidos. Apoyarnos en la definición del “Porqué” de nuestro Círculo de Oro es un buen camino para construir de manera unificada.
Propósito y
Valores Compartidos
Los principios de diseño deben guiar las decisiones de diseño, son el “Cómo” de nuestro círculo de oro. El objetivo es detallar cada uno de esos principios como leyes y reglas de nuestra forma de hacer las cosas. Aquí tienes varios ejemplos: https://principles.design/ o http://uxpanol.com
Principios de Diseño
Usar para slides de texto con imagen.
También podemos llamarlos patrones de percepción. Deben estar definidos en consonancia con la estrategia y los objetivos de la marca. Aquí tenemos lo que se llama alfabeto de marca (colores, fuentes, espacios permitidos, formas, iconos, ilustraciones, fotografías, animaciones, voz y tono, sonidos, etc) que por sí solo no dice nada, por ello debemos identificar las reglas y leyes del sistema (ver cuadro MIV).
Identidad e
Idioma de Marca
Usar para slides de texto con imagen.
Debemos identificar claramente cada uno de los componentes que formarán parte de nuestro sistema. Es importante incluir la documentación técnica y funcional de los componentes. Algunos componentes a considerar: formularios, botones, pestañas, iconos, alertas, etc. No olvides incluir los diferentes estados de cada componente.
Componentes de Diseño
Usar para slides de texto con imagen.
Acerca de los patrones es importante dar recomendaciones sobre cómo usarlos. Consisten en interacciones y flujos de usuarios comunes. Es común que los nuevos flujos de usuarios se definan en una hoja de ruta del producto, especialmente cuando se implementan funciones.
Patrones
de Diseño
Usar para slides de texto con imagen.
Puedes incluir a tu sistema de diseño (design system) todo el desarrollo de tu guía de estilos de contenidos. Además de la documentación, que muchas veces está directamente vinculada al sistema, las mejores prácticas acompañarán a los equipos de una forma más amplia y transversal.
Guías de Estilo de Contenidos
Usar para slides de texto con imagen.
Recursos
de Marca
Finalmente debemos pensar en generar una plataforma o documento que contenga todos los elementos necesarios para que el equipo de diseño y de desarrolladores puedan utilizar sin problema. Queremos asegurar la consistencia y coherencia del diseño de interfaz.
Usar para slides de texto con imagen.
NUESTRO SISTEMA DE DISEÑO PUEDE TENER UN NOMBRE PARTICULAR
Usar para los subtemas de un módulo.
VEAMOS ALGUNOS EJEMPLOS
Usar para los subtemas de un módulo.
https://www.ibm.com/design/language/
https://www.ibm.com/design/language/
https://www.ibm.com/design/language/
https://material.io/
https://atlassian.design/
https://polaris.shopify.com/
https://www.ibm.com/design/language/
ESCALAS EN NUESTRO
SISTEMA DE DISEÑO
Usar para los subtemas de un módulo.
RIGIDO
FLEXIBLE
Documentación completa y detallada que estará completamente sincronizada entre diseño y desarrollo. Para introducir un nuevo patrón se plantea un proceso estricto.
Deja espacio a la experimentación. Proporciona un marco para los equipos pero conserva algo de libertad. Pueden usarlo o en función de las necesidades particulares.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MODULAR
INTEGRADO
Está hecho de piezas intercambiables y reutilizables. Se adapta bien a proyectos que deben escalar rápidamente y que deben adaptarse a las necesidades de múltiples usuarios. Es recomendable pensar en Atomic Design para este tipo de sistema.
Se centra en un contexto único. También está compuesto por partes, pero estas partes no serán intercambiables. Este tipo de sistema se adapta a productos que tienen muy pocas partes repetidas y cambiantes (portafolios, vitrinas, campañas de marketing…).
Usar para slides de sólo texto.Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
CENTRALIZADO
DISTRIBUIDO
Un equipo está a cargo del sistema y lo hace evolucionar. Este equipo está aquí para facilitar el trabajo de los otros equipos y tiene que estar muy cerca de ellos, para asegurarse de que el sistema cubra la mayoría de sus necesidades.
Varias personas de varios equipos están a cargo del sistema. La adopción es más rápida porque todos se sienten involucrados, pero también necesitan líderes de equipo que mantengan una visión general del mismo.
Usar para slides de sólo texto. Si no alcanza, no sobrecargar, usar otra con el mismo título para indicar que continúa el mismo módulo.
MÍNIMA IDENTIFICACIÓN VISUAL DE MARCA
Definir la propuesta visual de tu proyecto.
8
Usar para desafíos entregables. Editar el número con el número de desafío correspondiente..
	MÍNIMA IDENTIFICACIÓN VISUAL DE MARCA		
	Formato: Archivo en tipo .ppt o .doc con el desarrollo de la actividad. Generar un archivo con el nombre “MIV+Apellido”. También se puede entregar en Google Slides o Docs.
Sugerencia: activar comentarios en el archivo (si es Google Slides/Docs)		
	
>> Consigna: Definir la propuesta visual de tu proyecto. Para el mismo se sugiere definir si se le dará personalidad a la marca a través de un personaje u otro elemento, definir sobre qué elemento gráfico se centrará la propuesta y por último qué estructura y estilo predominará.
Aspectos a incluir en el entregable:
Estilo de imágenes, el código cromático y el tipo de iconografía a utilizar.
Referencias visuales para entender la propuesta de marca.
Definir al menos 5 principios de diseño en los que se basa la propuesta de marca.
Incluir el rediseño del signo identificatorio en caso de que la nueva propuesta lo amerite.		
PARA LA PRÓXIMA CLASE
La próxima clase haremos una actividad en pequeños grupos que nos ayudará a revisar el prototipo teniendo presente la propuesta de solución elegida para tu rediseño. Trabajaremos con parámetros de fidelidad de contenido, visual y de funcionalidad.
Para que puedas aprovechar la propuesta, será útil que organices y traigas el estado de avance de tu proyecto, independientemente en qué instancia se encuentre.
HAREMOS UNA REVISIÓN DEL PROYECTO
Es una actividad de feedback, no una evaluación. 
¿QUIERES SABER MÁS? TE DEJAMOS MATERIAL AMPLIADO DE LA CLASE
Portada de Material Ampliado
Teams Models for Scaling a Design System | Nathan Curtis
Design Systems Book | Alla Kholmatova
Sistemas de Diseño:
Andes UI: [ENLACE]
Atlassian: [ENLACE]
Polaris: [ENLACE] 
Living Language: [ENLACE] 
¿PREGUNTAS?
Obligatoria siempre.
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
Definir el sistema de diseño a partir de concepto y tono de la marca.
Identificar decisiones generales y particulares de la interfaz.
Definir los elementos mínimos de la identidad visual del proyecto.
Dotar de personalidad a la interfaz del prototipo.
Obligatoria siempre. Completar el resumen con palabras claves de lo visto.
OPINA Y VALORA ESTA CLASE
Obligatoria siempre.