alvarorgz.com
El resto de casos te enseñan una web que hice para otro. Este te enseña la casa entera: el sitio desde el que has llegado hasta aquí. Un recinto con tres oficios dentro, levantado sobre una metáfora que no es decorado — es el argumento de venta. Aquí no hay capturas: hay el objeto real, abierto en canal.
Aviso de honestidad: la web de un diseñador es su único portfolio que el cliente puede auditar sin permiso. Si algo de lo que afirmo aquí no se cumpliera al abrir la portada, se notaría al instante. Por eso este caso está escrito con los valores exactos del código, no con adjetivos.
El cliente más difícil que he tenido
Cuando el cliente eres tú, no hay nadie a quien echarle la culpa del resultado.
Con un encargo tengo una ventaja enorme: hay un briefing, un sector, un público y unos límites. Aquí no había nada de eso, y encima el problema era peor de lo normal. No vendo una cosa: vendo tres —webs, placas NFC y tarjetas impresas— y tres cosas sueltas en una portada es exactamente el aspecto que tiene un negocio que no sabe a qué se dedica.
La salida fácil era el titular de siempre: “todo lo que tu negocio necesita”. Lo dice cualquiera y no significa nada. Así que en vez de un catálogo, la portada hace un diagnóstico: nombra los tres problemas reales de un negocio local, en el orden en que aparecen, y deja que el visitante se reconozca en uno. Los servicios llegan después, como consecuencia.
Eso obligaba a que el diseño sostuviera una idea abstracta —un orden, unos cimientos, algo que se construye por fases— sin explicarla con un diagrama. De ahí sale todo lo demás.
Por qué aquí no hay ni un solo gris
Esta es la decisión que sostiene todo lo demás, y es invisible hasta que te la señalan. La web parece “blanca con negro”. No lo es. No hay un solo píxel de blanco puro en el fondo, ni un solo negro, ni un solo gris neutro. Cada valor de la escala está desplazado hacia el ámbar, y todos comparten prácticamente el mismo tono.
Vengo de Gran Canaria y la luz de aquí no es azul: es arena, cal y piedra volcánica a las siete de la tarde. Un neutro frío (esos #F4F4F5 que trae por defecto cualquier framework) habría hecho que la web se sintiera de oficina. El neutro cálido hace que se sienta de papel. Es la diferencia entre una hoja de cálculo y un libro bien impreso.
El truco funciona porque el ojo no distingue tonos en valores tan claros, pero sí siente la temperatura. Míralos uno al lado del otro y la diferencia deja de ser sutil:
Y no es que los tonos “tiren a cálido”: es que están casi todos en el mismo sitio de la rueda de color. Del más claro al más oscuro, la web entera vive en un arco de doce grados. Esa es la razón física de que todo parezca de la misma familia aunque nunca se repita un color.
Todo el sistema, medido. Estos son los tonos reales de cada token, calculados sobre su hexadecimal. Ni uno se sale del rango ámbar:
El detalle que remata el sistema: las líneas tampoco son grises. Cada borde de esta web es rgba(28,18,8,.07) — la propia tinta al 7% de opacidad. Un borde gris sobre fondo cálido siempre delata que el diseño se montó por partes; un borde hecho del mismo color del texto pertenece a la escena.
Y encima de los neutros, la piedra
Aquí es donde el hub se separa de todo lo demás que he hecho. Sobre la escala de neutros hay una segunda escala, solo para la piedra: tres valores que no se usan jamás para texto ni para fondos, únicamente para dibujar sillares. Existen porque toda la portada está construida con arquitectura dibujada a mano en SVG, y un bloque de piedra necesita tres caras para parecer un volumen y no una mancha.
Las tres piedras también son ámbar —37°, 36° y 38°— así que encajan en el mismo arco que el resto. Y el contorno de cada sillar es otra vez la tinta, aquí al 17%: rgba(28,18,8,.17). La arquitectura no es un dibujo pegado encima de la web; está hecha con los mismos materiales que el texto.
Un acento para la casa, uno para cada oficio
Sobre la base neutra hay un color de marca: #8C6020. No es dorado brillante ni mostaza — es un ocre quemado, el tono de una moldura vieja o del latón sin pulir. Elegí un oro apagado a propósito: un dorado saturado habría empujado la marca hacia lo hortera, y este se comporta como un subrayado a lápiz en un libro.
La regla que me impuse: el oro nunca decora, siempre señala. Si aparece, es porque ahí hay algo que hacer o algo que entender. Estos son sus cuatro usos, funcionando de verdad ahora mismo:
Pero el hub tiene una capa más que ninguna de las otras páginas necesita. Como aquí conviven tres oficios, cada uno lleva su propio color de acento, declarado en una variable que la tarjeta, el numeral, el enlace y el borde leen a la vez. No es adorno: es el hilo que permite reconocer una casa cuando reaparece cuatro capítulos más abajo, en la planta del recinto.
Tres capiteles que no son adorno
La metáfora no ilustra el argumento. La metáfora es el argumento.
Aquí está la idea de la que estoy más orgulloso de toda la web, y es la que menos gente pilla a la primera. Los tres oficios que vendo aparecen como tres construcciones distintas, cada una con su orden clásico: dórico, jónico y corintio. Ese orden no es estético — es el orden histórico en que se inventaron, y coincide exactamente con el orden en que yo fui aprendiendo el oficio y con el orden en que un negocio tiene que resolver sus problemas.
Los tres capiteles de aquí abajo están dibujados con los mismos trazos SVG que hay en la portada. No son una imagen: es la pieza real, sacada de su sitio.
Y el sistema se cierra sobre sí mismo: las mismas hojas de acanto del capitel corintio vuelven a aparecer, a ras de suelo, brotando al pie de las columnas de la entrada. Quien baja hasta el tercer registro y lee que el acanto rebrota, reconoce sin querer la planta que ya había visto al entrar. Ese es el tipo de detalle que nadie te agradece y que decide si una web parece pensada o ensamblada.
Cómo está construido: toda la arquitectura vive en una cantera — un SVG oculto al principio del documento con las piezas definidas una sola vez: los tres capiteles, dos basas, tres coronaciones, tres pedestales, el triglifo, el fuste dórico, el acanto y el muñón del dintel. Después, cada construcción de la página se monta reutilizando esas piezas. Es un sistema de diseño, pero de piedra.
Dos voces bastan
El hub usa dos familias, y solo dos. Con una metáfora tan cargada como la de la arquitectura, la tipografía tenía que hacer lo contrario: quitarse de en medio. Una tercera voz aquí habría sido ruido sobre ruido.
Sans geométrica de código abierto, diseñada para pantalla. Sostiene titulares, cuerpo y navegación. Es neutra sin ser sosa: no tiene personalidad propia, y eso es justo lo que quiero de la voz que más se repite.
Aparece solo en la palabra que importa de cada frase, siempre en itálica y casi siempre en oro. Es el énfasis de voz de la web: donde yo subiría el tono si te lo estuviera contando en persona.
Y el titular de la portada es el mejor ejemplo de lo que hacen juntas, porque las tres palabras en itálica son las tres casas. La frase no describe el negocio: lo dibuja. Quien la lee entera ya ha entendido la estructura del sitio antes de hacer scroll.
Que tu negocio aguante, que lo elijan, y que vuelvan.
Los dos recursos que hacen el trabajo pesado son el interletraje negativo y la interlínea corta. Juntos compactan el titular hasta convertirlo en un bloque macizo, casi un logotipo. Es lo que separa un titular diseñado de un titular escrito: el texto deja de ser una fila de palabras y pasa a ser una forma.
Por qué los capítulos van en este orden
La portada está numerada como un libro, del 01 al 07, y ese orden responde a una regla: primero el problema, luego la solución, luego quién soy, y solo al final el precio y la puerta. Cada capítulo contesta la pregunta que acaba de nacer en el anterior.
-
00
El propileo — la puerta del recintoDos columnas jónicas te flanquean y el estilóbato te sostiene: no es un dibujo detrás del titular, es el sitio donde estás. Al bajar, la puerta crece y se disuelve — la atraviesas, y al otro lado está el patio con las tres casas.
-
01
El diagnóstico — “Casi todo el mundo me pide el frontón”La mejor frase de la web, y va la primera. Tres citas literales del cliente —«no me encuentran», «me encuentran pero eligen a otro», «vienen una vez y no vuelven»— y cada una enlaza a su casa. Quien se reconoce, ya se ha autoclasificado.
-
02
Las tres casas — stoa, templo y arcoLos tres oficios como tres construcciones distintas, con su orden, su acento y su vitrina. La de diseño web va rotando maquetas reales de proyectos dentro de un marco de piedra.
-
03
El oficio — cómo llegué a ese diagnósticoLa parte personal, contada como tres registros numerados en romanos. No es una biografía: es la justificación de por qué vendo tres cosas y no una. Cada registro termina con la puerta a su casa.
-
04
Cómo trabajo — precio, plazo y la lindeLas cuatro preguntas que trae cualquiera que va a gastarse dinero, contestadas con cifras. Y algo que casi nadie escribe: a quién no sirvo.
-
05
El friso — “Sé tal como quieres parecer”Una banda grabada de lado a lado, con su moldura de dentículos arriba y abajo. La cita de Sócrates hace de bisagra entre el relato y la prueba, y de paso resume la tesis entera del negocio.
-
06
El libro de visitas — la prueba, pegada a la salidaLas reseñas van en tablilla enmarcada, con el mismo marco de piedra que las maquetas, y el texto en cursiva serif, como tinta. Colocadas después del relato: primero se explica el orden, y solo entonces habla quien ya lo vivió.
-
07
La planta — el recinto en texto llanoLas salas se recorren mirando; esto es el plano que se lee. Es lo único de la página que nombra y enlaza cada sección: antes ese trabajo lo hacía solo el pie, y el pie no daba para tanto.
-
08
Preguntas y contacto — “Entrada libre”Seis objeciones reales resueltas antes de la conversación, y el cierre con la misma palabra que abriría un edificio público. Todos los caminos acaban en el mismo WhatsApp.
El movimiento también tiene una paleta
Las animaciones de esta web comparten un valor de aceleración: cubic-bezier(.2, .7, .2, 1). Igual que el color tiene un tono común, el movimiento tiene una curva común — y por eso todo se siente “de la misma mano” aunque cada pieza sea distinta.
Esa curva arranca rápido y frena largo, como un objeto con peso que se posa. Es lo contrario a la animación lineal, que se mueve a velocidad constante y siempre se lee como robótica porque no existe en el mundo físico. Compara las dos bolas: recorren la misma distancia en el mismo tiempo.
Pero la pieza de movimiento que más me gusta de la portada es otra: el templo se levanta como se levanta un edificio de verdad. Cada sillar declara en el código el segundo exacto en que se asienta, y la obra empieza por la primera grada y termina por la acrótera. El dibujo tiene que pintarse de arriba abajo para que lo de abajo tape lo de arriba — pero se construye al revés. Aquí lo tienes, en bucle:
Gradas, columnata, arquitrabe, friso, frontón y acrótera — en ese orden y con los tiempos del código original. El frontón siempre llega el último, que es exactamente lo que dice la tesis de la página: nadie empieza el templo por el tejado.
Y alrededor de todo eso hay una atmósfera, no un fondo:
Encima de todo, la capa que nadie ve pero todos notan: el grano. Una textura de ruido generada con un filtro SVG cubre la web entera al 8% de opacidad, en modo multiplicar. Rompe la perfección plana del píxel y termina de empujar la sensación hacia el papel impreso. Pesa cero: no es una imagen, es matemática.
A la izquierda, el ruido crudo. A la derecha, la dosis real. El mismo filtro que estás viendo ahora mismo sobre toda la página. Si te acercas a la pantalla lo ves; si te alejas, solo sientes que la web tiene textura y no sabes por qué.
Decir a quién no sirvo
Este es el bloque que más confianza genera de toda la web, y es el que menos gente se atreve a escribir. En un negocio de una sola persona, la objeción silenciosa del cliente nunca es “¿sabrá hacerlo?” — es “¿me va a vender lo que necesito o lo que a él le interesa?”. La única forma de contestar eso es renunciando a clientes por escrito.
- Tienes un negocio local en Gran Canaria y quieres que te encuentre gente de aquí.
- Prefieres hablar con quien hace el trabajo, no con un comercial.
- Te vale más un plazo realista que una promesa rápida.
- Entiendes que esto se juega a meses, no a semanas.
- Quieres que te garantice el primer puesto en Google.
- Te interesa comprar reseñas o filtrar quién llega a Google.
- Necesitas un equipo de diez personas.
Fíjate en que la columna de la derecha no está escrita en tono de disculpa. Cada “no” es en realidad un argumento de venta encubierto: no prometo el primer puesto porque sé cómo funciona el algoritmo, no compro reseñas porque conozco la normativa y no tengo diez personas porque esa es precisamente la propuesta. Un rechazo bien escrito vende más que tres testimonios.
Esto no es una web: es un recinto
La portada es la puerta. Detrás hay un sistema de páginas independientes, cada una con su público, su intención de búsqueda y su embudo — pero todas construidas con el mismo idioma visual que acabas de ver desmontado.
El capítulo de la planta existe justo por esto: el pie de página no daba para tanto. Un recinto de catorce páginas colgando de tres enlaces de salida es un recinto con habitaciones cerradas. La planta las abre todas, con su nombre completo, y de paso le da a Google el mapa que necesita.
Y en la casa I vive un bicho
Hay una decisión en este recinto que no defiende ninguna métrica. En la sección de diseño web —y solo ahí, en ninguna de las otras dos casas— se pasea un perenquén, el lagartijo que vive en las paredes de todas las casas canarias. Se llama Guayre, es un modelo 3D que camina de verdad según haces scroll, tiene su propio botón flotante con ficha de presentación y se puede apagar con un interruptor.
¿Por qué ahí y no en la portada? Porque cada casa tiene un trabajo distinto. El hub tiene que sostener una tesis seria sobre el negocio; la casa de diseño web tiene que demostrar oficio. Y un guiño local que solo entiende del todo quien es de aquí, metido con un modelo animado que reacciona al scroll sin cargarse el rendimiento, demuestra más oficio que tres párrafos jurando que sé hacerlo. El detalle inútil es la firma del artesano.
Aquí lo tienes caminando. El de verdad anda por la esquina inferior izquierda de /diseno-web, en 3D y en tiempo real. Con reduced-motion activado no aparece: la personalidad nunca se impone a la accesibilidad.
Lo que Google ve cuando entra aquí
Todo lo anterior es inútil si nadie llega. La mitad del trabajo de esta web está en sitios que ningún visitante abrirá jamás — y es exactamente el mismo trabajo que hago en los encargos de clientes.
Y una decisión de rendimiento que se nota: las nueve maquetas que rotan en la vitrina de la primera casa van en .webp, se cargan en dos capas y el cambio espera a que la imagen nueva esté lista. Nunca se funde hacia un hueco vacío. Es el tipo de detalle que separa una galería que funciona de una que parpadea.
Lo que este proyecto demuestra
Si le dedico este nivel de obsesión a mi propia casa, imagina lo que hago con la tuya.
Ese es, honestamente, el único objetivo de este caso de estudio. No elegí siete neutros que se parecen, tres piedras y dos tipografías porque quedara bonito, sino porque un sistema coherente se percibe como profesionalidad antes de que el visitante lea una sola palabra. Y eso —la sensación de estar tratando con alguien que sabe— es literalmente lo que vendo.
- Sistema cromático con un solo tono base
- Escala de piedra y cantera SVG reutilizable
- Metáfora estructural como argumento de venta
- Jerarquía tipográfica de dos familias
- Lenguaje de movimiento unificado
- Arquitectura de marca multi-sección
- Copywriting de diagnóstico, línea a línea
- SEO técnico y local completo
- Accesibilidad y reduced-motion
- Rendimiento sin dependencias
Ya sabes cómo pienso. ¿Lo aplicamos a tu negocio?
Hablemos de tu proyecto