Documentación de los patrones

Clase 8 de 17 • Curso de Patrones y Componentes en Sistemas de Diseño

Alejandro Perafán

student•

Que lastima que la profesora no permita ver en detalle el documento en figma que muestra en el vídeo. Considero que esto permitiría llevar más a fondo su explicación y tener una guía mucho más estructurada.

Paulo Esteban Orsini

student•

Los cursos viejos 2022 para atras, no tienen un resumen escrito por la plataforma de cada clase, se hace dificil tomar apuntes asi, porque no te podes bajar el video, como que no te queda nada para hacer el examen y tampoco una vez que te certificas. En epocas de la IA que traduce vos a texto no entiendo como Platzi no corrige esto en los cursos viejos.

Pedro Isaac Aguilar

student•

Documentaremos los patrones perceptivos en una guía de estilo dentro de nuestro Sistema de Diseño. Esta guía contendrá como mínimo los siguientes elementos:

Logotipo
Color
Tipografía
Iconografía
Espaciado

De cada uno de los elementos perceptivos debe haber:

Descripción general.
Características visuales que lo componen.
Casos de uso.
Buenas y malas prácticas.

Lo cual, me hace recordar los manuales de identidad corporativa en diseño gráfico, cuando se crea un logotipo y se dan por escrito en un libro todas las especificaciones visuales del mismo para su uso en la empresa y hacia el exterior. Sólo que en este caso, se hace en digital, porque se relaciona con el diseño de productos digitales.

Fernanda López

student•

Concuerdo, también me hace pensar en los manuales de marca.

Diego Perdomo

student•

Mi avance de la documentación.

Funcionales...

Perceptivos...

Guzman Geraldine

student•

Ingrese por confusión pero me encanto la clase, este curso será el siguiente que voy a tomar, el recurso en Figma esta espectacular. Graaacias profe

Marta Monterde Alonso

teacher•

Me alegro mucho, Geraldine! Cuando acabes el curso me dices si te ha gustado o si tienes dudas pregunta sin temor ;) Un saludo

Abraham Guadarrama Rangel

student•

¿cuándo hablamos de "casos de uso" a que se refiere maestra, se refiere a los estados de los botones?

Angie Oviedo

student•

Puede existir un componente que varia según sus "casos de uso". Por ejemplo una barra de navegación dependiendo de la zona de la interfaz y la información que contenga puede ser de una forma u otra adaptándose al uso que se le vaya a dar.

Marta Monterde Alonso

teacher•

Hola, Abraham. Cuando hablo de casos de uso me refiero al contexto en el que se utilizan esos componentes o esos estilos, porque puede haber elementos que tengan casos especiales, como el color rojo de la paleta que se utilice para los errores únicamente, por ejemplo. Otro ejemplo podría ser indicar el caso de uso de un botón primario y un botón secundario, que no se utilizan en el mismo contexto. Espero haber resuelto tu duda!

Alejandra chiquinquira Picón Chavez

student•

¿Esta "guía de estilo" es lo mismo que se considera como foundations?

Marta Monterde Alonso

teacher•

Hola Alejandra! No es lo mismo exactamente, pero podríamos decir que la Guía de estilo contiene las "foundations" de nuestro producto digital o marca.

Francisco Mendez

student•

Hola! Dejo por acá una herramienta que me ha sido de gran ayuda a la hora de nombrar los colores para el sistema de diseño. Aparte, si deseas, puedes exportar un JSON( el cual podrías dar a los desarrolladores). Cabe destacar que esta nomenclatura tiene su estudio de color y no es algo generado aleatoriamente. Dejo adjunto un artículo el cual explica en que se basa y como usar la herramienta Artículo: The genome Color Tool Herramienta: Genome Color Tool Saludos.

Laura Mujica

student•

Muchas gracias! Pasar de la teoría a la práctica me cuesta mucho. Usaré estas herramientas.

Abel González

student•

La documentación es uno de los puntos más importantes, ya que gracias a ella es que el sistema de diseño puede ser interpretado por todo el equipo, en lo personal creo que esta es una de las clases más importantes de todo el curso y agradezco muchísimo la forma en la que la profe lo pudo explicar de manera tan sencilla

Oscar David Dávalos Correa

student•

¿Existe algún curso complementario sobre la documentación de los patones de diseño?

Mayra Lopez

student•

Tenemos este otro curso que te puede servir https://platzi.com/clases/colaboracion-diseno-desarrollo/

Daniel Torres Burriel

student•

Por supuesto, Oscar. Creo que pueden interesarte el curso de Colaboración entre Diseño y Desarrollo y el curso para Gestionar un Sistema de Diseño como Product Manager.

También te invito a que eches un vistazo a los siguientes posts sobre:

Cómo documentar aspectos de accesibilidad: https://www.torresburriel.com/weblog/2021/07/14/documentar-accesibilidad/
Qué son los design tokens: https://www.torresburriel.com/weblog/2021/08/06/design-tokens-que-son-beneficios/
Documentación de los flujos de trabajo de diseño: https://medium.com/livefront/documenting-design-workflows-6146495d1b52