Un libro que les puede servir un montón para esto es “RefactoringUI”. Altamente recomendado.
Como plugin de accesibilidad, pueden usar “Stark”; está bueno, bueno.
Visión general de los Sistemas de Diseño
Anatomía de un Sistema de Diseño
Fundamentos de diseño para Figma: lo que necesitas saber antes de comenzar
¿Cómo crear un sistema de diseño? Proceso, principios y flujo de trabajo
Neo Brutalismo: tendencias de diseño y proyecto del curso
Taller Creativo: Nombramiento de nuestro Sistema de Diseño
Conceptos y recursos importantes en Sistemas de diseño
Guía de Estilos con Figma
Design Tokens: cómo y cuándo usarlos
Cómo calcular escalas tipográficas matemáticamente
Guía de Tipografías en Figma: tamaños, escalas y tokens
Cómo escoger colores: psicología, pautas y accesibilidad
Guía de Colores en Figma
Espaciado y elevación
Guía de espaciado y elevación en Figma
Guía de iconos e ilustraciones en Figma
Cómo Documentar Sistemas de Diseño
Librería de componentes
Atomic Design
Arquitectura y auditoría de componentes
Átomo: botón y variantes
Molécula: card responsiva y variantes
Molécula: header responsivo y variantes
Organismo: hero y variantes
Publicando la librería de componentes
Reto: template y páginas
Implementación y medición
Cómo vender y medir un Sistema de Diseño
Mi experiencia creando Sistemas de Diseño (desde cero) en Startups
Toma el Curso de Sistemas de Diseño con Storybook
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 12
Preguntas 0
Un libro que les puede servir un montón para esto es “RefactoringUI”. Altamente recomendado.
Como plugin de accesibilidad, pueden usar “Stark”; está bueno, bueno.
A11Y: es una abreviatura comúnmente utilizada para referirse a “accesibilidad”, que se refiere a la práctica de hacer que los productos, servicios, entornos y tecnologías sean accesibles para todas las personas, independientemente de sus habilidades o discapacidades.
Proceso de creación de un sistema de colores (recomendados):
Cómo organizar los colores base en grupos
💡 Es primordial para asegurar una buena documentación
Psicología del color
Los colores tienen significado prestablecidos (generalmente aceptados), que me gusta definir más como los estereotipos asociados a los colores.
Crear variaciones de los colores base
Definir convenciones de nomenclatura
primary-300
🤓 En mi caso personal, utilizo una nomenclatura similar a Figma
Validar funcionalidad y A11Y
🤓 Para este utilizo un Plugin llamado A11Y en Figma
Establecer pautas de uso
Ejemplos:
La herramienta de color tool ya no está disponible, redirecciona a una nueva versión del material design 😦
Recomiendo también esta herramienta:
https://color.adobe.com/es/create/color-contrast-analyzer
Accesibilidad web (a menudo abreviada como A11y — como “a”, luego 11 caracteres, y luego "y)
Les comparto el blog que Teff recomienda en la clase.
La psicología del color: el significado de los colores y cómo aplicarlos a tu marca
Espero les sirva esta herramienta
https://www.figma.com/community/plugin/1068919813159975006/Coolors
Generalmente, se recomienda un 60 % del color dominante, un 30 % del color secundario y un 10 % del color acento. El implementar el uso de esta regla ayuda a generar una sensación de balance y armonía en el diseño de la interfaz. Esta proporción también ayuda a guiar la vista del usuario a través de la interfaz
En temas de accesibilidad existe una página súper chévere que nos dice si los colores de letra que estamos utilizando, generan suficiente contraste con el fondo, para que los usuarios puedan leerlo cómodamente https://colorable.jxnblk.com/
Procura que cuando evalúes el contraste en la página te diga que es un nivel AA (doble a) que son los básicos de accesibilidade 😄
Yo saqué mi paleta de colores a través del siguiente link.
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
Proceso de creacion de un sistema de colores
.
.
Organizar los colores base en grupos
.
.
Psicologias del color
Esta teoria puede ayudarte a definir los colores que vas a usar.
https://www.canva.com/es_mx/aprende/psicologia-del-color/
.
.
Crear las variaciones de colores
Se genera para satisfacer diferentes uss, background tooltip, se escogen pocos para reducir la carga congnitiva.
Mas opciones = mas carga cognitiva y mas esfuerzo para el mantenimiento.
Para definir tus colores, aqui hay una herramienta para evaluar el contraste de los colores.
https://webaim.org/resources/contrastchecker/
.
.
Pautas de uso:
Esto es una documentacion, que nos servira para comunicarnos con el equipo y definir en que caso debemos usar cada color.
Que sombra debo usar para el texto secundario?, cual deberia ser el color de fondo de los CTA? Que color se va a utilizar en los elementos deshabilitados?
.
.
.
Gracias por leer. 💕
.
.
.
Martin Coronel - Product Designer
Linkedin
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?