Taller Casiopea/Componentes Wiki
| Título | Sistema de diseño y componentes de la wiki Casiopea - 2024 |
|---|---|
| Período | 2024-2024 |
| Asignatura | Taller de Título |
| Del Curso | Taller Casiopea |
| Carreras | Diseño |
| Alumno(s) | Francisca Ortega |
| Profesor | Herbert Spencer |
Introducción
El propósito de esta página es listar los componentes que tiene la wiki, además para que sirva a modo de estudio de otros diseños de componentes para tomarlos de referentes.
Definiciones
¿Qué es el atomic design o diseño atómico?
El diseño atómico es una metodología para crear sistemas de diseño de interfaces de manera jerárquica y deliberada, descomponiéndolos en cinco etapas: átomos, moléculas, organismos, plantillas y páginas. Este enfoque permite construir interfaces cohesivas a partir de componentes básicos y reutilizables. El término "diseño atómico" fue acuñado por Brad Frost, inspirado en la forma en que la materia se compone de átomos que se combinan para formar moléculas y estructuras más complejas, aplicando este concepto al diseño y desarrollo de interfaces de usuario.
Para información más detallada, revisar la página oficial de atomic design
Acá traer una foto de aquí: https://atomicdesign.bradfrost.com/images/content/html-periodic-table.png (https://atomicdesign.bradfrost.com/chapter-2/)
Átomos:
- Bloques de construcción fundamentales de las interfaces, que no pueden dividirse sin perder toda funcionalidad.
- Incluyen elementos HTML básicos (etiquetas, entradas, botones).
Moléculas:
- Grupos simples de elementos de la UI que agrupan átomos y funcionan juntos como una unidad.
- Ejemplo: una etiqueta de formulario, una entrada de búsqueda y un botón pueden unirse y formar una molécula de formulario de búsqueda.
Organismos:
- Componentes complejos de la UI compuestos por grupos de moléculas y/o átomos y/u otros organismos.
- Estos organismos forman secciones distintivas de una interfaz.
- Ejemplo: Si juntamos un logo, botones de navegación (átomos) y un formulario de búsqueda (molécula), forma una barra de navegación.
Plantillas:
- Plantillas de páginas que se forman a partir de distintos componentes en un diseño.
- Articulan la estructura de contenido subyacente del diseño.
- Se centran en la estructura de contenido más que en el contenido final.
Páginas:
- Representan el diseño completo con contenido real de una página.
- Proporcionan el contexto final del diseño.
¿Qué es un sistema de diseño?
Un sistema de diseño es un conjunto integral de patrones, componentes y directrices que unifican y agilizan el proceso de diseño y desarrollo de productos digitales. Incluye una biblioteca de elementos de interfaz de usuario (UI), estilos visuales, reglas de interacción y mejores prácticas, que aseguran la coherencia y eficiencia en la creación de experiencias de usuario.
Componentes de un Sistema de Diseño:
Guía de Estilos:
- Colores: Paleta de colores definida para el producto.
- Tipografía: Fuentes, tamaños, y pesos específicos para textos.
- Espaciado: Márgenes, rellenos y reglas de alineación.
- Iconografía: Conjunto de íconos utilizados y sus aplicaciones.
Componentes de UI:
- Botones: Diferentes tipos y estados (activo, inactivo, hover, etc.).
- Formularios: Campos de entrada, etiquetas, validaciones.
- Tarjetas: Bloques de contenido predefinidos.
- Modalidades: Ventanas emergentes, paneles deslizantes, etc.
Patrones de Diseño:
- Navegación: Menús, barras laterales, breadcrumbs.
- Interacción: Comportamientos de elementos interactivos (animaciones, transiciones).
Directrices y Normas:
- Accesibilidad: Normas para asegurar que el diseño sea accesible para todos los usuarios.
- Usabilidad: Mejores prácticas para una experiencia de usuario intuitiva y eficiente.
- Consistencia: Reglas para mantener una apariencia y comportamiento uniformes.
Documentación:
- Guías: Instrucciones detalladas sobre cómo usar y aplicar los componentes y patrones.
- Ejemplos: Casos de uso y ejemplos prácticos de implementación.
Material Design
En la página de Material Design se encuentra un listado de distintos componentes de la web.
Sistema de diseño y componentes
Space DS
Space DS es un sistema de diseño oabierto y gratuito para la comunidad de Figma. Este se puede descargar desde Figma para ser utilizado en distintos proyectos. Para la creación de una nueva skin, nos ha sido de utilidad para tomarlo de base, y así modificar y añadir distintos componentes y estilos, adaptándolo o a las necesidades de la wiki.
Guía de estilos
Esto es registro de la manera en que se construyen distintos estilos de elementos.
Colores
Superficies
Colores de superficie se usan para elementos de interfaz, incluyendo el color de fondo, jerarquía de texto, elevaciones, elementos en estado "disabled", entre otros usos.
| a | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| surface-50 | surface-100 | surface-200 | surface-300 | surface-400 | surface-500 | surface-600 | surface-700 | surface-800 | surface-900 |
| FFFFFF | F7F9FD | ECEDEE | CBCFD2 | A7AEB4 | 8E979F | 6B767F | 4F575E | 33383D | 202327 |
Primario
El color primario es usado para elementos interactivos, como botones, links, etc.
| color base | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| primary-50 | primary-100 | primary-200 | primary-300 | primary-400 | primary-500 | primary-600 | primary-700 | primary-800 | primary-900 |
| F6EAE8 | EED6D1 | D4998B | B1472E | A83217 | 972D15 | 7E2611 | 54190C | 2A0D06 | 170101 |
Peligro
Este color se utiliza para indicar errores, como para marcar un textfield que no ha sido completado, por ejemplo.
| color base | ||||
|---|---|---|---|---|
| Danger-50 | Danger-100 | Danger-200 | Danger-300 | Danger-400 |
| FBEAEA | E16B6B | C92929 | A92323 | 6E1717 |
Éxito
Los colores de éxito sirven para confirmar ciertas acciones que el usuario ha logrado ejecutar de manera correcta.
| color base | ||||
|---|---|---|---|---|
| succes-50 | succes-100 | succes-200 | succes-300 | succes-400 |
| F6FEFB | 1BC590 | 12825F | 0E674B | 0A4834 |
Precaución
Estos colores se utilizan generalmente para entregarle al usuario alguna recomendación o mensaje de precacución según distintas tareas, por ejemplo, en un banner que le indique al usuario que debe confirmar su correo electrónico.
| color base | ||||
|---|---|---|---|---|
| warning-50 | warning-100 | warning-200 | warning-300 | warning-400 |
| FFFDFA | F9DBB5 | F2AB53 | EE9322 | A6620D |
Espaciados y tamaños
Estos tamaños definidor sirven para ser asignados a distinas partes de los componentes, como radio de las esquinas, o paddings, como también para definir estilos de tipografía, al usarlos en el tamaño del texto, o espaicio entre párrafos, por ejemplo.
| nombre | px |
|---|---|
| space-0 | 0px |
| space-1 | 4px |
| space-2 | 8px |
| space-3 | 12px |
| space-4 | 16px |
| space-5 | 20px |
| space-6 | 24px |
| space-7 | 28px |
| space-8 | 32px |
| space-9 | 36px |
| space-10 | 40px |
| space-11 | 44px |
| space-12 | 48px |
| space-13 | 56px |
| space-14 | 60px |
| space-15 | 64px |
| space-16 | 68px |
| space-17 | 80px |
| space-18 | 96px |
Breakpoints
Esto es el tamaño físico de distintas pantallas, lo cual nos sirve para crear grillas en base al tamaño horizontal de las distintas pantallas.
| Nombre | Ancho de la página | Altura mínima | Uso |
|---|---|---|---|
| sm | 360px | 640px | mobil |
| md | 768px | 1024px | tablet |
| lg | 1280px | 768px | desktop |
| xl | 1536px | 1080px | desktop -> máximo porte |
Grillas
aún falta por definir bien las grillas, pero hasta ahora se ven así:
| Nombre | Columnas | gap - gutter | margin-corners |
|---|---|---|---|
| sm | Ancho: 70px - 4 columnas | 16px | 16px |
| md | Ancho: 67px - 8 columnas | 24px | 32px |
| lg | Ancho: 78px - 12 columnas | 24px | 40px |
| xl | Ancho: 96px - 12 columnas | 24px | 60px |
Sombras y elevación
Estilos de texto
Hasta el día, se definieron los siguientes estilos de texto:
| Nombre | Font | Tamaño | Interlineado | Otros atributos | Usos |
|---|---|---|---|---|---|
| Heading-LG | Raleway | 48 | 60 | Por definir | |
| Heading-MD | Raleway | 36 | 45 | ||
| Heading-SM | Raleway | 28 | 35 | ||
| H1 | Raleway | 32 | 40 | Títulos/ jerarquías de las distintas páginas | |
| H2 | Raleway | 28 | 35 | ||
| H3 | Raleway | 24 | 30 | ||
| H4 | Raleway | 20 | 25 | ||
| H5 | Raleway | 18 | 22.5 | ||
| Body-LG | Raleway | 20 | 30 | Estilos de cuerpos de texto | |
| Body-MD | Raleway | 16 | 24 | ||
| Body-SM | Raleway | 12 | 18 | ||
| Captions | Raleway | 12 | 18 | Textos varios más pequeños (footer, extensiones, etc) | |
| Code | IBM Plex Mono | 16 | 24 | Estilo de texto del código al editar páginas | |
| Ficha | Raleway | 16 | 24 | Bold, versalitas | Estilo de texto de los títulos de las fichas de las páginas |
Iconografía
Componentes
Este listado es una mezcla de lo que aparece en la página de Material Design y los componentes que vienen en Space Ds. A medida que se vayan agregando, eliminando o modificando componentes, se irá actualizando este listado.
Última actualización: 12/06/2024
Para cada componente, se debe registrar la siguiente información:
- Su uso: ¿Para qué sirve? ¿Dónde se utiliza? ¿Cuándo se utiliza?
- Anatomía: ¿Cómo se construye este componente? ¿Qué estilos de texto, colores, márgenes utiliza? ¿Existen distintas variaciones o estados?
- Comportamiento: ¿Cómo se comporta al realizar distintas acciones? ¿Cómo se comporta al scrollear en la página? ¿Cómo se ve en pantallas de distinto tamaño?
Átomos y moléculas
Avatar
Botones
Radio buttons
Checkbox
Chips
Menu desplegable
Snackbar
Tabs y Tabbar
Tooltip
Imput
Textarea
Organismos
Otros tipos de componentes que pueden servir:
- Backdrop
- Banners
- Cards
- Data tables
- Date pickers
- Dialogs
- Dividers
- Image lists
- Lists
- Navigation drawer
- Navigation rail
- Progress indicators
- Sheets: bottom
- Sheets: side
- Sliders
- Switches
- Time pickers
Aquí es importante revisar cada extensión y widget para saber que otros componentes o elementos interactivos pueden existir.
Plantillas y páginas
De aquí en adelante, corresponde al trabajo realizado del proyecto que aborda las plantillas y la navegación.
Para más información dirigirse a la página del taller, o a las páginas de avances del proyecto:
