Diseño web a medida, con un sistema detrás

Diseñamos la web entera como un sistema: tokens de color, tipografía y espacio, una biblioteca de componentes y las plantillas de todas las páginas que vas a necesitar, no solo la portada.

  • Documentado en Figma
  • Todas las plantillas
  • Contraste y foco comprobados
Portátil entreabierto en una sala oscura con la pantalla proyectando luz azul

Lo que recibes no es un archivo bonito: es una herramienta con la que tu equipo puede seguir construyendo cuando nosotros ya no estemos. Con los estados reales —vacío, error, carga y texto largo— resueltos antes de maquetar, no dejados para el final.

  • Tokens
  • Componentes
  • Plantillas

Qué entra

Lo que recibes al terminar la fase de diseño

  • Sistema de diseño en Figma

    Tokens de color, escala tipográfica, retícula, radios y sombras, más una biblioteca de componentes con variantes y estados. Todo enlazado, de forma que cambiar un token repinta la maqueta entera.

  • Plantillas de todas las páginas

    Portada, servicio, índice, artículo, contacto y legales. No solo las tres pantallas que quedan bien en una presentación: también las que nadie enseña y todo el mundo acaba necesitando.

  • Versión móvil dibujada, no adivinada

    Cada plantilla se entrega en su punto de ruptura móvil. La mayor parte de tus visitas van a llegar desde un teléfono y el diseño se decide ahí, no como una adaptación posterior.

  • Estados que no salen en las maquetas

    Formulario enviado, formulario con error, buscador sin resultados, listado con un solo elemento y titular de tres líneas. Son los estados que rompen las webs cuando nadie los diseñó.

  • Guía de uso para tu equipo

    Un documento corto que explica cuándo usar cada componente, qué combinaciones están permitidas y qué no se debe hacer. Es lo que evita que la web se deforme al sexto mes.

  • Especificación para quien maquete

    Si el desarrollo lo hace tu equipo interno, entregamos medidas, comportamientos y transiciones descritos, para que la implementación no tenga que interpretar el diseño.

Sistema, no maquetas

Un diseño que sobrevive a su lanzamiento
y a las diez páginas que vendrán después

La mayoría de las webs empiezan bien y se degradan en seis meses. No porque el diseño fuese malo, sino porque nadie dejó escrito qué hacer cuando aparece una página que no estaba prevista. La persona de marketing necesita una landing, coge la plantilla más parecida, cambia dos cosas, y a la tercera vez el sitio ya tiene cuatro tamaños de botón.

Trabajar con un sistema evita exactamente eso. Cada decisión —el gris de los textos secundarios, el radio de las tarjetas, el espacio entre secciones— se guarda con un nombre, y las páginas se componen con esas piezas. Cuando hay que crear algo nuevo, se compone; no se inventa.

Monitor mostrando el diseño de una web oscura abierto en un editor gráfico

Accesible por defecto

La accesibilidad se decide en el diseño
no en una revisión de última hora

Un gris demasiado claro sobre fondo blanco, un enlace que solo se distingue por el color o un foco de teclado invisible son decisiones de diseño, y arreglarlas cuando la web ya está construida cuesta el triple. Por eso comprobamos el contraste de cada pareja de color mientras se elige, y dibujamos el estado de foco de todos los elementos interactivos.

El objetivo es WCAG 2.2 nivel AA en todo lo que entregamos. No es un extra que se factura aparte: es parte de que la web funcione, igual que lo es que se vea en un móvil.

Mano dibujando a lápiz el esquema de una interfaz sobre papel en una mesa oscura

Cómo se trabaja

Cuatro fases de diseño, con una revisión al final de cada una

Nada avanza a la fase siguiente sin tu aprobación explícita. Es la forma más barata de descubrir un desacuerdo: cuando todavía es un dibujo.

  1. Dirección de arte

    Dos propuestas de dirección visual sobre una misma página real, no sobre un collage abstracto. Se elige una y se descarta la otra, con motivos escritos.

  2. Sistema

    Tokens, retícula, tipografía y biblioteca de componentes. Es la fase menos vistosa y la que más tiempo ahorra después.

  3. Plantillas

    Todas las páginas del mapa aprobado, en escritorio y móvil, con contenido real cuando lo hay y con contenido realista cuando aún no lo hay.

  4. Entrega

    Archivo de Figma ordenado, guía de uso y sesión de traspaso grabada con quien vaya a mantener la web.

Por qué a medida

Qué compras cuando no compras una plantilla

Una plantilla comprada es más barata el primer mes y más cara el segundo año. Esto es lo que cambia.

La web dice lo que tú dices

La estructura sigue tu argumento de venta, no el de la plantilla. Las secciones existen porque hacen falta, no porque venían incluidas.

Pesa lo que tiene que pesar

Una plantilla carga funciones para cualquier negocio posible. La tuya carga las tuyas, y eso se nota en el tiempo de carga.

Crece sin deformarse

Las páginas nuevas se componen con piezas existentes, así que la número treinta se parece a la primera.

Tu equipo lo puede usar

Con una guía corta, marketing publica sin pedir permiso a diseño y sin romper nada por el camino.

Preguntas

Sobre el encargo de diseño

¿Puedo contratar solo el diseño?

Sí. Entregamos el sistema, las plantillas y la especificación para que lo construya tu equipo interno o el proveedor que prefieras. En ese caso incluimos una sesión de traspaso con quien vaya a maquetar y quedamos disponibles para resolver dudas durante la implementación.

¿Cuántas rondas de revisión hay?

Dos por fase, incluidas en el presupuesto. En la práctica casi nunca se agotan, porque cada fase se aprueba antes de empezar la siguiente y los desacuerdos aparecen pronto, cuando corregirlos es barato.

¿Trabajáis con nuestra identidad de marca existente?

Sí, y es lo más habitual. Partimos de tu manual y lo llevamos a pantalla, que suele ser donde el manual se queda corto: casi ninguno define estados de foco, mensajes de error o el comportamiento de la tipografía a 14 píxeles.

¿Y si no tenemos identidad?

Podemos construir una identidad mínima suficiente para la web —tipografía, paleta, tratamiento de imagen y tono— sin entrar en un proyecto de marca completo. Si lo que hace falta es una marca de verdad, lo decimos y te recomendamos a alguien.

¿Entregáis el archivo de Figma?

Sí, con permisos de edición y sin dependencias de nuestra cuenta. Es tuyo, igual que el código. No trabajamos con entregables bloqueados ni con licencias que caduquen si dejas de trabajar con nosotros.

Enséñanos la web que tienes ahora

Con una URL y dos líneas de contexto podemos decirte si el problema es de diseño, de construcción o de contenido. Y a veces no es ninguno de los tres.