Experience · Diseño web

Agencia de diseño web que decide qué se entiende primero.

Una empresa tiene servicios, casos, argumentos, procesos y precios. Quien entra en su web no necesita todo eso a la vez: necesita entender qué hace la empresa, si le encaja, si puede fiarse y cómo seguir. Diseñamos ese orden, y después la web que lo sostiene.

  • Web corporativa
  • Rediseño
  • Landings
  • Ecommerce

El punto de partida

El problema casi nunca es que la web sea fea.

Casi todas las webs que rediseñamos estaban bien hechas visualmente. Lo que fallaba era otra cosa: entrar y no saber en dos segundos qué hace la empresa, cuál de los ocho servicios es el mío o qué se supone que tengo que hacer ahora.

Una portada real, con todo bien resuelto

Seis mensajes, seis acciones, seis veces el mismo peso. Cada bloque, por separado, está bien hecho. Lo que falta no es calidad: es una decisión sobre cuál de los seis tiene que entenderse primero.

Todo al mismo nivel

La empresa quiere que se vea todo, así que no destaca nada. Una página con veinte mensajes no comunica veinte veces mejor: comunica una vez peor.

Ordenada por organigrama

La estructura reproduce cómo está organizada la empresa por dentro —divisiones, departamentos, historia— y no lo que necesita entender quien llega de fuera. Son dos órdenes distintos y casi nunca coinciden.

Bonita, pero muda

Buena tipografía, buenas fotos, buenas animaciones y ni una frase que explique a qué se dedica la empresa, para quién trabaja y qué la hace distinta. La estética no está de más: está sola.

Móvil tratado como un escritorio pequeño

En el móvil no existe la mirada de conjunto: hay un solo orden, una cosa detrás de otra. Si ese orden no se decide, lo decide el azar de la maquetación, y ahí es donde llega la mitad larga del tráfico.

Crecida por parches

Cada campaña, cada servicio nuevo y cada urgencia dejaron un bloque más. La web dejó de ser una estructura y se convirtió en un histórico de decisiones sueltas.

Nada de esto se arregla trayendo más visitas. Si el problema es que no entra nadie, se trabaja desde SEO o Google Ads. Esta página va del otro problema: entran, y no pasa nada.

Cómo cambia una página

El mismo contenido, cuatro decisiones.

Una empresa nos entrega lo que quiere contar. A partir de ahí, diseñar no consiste en añadirle cosas encima: consiste en tomar decisiones sobre esa misma materia. La web final no dice más — deja de decirlo todo a la vez.

  1. Lo que nos llega

    Hacemos mantenimiento industrial para plantas de producción.

    Mantenimiento preventivo

    Reparación correctiva

    Mejora de líneas

    18 añostrabajando en planta

    40 plantasatendidas cada año

    Respuesta en 24 h en toda Cataluña

    Pedir una visita técnica

  2. 01

    Prioridad

    Una cosa manda. Se decide qué se lee primero y qué puede esperar: de las ocho frases, sólo una tiene que entenderse antes de bajar.

  3. 02

    Agrupación

    Lo que se entiende junto se ve junto. Tres servicios dejan de ser tres párrafos sueltos y pasan a leerse como una sola oferta con tres formas.

  4. 03

    Contexto

    La prueba se coloca al lado de la afirmación que la necesita. Los años y las plantas no van en «quiénes somos»: van pegados a la frase que hay que creerse.

  5. 04

    Acción

    El siguiente paso aparece donde ya se ha decidido darlo, y dice lo que va a pasar. No es un botón más arriba: es un botón más tarde.

No se ha añadido ni una palabra ni se ha quitado ninguna. Lo único que ha cambiado es el orden, el peso y la distancia entre las piezas — y con eso cambia lo que entiende quien entra.

Qué diseñamos

Cuatro tipos de proyecto y qué entra en cada uno.

La misma forma de trabajar con distinto alcance. Lo que cambia de un proyecto a otro es cuánta estructura hay que decidir y cuánta tecnología pide por debajo.

Web corporativa

la web que sostiene una venta que se decide antes de la llamada
  • Estrategia web y arquitectura de la información
  • Estructura de servicios y páginas de servicio
  • Jerarquía de mensajes y propuesta de valor
  • Diseño de interfaz (UI) y sistema visual propio
  • Experiencia de usuario (UX) y recorridos de lectura
  • Diseño web responsive: móvil, tablet y escritorio
  • Formularios y recorridos de contacto
  • Velocidad de carga y rendimiento
  • Base técnica preparada para SEO

Rediseño

cuando ya hay web y lo difícil es decidir qué se conserva
  • Auditoría de estructura, contenido y experiencia de usuario
  • Qué se mantiene, qué se replantea y qué se retira
  • Migración de contenido sin perder posicionamiento
  • Redirecciones y continuidad de las URLs que ya funcionan
  • Actualización de la identidad visual en digital
  • Mejora de conversión (CRO) sobre lo que ya recibe visitas

Landings de captación

una propuesta, un recorrido y un solo objetivo
  • Landing pages para campañas de Google Ads y Meta Ads
  • Páginas por servicio, por sector o por territorio
  • Mensaje único y eliminación de distracciones
  • Formularios cortos y llamadas a la acción con sentido
  • Medición de la conversión y lectura de lo que pasa después del clic

Ecommerce y proyectos con lógica propia

cuando la web deja de ser informativa y pasa a hacer cosas
  • Diseño de tienda online: catálogo, ficha de producto y checkout
  • Áreas privadas y accesos de cliente
  • Integraciones con las herramientas que ya usa la empresa
  • WordPress cuando conviene autonomía; desarrollo a medida cuando conviene control
  • Paneles y funcionalidades específicas del negocio

Cuando el proyecto necesita más que una web —vender online, un área privada, lógica de negocio propia— entra Ecommerce, Desarrollo web a medida y Software a medida. La experiencia la seguimos diseñando aquí; lo que cambia es qué hay que construir por debajo para sostenerla.

Cómo lo hacemos

Empezamos con todo abierto.

Un proyecto web no empieza con una lista de entregables: empieza con diecinueve preguntas sin responder. El método las va cerrando en el orden que menos trabajo tira a la basura, hasta que la experiencia está decidida. Y cuando se publica, unas cuantas se vuelven a abrir: ya hay gente usándola.

  1. Sin responder19

    • Objetivo de negocio
    • A quién nos dirigimos
    • Qué hay que explicar
    • Alcance
    • Qué manda en cada página
    • Qué va junto
    • Qué sale de la portada
    • Recorridos
    • Mapa de páginas
    • Tipografía y color
    • Retícula
    • Estados e interacciones
    • Formularios
    • Comportamiento en móvil
    • Tecnología
    • Rendimiento
    • Qué se mide
    • Qué se mejora ahora
    • Qué página nueva hace falta

    Se cierra en esta etapa

    Entender

    ¿Qué tiene que conseguir esta web?

    Qué vende la empresa, a quién, con qué argumento gana y qué está frenando hoy. De aquí sale el objetivo de la web y la lista completa de lo que hay que explicar, todavía sin ningún orden.

  2. Sin responder15

    • Qué manda en cada página
    • Qué va junto
    • Qué sale de la portada
    • Recorridos
    • Mapa de páginas
    • Tipografía y color
    • Retícula
    • Estados e interacciones
    • Formularios
    • Comportamiento en móvil
    • Tecnología
    • Rendimiento
    • Qué se mide
    • Qué se mejora ahora
    • Qué página nueva hace falta

    Decidir

    ¿Qué se entiende primero?

    Ordenamos esa lista según lo que necesita quien entra, no según el organigrama: qué manda en cada página, qué va junto, qué baja un nivel y qué deja la portada. Es la etapa que más cambia el resultado y la que menos se ve en el presupuesto.

  3. Sin responder10

    • Tipografía y color
    • Retícula
    • Estados e interacciones
    • Formularios
    • Comportamiento en móvil
    • Tecnología
    • Rendimiento
    • Qué se mide
    • Qué se mejora ahora
    • Qué página nueva hace falta

    Construir

    ¿Cómo se ve y cómo se recorre?

    Lo decidido se convierte en estructura, contenido e interfaz: tipografía, ritmo, estados, formularios y comportamiento real en móvil, tablet y escritorio. Y la tecnología que le toca: WordPress cuando conviene autonomía, desarrollo a medida cuando conviene control.

  4. Sin responder6

    • Qué se mide
    • Qué se mejora ahora
    • Qué página nueva hace falta
    • Qué manda en cada página
    • Qué sale de la portada
    • Recorridos

    3vuelven a abrirse con datos reales

    Aprender

    ¿Qué cambia ahora que la usa gente de verdad?

    Con la web publicada aparece lo que no se podía saber antes: qué se lee, dónde se abandona, qué página falta. Tres preguntas que ya estaban cerradas vuelven al campo, y esta vez se responden con comportamiento real en lugar de con criterio.

Las tres primeras etapas se hacen una vez. La cuarta no se acaba, y por eso el campo nunca llega a quedarse vacío: una web que en dos años no ha vuelto a abrir ninguna pregunta es una web que ha dejado de acompañar al negocio.

La prueba

Dos proyectos con mucho que ordenar.

Sin mockups ni pantallas de escaparate: capturas reales de los dos productos, donde se ve qué se decidió enseñar a cada persona y qué se decidió apartar.

Konevent

Producto de reservas de salas · Diseño de producto e interfaz

Una misma operación, tres experiencias distintas.

+200empresas utilizando el producto

Agosto de 2026. La misma disponibilidad, en las tres pantallas.

Panel de gestión de Konevent: calendario mensual de reservas con filtros por sala y por estado, y navegación lateral entre calendario, reservas, salas, excepciones y pagos.

Quien gestiona la sala

Necesita el mes entero, todas las salas y todos los estados a la vez, con filtros para acotar. Su pantalla es densa a propósito: no está decidiendo si reserva, está trabajando.

Ve
El mes completo, todas las salas, todos los estados, los pagos y las excepciones
No ve
Nada. Es la única pantalla que lo ve todo
Formulario de nueva reserva manual del panel de Konevent: sala, fecha, turno, datos del cliente, número de personas, importe, método de pago y estado.

Quien atiende el teléfono

Crea la reserva a mano mientras habla con el cliente. El campo del turno no falla ni se queda vacío antes de tiempo: explica qué falta —«primero selecciona una sala y una fecha»— y espera. Un estado bien resuelto ahorra una llamada.

Ve
Un solo formulario, en el orden en que se piden los datos por teléfono
No ve
El calendario, las otras reservas y los turnos que todavía no puede saber
Widget público de reserva de Konevent: selector de fecha de una sala concreta, con los días disponibles marcados y el paso 1 de 3 indicado en la cabecera.

Quien reserva

Ve el mismo mes de agosto, pero sólo lo que puede elegir: los días disponibles marcados, los pasados apagados y su sala. Paso 1 de 3.

Ve
Qué días puede elegir y cuántos pasos le quedan
No ve
Filtros, salas ajenas, estados internos, importes y métodos de pago

Es el mismo dato y el mismo calendario. Lo que cambia entre las tres pantallas es qué se enseña y qué se calla, y esa es una decisión de diseño antes que una decisión técnica.

Obrescat

Empresa de reformas en Barcelona · Web, captación y panel de gestión

Una portada que responde antes de que preguntes.

2–3leads orgánicos al día, frente a aproximadamente uno a la semana en el punto de partida.

Inicio de la web de Obrescat: imagen partida entre la obra y el resultado, titular «Empresa de reformas en Barcelona», tres formas de contacto y una banda con la valoración de Google, la visita técnica, el presupuesto detallado y la garantía post-obra.

La web, el posicionamiento y el panel de gestión se construyeron juntos, y el resultado es de los tres. Lo que aporta el diseño es que la estructura que ordena la portada es la misma que ordena después las obras por dentro.

  1. Qué hacen

    La imagen del inicio está partida por la mitad: a la izquierda la obra, a la derecha el resultado. El negocio se entiende sin haber leído una sola palabra, y el titular sólo tiene que confirmarlo.

  2. Cómo seguir

    Tres maneras de avanzar en vez de una: teléfono para quien tiene prisa, presupuesto para quien está comparando y WhatsApp para quien no quiere llamar. Cada visitante llega con una disposición distinta y la portada no elige por él.

  3. Si pueden fiarse

    Y justo debajo, en una sola banda, lo que un cliente de reformas necesita saber antes de llamar: la valoración real en Google, que hay visita técnica previa, que el presupuesto viene detallado y que hay garantía después de la entrega. No está en «quiénes somos»: está donde se decide.

Capturas reales de los dos proyectos. El panel de Konevent se muestra con una cuenta de pruebas.

Encaje

Cuándo tiene sentido rediseñar.

  • La web ya no representa el nivel al que trabaja hoy la empresa.
  • Hay muchos servicios y ninguno acaba de entenderse.
  • Entra tráfico —de SEO, de campañas, del comercial— y no pasa nada con él.
  • La web ha crecido por parches y ya nadie sabe qué hace cada página.

Trabajamos sobre todo con

  • Empresas de servicios
  • B2B
  • Industria y proyectos técnicos
  • Compañías con varias líneas de negocio
  • Ecommerce
  • Producto digital

Si lo que buscas es la web más barata posible, o maquetar un diseño ya cerrado sin discutir ni una decisión, hay opciones mejores que nosotros: nuestro trabajo empieza justo en esas decisiones.

Preguntas frecuentes

Antes de encargar una web.

¿Cuánto cuesta el diseño de una web profesional?

No hay una tarifa única porque no hay un proyecto único. Lo que mueve el precio es medible: cuántas páginas y cuántos servicios hay que estructurar, si el contenido existe o hay que trabajarlo, si se resuelve sobre WordPress o pide desarrollo a medida, y si hay tienda, área privada o integraciones. Preferimos mirar el punto de partida y dar un presupuesto cerrado con el alcance por escrito antes de empezar, en lugar de una horquilla que no significa nada.

¿Cuánto tarda un proyecto de diseño y desarrollo web?

Depende del alcance, pero lo que más alarga un proyecto casi nunca es el diseño: son los contenidos que faltan y las validaciones internas. Por eso la primera etapa cierra objetivo y alcance por escrito y la segunda cierra la estructura antes de dibujar nada. Cuando esas dos decisiones están tomadas, el resto avanza a un ritmo previsible.

¿Podéis rediseñar la web que ya tenemos sin perder posicionamiento?

Sí, y es la mitad de lo que hacemos. Antes de tocar nada se mira qué páginas reciben visitas hoy y por qué búsquedas, para saber qué hay que conservar: esas URLs, su contenido útil y su estructura de encabezados. Lo que cambia de dirección se redirige. Un rediseño hace perder posiciones cuando se rehace la web como si la anterior no existiera, no por rediseñar.

¿Trabajáis con WordPress o con desarrollo a medida?

Con los dos, y la elección es del proyecto, no nuestra. WordPress tiene sentido cuando el equipo quiere autonomía para publicar y ampliar sin depender de nadie. El desarrollo a medida tiene sentido cuando hace falta control: rendimiento, funcionalidades propias, integraciones o una estructura que ningún gestor estándar sostiene bien. Lo decidimos en la tercera etapa, cuando ya se sabe qué tiene que hacer la web.

¿Quién escribe los contenidos?

El conocimiento del negocio lo pone la empresa: qué vende, cómo trabaja, qué la diferencia y qué datos puede enseñar. Lo que ponemos nosotros es el orden y la forma —qué se cuenta en cada página, en qué secuencia, con qué extensión— y la reescritura de lo que nos entregáis para que encaje en esa estructura. Si hace falta producción de contenido más allá de eso, se dice antes y entra en el alcance.

¿El diseño incluye el desarrollo, o son dos cosas distintas?

En un proyecto normal van juntos: diseñamos y construimos la web, y por eso lo que se plantea en estructura e interfaz es siempre viable. Son dos capacidades distintas, eso sí. El diseño de la experiencia decide qué entiende y qué vive quien entra; el desarrollo a medida entra cuando el proyecto necesita lógica propia —procesos, paneles, integraciones, un producto—. Cuando llega ese punto lo decimos, porque cambia el alcance y el presupuesto.

¿Nos garantizáis que la web venda más?

No, y conviene desconfiar de quien lo garantice: en la venta influyen la oferta, el precio, el mercado y el equipo comercial, y una web no manda sobre eso. Lo que sí se puede sostener es que la web deje de estorbar: que se entienda qué hacéis, que el visitante encuentre lo suyo, que haya un siguiente paso claro y que se pueda medir qué pasa. Si con eso resuelto el problema sigue estando en otro sitio, lo diremos.

Hablemos

Enséñanos tu web y dinos qué debería conseguir.

La miramos con calma antes de la primera llamada: qué se entiende en los primeros segundos, qué compite con qué y en qué punto se pierde la gente. Con eso delante ya se puede hablar de alcance y de presupuesto.

¿En qué punto estáis?
¿Qué inversión contempláis?

El total del proyecto o, si es un servicio continuado, la inversión del primer año.

Lo primero será entender el problema, no proponerte un servicio. Y si vemos que no tiene sentido que lo hagamos nosotros, también te lo diremos.

Preferencias de cookies

Elige qué quieres permitir. Puedes cambiarlo cuando quieras desde el enlace del pie.