Documentación de los patrones

Curso de Patrones y Componentes en Sistemas de Diseño

Contenido del curso

Introducción

1
Patrones y Componentes en Sistemas de Diseño
02:33 min

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:13

Documentación de los patrones

Curso de Patrones y Componentes en Sistemas de Diseño

Clase 8 de 16

Clase 8 / 16

Comentarios (11)11 comentarios

Alejandro Perafán

Paulo Esteban Orsini

Pedro Isaac Aguilar

Fernanda López

Diego Perdomo

Guzman Geraldine

Marta Monterde Alonso

Profesor

Hace 5 años

Abraham Guadarrama Rangel

Hace 5 años

Angie Oviedo

Hace 5 años

Marta Monterde Alonso

Profesor

Hace 5 años

Alejandra chiquinquira Picón Chavez

Hace 4 años

Marta Monterde Alonso

Profesor

Francisco Mendez

Laura Mujica

Abel González

Gerson Barbosa

Jose David Albarran Velasquez

Hace 7 meses

Oscar David Dávalos Correa

Hace 5 años

Mayra Lopez

Hace 5 años

Daniel Torres Burriel

Hace 5 años

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.

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.

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.

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

Mi avance de la documentación.

Funcionales...

Perceptivos...

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

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

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

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.

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!

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

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.

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.

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

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

me encanta la forma de que explicas lo haces parecer fácil cuando realmente es complejo jejjeje, exitos.

Notas de la clase

Luego definiremos los patrones funcionales, los cuales se pueden poner bajo una seccion general de patrones, que debera inclui dependiendo del caso los elementos de comportamiento principal de nuestra interfaz.

En este caso especifico alguno de ellos serian:

Navegacion
Datos
Busqueda
Notificaciones
KPI

Pueden ser muchos o pocos los patrones, dependiendo de lo relevantes que sean para el comportamiento de los usuarios dentro de nuestro producto; pero lo mas importante de ello es que hay que establecer:

Esquema de composicion
Cuando y como utilizarlo
Tipos o variantes (si las hay)
Buenas y malas practicas.

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

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

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

Introducción

Patrones y Componentes en Sistemas de Diseño

Patrones en los SSDD

Diseño Atómico: Creación de Patrones y Componentes Eficientes

Principios de Diseño para Sistemas Digitales

Patrones de Lenguaje en Diseño de Interfaces

Patrones Funcionales en Productos Digitales: Definición e Importancia

Patrones perceptivos

Definición de patrones en tu sistema

Documentación de los patrones

Componentes en los SSDD

¿Para qué utilizar los componentes?

Tipos de componentes

Requisitos mínimos

UI Kit y SSDD

Consejos para el UI Kit

Documentación del UI Kit

Design Tokens

Resumen y despedida

Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño

Documentación de los patrones

Progreso del curso

Introducción

Patrones en los SSDD

Componentes en los SSDD

UI Kit y SSDD

Recursos

Recursos