Retículas
Desktop
Mi retícula tiene 12 columnas y 1000 filas de 4px de altura. Esto me permite organizar el contenido de manera flexible y precisa. Las 12 columnas dividen la página en partes iguales, permitiendo que los elementos ocupen el espacio que necesiten, desde una sola columna hasta las 12 columnas completas. Las 1000 filas de 4px dan un control detallado sobre la disposición vertical del contenido, manteniendo todo alineado y organizado. Este sistema de retícula me ayuda a crear un diseño limpio, ordenado y adaptable, ideal para distribuir texto, imágenes y botones de manera coherente.
Mobile
Mi retícula tiene 2 columnas y 500 filas de 10px de altura.De esta manera podemos adaptar el contenido de una forma armoniosa.
Tipografías
Con el uso de estas tres tipografías he querido dar la sensación de seguridad y limpieza pero sin perder esa parte humana o de acercamiento. Además, la escala tipográfica de las mismas está diseñada para diferenciar bien cada nivel de jerarquía y crear claridad visual. Para el tamaño de pantalla en ordenador (macbook pro 14”) va desde 20px en el tamaño más pequeño a 64px en el tamaño más grande.
Tamaños desktop
| Nivel | Jerarquía | Familia | Estilo | Tamaño (px) | Caja | Interlínea | Letter spacing | Longitud de línea |
|---|---|---|---|---|---|---|---|---|
| h1 | Title | Lora | Medium | 65px / 4.06rem | Baja | 130% | 0% | 190px |
| h2 | Title 2 | Lora | Medium | 60px / 3.74rem | Baja | 130% | 0% | max 662 / min 289px |
| h3 | Title 3 | Julius Sans One | Regular | 36px / 2.25rem | Alta | 120% | 0% | max 536 / min 323px |
| h4 | Title 4 | Julius Sans One | Regular | 25px / 1.56rem | Alta | 120% | 0% | max 344 / min 92px |
| h5 | Paragraph | Avenir Next | Ultra light | 25px / 1.56rem | Baja | 140% | 0% | max 1300 / min 606px |
| h6 | Paragraph | Avenir Next | Ultra light | 20px / 1.25rem | Baja | 140% | 0% | max 344 / min 244px |
Tamaños mobile
| Nivel | Jerarquía | Familia | Estilo | Tamaño (px) | Caja | Interlínea | Letter spacing | Longitud de línea |
|---|---|---|---|---|---|---|---|---|
| h1 | Title | Lora | Medium | 48px/3rem | Baja | 130% | 0% | 132px |
| h2 | Title 2 | Lora | Medium | 32px/2rem | Baja | 130% | 0% | max 288/min 213px |
| h3 | Title 3 | Julius Sans One | Regular | 24px/1.50rem | Alta | 120% | 0% | max 362/min 107px |
| h4 | Title 4 | Julius Sans One | Regular | 17px1.06rem | Alta | 120% | 0% | max 194/min 63 px |
| h5 | Paragraph | Avenir Next | Ultra light | 18px/1.13rem | Baja | 140% | 0% | max 408/min 330px |
| h6 | Paragraph | Avenir Next | Ultra light | 16px/1rem | Baja | 140% | 0% | max 194/min 166px |
Colores
Con el uso de los colores que he seleccionado pretendo transmitir ese lado humano, cercano y próximo con el consumidor sin dejar de lado todo lo comentado anteriormente, es decir, seguir transmitiendo al mismo tiempo profesionalidad y el lado más experto y técnico al mismo tiempo.
#FFFFFF
#B4B4B4
#E9CBBA
#503000
#677C56
#A66261
Espaciados
Para los espaciados, he diseñado una escala modular que es la misma en espacios verticales y horizontales.
Tamaño xxs
El tamaño xxs tiene un tamaño de 4 píxeles.
Tamaño xs
El tamaño xs tiene un tamaño de 16 píxeles.
Tamaño s
El tamaño s tiene un tamaño de 32 píxeles.
Tamaño m
El tamaño m tiene un tamaño de 48 píxeles.
Tamaño l
El tamaño l tiene un tamaño de 64 píxeles.
Tamaño xl
El tamaño xl tiene un tamaño de 84 píxeles.
Tamaño xxl
El tamaño xxl tiene un tamaño de 96 píxeles.
Iconos
