Mi trabajo como diseñador gráfico se remonta al año 2010 donde empecé trabajando para una agencia de marketing… mucho ha cambiado todo desde entonces. PS ID AI siguen siendo como el aire que respiramos pero el trabajo DIGITAL ha ido cambiando nuestro rol hacía el de un diseñador que ve más allá solo de la capa puramente visual, se involucra en el desarrollo, analiza datos y procesos para así aportar un diseño más funcional.

Figma, NO-CODE & IA

nuevo orden MUNDIAL...

Backstage... CSS

Cuando la tendencia sería utilizar herramientas NO-CODE y ayudarse de la IA para agilizar tiempo… Decido desarrollar el proyecto más personal que tengo con HTML y CSS puro... ¿Porque?

Aprender:
Empezar un proyecto desde el boceto en papel hasta llevarlo a código hace que diseñe de forma más consciente en su posterior funcionalidad. Aunque también use IA o herramientas NO-CODE, entender cómo funciona realmente una web o app hace que sea más versátil, me pueda comunicar con desarrollo o sepa salir adelante cuando algo falle.

Reutilizar y estructurar:
He utilizado la metodología BEM con una nomenclatura semántica junto a otras clases globales personalizadas para generar un código legible y a su vez reutilizable, estructurando el código en 4 bloques:

Global.css

Clases globales para definir muchos aspectos como tamaños de texto, espaciados, color, posicion, flujo... reutilizables.

Content.css

Clases semánticas específicas que ayudan a la legibilidad del HTML evitando el uso de demasiadas clases.

HZ-nav.css

En este archivo se define la navegación horizontal de la web, el sistema responsive de GRIDS y slides de contenido.

Animate.css

Animaciones, transiciones, control del scroll y elementos que dotan de dinamismo a la web.

Estandarizar:
Es importante tener definidos todos los aspectos de nuestra web: layouts, colores, retículas… todo aquello que conforma la parte visual está diseñado de forma homogénea creando un conjunto. Tener una guía que recoja todos estos aspectos nos ayuda a crear unos estándares de diseño para poderla mantener y escalar sin desvirtuar su esencia.

Sistema de diseño

Title-L Popins(900) 64px - 6rem .title-l
Title-M Popins(900) 54px - 3.4rem .title-m
Title Popins(900) 38px - 2.4rem .title
Title-S Popins(900) 28px - 1.8rem .title-s
Subtitle Roboto(200) 38px - 2.4rem .subtitle
Body Roboto(200) 16px - 1rem .body
Body-M Roboto(600) 18px - 1.1rem .body-m
Body-L Roboto(600) 24px - 1.5rem .body-l
Nav Raleway(600) 24px - 1.5rem .nav
Nav-S Roboto(400) 12px - 0.8rem .nav-s
Light #dddddd --main-light-color
Dark #9b9b9b --main-dark-color
Acent #ffc700 --acent-color
Acent Off #c68c0a --acent-off-color
Main-white .bg-main-white
White-acent .bg-white-acent
Acent-main .bg-acent-main
Dots .bg-dots
lock
user
code
wheel
mail
talk
popup
tabs
nav
icon
steps
color
menu
wishlist
discount
zoom
star
slide
count
list
padding 4px .pd-4
padding 8px .pd-8
padding 12px .pd-12
padding 16px .pd-16
padding 20px .pd-20
padding 24px .pd-24
padding 40px .pd-40
padding 60px .pd-60
line-height 0 .no-space
line-height 0.2 .space-xxs
line-height 0.5 .space-xs
line-height 1 .space-s
line-height 1.2 .space-m
line-height 1.4 .space-l
line-height 1.6 l.space-xl
12px
.br-radius-s
20px
.br-radius-m
25px
.br-radius-l
50px
.br-radius-xl
100px
.br-radius-xxl
.border-dark
.divider-main
.divider-acent
.divider-off