Sistema
de diseño
Las piezas con las que está hecha esta web. Pocas, con una función cada una y reutilizadas en todas las páginas.
01 · color
Cinco acentos. En cada visita se elige uno al azar y tiñe la cortinilla, el footer y los botones. Cada acento lleva asignado su color de texto para mantener el contraste.
02 · tipografía
Rethink Sans 300 · 400 · 500
Una sola familia. La jerarquía se construye con tamaño y gris, no con negrita.
- Banesto
- Banesto vuelve.
- Conservar lo que la gente reconoce y abrirlo hacia lo que viene.
- Primero la idea, después la forma. Cada decisión visual tiene una razón.
- Entregables
03 · componentes
Chips
Regla: un chip es algo que se pulsa (navegación, enlaces, contacto) o un estado (en proceso). Los proyectos con cliente llevan un asterisco en el color de la visita y la nota "* cliente" en la ficha. Nunca información: para eso está la ficha. Se pegan entre sí sin espacio, como una sola tira.
Ficha
La información se escribe, no se encapsula: mayúsculas pequeñas separadas por barras. En la home y en el hero de cada caso, a la derecha del título y justificada, en una columna estrecha para que ocupe al menos dos líneas; en móvil, a todo el ancho. En Sobre mí, en línea.
Botones flotantes
Solo la flecha en reposo. Al pasar el ratón se despliegan con el acento. En móvil, siempre desplegados.
Insight · Tensión · Idea
Insight
Una copa nunca necesita explicación.
Tensión
Un "no", casi siempre.
Idea
La botella tapa el "no".
Obligatorio en las campañas: tres columnas con línea superior.
Ver todos
Cierra la selección de la home y despliega el índice. Texto en blanco y círculo blanco con la flecha en negro; al pasar el ratón la banda se rellena con el acento y la flecha lo toma.
Fila del índice
Nombre, pieza, disciplinas y año. Al pasar el ratón se rellena con el acento y los mockups del proyecto pasan, sin recortar, en una miniatura que sigue al cursor.
04 · iconos
Phosphor, peso regular. Todos los iconos de la web salen de la misma familia.
05 · movimiento
Salida suave cubic-bezier(.16, 1, .3, 1) · .45–.7 s
Chips, botones, flechas y entradas de contenido.
Cortinilla cubic-bezier(.7, 0, .2, 1) · .9 s
Transiciones entre páginas y preloader.
Pasa el ratón por las pistas para verlas. Con "reducir movimiento" activado, todo se simplifica.
06 · retícula
- Columnas12 · separación 1.5rem
- Margen lateralclamp(1rem, 4vw, 4rem)
- Margen de cabecera1rem
- Radio1rem · chips 4rem
- Breakpoints1100 · 991 · 767 · 600 px