Case study · 2026
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.
Flujo de navegación
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. Con el diseño cerrado, monté la web en WordPress + Elementor.
UI Design
Decisiones de diseño
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 (#FF9933) daba solo 2,1:1 de contraste con texto blanco, muy por debajo del mínimo AA (4,5:1). Lo sustituí por #F07B1C y cambié el texto de los botones al negro impuro de la marca (#060F2A). Con esa combinación el contraste sube a 6,8:1 y cumple AA. El estado hover (#DD721A) llega a 5,9:1.
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.
Figma sirvió como referencia visual y la adaptación responsive se resolvió con el comportamiento nativo de WordPress/Elementor.
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.
Síntesis de los textos y reparto de la información en cards, dejando más aire entre bloques para que la web se lea 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
01
Case study
Wireframing.
Estructura de las pantallas clave del proyecto en baja fidelidad, seguida de las pantallas en alta fidelidad.
Low-Fidelity Wireframes
Baja fidelidad de las pantallas clave: Home, página de servicio y formulario de contacto.
High-Fidelity Wireframes
Pantallas en versión desktop rediseñadas en high fidelity.
02
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, Focus y On click) 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 dron
rgb: (6, 15, 42)
HEX: #060F2A
Gris medio dron
rgb: (204, 204, 204)
HEX: #CCCCCC
Gris azulado dron
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, Focus y On click 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 × 1024
Columnas
8
Ancho de columna
80px
Margen
40px
Gutter
16px
Desktop Grid
Rejilla base — Frame 1440 × 1024
Columnas
12
Ancho de columna
88px
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
03
Case study
Pantallas.
Conclusiones
Proyecto real desarrollado con la agencia Diwar Marketing, junto a Adrián Redondo (Product Designer). 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 incluía.
Impacto de la solución
Separar Servicios B2B y B2C en el menú está pensado para que cada público encuentre su camino sin ruido. Y reservar el color de marca para los CTAs busca 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 espaciado y componentes reutilizables convirtió un Figma de referencia en un sistema que cualquiera del equipo puede mantener.
© 2026 Daniel Castiñeiras. Todos los derechos reservados.
Diseñador UX/UI en Madrid