UI Kit Básico

Tener un UI Kit preestablecido antes de comenzar con el desarrollo de un sitio web ofrece numerosos beneficios. Actúa como una guía visual y funcional que asegura la coherencia y la eficiencia en el proceso de diseño y desarrollo.

Al definir previamente elementos como botones, tipografía y colores, se garantiza una apariencia uniforme en todo el sitio web. Esto mejora la experiencia del usuario y refuerza la identidad de la marca. Funciona como un lenguaje común entre diseñadores, desarrolladores y otros miembros del equipo. Facilita la comunicación y asegura que todos trabajen con los mismos parámetros y estándares.

TIPOGRAFÍA

Fuentes: https://fonts.google.com
Pesos disponibles: Light: 300, Regular (Normal): 400, Medium: 500, Semi Bold (Demi Bold): 600, Bold: 700,
Extra Bold (Ultra Bold): 800, Black (Heavy): 900.

Familia para Párrafos: p = Montserrat
Familia para Encabezados grandes: H1, H2, H3, H4 = Roboto
Familia para Encabezados pequeños: H5, H6 = Montserrat

Ejemplos con "Peso, Tamaño, Alto de línea"
Párrafos: 400, 16, 22
H1: = 700, 40, 45
H2: = 600, 35, 40
H3: = 600, 30, 35
H4: = 600, 25, 30
H5: = 500, 23, 28
H6: = 500, 20, 25

Definir encabezado y color para Título y Subtítulo que acompañen párrafos.
Título: H2, #000000
Subtítulo: H5, #cccccc

BOTONES

BOTÓN PRINCIPAL
Texto Normal: #000000
Texto Hover: #FFFFFF
Ícono Normal: #000000
Ícono Hover: #FFFFFF
Fondo Normal: #FFFFFF
Fondo Hover: #000000
Opcional: Borde Normal: #
Opcional: Borde Hover: #

BOTÓN SECUNDARIO (Opcional)
Igual al principal

MENÚ

Menú Normal: #000000
Menú Hover: #FF0000
Menú Activo: #FF0000
Menú Fuente: Monsterrat, 500, 16 (Fuente, Peso, Tamaño)