Case study · 2025
Rediseño Web
B2B/B2C
UI Design
Design System
Responsive
Rol
UI Designer
Desarrollo en WordPress
Equipo
Herramientas
Figma (Auto Layout & Variables)
WordPress & Elementor
Contexto
La agencia Diwar me encargó modernizar la web de Dronfly: resumir copys densos y rediseñar la interfaz. Iteré junto a Adrián, Product Designer, que definió la nueva arquitectura de información B2B/B2C. Después, como proyecto personal, construí un sistema de diseño completo con componentes, variables y 3 breakpoints.
01 / El problema
La web original tenía copys demasiado densos, una arquitectura saturada que mezclaba clientes B2B y B2C sin distinción clara, y una UI desactualizada.
02 / La solución
Iteré el rediseño junto a Adrián, Product Designer, que definió la nueva arquitectura separando servicios B2B de cursos/tienda B2C en el menú. Con el diseño cerrado, monté la web en WordPress + Elementor.
Síntesis de entrevistas con el stakeholder
UI Design
Menos color, mejor jerarquía
Al retomar el proyecto en solitario, revisé dos decisiones de UI concretas: el contraste del naranja de marca en los CTAs, y el uso de color en cards y fondos de sección, que competía consigo mismo en vez de guiar la mirada.
Naranja Antiguo
rgb: (255, 153, 51)
HEX: #FF9933
Naranja Nuevo
rgb: (240, 123, 28)
HEX: #F07B1C
Decisiones clave
01
Color
El naranja de marca no tenía suficiente contraste
El naranja original (#FFA229) apenas llegaba a 2:1 de contraste con el texto blanco de los botones. Lo ajusté a #F07B1C, un 38% más de contraste, sin perder la energía de marca ni acercarme a un tono marrón.
02
Componentes
El color pasó de protagonista a acento
En la primera versión, el color de marca aportaba personalidad a cada sección. En esta segunda vuelta quise dar un paso más: reservarlo para los CTAs y los puntos que más quería destacar, dejando el resto en blanco, negro y gris.
Menos color no es menos marca — es reservar el acento para lo que de verdad importa, y dejar que el resto de la interfaz respire.
Auditoría de la interfaz
Hallazgos
Los usuarios B2B (empresas buscando inspecciones técnicas) y B2C (particulares que quieren formarse como pilotos) convivían en la misma navegación, sin distinción clara.
Los bloques de texto eran excesivamente densos, dificultando que un usuario identificara rápido la oferta de servicios.
El equipo diseñaba pensando directamente en WordPress, que resuelve el responsive de forma nativa — el Figma funcionaba como referencia, no como especificación completa por breakpoint.
Ya existían estilos de párrafo y color definidos, pero faltaba un sistema de espaciado consistente y componentes reutilizables entre secciones.
Decisiones
Segmentación clara del catálogo en menús y submenús desplegables (Overlays), separando servicios B2B de cursos/tienda B2C — decisión de Adrián.
Síntesis de los textos y reparto de la información en cards, dejando más aire entre bloques para que la web respirara mejor en su conjunto.
Grid de 12 columnas en desktop, 8 en tablet y 4 en mobile, con auto-layout y wrap dinámico en vez de posiciones fijas.
Sistema de espaciado en múltiplos de 8px y componentes reutilizables (cards, botones) con variables.
Arquitectura de la información
La web mezclaba servicios para empresas (inspecciones técnicas) y para particulares (formación, tienda) en la misma navegación, sin distinción clara. Adrián definió una nueva estructura que separa Servicios B2B de Servicios B2C dentro del propio menú desplegable, dejando Formación y Tienda como accesos directos para el público particular.
Home
Servicios B2B
Servicios B2C
Contacto
Inspecciones industriales
Líneas eléctricas
Aerogeneradores
Tasación de seguros
Emergencias
Otros servicios
Formación
Tienda
Árbol de navegación resumido · separación B2B / B2C
[02]
Case study
Wireframing.
En este proyecto no llegamos a generar wireframes de baja fidelidad — empezamos directamente en alta con la agencia. Para mostrar igualmente cómo trabajo ese proceso, aquí tienes 3 wireframes de estructura a modo ilustrativo, seguidos de las pantallas reales en alta fidelidad.
Low-Fidelity Wireframes
No se generó documentación de baja fidelidad para este proyecto en concreto. Estos wireframes ilustrativos representan la estructura típica de Home, una página de servicio y el formulario de contacto.
High-Fidelity Wireframes
Pantallas en versión desktop rediseñadas en high fidelity.
[03]
Case study
Design System.
Construí un sistema de diseño propio a partir del rediseño con la agencia: tipografía corporativa legible en cualquier dispositivo, la paleta de marca documentada en tokens, y una librería de componentes con estados (Default, Hover, Active, Disabled) y variables, sobre un grid de 8px.
Tipografía
¿Por qué esta tipografía?
Exo, utilizada en títulos y subtítulos, aporta un carácter técnico y moderno que encaja con el sector aeronáutico.
Fustat ofrece una lectura clara y profesional para los cuerpos de texto, adecuada tanto para clientes B2B como para el público particular.
Paleta cromática
Naranja dron
rgb: (240, 123, 28)
HEX: #F07B1C
Púrpura dron
rgb: (153, 0, 153)
HEX: #990099
Negro Impuro d.
rgb: (6, 23, 44)
HEX: #06172C
Gris medio dron
rgb: (204, 204, 204)
HEX: #CCCCCC
Gris azulado d.
rgb: (98, 116, 138)
HEX: #62748A
Blanco dron
rgb: (255, 255, 255)
HEX: #FFFFFF
Soft Grid & Espaciado
Definí un sistema de espaciado basado en múltiplos de 8px (con pasos intermedios de 4px) para que paddings, gaps y tamaños de componentes fueran predecibles y fáciles de mantener.
space-8
0.5 rem
space-12
0.75 rem
space-16
1 rem
space-32
2 rem
space-48
3 rem
Responsive breakpoints
Librería de componentes
Botones, campos de texto, tarjetas e iconografía con variantes Default, Hover, Active y Disabled documentadas como Variables de Figma.
Grid System
Mobile Grid
Rejilla base — Frame 393 × 852
Columnas
4
Ancho de columna
76px
Margen
20px
Gutter
16px
Tablet Grid
Rejilla base — Frame 834 x1024
Columnas
8
Ancho de columna
80px
Margen
40px
Gutter
16px
Desktop Grid
Rejilla base — Frame 1440x1024
Columnas
12
Ancho de columna
80px
Margen
104px
Gutter
16px
Evolución del diseño
Inspección de aerogeneradores en sus 3 versiones: la web original antes del encargo, el rediseño que hice en la agencia junto a Adrián, y mi rework personal posterior — mismo contenido, tres etapas de madurez del sistema visual.
Web original
Rediseño en agencia
Rework personal
[04]
Case study
Pantallas.
Conclusiones
Proyecto real desarrollado con la agencia Diwar Marketing, junto a Adrián Redondo (Product Designer), que definió la arquitectura B2B/B2C. Lo lanzamos en WordPress + Elementor; después, como proyecto personal, retomé el sistema visual completo: reservé el color para los CTAs y documenté un sistema de espaciado, componentes y los 3 breakpoints que el lanzamiento original no llegó a tener.
Impacto de la solución
Separar Servicios B2B de B2C en el menú resuelve la confusión original entre dos públicos muy distintos. Y reservar el color de marca para los CTAs, en vez de repetirlo en cada fondo, hace que la interfaz respire y que el usuario sepa dónde mirar.
Aprendizajes clave
Retomar un proyecto de agencia con perspectiva significó ver con otros ojos decisiones de UI que en su momento tenían sentido por el contexto (diseñar pensando ya en WordPress). Documentar un sistema de espaciado y componentes reutilizables es la diferencia entre un Figma-borrador y un sistema de diseño real.
© 2026 Daniel Castiñeiras. Todos los derechos reservados.
Diseñador UX/UI en Madrid ·