Agencia UX de diseño web y diseño UI, de la investigación al desarrollo
Texto
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.
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.
Nuestro sitio web o nuestro software debe ser más sencillo
Su primer paso
Primero comprobamos qué funciona bien hoy y puede quedarse. Después vemos en qué puntos se atascan los usuarios y revisamos justo esos puntos.
Basta con esto para empezar
La dirección de su sitio web o un acceso de prueba al software. El acceso a sus datos de analítica ayuda, si quiere compartirlo.
Queremos que nuestro sitio web sea accesible
Su primer paso
El análisis de sitio web le muestra al instante, para una página, la parte que se puede medir automáticamente. Además, comprobamos a mano el teclado, el lector de pantalla y la ampliación, y después definimos con usted qué plantillas y componentes adaptamos.
Basta con esto para empezar
La dirección de su sitio web.
Nuestra imagen es distinta en cada sitio
Su primer paso
Reunimos cómo se presenta hoy su empresa: en el sitio web, en las presentaciones y en los documentos. El logotipo, los colores y las tipografías los desarrollamos en la fase de diseño y los probamos ahí mismo en su sitio web.
Basta con esto para empezar
Su logotipo actual y algunos ejemplos de sus documentos.
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.
02 Alcance y presupuesto
Nosotros
Definimos qué páginas y vistas se crean, qué pasos de investigación y pruebas necesita el proyecto, si incluye un sistema de diseño y si también desarrollamos el diseño.
Usted
Usted fija las prioridades y revisa el presupuesto.
Al final
Un presupuesto a precio cerrado con el alcance descrito con exactitud.
03 Investigación y estructura
Nosotros
Analizamos los datos existentes, como los datos de analítica y las preguntas que más recibe su atención al cliente, y hablamos con personas de su público objetivo. Después definimos la estructura de páginas y los recorridos como wireframes.
Usted
Usted nos da acceso a sus datos. Quién busca a los participantes de las entrevistas y las pruebas lo definimos juntos.
Al final
Una estructura de páginas y recorridos en la que todos están de acuerdo.
04 Prototipo, pruebas y diseño
Nosotros
Cada interfaz la prueba en un prototipo navegable antes de que empiece el desarrollo. Lo probamos con personas de su público objetivo, cambiamos los puntos en los que dudan y después diseñamos todas las vistas para smartphone y escritorio, de forma accesible.
Usted
Usted comenta el prototipo y toma con nosotros las decisiones de diseño.
Al final
Diseños probados de todas las vistas.
05 Desarrollo y entrega
Nosotros
Desarrollamos el diseño como sitio web, tienda o software, o lo entregamos a su equipo de desarrollo. Para la puesta en marcha formamos a su equipo. Tras el lanzamiento, si lo desea, seguimos ocupándonos del sitio web o la app y mejorándolos.
Usted
Usted revisa el resultado con nosotros antes del lanzamiento.
Al final
Una interfaz que funciona tal como se probó en el prototipo.
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
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
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.
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
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.
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
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.
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
AaAa
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.
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
Tab⏎
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.
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
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.
Ilustración, motion, 3D
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 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
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
3D y mockups
Visualizaciones 3D y mockups que muestran su producto, su app o su sitio web en uso.
Blender
Spline
Photoshop
Una idea
Una idea, muchas formas
Sitio web, app, tienda o campaña: llevamos su idea a la forma que llega a sus clientes.
Sitio web
Tienda
Su idea
App
Campaña
Ejemplo
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
01 Entender
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.
02 Bocetar
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.
03 Probar
“Averigüe cuándo llega su pedido.”Aquí dudaron las personas de prueba.
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.
04 Diseñar
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.
Entrega
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.
Diseño
accent
title
xl
4
focus
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.
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.
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.
Accesibilidad
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.
EmpresaCorreo electrónicoIntroduzca una dirección de correo electrónico válida, por favor.Enviar
TabTab⏎
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.
Lo que se exige
Los campos, los botones y las imágenes tienen nombres que lee un lector de pantalla. Los mensajes de error dicen qué hay que hacer.
Cómo lo comprobamos
Escuchamos los formularios y los recorridos con un lector de pantalla.
Lo que se exige
Con una ampliación fuerte, los contenidos se colocan unos debajo de otros y nada queda cortado. El texto contrasta lo suficiente con el fondo.
Cómo lo comprobamos
Revisamos cada plantilla muy ampliada y medimos los contrastes del texto y de los elementos de control.
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.
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.
Costes
¿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
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
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.
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.
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.