palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Sistema de diseño

Dentro del desarrollo web lossistemas de diseñohan supuesto un antes y un después. Se han hecho indispensables a la hora de mantener la consistencia y eficiencia a lo largo del desarrollo de los proyectos. Debido a este motivo se decidió crear un sistema de diseño que apoyara el proyecto Palaze.

¿Qué es un sistema de diseño?

design-section

Un sistema de diseño es un conjunto de directrices y reglas que se utilizarán en el proceso de creación de los componentes y de todos los elementos del proyecto al que acompañe. Estas reglas pueden ser tipografía, paletas de colores, formas de componentes, el cómo interactúa el usuario final con los elementos del sitio web, etc.

Principalmente, los sistemas de diseño nacieron de la falta de consistencia en los proyectos web, ya que lo que sucedía era que en un mismo proyecto, se iban modificando estilos aplicados a los mismos componentes debido a no tener guías. Este hecho en proyectos de cierto tamaño se hacía aún más visible, por esta razón, se decidió crear sistemas de diseño para mantener la consistencia y coherencia dentro de un proyecto, pudiendo así los desarrolladores disfrutar de un camino menos escarpado durante su estancia en estos.

¿Qué son los tokens de diseño?

Los tokens de diseño son variables que representan las guías y directrices que se utilizan en los sistemas de diseño. Un ejemplo de estas variables de diseño son los colores dentro de las paletas seleccionadas en el sistema de diseño, otro sería el tipo de letra y los tamaños correspondientes dependiendo de dónde se use, ya sea un título o subtítulo, etc.

En este caso las variables serán representadas porcss properties.

Ventajas de utilizar un sistema de diseño

design-section

Coherencia: Gracias a compartir los mismos patrones durante todo el proyecto, se reduce la posibilidad de que en mismos componentes en distintas secciones varien en estilo.

Reutilización: Este apartado es clave, los sistemas de diseño se suelen utilizar en varios proyectos o una vez acabado con uno, hacer unas pequeñas modificaciones y usarlo en otro. También se reutilizan los tokens de diseño constantemente sobre un mismo proyecto para mantener la cohesión.

Flexibilidad: Permite una amplia libertad al poderse usar en cualquier plataforma o tecnología. Al ser unos patrones/reglas/directrices, se pueden aplicar sobre casi cualquier proyecto.

Eficiencia y calidad: Se ahorra mucho tiempo debido a no tener que ir revisando cómo se han aplicado los estilos en otras secciones. Simplemente tienes que mirar los tokens de diseño y aplicarlos. Otro punto fuerte de esto es que si se hace una modificación en los tokens de diseño, se aplican en todos los elementos en que se usen, lo que permite mejorar la calidad y la eficiencia de los productos reduciendo así el número de fallos.

Entre muchas otras ventajas.

Sistema de diseño Palaze

El sistema de diseño empleado en Palaze destaca por buscar el minimalismo, no se pretende saturar al usuario con elementos excesivamente llamativos que distraigan el foco de lo verdaderamente importante.

Paletas de colores

Las paletas de colores que se muestran a continuación son las que se usan en Palaze, tokens incluidos.

Tipografía

A continuación se muestra un ejemplo de los distintos tipos de letra, tamaño, espacio entre lineas, espacio entre letras, etc.

Familia Tipográfica

Para nuestra fuenta principal tenemosPadauk.Se ha elegido debido a su estilo simple pero diferente de la tipografía más popular. También tendremos como fuente opcional sans-serif, que tomará lugar como principal si en algún dispositivo llegara a haber un error con la fuentePadauk.

Token Valor Ejemplo
--plz-font-primary Padauk

La octaba maravilla del mundo.

sans-serif

La octaba maravilla del mundo.

Tamaño de fuente

Distintos tipos de tamaño de fuente que son utilizados tanto en el landing page, como en la documentación, como en los propios componentes de Palaze.

Token Valor Ejemplo
--plz-font-size-very-small 12px
Aa
--plz-font-size-small 14px
Aa
--plz-font-size-normal 16px
Aa
--plz-font-size-sub-section 20px
Aa
--plz-font-size-mid-section 30px
Aa
--plz-font-size-below-titles 24px
Aa
--plz-font-size-section 48px
Aa
--plz-font-size-titles 64px
Aa

Grosor de fuente

La fuente tipográficaPadauk,solo dispone de dos grosores, el regular y el bold (negrita).

Token Valor Ejemplo
--plz-font-weight-regular 400
Visteme despacio que tengo prisa.
--plz-font-weight-bold 700
Visteme despacio que tengo prisa.

Espacio entre lineas

Token Valor Ejemplo
--plz-line-height-smaller 1

La octaba maravilla del mundo.
La octaba maravilla del mundo.
La octaba maravilla del mundo.

--plz-line-height-small 1.4

La octaba maravilla del mundo.
La octaba maravilla del mundo.
La octaba maravilla del mundo.

--plz-line-height-normal 1.8

La octaba maravilla del mundo.
La octaba maravilla del mundo.
La octaba maravilla del mundo.

--plz-line-height-big 2.4

La octaba maravilla del mundo.
La octaba maravilla del mundo.
La octaba maravilla del mundo.

Espacio entre letras

Token Valor Ejemplo
--plz-letter-space-smaller -0.48px
La octaba maravilla del mundo.
--plz-letter-space-small -0.24px
La octaba maravilla del mundo.
--plz-letter-space-normal normal
La octaba maravilla del mundo.
--plz-letter-space-big 1.2px
La octaba maravilla del mundo.
--plz-letter-space-bigger 2.4px
La octaba maravilla del mundo.

Formas de los bloques

Cada elemento, ya sea componente o no puede cambiar visualmente de una manera drástica cambiando su"border-radius".

Token Valor Ejemplo
--plz-border-radius-circle 50%
--plz-border-radius-rounded 9999px
--plz-border-radius-low-rounded 25px
--plz-border-radius-default 4px
--plz-border-radius-square 0px