00Portada
00 Portada · Resumen
Resumen del proyecto
Qué es Prodelsur, para quién es la web, qué tiene que conseguir y cómo está organizada. Es el punto de partida de las decisiones de diseño de los tableros siguientes.
El cliente
Empresa de carpintería y mobiliario de madera a medida, fundada en 2012 en El Cuervo de Sevilla. Diseña, fabrica e instala con equipo propio en toda España.
Objetivos de la web
- 01Transmitir profesionalidad y elegancia desde el primer vistazo.
- 02Enseñar productos, proyectos y maderas de una forma que invite a recorrerlos.
- 03Conseguir solicitudes de información: formulario, teléfono y WhatsApp a mano.
Para quién
Tecnología
- Construcción
- Astro 7 + Tailwind CSS 4
- Alojamiento
- Cloudflare Pages
- Formulario
- Envío por email con Resend
- Cookies
- Ninguna no esencial · sin aviso
Mapa de la web
Metro lateral como menú (en pantalla grande con ratón), logo centrado arriba y botón de WhatsApp abajo a la derecha.
Decisiones clave
La web como sala
Fotos y madera a pantalla completa, con los textos en cartelas, como en una exposición.
Un metro como menú
El menú es una regla de carpintero en el borde. Arriba, solo el logo en el centro.
Oscuro con pausas claras
Madera ahumada, con Proceso y Preguntas en marfil para marcar el ritmo.
Privacidad primero
Sin cookies que pedir, letras propias y mapa solo a petición.
01Guía de estilo
01 Guía de estilo · Colores
Colores
Los dos tonos de madera del logo, nogal y cobre, sobre una base muy oscura de madera ahumada. El marfil aparece en las pausas claras. Son pocos colores, y por eso destacan las fotos y las vetas.
Paleta de marca
Reparto por secciones
Domina lo oscuro, como una sala con luz dirigida. Las dos secciones claras marcan el ritmo, y el metro y el logo cambian de color según lo que tengan debajo.
Contraste comprobado
- Marfil / ahumada
- 17,4 : 1 · texto de cualquier tamaño
- Blanco / nogal
- 8,5 : 1 · texto de cualquier tamaño
- Texto suave / marfil
- 7,3 : 1 · texto de cualquier tamaño
- Cobre / ahumada
- 5,1 : 1 · se usa sobre oscuro, no sobre claro
01 Guía de estilo · Tipografía
Tipografía
Dos familias de Google Fonts, servidas desde el propio dominio para no conectar con Google. Una serif clásica y muy fina, usada a gran tamaño, y una geométrica limpia para leer y para las etiquetas en mayúsculas.
Aa
Cormorant Garamond
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿?¡! áéíóú
Elegante y fina. Títulos, productos, preguntas y cifras, casi siempre en su peso normal.
Aa
Jost
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 · ¿?¡! áéíóú
Geométrica y clara. Párrafos, botones, antetítulos, formulario y el nombre del logo.
Escala tipográfica · tamaños medidos a 1440 × 900
Título de portada
H1 · solo uno
Diseño y
Cormorant 400 · 138 px
interlínea 0,96 · −2,5 %
Título de sección
H2
Un mismo equipo
Cormorant 400 · 69 px
interlínea 1,02 · −2 %
Número de fase
Proceso
02
Cormorant 400 · 80–144 px
según el ancho
Cifra
Empresa
+1.000 m²
Cormorant 400 · 60 px
en cobre sobre oscuro
Título de fase
H3
Fabricación
Cormorant 400 · 36 / 40 px
Párrafo
Texto general
Centralizamos el proceso en nuestro propio equipo.
Jost 400 · 16 / 26 px
Botón
Acciones
Solicitar información
Jost 500 · 12 px
espaciado 20 %
Antetítulo
Sobre cada título
Del diseño a la instalación
Jost 500 · 11 px
espaciado 30 %
Marca del metro
Menú lateral
Proyectos
Jost 500 · 11 px · en vertical
espaciado 18 %
Los títulos crecen con el ancho y también con la altura de la pantalla, para que cada sección quepa siempre en una vista.
01 Guía de estilo · Estructura
Retícula y espaciado
Un contenedor muy ancho y una retícula de 12 columnas. Las fotos y las maderas no respetan el contenedor: llegan al borde de la pantalla. En ordenador cada sección mide una pantalla y se pasa de una a otra con un solo gesto.
Contenedor, a 1440 px de pantalla
Margen lateral: 20 px en móvil, 32 en tableta, 64 en portátil y 5 % en pantalla grande
Reparto dentro de cada sección
Empresa
foto al borde · texto
Maderas y Productos
fondo total · cartelas
Proceso y Pie
4 columnas iguales
Preguntas y Contacto
5 + 7 columnas
Medidas que se repiten
- Alto de sección
- 100 % de la pantalla; si no cabe, crece
- Hueco para la cabecera
- 88 px, más un margen según la altura
- Metro lateral
- 44 px de ancho, fijo a la izquierda
- Esquinas
- Rectas en todo: botones, fotos y cartelas
Tamaños de pantalla
- Hasta 639 px
- Móvil: una columna y botones apilados
- 640–767 px
- Móvil grande: formulario y pie a dos columnas
- 768–1023 px
- Tableta: las fases de Proceso, en cuatro columnas
- Desde 1024 px
- Escritorio: fotos a pantalla completa, cartelas y 12 columnas
- Con ratón
- Desde 1024 px aparece el metro; sin ratón, el botón de menú
Paso entre secciones
Con la rueda o el teclado, un gesto lleva a la sección siguiente. En pantallas táctiles el salto lo hace el propio navegador. Las secciones más altas que la pantalla se recorren con normalidad antes de saltar.
Mientras se pasa de una a otra, una plumilla dibuja un trazo cobre desde la primera letra de un título hasta la del siguiente, y se desvanece al llegar.
Quien lo tiene activado en su dispositivo ve la web sin trazo, sin efecto 3D ni transiciones, con todo en su sitio.
01 Guía de estilo · Imagen
Fotografía y materiales
La foto no acompaña al texto: es el decorado. Se usa a pantalla completa o de borde a borde, con degradados en madera ahumada para que el texto se lea. Las vetas de madera no son fotos, sino dibujos hechos con código.
Tres tipos de foto
Vetas dibujadas · las siete maderas del selector
Velos para leer
De abajo arriba en la portada y de izquierda a derecha en Productos. Son siempre en madera ahumada, nunca negro puro.
Tamaños optimizados
Cada foto se sirve en formatos ligeros y en varios tamaños. La de portada carga la primera; las demás, al acercarse a ellas.
Un mapa de profundidad
La foto de portada lleva un dibujo en grises (blanco, cerca; negro, lejos) que hace posible el efecto de cámara.
02Componentes
02 Componentes · Marca
Logotipo
Un símbolo geométrico que forma las iniciales PS, en los dos tonos de la madera, con el nombre en mayúsculas muy espaciadas. Ahora va centrado arriba: es lo único que queda en la cabecera.
Horizontal · en dos tonos
Sobre claro · páginas legales y menú móvil
Horizontal · sobre oscuro
Portada, arriba · el nogal se aclara a marfil
Apilado · de un solo color
Al bajar · se adapta al fondo
Cómo se transforma al bajar
- 01
Las letras del logo horizontal se desvanecen hacia arriba, de los extremos al centro, y el símbolo se apaga.
- 02
Aparece el símbolo del logo apilado, en un solo color.
- 03
Las letras entran desde el centro hacia fuera. Al volver arriba, se hace lo mismo al revés.
Tamaños en la web
- Horizontal
- Símbolo de 36 px
- Apilado
- Símbolo de 48 px
- Al pulsarlo
- Sube al inicio y repite la entrada
02 Componentes · Acciones
Botones y enlaces
Rectangulares y con las esquinas rectas, como una pieza bien cortada. El texto va en mayúsculas pequeñas y muy espaciadas. Cada grupo tiene una sola acción principal, con relleno, y otra secundaria con borde.
Sobre fondos oscuros · la mayoría de la web
Principal · normal
Principal · ratón encima
Con teclado · contorno cobre
Secundario · normal
Secundario · ratón encima
Sobre fondos claros · menú móvil y páginas de gracias y error
Principal · normal
Principal · ratón encima
Con teclado · contorno nogal
Enlaces de texto
Siempre subrayados sobre oscuro: se reconocen sin depender solo del color. Los que abren otra pestaña lo avisan a los lectores de pantalla.
Botón flotante de WhatsApp
Fijo abajo a la derecha. Es cuadrado, en madera oscura, con dos esquinas finas como un detalle de ebanistería. Con el ratón encima o con el foco, despliega «Escríbenos».
El segundo es una maqueta del estado desplegado
02 Componentes · Iconos
Iconos
Un solo juego de iconos de línea, dibujados dentro de la propia web, sin librerías ni peticiones externas. Toman el color del texto que los rodea, así que funcionan igual sobre claro y sobre oscuro.
Contacto y datos · contacto y pie
Teléfono
Dirección
Horario
Aviso legal
Privacidad
Cookies
Ajustes
Las cuatro fases · proceso
Diseño
Fabricac.
Transp.
Montaje
Interfaz
Menú
Cerrar
Flecha
Más
Redes · listas, sin enlace aún
TikTok
El símbolo en el pie · dos estados
El mismo trazo de 2 px en todos, en cuadros de 44 a 48 px con las esquinas rectas, como las muestras y los botones. El icono de redes del grupo anterior solo aparecerá en el pie cuando el cliente confirme sus enlaces.
02 Componentes · Navegación
Menú principal: el metro
El menú es un metro de carpintero fijo en el borde izquierdo, con sus rayitas y los nombres de las secciones escritos en vertical. Arriba ya no hay menú: solo el logo en el centro. Es el rasgo que más separa esta web de una web clásica.
Sobre claro
Marca actual: Proceso, en nogal
Sobre oscuro
Marca actual: Proyectos, en cobre
Cómo se usa
- 01Se presenta solo. Al cargar, la tira entra por la izquierda y los nombres se encienden uno tras otro, y sus rayas sobresalen. Así se entiende que es el menú.
- 02Los nombres siempre se ven. Como la numeración de un metro, no hay que adivinar nada ni pasar el ratón.
- 03Mide el recorrido. Una línea cobre se rellena al bajar, y llega a cada marca justo al llegar a su sección.
- 04Responde al ratón. La raya de la marca sobresale de la tira y el nombre se aviva. Se ve en las capturas, en «Maderas».
- 05Se adapta al fondo. Mira qué tiene debajo y pasa de claro a oscuro, igual que el logo.
Enlaces
- Empresa
- #sobre-nosotros
- Productos
- #servicios
- Proceso
- #proceso
- Proyectos
- #proyectos
- Maderas
- #maderas
- Contacto
- #contacto
- Sin marca
- Portada, Preguntas y Pie: se llega a ellas bajando
La cabecera · solo el logo, centrado
Sin barra ni línea: un velo con desenfoque evita que el contenido se mezcle con el logo al pasar por debajo
Móvil y tableta
Sin ratón no hay metro: un botón abre este panel, con «Llamar al +34 669 17 91 28». Se cierra con Escape
02 Componentes · Contenido
Piezas de contenido
Las piezas que se repiten por la web, tal como se ven. Todas comparten las esquinas rectas, las líneas finas y las cartelas oscuras, inspiradas en las fichas de una sala de exposición.
Cartela
Fabricamos puertas de madera adaptadas a las dimensiones, diseño y sistema de apertura de cada proyecto.
- Pintadas en cualquier color RAL
Productos · semitransparente y esmerilada
Producto en la lista
Elegido, con línea y flecha · sin elegir, apagado
Antetítulo y filtro
Proyectos
Marca cuadrada, como las esquinas del logo · subrayado en cobre
Cifra
2012
Año de fundación
13
Vehículos de flota propia
Empresa · cuenta al entrar en pantalla
Muestras de madera
La elegida lleva un contorno en cobre · crecen al pasar el ratón
Pregunta
Abierta, el signo más gira hasta formar una X y aparece la respuesta.
Solo líneas finas · sin caja en la web
Campos del formulario · una línea sobre oscuro
Nombre *
Normal
Email *
Escribiendo · línea en cobre
Teléfono (opcional)
Ratón encima · línea más clara
Celda del pie
DIRECCIÓN
C. Emprendedores, 7, 41749 El Cuervo de Sevilla
Símbolo, etiqueta y dato · se pulsa entera
03Secciones desglosadas
123456
12345
12345
123456
123456
1234
1234
123456
123456Productos · otro producto elegido
Proceso · fase con el ratón encima
Proyectos · otra tira abierta
Proyectos · ficha ampliada
Maderas · otra madera elegida
Preguntas · una respuesta abierta
Pie · celda con el ratón encima
04La web completa
Menú abierto
01 · Portada
02 · Empresa
03 · Productos
04 · Proceso
05 · Proyectos
06 · Maderas
07 · Preguntas
08 · Contacto
09 · Pie de página
