Desing System web app
Desing system «Tierra espléndida»
![Mockup_desing_system_por_karla_guevara](https://karlaguevara.com/wp-content/uploads/2023/05/Mockup_desing_system_por_karla_guevara.png)
El Design System es una serie de componentes que pueden reutilizarse en diferentes combinaciones en la web, como: paleta de colores, tipografía, iconos, botones y campos de formularios. Esto nos ayuda a: mejorar la velocidad de producción, a mejorar la coherencia visual y la comunicación.
Para crear un Design System nos basamos en el concepto Atomic Design. Este método, inspirado en los principios de la química, fue ideado por Brad Frost y nos permite construir productos complejos con base en: Átomos, moléculas, organismos, plantillas, páginas.
Productos
- Branding
- Tipografía
- Botones
- Iconos
- Colores
- Formularios
- Plantillas
Diseño de branding
![](https://karlaguevara.com/wp-content/uploads/2023/05/Branding-–-1.png)
![](https://karlaguevara.com/wp-content/uploads/2023/05/Forma_logo_te.png)
![](https://karlaguevara.com/wp-content/uploads/2023/05/Branding.png)
Componentes del desing system
Cimientos
La base de la construcción de un diseño es la cuadrícula y/o la rejilla. En este proyecto se aplicó una cuadrícula de 12 columnas y una rejilla de 8px * 8px.
![Rejilla_por_karla_guevara Imagen de dos hojas de trabajo del programa de prototipado web Xd con sus columas y rejillas que sirven de base para el diseño.](https://karlaguevara.com/wp-content/uploads/2023/05/Rejilla_600840.png)
Paleta de color
El color apoya el propósito del contenido, comunicando cosas como la jerarquía de la información, los estados interactivos y la diferencia entre distintos elementos.
![Colores Imagen de dos hojas de trabajo del programa de prototipado web Xd con sus columas y rejillas que sirven de base para el diseño.](https://karlaguevara.com/wp-content/uploads/2023/05/Colores-2.png)
Tipografía
Poppins fuente limpia y versátil para el diseño de este sistema. La forma geométrica de las letras y el espaciado entre caracteres es muy proporcionado.
![Tipografia Imagen de dos hojas de trabajo del programa de prototipado web Xd con sus columas y rejillas que sirven de base para el diseño.](https://karlaguevara.com/wp-content/uploads/2023/05/Tipografia-2.png)
Iconos
Los iconos funcionan como ayudas visuales, para guiar al usuario e interactuar. En este caso los iconos seleccionados son planos y llenos para facilitar su función.
![iconos Imagen de iconos a color y en negativo del proyecto desing system de tierra esplendida](https://karlaguevara.com/wp-content/uploads/2023/05/iconos-1.png)
Botones
Los botones son una parte muy importante en el sistema de diseño. En este proyecto han sido diseñados según lo recomendado: con tres tipos de estados.
![Botones Imagen de dos hojas de trabajo del programa de prototipado web Xd con sus columas y rejillas que sirven de base para el diseño.](https://karlaguevara.com/wp-content/uploads/2023/05/Botones-2.png)
Campos
La otra gran categoría de componentes son los campos de formulario. El diseño de estos tiene que guiar y ayudar al usuario a completar la información que se le solicita.
![CAMPOS Imagen de dos hojas de trabajo del programa de prototipado web Xd con sus columas y rejillas que sirven de base para el diseño.](https://karlaguevara.com/wp-content/uploads/2023/05/CAMPOS-1.png)
Card
Proceso de creación de la card, uno de los elementos principales del sitio web Tierra espléndida.
![](https://karlaguevara.com/wp-content/uploads/2023/05/Proceso_de_diseno_de_card_por_karla_guevara-1.png)
![](https://karlaguevara.com/wp-content/uploads/2023/05/Proceso_de_diseno_de_card1_por_karla_guevara.png)
Ver proyectos relacionados
Diseño Ux web App
Diseño Ui Web App
Web Interiorismo