Desing System AV

"

Desing system «Tierra espléndida»

Imagen de iconos a color y en negativo del proyecto desing system de tierra esplendida

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

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.

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.



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.



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.



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.



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.



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.

Card

Proceso de creación de la card, uno de los elementos principales del sitio web Tierra espléndida.

Ver proyectos relacionados

Exposición TAC

[dsm_typing_effect typing_effect="Exposición TAC" typing_loop="off" _builder_version="4.27.2" _module_preset="default" header_text_align="center" header_text_color="RGBA(255,255,255,0)" header_font_size="64px" header_line_height="1.3em" typing_text_align="center"...

Web Amics

[dsm_typing_effect typing_effect="Web oficial Amics" typing_loop="off" _builder_version="4.27.4" _module_preset="default" header_text_align="center" header_text_color="RGBA(255,255,255,0)" header_font_size="64px" header_line_height="1.2em" typing_text_align="center"...

Web AFAP

[dsm_typing_effect typing_effect="Web responsive AFAP" typing_loop="off" _builder_version="4.27.4" _module_preset="default" header_text_align="center" header_text_color="RGBA(255,255,255,0)" header_font_size="64px" header_line_height="1.2em" typing_text_align="center"...

Web Ui AV

[dsm_typing_effect typing_effect="Diseño Ui de web app" typing_loop="off" _builder_version="4.27.2" _module_preset="default" header_text_align="center" header_text_color="RGBA(255,255,255,0)" header_font_size="64px" header_line_height="1.3em"...

Desing system AV

[dsm_typing_effect typing_effect="Desing System AV" typing_loop="off" _builder_version="4.27.4" _module_preset="default" header_text_align="center" header_text_color="RGBA(255,255,255,0)" header_font_size="64px" header_line_height="1.2em" typing_text_align="center"...