Guía de estilo
Todo lo que define la imagen del rediseño de la web: el logo, los colores, las tipografías, los componentes, cómo se mueven las cosas y la ficha técnica. Haz clic en cualquier color para copiar su código.
Marca
El logo de siempre de Ferretería Álvarez, sin cambiar el dibujo: solo se ha pasado a vector (SVG) para que se vea nítido a cualquier tamaño, desde el icono de la pestaña hasta una fachada. Junto a él, el nombre en la tipografía de rotulación de la web.
Versiones
logo-alvarez.svglogo-alvarez.svg#logo (index.html)#logo (index.html)Cómo está hecho
- Tornillo con rosca: la caña vertical, con las vueltas de la rosca en blanco.
- Arandela: el círculo melocotón con el agujero blanco.
- Berbiquí: la manivela en línea fina, con el puño arriba y el portabrocas abajo.
- Broca: la línea en zigzag que baja hasta la punta.
- Cabeza moleteada: el bloque inferior con estrías verticales.
Dónde se usa cada uno
logo-alvarez.svg). En el plano, dentro de la chincheta con fondo claro.Color
Dos familias que conviven: los naranjas del logo, que no se tocan, y la paleta de la web, que los acompaña con el amarillo de seguridad y el naranja de urgencias sobre grafito y hormigón, que sustituye al blanco puro.
Colores del logo
Colores de la web
Cinta de aviso (cabecera, intro y urgencias)
Fondos y superficies
Texto
Proporción aproximada en pantalla
Tipografía
Tres familias, cada una con un trabajo: una condensada de rotulación para titulares y botones, una sans muy legible para el resto y una monoespaciada para referencias y medidas. Todas de Google Fonts, gratuitas y con licencia libre (OFL).
- Pesos 500–800
- Titulares siempre en mayúsculas, a 800
- Botones a 700 con interletrado de 0,06 em
- Pesos 400, 500, 600 y 700
- Misma familia que la condensada: casan sin esfuerzo
- Artículos del catálogo a 600
- Pesos 400, 500 y 700
- Distingue 0/O y 1/l: clave para leer referencias
- Antetítulos con «//» delante
Escala tipográfica de la web
Componentes
Las piezas que se repiten en la web, copiadas tal cual. Esquinas casi rectas en botones (5 px) y más suaves en tarjetas (14 px). Los botones tienen un canto inferior que se hunde al pulsar, como una tecla, y reaccionan en el mismo momento en que se toca la pantalla.
Cerraduras
Cerraduras, picaportes, cilindros y cerrojos para puertas y muebles.
Movimiento
Animaciones con muelles, al estilo de Apple: arrancan desde donde está cada cosa en pantalla, heredan la velocidad del dedo y se pueden interrumpir. Con «reducir movimiento» activado en el sistema, todo se convierte en fundidos suaves y la intro no se reproduce sola.
La intro · unos 3,3 segundos
- 0,0 sLlave virgen
Entra una llave de latón sin dientes.
- 0,5 sCopia
La muela de la copiadora recorre la hoja, salen chispas y aparecen los dientes.
- 1,6 sAl bombín
La llave entra en la cerradura, gira media vuelta con un pequeño rebote y el pestillo se recoge.
- 2,4 sSe abren las puertas
La pantalla se abre en dos, con la cinta de aviso en el borde, y aparece la portada.
Curvas
cubic-bezier(.2,.8,.2,1)Lo general: cambios de página, tarjetas que aparecen, el carrusel al ajustarse.
amortiguamiento 0,55 · 0,5 sLa llave del inicio cuando la sueltas y el giro de la llave en la intro.
a saltos · 40 msEl contador de años de la página de Historia.
Gestos
Ficha técnica · Web
Una web estática, sin servidor ni base de datos: se publica subiendo la carpeta tal cual. Ahora mismo está en Cloudflare Pages como propuesta.
Tecnología
- Base
- HTML, CSS y JavaScript, sin frameworks ni librerías
- Páginas
- Una sola página con rutas:
#/herraje,#/articulos,#/categoria/cerraduras… - Fuentes
- Google Fonts: Barlow Condensed, Barlow y JetBrains Mono
- Publicada en
- ferreteria-alvarez-propuesta.pages.dev
- Buscadores
- Oculta a Google (
noindex) mientras sea una propuesta
Catálogo
- Origen
- Referencias copiadas de ferreteriaalvarez.com, con las erratas corregidas
- Artículos
- 11 categorías, de Cerraduras a «Y mucho más» (435 artículos de la A a la Z)
- Herraje
- 34 páginas: 10 de pomos, 5 de tiradores, 11 de asas y complementos y 8 de manillas
- Búsqueda
- En cada página, sin importar tildes ni mayúsculas
- Pedidos
- «Preguntar» abre un correo a consultas@ferreteriaalvarez.com con la referencia
Páginas
- Inicio
- Intro, portada con la llave, accesos y urgencias
- Herraje
- Carrusel de pomos y tipos de tirador, asa y manilla
- Artículos
- Catálogo por categorías y novedades
- Servicios
- Cerrajería, restauración, rotulación y urgencias
- Historia
- Contador de años y las generaciones de la familia
- Visítanos
- Dirección, teléfonos, correo y enlace a Google Maps
Accesibilidad
- Móvil
- Diseño adaptable con menú desplegable y zonas táctiles de 44 px o más
- Contraste
- El amarillo nunca lleva texto blanco; la cabecera es opaca en las páginas claras
- Movimiento
- Respeta «reducir movimiento» y «reducir transparencia»
- Teclado
- Esc salta la intro; las flechas mueven el carrusel
Tono
Cómo hablamos
«¿No sabes cómo se llama la pieza? Tráela y la encontramos.»
«Pomo de porcelana LG13, 35 mm, azul.»
«¿Te has quedado fuera? Llámanos.»
«La mejor ferretería del mundo.»
«¡¡¡Ofertas increíbles que no te puedes perder!!!»
Archivos
Dónde está cada cosa en la carpeta ferreteria-alvarez-rediseno.
index.html | Toda la web: estilos, tokens de color, páginas y la intro |
app.js | Intro, muelles, llave arrastrable, carrusel, páginas y buscador |
catalogo.js | Las 11 categorías de Artículos con sus artículos |
herraje.js | Las 34 páginas de herraje con sus referencias |
logo-alvarez.svg | El logo en vector |
guia-de-estilo.html | Esta guía |
_headers | Le dice a Cloudflare que no deje indexar la web |