Please enable JavaScript.
Coggle requires JavaScript to display documents.
Design system - Coggle Diagram
Design system
Principios:
Son paradigmas que es diseñador selecciona en relacion con cual es el objetivo del producto. Que quiere transmitir, es la personalidad
Otorgan lógica al sistema
Designan reglas y dan consistencia.Ejemplos:
Accesibilidad
Perceptible
Operable
Entendible
Robusto (para todo tipo de personas, (daltónicos))
Consistencia
Reusable
Compartible
"Analiza los sistemas de diseño de grandes compañías para profundizar"Documentación;
- Introducción
- Principio y descripción por cada uno
Sistema
Los sistemas de diseño buscan no romper la comunicación entre lo que quería y lo que se lleva a software.
En ella participan todos, por ello hay que dividirlo en niveles.
-
Componentes
Un componente forma parte de un todo
Tiene una entrada y una salida (feedback)
Interacción es lo que entre el componente y el usuario.
Paradigma procedural
"La construcción de funciones que ha futuro se van a crear a si mismas "
Elementos ya construidos que vana permitir hacer un diseño variable en base a reglas"Diseño atómico
Átomos - Moléculas - Organismos- Templates- paginas DRY
"Dont repeat yourself"Documentación
- Nombre
- Descripción/ solución
- Comportamiento (web, mobile, watch, etc)
- Estado (como se ve en diseño normal, hover, focus, etc)
Foundations
Tipografía
Tips:
Tipos optima que tenga completas las variables
Google fonts tiene las fuentes empaquetadas para web, mobile, etc)
Categorizarlas según HMTL (H1,H2,H3,H4,H5,H6,P, Small)Crear las variables que configuran tu diseño, para que al ser usada genere consistenciaDocumentación
- Descripción
- Estilo tipográfico
- Tamaños y características (H1,H2,H3,H4,H5,H6,P, Small)
- Usos para párrafos, small, títulos, etc.
Colores
Tips:
No usar negro en su máxima expresión
No usar el color de la marca para los call to actionCategorización de colores:
- Action colors (brillantes y contrastantes)
- Brand colors
- Gray
- Backgrounds
- Colores booleanos
Documentación:
- Descripción
- categoría
- Muestra del color
- Código hexadecimal
Layaout/ spaces
En diseño de software se presentan muchas variaciones en las pantallas de presentación
Las reglas de espaciado evitan que durante el desarrollo se tomen decisiones arbitrarias que generen anormalidades
Las reglas de espaciado generan ritmo visual
Definir la unidad.Categorización:
- Padding
- Margin
- Border
- Lauout
- Columnas
Documentación:
- Descripción
2.. Unidad
- Categorización y descripción
Iconografía
¿Cómo estandarizarlos? ¿Cómo lograr que tengan el mismo leguaje?Librerías:
Uso de librerías (font awesome)
Librería creada de 0
Usar una librería hecha y complementar Características:
Grid
Shapes
Tamaños
Formas
StylesDocumentación:
- Descripción
- Características
Voz y tono
Esta alineado con el marketing y el copywriting
Dan sentido y continuidad a los textos del producto siguiendo una narrativa
Expresan la personalidad de marca
- Definir un objetivo, ¿Qué se quiere comunicar?
- Características, es un herramienta que permite saber como seleccionas las palabras, demarcan la personalidad del producto
Categorización:
- Buzzwords
- Phrases
Documentación:
- Descripción (características)
- Target
- Tono
- Uso de emojis
Animación
Principios de animación de Disney
- Estirar y encoger
- Anticipación
- Entradas lentas y salidas lentas
- Acciones secundarias
- Timing
- Exageración
Documentación
- Descripción
- Tipo de animaciones permitidas
- Casos de aplicación
- Configuraciones de las animaciones
-
-
¿Por qué usar sistemas de diseño?
Estandariza “contenedores” para mejorar la logística es la producción de diseño.
Conjunto de reglas para que el producto pueda cambiar y evolucionar
SD impacta el perfil del diseñador, ya que lo profesionaliza, es hacer ingeniería de lo que hacemos y da mayor valor de este perfil en la compañía
Proceso de iteración
¿Qué debemos iterar o no?
Jerarquizar y dar espera a lo que casi no se usa.Documentación
- Nombrar
- Descripción ¿Por que?
- Solución
- Estimación de conflictos de los cambios en equipo