Volver al portfolio
Diseño webCaso metaNext.js

SernaLab

El portfolio que estás leyendo ahora mismo. En lugar de describir un método, lo demuestra: cada pantalla de este sitio es la salida real de un proceso de siete fases encadenadas. Del concepto a la pantalla, sin saltos invisibles.

Tipo de proyectoProyecto propio · caso meta
Año2026
DisciplinasEstrategia · Arquitectura · Diseño · Build
PlataformaResponsive · Desktop · Tablet · Mobile
HerramientasNext.js · Tailwind · Claude Code · Vercel
SernaLab — imagen de portada
Webel medio es el caso
2026
El reto

Una superficie, tres velocidades

Una sola superficie que opere a tres velocidades: portfolio para agencias, catálogo para clientes directos y demostración de craft técnico. El reto era que cada audiencia encontrara su lectura sin que las otras estorbaran — y que el filtrado fuera invisible: nadie tiene que clasificarse antes de entrar.

Tres lecturas en paralelo
01
Portfolio
Para agencias: criterio, proceso y oficio.
02
Catálogo
Para clientes directos: servicios y resultados.
03
Craft técnico
El propio sitio como demostración del método.
La investigación

Siete portfolios sobre la mesa

Antes de diseñar nada, se analizaron siete portfolios de referencia para entender qué separa a un sitio que demuestra criterio de uno que solo acumula trabajo. El análisis no buscaba inspiración visual, sino patrones de decisión: qué incluir, qué dejar fuera y por qué.

Lo que el benchmark enseñó
01
El proceso vende
El pensamiento documentado pesa más que el resultado pulido. Mostrar el cómo es el argumento, no un extra.
02
La web como prueba
El propio sitio puede ser la demostración técnica del perfil — no hace falta contarlo, basta con que funcione.
03
Curar, no inflar
Una sola pieza-bandera de craft convence más que un muro de proyectos sin jerarquía.

La conclusión no fue qué imitar, sino qué evitar: heros de cliché, casos reducidos a mockups, servicios de tres palabras y un 'about' narcisista.

El proceso

Siete fases encadenadas

Cada decisión quedó registrada en un documento de contexto que opera como fuente única para la fase siguiente. El proceso no es un accesorio del entregable: es parte del entregable. Este caso puede contarse así porque existe documentado, fase a fase.

Las siete fases
01
Estrategia
Posicionamiento, audiencias y principios.
02
Arquitectura
Mapa del sitio y jerarquía de información.
03
Wireframes
Plantillas y sistema de bloques.
04
Contenido y copy
Voz de marca y redacción de cada pieza.
05
Visuales
Paleta, tipografía y tratamiento de imagen.
06
Dirección de arte
Composición, ritmo y detalle final.
07
Build
Migración a Next.js 16 + Tailwind v4, desplegado en Vercel.
El resultado

El medio es el caso

Sitio en producción en sernalab.com: Next.js 16, React 19 y Tailwind v4, con formulario de contacto que envía de verdad, SEO e imágenes sociales propias y un set de iconos construido desde el símbolo de marca — no la plantilla por defecto. La metodología forma parte del entregable: el medio es el caso, la documentación del proceso es el caso, la web es el caso.

7
Fases cerradas y documentadas
100
Lighthouse · SEO y Best Practices
96
Lighthouse · Accesibilidad
Del concepto a producción May–Jun 2026
El craft que se comprueba desde fuera
01
Iconografía propia
Favicon y app icons partiendo del símbolo de marca, no la plantilla de Next.
02
SEO real
Metadata por página, OG/Twitter generadas del símbolo, sitemap y robots propios.
03
Accesibilidad auditada
Foco visible, labels asociados y landmarks. Sin sacrificar el sistema visual.

¿Tienes un proyecto de identidad o experiencia digital en mente?