Saltar al contenido

Agencia UX de diseño web y diseño UI, de la investigación al desarrollo

ASES es una agencia de diseño UI/UX. Diseñamos sitios web, apps y software en los que sus clientes y su equipo se orientan sin instrucciones. Para ello, empezamos por la pregunta de qué quieren hacer sus usuarios y, a partir de ahí, diseñamos la estructura, el prototipo navegable y la interfaz final. Si lo desea, nuestro propio equipo también desarrolla el diseño.

Encargar el diseño de un sitio web o una app: así es el proceso

Elija en qué punto está hoy su sitio web o su app. El mapa le muestra su siguiente paso y lo que obtiene después de cada fase.

¿En qué punto está?
  1. Usted está aquí

Planeamos un sitio web o una app nuevos

Su primer paso
Aclaramos con usted quién va a usar su sitio web o su app y qué quieren hacer allí esas personas. De ello dependen las páginas, los recorridos y el diseño.
Basta con esto para empezar
Una breve descripción de su proyecto y, si los tiene, sitios web que le gusten, con una frase sobre qué le gusta de ellos.

01 Consulta inicial y objetivos

Nosotros
Le pedimos que nos explique qué debe lograr su sitio web o su app para su empresa, y revisamos lo que ya existe hoy: páginas, programas y documentos.
Usted
Usted describe el objetivo y los grupos de usuarios y nos muestra ejemplos que le gustan.
Al final
Una idea clara de los objetivos, los usuarios y sus tareas más importantes.

Qué recibe su equipo de desarrollo y cómo el diseño se convierte en código lo muestra la sección de más abajo. Del diseño al código

Cómo trabajamos en detalle

Diseño UI/UX: lo que diseñamos para usted

El diseño UX define cómo encuentran sus usuarios la información y completan sus tareas. El diseño UI da forma a la interfaz que ven y usan mientras lo hacen. Planificamos ambos juntos, para sitio web, tienda y software. A menudo se combinan varios temas, por ejemplo en un rediseño que empieza con un test de usabilidad y termina con un sistema de diseño.

Investigación UX y pruebas de usabilidad

Entender las necesidades de sus usuarios y poner a prueba las interfaces con tests de usabilidad y prototipos.

  • Auditoría UX
  • Entrevistas con usuarios
  • Test de usabilidad
  • Prototipo navegable

Recibe una lista de las observaciones, ordenadas por importancia y cada una con una medida.

Analítica web y optimización de la conversión
Leer más

Empezamos por lo que ya existe: los datos de analítica, las preguntas que ventas y atención al cliente responden una y otra vez, y los términos que buscan los visitantes en su sitio web. Después hablamos con personas de su público objetivo sobre sus experiencias y les pedimos que resuelvan tareas típicas en un prototipo navegable. Donde dudan o abandonan, cambiamos el diseño. Un sitio web o un software existente lo revisamos brevemente ya en la consulta inicial; la revisión detallada, la auditoría UX, es entonces la primera fase del proyecto.

Encaja si quiere saber dónde abandonan los visitantes o por qué los usuarios preguntan una y otra vez.

Diseño web

Sitios web que llevan a los visitantes a su objetivo y funcionan tanto en el smartphone como en el escritorio.

  • Diseño web responsive
  • Web corporativa
  • Rediseño

Recibe los diseños de todas las plantillas de página para smartphone, tableta y escritorio.

Creación de sitios web y CMS
Leer más

Primero aclaramos qué deben hacer los visitantes en su sitio web: enviar una solicitud, comparar productos, encontrar una persona de contacto. De ello dependen el menú, la página de inicio y cada plantilla de página. Para nosotros, diseño web responsive significa que diseñamos cada plantilla para smartphone, tableta y escritorio. En un rediseño mantenemos lo que funciona bien hoy y cambiamos lo que frena a los visitantes.

Encaja si los visitantes deben encontrar antes lo que buscan o tiene un rediseño por delante.

Diseño UI para apps y software

Interfaces para apps y aplicaciones profesionales que se manejan sin formación previa.

  • Diseño de dashboards
  • Portal de clientes
  • Diseño de apps
  • Aplicación profesional

Recibe los diseños de todas las vistas y estados, probados en el prototipo.

Desarrollo de apps
Leer más

Diseñamos portales de clientes, dashboards, aplicaciones profesionales internas y apps para iOS y Android. Cada vista muestra dónde está el usuario y qué tiene que hacer a continuación. Además, diseñamos todos los estados de una vista: vacía, cargando, con error y tras completarse con éxito. En las apps seguimos los patrones de uso que sus usuarios conocen de iOS y Android.

Encaja si su equipo o sus clientes trabajan a diario con la aplicación.

Sistemas de diseño

Una colección común de colores, tipografías y componentes para que todas las interfaces sigan siendo coherentes.

  • Design tokens
  • Biblioteca de componentes
  • Guía de estilo
  • Biblioteca de Figma

Recibe una biblioteca en Figma y, si lo desea, los componentes en código.

Del diseño al código
Leer más

Los colores, las tipografías y los espaciados los definimos como design tokens. Los botones, los campos de formulario y otros componentes los diseñamos con todos sus estados, junto con reglas sobre cuándo se usa cada uno. Si cambia un color, cambia a la vez en todas las interfaces. Los contrastes, el foco y el tamaño mínimo de las zonas táctiles están definidos en el sistema. Para una pyme suele bastar una biblioteca ligera que crece con su producto.

Encaja si varios sitios web, apps o equipos usan los mismos componentes.

Accesibilidad y BFSG

Sitios web y apps que el mayor número posible de personas puede usar sin barreras, según la BFSG y las WCAG.

  • Sitio web accesible
  • Revisión de sitios web existentes
  • Información sobre accesibilidad

Recibe un sitio web que se puede usar con teclado y con lector de pantalla.

Accesibilidad según la BFSG y las WCAG
Leer más

En un sitio web nuevo planificamos desde el primer boceto los contrastes, el manejo con teclado, las etiquetas para lectores de pantalla y unos formularios comprensibles. En un sitio web existente, primero comprobamos dónde hay barreras y definimos con usted el orden en que las eliminamos. A quién afecta la BFSG y qué incluye lo muestra la sección de más abajo.

Encaja si ofrece contratos online a consumidores o si su sitio web debe poder usarlo todo el mundo.

Identidad corporativa

Logotipo, colores y tipografías que hacen reconocible a su empresa en todas partes.

  • Logotipo
  • Colores y tipografías
  • Manual de identidad
  • Presentaciones e impresos

Recibe los archivos del logotipo, los colores, las tipografías, el manual de identidad y plantillas de presentación.

Leer más

Diseñamos su logotipo desde cero, desarrollamos los colores, las tipografías y el lenguaje visual, y recogemos en un manual de identidad cómo se usan. Así, también su equipo y otros proveedores los usan correctamente. Diseñamos a juego plantillas de presentación e impresos. Como agencia de identidad corporativa que también diseña sitios web y apps, probamos la nueva imagen directamente en su sitio web y su app. Si su identidad corporativa ya está definida, la incorporamos al sistema de diseño.

Encaja si su empresa debe presentarse de forma coherente en el sitio web, en las presentaciones y en los documentos.

Más que interfaces: ilustración, motion y 3D

Además de sitios web y apps, diseñamos las imágenes, los movimientos y los objetos con los que su marca destaca.

Ilustraciones e iconos

Ilustraciones y sets de iconos propios en el estilo de su identidad corporativa, para el sitio web, la app, las presentaciones y los impresos.

  • Illustrator
  • Figma

Motion y animación

Animaciones para interfaces y logotipos y vídeos cortos que presentan su oferta. En sitios web y apps las implementamos con Lottie o Rive, para que carguen rápido.

  • After Effects
  • Lottie
  • Rive

3D y mockups

Visualizaciones 3D y mockups que muestran su producto, su app o su sitio web en uso.

  • Blender
  • Spline
  • Photoshop

Una idea, muchas formas

Sitio web, app, tienda o campaña: llevamos su idea a la forma que llega a sus clientes.

Así nace una vista: un ejemplo del portal de clientes

Un ejemplo: los clientes profesionales de un fabricante llaman a menudo para preguntar cuándo llega su entrega. Así rediseñamos el resumen de pedidos del portal de clientes para que encuentren la respuesta por sí mismos.

Ejemplo · Portal de clientes · Resumen de pedidos

  1. Entender

    Lo que hacemos
    Leemos las preguntas más frecuentes a la atención al cliente y vemos en los datos de analítica dónde abandonan los clientes el portal.
    Lo que se obtiene
    Las tareas más importantes de los clientes y su recorrido por el portal, en una página.
  2. Bocetar

    Lo que hacemos
    Diseñamos varias variantes del resumen y decidimos con usted cuál desarrollamos.
    Lo que se obtiene
    Un wireframe del resumen de pedidos.
  3. Probar

    Lo que hacemos
    Las personas de prueba resuelven una tarea en el prototipo navegable: “Averigüe cuándo llega su pedido.” Donde dudan, cambiamos el diseño y volvemos a probar.
    Lo que se obtiene
    Una lista de las observaciones y un prototipo modificado.
  4. Diseñar

    Lo que hacemos
    Terminamos el diseño del resumen, con la fecha de entrega en primer lugar, para smartphone y escritorio, en modo claro y oscuro y con todos los estados.
    Lo que se obtiene
    Archivos de diseño, listos para el desarrollo.

Del diseño al código: sistema de diseño y entrega

Lo que se diseña en Figma debe verse en el código exactamente igual y manejarse igual que en el prototipo. Por eso, en nuestra empresa diseño y desarrollo trabajan en el mismo equipo, y los colores, las tipografías y los componentes tienen los mismos nombres en Figma y en el código.

En el código, los colores, la tipografía, los espaciados y el foco tienen los mismos nombres que en el diseño.

  • Colores y tipografías
  • Espaciados y retícula
  • Componentes con todos sus estados
  • Tamaños de pantalla
  • Indicaciones de accesibilidad
  • Enlace al prototipo

Lo desarrollamos nosotros

Ya sea un sitio web con WordPress, TYPO3 o Webflow, una tienda o una app, lo construimos con los mismos componentes que en el diseño. Durante el desarrollo, un enlace de vista previa le muestra lo que ya está listo.

Desarrollo de softwareE-Commerce

Lo desarrolla su equipo

Su equipo de desarrollo recibe los archivos de diseño con todos los estados y tamaños de pantalla y el enlace al prototipo. Si lo desea, también entregamos los componentes en código, documentados en Storybook.

Sitio web accesible según la BFSG y las WCAG: qué incluye

Accesible significa que las personas pueden usar su sitio web también con teclado, con lector de pantalla o con una ampliación fuerte. De ello se benefician todos los visitantes, por ejemplo gracias a etiquetas claras, mensajes de error comprensibles y contrastes bien legibles.

Elegir forma de uso
Lo que se exige
Cada campo y cada botón se alcanza con el teclado, en un orden lógico, y el foco siempre está visible.
Cómo lo comprobamos
Recorremos cada plantilla sin ratón, y en los formularios, hasta el envío.

Diseñamos y comprobamos cada proyecto según las WCAG 2.2, nivel AA. El análisis de sitio web mide, para una página, la parte que se puede comprobar automáticamente; no es una evaluación según la BFSG.

Abrir el análisis de sitio web

A quién afecta la BFSG

La BFSG (Ley alemana de accesibilidad) afecta sobre todo a sitios web y apps a través de los cuales los consumidores celebran un contrato online, por ejemplo en una tienda online o en una reserva. Para estos servicios rige desde el 28 de junio de 2025. Quedan exentas las microempresas con menos de diez empleados y un volumen de negocio o balance anual de 2 millones de euros como máximo, si prestan servicios. Los sitios puramente informativos y las tiendas que venden exclusivamente a empresas no suelen estar afectados por la ley.

  • Tienda onlineafectado
  • Reserva onlineafectado
  • Sitio informativonormalmente no afectado
  • Tienda exclusiva para clientes profesionalesnormalmente no afectado

Qué información exige la ley

  • Cómo cumple su servicio los requisitos de accesibilidad
  • La autoridad de vigilancia del mercado competente

Quien está sujeto a la BFSG publica esta información sobre accesibilidad de su servicio. La preparamos con usted.

Eliminamos las barreras en el código, en las plantillas y en los componentes de su sitio web, para que todas las páginas se beneficien. Un plugin de overlay solo modifica la página en el navegador del visitante; el código de su sitio web sigue sin cambios.

¿Cuánto cuesta el diseño web? De qué depende el precio

Conoce el precio de su proyecto de diseño antes de que empiece el trabajo. Por el diseño y el desarrollo paga un precio cerrado por proyecto y, por el soporte y la evolución, una cuota mensual fija.

Presupuesto

Diseño y desarrollo, pago único

Proyecto a precio cerrado

Para la investigación, el diseño y, si lo desea, el desarrollo, hasta el lanzamiento.

  • Precio cerrado para el alcance descrito con exactitud
  • Si el alcance cambia, primero ajustamos el presupuesto
  • Sin facturación por horas
Lanzamiento

Tras el lanzamiento, mensual

Soporte y evolución

Para el periodo tras el lanzamiento, si lo desea.

  • Cuota mensual fija para mantenimiento y soporte
  • Soporte telefónico las 24 horas
  • Nuevas páginas y funciones por paquete de trabajo, con presupuesto propio

De qué depende el alcance

  • Cuántas plantillas de página y vistas se crean
  • Qué pasos de investigación y pruebas necesita el proyecto
  • Si se crea un sistema de diseño o se amplía uno existente
  • Si el logotipo, los colores y las tipografías ya están definidos
  • Hasta qué punto un sitio web existente ya es accesible
  • En cuántos idiomas aparecen la interfaz y los contenidos
  • Si también desarrollamos el diseño

Si tiene un presupuesto orientativo, indíquelo en la consulta inicial. Ajustamos a él el alcance y planificamos otras páginas para pasos posteriores.

Costes tras el lanzamiento

También después del lanzamiento hay costes: licencias de tipografías, imágenes y herramientas como Webflow, hosting y mantenimiento. Estas partidas figuran en su presupuesto.

Lo que es suyo al final

Una vez pagado el importe completo, le entregamos todo lo que necesita para continuar por su cuenta con su sitio web o su app o para que otro equipo los siga desarrollando.

  • Diseño

    • Archivos de diseño de todas las interfaces que diseñamos para usted
    • Enlace al prototipo navegable
    • Sistema de diseño como biblioteca
  • Código, si lo desarrollamos nosotros

    • El código fuente desarrollado para usted
    • Repositorio Git con el historial completo de cambios
    • Documentación técnica
  • Accesos

    • Servidores y hosting
    • Dominios
    • Cuentas de todos los servicios
  • Derechos

    • Derechos de uso

Las licencias de tipografías e imágenes, las cuentas en herramientas como Webflow y los archivos de Figma están a nuestro nombre durante el proyecto. Una vez pagado el importe completo, se los transferimos.

Organizamos los archivos y el código de forma que también un equipo nuevo se oriente en ellos. Quién se ocupa en adelante de su sitio web o su app lo decide usted.

Herramientas con las que diseñamos

Trabajamos con las herramientas que encajan con cada tarea: Figma y Sketch para interfaces; Adobe Photoshop, Illustrator, InDesign y After Effects para imagen, gráficos y movimiento; Blender y Spline para 3D; y, en el código, React, Storybook y Tailwind CSS.

  • Diseño y prototipos

    Diseños, prototipos navegables y bibliotecas para sistemas de diseño.

    • Figma
    • Sketch
    • Framer
  • Imagen y gráficos

    Edición de imágenes, ilustraciones, iconos e impresos.

    • Photoshop
    • Illustrator
    • InDesign
  • Motion y 3D

    Animaciones para interfaces y logotipos, visualizaciones 3D y mockups.

    • After Effects
    • Lottie
    • Rive
    • Blender
    • Spline
  • Componentes

    Componentes en código, documentados para su equipo de desarrollo.

    • Storybook
    • React
    • Tailwind CSS
  • Sitios web

    Sitios web cuyos contenidos edita su propio equipo.

    • Webflow
    • WordPress
    • TYPO3
  • Investigación y análisis

    Cómo usan los visitantes su sitio web y en qué punto abandonan.

    • Matomo
    • Google Analytics
    • Hotjar
  • Comprobar la accesibilidad

    Comprobación automática de contrastes, etiquetas y estructura, completada con nuestra revisión manual.

    • Lighthouse
    • axe-core
Todas las tecnologías

ASES en cifras

  • 1 equipoEquipo propio, sin subcontratas
  • 15+Más de 15 años de experiencia en el equipo
  • 35+Empresas de más de 35 países trabajan con nosotros
  • 10Conversaciones en diez idiomas
Sobre ASES

Preguntas frecuentes sobre agencias UX

Respuestas sobre costes, proceso, tests con usuarios, archivos de diseño y accesibilidad.

¿Cuánto cuesta el diseño web o un proyecto UX?

Depende del alcance: del número de plantillas de página y vistas, de los pasos de investigación y pruebas, de un sistema de diseño, del estado de su identidad corporativa, de los idiomas y de si también desarrollamos el diseño. En cuanto el alcance está definido, recibe un presupuesto a precio cerrado. El soporte lo facturamos mensualmente, y los trabajos nuevos, por paquete de trabajo. No facturamos por horas.

¿Cuánto dura un proyecto de diseño?

La duración depende del alcance, de las rondas de pruebas y de la rapidez con que estén disponibles los textos, las imágenes y las decisiones. Nuestro propio equipo empieza sin demora. Si tiene una fecha fija, por ejemplo una feria o un relanzamiento previsto, indíquela en la consulta inicial. Planificamos el alcance en función de ella.

¿Qué hace una agencia UX y cuándo nos compensa?

Una agencia de diseño UX averigua qué quieren hacer sus usuarios y dónde se atascan al hacerlo. Prueba las interfaces en un prototipo antes de desarrollarlas y después termina su diseño. Compensa si planifica un sitio web o una app nuevos, si los visitantes abandonan o si tiene un relanzamiento por delante.

¿Qué es el diseño UX, qué es el diseño UI y en qué se diferencian?

UX significa user experience, en español experiencia de usuario. El diseño UX define si los usuarios alcanzan su objetivo y con qué facilidad: estructura, recorridos y términos. UI significa user interface, la interfaz de usuario. El diseño UI da forma a lo que los usuarios ven y usan: maquetación, colores, tipografías, botones y sus estados. Planificamos ambos juntos.

¿Cómo comprueban si nuestros usuarios se manejan con el diseño?

Personas de su público objetivo resuelven tareas típicas en el prototipo navegable, por ejemplo encontrar un pedido o rellenar un formulario. Quién busca a los participantes lo definimos con usted en cada proyecto. Observamos dónde dudan o toman un camino equivocado, cambiamos el diseño y volvemos a probar. Al final recibe una lista de las observaciones, ordenadas por importancia y cada una con una medida.

¿Qué recibimos al final: archivos de Figma, prototipo, sistema de diseño?

Una vez pagado el importe completo, recibe los archivos de diseño de todas las interfaces en Figma, el enlace al prototipo, el sistema de diseño como biblioteca y los derechos de uso. Si también desarrollamos el diseño, se añaden el código fuente desarrollado para usted con el repositorio Git, la documentación técnica y todos los accesos.

¿Desarrollan también el diseño y quién se ocupa de él después?

Sí. El mismo equipo desarrolla su sitio web con WordPress, TYPO3 o Webflow, su tienda, su app o su software. Si su empresa tiene desarrolladores propios, les entregamos el diseño con todos los estados y tamaños de pantalla. También desarrollamos diseños creados por otro equipo. Tras el lanzamiento, si lo desea, seguimos ocupándonos del sitio web o la app, con actualizaciones, supervisión y evolución.

¿Pueden renovar nuestro sitio web sin construirlo de nuevo por completo?

Sí. Primero dejamos constancia de lo que funciona bien hoy y puede quedarse. Con sus datos de analítica vemos dónde se atascan los visitantes; el análisis de sitio web muestra con qué rapidez carga una página y qué barreras se pueden detectar automáticamente. Esas plantillas y páginas las mejoramos en el sistema existente. Si la estructura o el sistema ya no encajan con su empresa, planificamos con usted un relanzamiento.

¿A partir de cuándo compensa un sistema de diseño?

En cuanto varios sitios web, apps o equipos usan los mismos componentes, su producto sigue creciendo o su imagen empieza a divergir en distintos lugares. Para un solo sitio web más pequeño bastan una guía de estilo ligera y una pequeña biblioteca de componentes. Dimensionamos el sistema tanto como haga falta y lo ampliamos con su producto.

¿Tiene que ser accesible nuestro sitio web?

Si los consumidores celebran un contrato online a través de su sitio web, por ejemplo en la tienda o en una reserva, desde el 28 de junio de 2025 normalmente le afecta la BFSG (Ley alemana de accesibilidad). Las microempresas que prestan servicios están exentas. Los sitios puramente informativos y las tiendas exclusivas para clientes profesionales no suelen estar afectados por la ley. Diseñamos cada proyecto de forma accesible según las WCAG 2.2, nivel AA, aunque la ley no le afecte.

¿Necesitamos primero una identidad corporativa?

No necesariamente. Si el logotipo, los colores y las tipografías ya están definidos, los incorporamos al sistema de diseño y diseñamos con ellos el sitio web y la app. Si faltan o su imagen es distinta en cada sitio, primero desarrollamos la identidad corporativa y la probamos directamente en las primeras vistas.

¿Qué necesitan de nosotros para empezar?

No necesita un briefing ni un pliego de requisitos. Describa brevemente su objetivo y sus usuarios. Ayudan la dirección de su sitio web, ejemplos que le gusten con una frase sobre qué le gusta de ellos, y los logotipos, las tipografías o la guía de estilo que ya tenga. Si lo desea, comparta también el acceso a sus datos de analítica.

Hablemos de su sitio web o su app

Cuéntenos quién usa su sitio web o su app y qué debe resultar más fácil. Nos pondremos en contacto con usted lo antes posible y buscaremos juntos una fecha para la consulta inicial.

  • Consulta inicial gratuita
  • Sin compromiso
  • NDA si lo desea