Diseño UX/UI: el proceso real desde la investigación hasta la entrega

UX vs UI: la diferencia que cuesta dinero

La UX es cómo funciona un sitio. La UI es cómo se ve. Un buen diseño comienza con el problema de un usuario, no con una paleta de colores.Si alguien no puede decir dónde hacer clic, la interfaz más bonita no te salvará: cierran la pestaña y van a un competidor cuyo botón era visible.

Formalmente, la experiencia del usuario es todo el viaje: cómo llegó una persona, qué estaba buscando, qué encontró, cuántos pasos tomó, dónde tropezó, cómo se sintió al final. La UI es la capa visual de ese viaje: tipografía, color, cuadrícula, estados de botones, íconos, espaciado. Las capas están conectadas, pero resuelven problemas diferentes.

Por qué la diferencia es comercial, no académica

Imagina dos tiendas en línea. La primera se ve simple, pero los filtros responden al instante, los precios son visibles desde el principio y el proceso de pago requiere solo tres campos. La segunda tiene una hermosa animación, fotografía enorme y un carrito que exige registro antes de mostrar los costos de envío. La primera vende más. No porque la apariencia no importe, sino porque los ingresos provienen de una acción completada, no de una impresión.

Así que aquí está la fórmula de trabajo: la UX decide si alguien alcanza el objetivo, la UI decide si confían en ti en el camino. Necesitas ambas. Pero cuando tienes que elegir qué arreglar primero, arregla la lógica.

Lo que el diseño no hace

• No rescata un mal producto. Si tu precio está por encima del mercado sin explicación, el diseño no lo ocultará.
• No reemplaza el tráfico. Un fuerte diseño UX/UI aumenta la conversión de visitante a consulta, pero alguien todavía tiene que traer a los visitantes.
• No lee mentes. Sin datos sobre los clientes, un diseñador adivina — y adivinar cuesta más que investigar.

Por eso en nuestros servicios de estudio el diseño nunca aparece como un elemento independiente llamado "dibujar un boceto". Funciona junto con análisis, contenido y desarrollo — de lo contrario, obtienes una imagen costosa que nadie puede construir realmente.

Paso 1. Investigación, objetivos y revisión de competidores

El diseño comienza con la pregunta "¿qué debe suceder en este sitio?", no "¿qué color te gusta?". Hasta que eso se responda, cada revisión se discute por gusto — y el gusto es un argumento que nadie gana.

Lo que establecemos desde el principio

• El objetivo comercial.¿Consultas? ¿Pedidos? ¿Reservas? ¿Solicitudes de empleo? Un objetivo es primario; los demás son secundarios.
• La acción objetivo.El botón específico que una persona debe presionar. Si hay cinco y todos son "el principal", ninguno se presiona.
• La audiencia.Quiénes son, cuánto saben sobre el tema, qué dispositivo utilizan, qué saben ya sobre ti.
• Las objeciones.Por qué dudan: demasiado caro, demasiado lento, poco claro, "¿realmente harán mi tipo de trabajo?".
• Las limitaciones.Fechas límite, presupuesto, CRM existente, identidad de marca, requisitos legales.

Los datos no tienen que ser caros. Grabaciones de llamadas de ventas, hilos de chat, consultas de búsqueda en el sitio, mapas de calor, las preguntas que los clientes hacen con más frecuencia: eso ya es suficiente para dejar de adivinar. Si las analíticas están en funcionamiento, observa dónde las personas abandonan y en qué paso.

Revisión de competidores — no para copiar

Miras a los competidores para aprender las reglas del mercado y encontrar las brechas. Las reglas son lo que un usuario espera por defecto: precio, plazos, qué está incluido, reseñas. Las brechas son lo que nadie ofrece: una calculadora, tiempos de entrega honestos, fotos reales en lugar de imágenes de archivo, una explicación sencilla del proceso. Copiar el diseño de alguien es inútil: no sabes si funciona para ellos, y heredas sus errores junto con sus decisiones.

Una revisión heurística

Si un sitio ya existe, revísalo contra principios básicos usabilidad del sitio web antes de que alguien dibuje algo: ¿es claro dónde estás; es visible el estado del sistema; se puede deshacer una acción; son comprensibles los errores; la interfaz habla el idioma del cliente; tienes que mantener cosas en tu cabeza entre pantallas. Dos días de esto producen una lista de problemas, la mitad de los cuales se pueden solucionar sin un rediseño en absoluto.

Paso 2. Escenarios de usuario en lugar de páginas

Las personas no vienen "a un sitio web" — vienen a hacer algo.Así que diseñas escenarios, no páginas: lo que una persona hace, paso a paso, desde la llegada hasta el resultado.

Un escenario se ajusta en una frase simple. "Un padre está buscando un club extracurricular cerca de casa, quiere ver el horario y el precio, y reservar una sesión de prueba desde un teléfono en cinco minutos." Eso es todo. Solo con esa frase puedes ver los requisitos: un filtro de ubicación, un horario legible, un precio sin "contáctenos para más detalles", un formulario corto y un número de teléfono que se pueda tocar.

Cuántos escenarios necesitas

Para un sitio de servicios, generalmente de tres a cinco. Más y te dispersas; menos y te falta algo. Un conjunto típico: "nunca he oído hablar de esta empresa, solo investigando", "comparando con un competidor, buscando una razón para elegir uno", "ya decidido, quiero ponerme en contacto rápido", "cliente existente, necesito un contacto o un documento".

Diferentes estados, diferentes pantallas

Los diseñadores junior solo dibujan el estado perfecto: catálogo completo, nombres cortos, cada foto en su lugar. La realidad es más rica. Cada pantalla clave necesita estados:

• Vacío — el filtro no encontró nada, el carrito está vacío, aún no hay pedidos. ¿Qué ve la persona y a dónde va después?
• Cargando — lo que aparece en pantalla mientras los datos viajan.
• Error — el servidor está caído, el pago falló, un campo es incorrecto.
• Desbordamiento — un nombre de producto de tres líneas, 40 artículos, una reseña de 2,000 caracteres.
• Éxito — el formulario ha sido enviado. ¿Y ahora qué? "Gracias" no es una respuesta; la gente quiere saber cuándo alguien los llamará.

Los estados son la parte más aburrida y más valiosa del trabajo. Son exactamente lo que separa un prototipo que puedes construir de un prototipo que tiene a tu desarrollador enviándote mensajes cada media hora.

Paso 3. Arquitectura de la información

La arquitectura de la información es donde viven las cosas y cómo se llaman.Resuelve la mitad de tus problemas de navegación antes de que exista el primer píxel.

El trabajo suena simple y es tedioso en la práctica: recopilar todo el contenido, agruparlo por significado, nombrar los grupos con las palabras del cliente, establecer la prioridad. La parte clave es las palabras del cliente. "Soluciones" tiene sentido para ti; la persona está buscando "reparación de nevera". Tu organigrama interno nunca debería filtrarse en el menú.

Reglas que ahorran tiempo

• El menú no es un vertedero. De cinco a siete elementos de nivel superior. Si no cabe, la agrupación está mal.
• Profundidad de tres clics como máximo a cualquier página importante. Más allá de eso, pierdes a la gente.
• Un significado, una página.Dos páginas similares compiten entre sí en navegación y en búsqueda.
• La etiqueta es la consulta.Un elemento de menú debe coincidir con cómo una persona realmente piensa y habla sobre ello.

Prioridad dentro de la página

Dentro de una página, la misma lógica se aplica: responde primero, luego detalla, luego prueba, luego acción. Un visitante decide en segundos si está en el lugar correcto, y decide desde la primera pantalla. Si la parte superior de la página dice "Bienvenido a nuestro sitio web", has gastado tu propiedad más valiosa en un marcador de posición.

El orden de los bloques también es diseño — y es la parte que mueve más dinero. Desglosamos la lógica de la secuencia de bloques en nuestra pieza sobre estructura de página de aterrizaje: mismas mecánicas, comprimidas en una sola página.

Probando la arquitectura sin maquetación

Dale la lista de nombres de secciones a cinco personas fuera del proyecto, pídeles que la clasifiquen en grupos y que digan qué esperarían encontrar dónde. Los desacuerdos te mostrarán los puntos problemáticos en una hora. Es barato y supera a discutir en una sala de reuniones.

Paso 4. Wireframes: el esqueleto sin maquillaje

Un wireframe es un esquema en blanco y negro de una pantalla: qué viene después de qué, qué importa más, dónde está la acción.Sin tipos elegantes, sin sombras, sin fotografía. Deliberadamente.

El objetivo de la grisura es eliminar todo lo que distrae de la estructura. Muestra un modelo en color y el cliente inevitablemente dirá "haz que el botón sea más brillante", y la conversación sobre el botón estando en el lugar equivocado nunca sucede. Un wireframe lleva la discusión de vuelta a la sustancia: ¿está claro qué es esta empresa, qué ofrece, por qué confiar en ella y qué hacer a continuación?

Lo que pertenece a un wireframe

• Encabezados y etiquetas reales, no Lorem ipsum. El texto de prueba miente tanto sobre la longitud como sobre el significado.
• El número real de elementos: si el catálogo tiene 12 artículos, no dibujes tres.
• Cada estado clave del paso anterior.
• Versiones móviles y de escritorio de las pantallas clave de inmediato, no "lo adaptaremos más tarde".

Cuántas pantallas dibujar

No todas. Dibujas tipos de página: inicio, página de servicio, catálogo, página de artículo, formulario, artículo, contacto, páginas de utilidad (404, gracias). Todo lo demás se ensambla a partir de los mismos bloques. Si cada nueva página necesita un nuevo mockup, no tienes un sistema — tienes un montón de imágenes.

Este es el lugar más barato para discutir

Mover un bloque en un wireframe toma minutos. Moverlo en un sitio construido, conectado a un CMS, toma días y dinero. Así que aquí es exactamente donde debes presionar, hacer preguntas incómodas y exigir razonamientos. A partir de aquí, el precio de un cambio aumenta con cada paso.

Paso 5. El concepto de UI: cómo se ve la confianza

Una vez que se acuerda la estructura, llega la capa visual. Su trabajo no es la decoración — es hacer que la estructura sea obvia y ganar confianza.

La confianza en una interfaz se construye a partir de cosas aburridas: una cuadrícula ordenada, espaciado consistente, texto legible, fotos reales en lugar de imágenes de archivo, números honestos, una ausencia de ruido visual. Nadie piensa "me encanta esta cuadrícula modular" — simplemente sienten que las cosas aquí están en orden, por lo que el trabajo probablemente también estará en orden. Lo contrario es cierto: logotipos de clientes desalineados y tres azules diferentes se leen como "juntos a la fuerza".

De qué está hecho un concepto de UI

• Tipografía.El emparejamiento de tipos, tamaños, altura de línea, longitud de línea. Es el 80% de cómo se siente un sitio, porque un sitio es mayormente texto.
• Color.Una base neutral, un acento reservado para la acción objetivo, colores funcionales para errores y éxito. Gasta el acento solo en lo que importa, o deja de funcionar.
• Rejilla y ritmo.Un paso de espaciado (un múltiplo de 4 u 8, digamos) en lugar de calcular a ojo cada espacio.
• Imágenes.Tus propias fotos del trabajo y de las personas superan a las fotos de stock perfectas, porque nadie cree en las fotos de stock.
• Tono.La interfaz habla: formal, amigable, técnica. Esa es una decisión, no un accidente.

Un concepto es una pantalla, no todo el sitio

Por lo general, presentas la página de inicio o una página de servicio clave en dos o tres direcciones. El objetivo es acordar un lenguaje, no aprobar una versión final. Cómo se ve ese lenguaje en proyectos reales es más fácil de ver en el portafolio: diferentes sectores necesitan un tono visual diferente, aunque el proceso detrás de ellos sea idéntico.

Y la parte esencial: un concepto se juzga por "¿sirve al objetivo?", no por "¿me gusta?". Más sobre eso en la sección de comentarios.

Paso 6. Sistema de diseño y componentes

Un sistema de diseño es un conjunto de bloques prefabricados más las reglas para construir con ellos.Botones, campos, tarjetas, encabezados, espaciado, estados: definidos una vez y reutilizados en todas partes.

Sin un sistema, cada nueva pantalla se dibuja desde cero. Seis meses después, el sitio alberga siete tonos de gris, cuatro tamaños de botón y tres tipos de tarjeta de producto, y nadie recuerda por qué. Con un sistema, una nueva página se ensambla en horas en lugar de días y parece parte del todo.

Qué hay en un sistema

• Tokens.Colores, tamaños de tipo, radios, sombras, el paso de espaciado: como variables nombradas, no valores inventados en el momento.
• Componentes.Un botón con cada estado (predeterminado, hover, foco, presionado, cargando, deshabilitado), una entrada con error y pista, una tarjeta, un modal, una tabla, paginación.
• Reglas de composición.Qué encabezado usar, cuánto espacio entre bloques, cómo se comportan los elementos en caso de desbordamiento.
• Patrones.Formularios, filtros, pago: ensamblajes estándar construidos a partir de componentes.

Por qué al cliente le debería importar, no solo al diseñador.

Un sistema es ahorro para tu futuro. Un nuevo servicio, una página de aterrizaje de campaña, una sección extra: todo se ensambla a partir de lo que existe y no necesita un nuevo proyecto de diseño. También evita que el sitio se descomponga con el tiempo a medida que diferentes personas realizan ediciones.

La escala depende del proyecto: un sitio de folleto pequeño necesita una sola página de reglas, un catálogo grande o producto necesita una biblioteca adecuada. En el proyecto Astrina el sistema de componentes es exactamente lo que mantuvo cada tipo de página con un aspecto consistente sin dibujar cada pantalla por separado.

Paso 7. Prototipo, entrega al desarrollador y control de calidad del diseño

Un prototipo es un modelo clicable en el que puedes recorrer todo un escenario antes de que exista una sola línea de código. Responde a la pregunta que una imagen estática no puede: "¿qué pasa cuando presiono esto?"

Los prototipos capturan errores costosos: un paso redundante en un formulario, un callejón sin salida después de la presentación, un camino confuso de regreso, un filtro que se reinicia. Cinco personas recorriendo el escenario en voz alta te enseñan más que un mes de debate interno. No necesitas un laboratorio, necesitas a alguien de la audiencia, una tarea y un observador que se mantenga en silencio.

Lo que realmente contiene una entrega

• Maquetas en dos o tres anchos clave: móvil, tableta/intermedio, escritorio.
• Cada componente y estado de pantalla.
• Tokens y reglas: colores, tipo, paso de espaciado, comportamiento de desbordamiento.
• Comportamiento: qué es clicable, qué se abre, qué anima y en cuántos milisegundos.
• Texto final, no texto de marcador de posición. Activos: íconos, imágenes, logotipos en los formatos correctos.
• Casos extremos: un título muy largo, una foto faltante, cero resultados.

Una buena entrega no es "aquí hay un enlace al archivo". Es una reunión donde el diseñador y el desarrollador revisan los maquetas y dicen en voz alta las partes no obvias. Media hora de conversación ahorra una semana de mensajes.

Control de calidad del diseño: la verificación después de la construcción

Una vez que el sitio está ensamblado, el diseñador lo revisa nuevamente, esta vez en un navegador. Espaciado, ajuste de texto, estados, comportamiento con datos reales, enfoque, velocidad de animación, comportamiento del formulario. Es una etapa corta, pero si se omite, siempre hay una brecha entre la maqueta y el sitio en vivo. La regla es simple: hasta que se apruebe el control de calidad del diseño, el proyecto no está terminado.

Móvil primero y accesibilidad en lenguaje sencillo

Comienzas a diseñar en la pantalla del teléfono, no porque esté de moda, sino porque las restricciones son más severas allí.Si el contenido se ajusta y funciona a 360 píxeles de ancho, se desplegará en el escritorio sin problemas. La otra dirección casi nunca funciona.

El enfoque móvil primero es una disciplina de prioridades. En una pantalla pequeña no puedes mostrar todo a la vez, así que te ves obligado a responder honestamente qué es lo que importa más. Esa respuesta también mejora la versión de escritorio.

Qué verificar en móvil

• Los objetivos táctiles no deben ser más pequeños que la yema de un dedo. Los enlaces diminutos amontonados producen toques erróneos e irritación.
• Nada se sale del borde; no hay desplazamiento horizontal.
• El número de teléfono marca, la dirección abre un mapa, los campos del formulario convocan el teclado adecuado.
• La acción importante es accesible sin desplazamientos interminables.
• Las imágenes pesadas no afectan la carga en una conexión móvil.

Accesibilidad: cuatro cosas que te dan el 80% del resultado

• Contraste.El texto gris claro sobre blanco se ve elegante en un prototipo y es ilegible al aire libre bajo la luz del sol. El contraste ayuda a las personas con baja visión — y te ayuda a ti, en una pantalla barata, en movimiento.
• Enfócate.Al navegar con un teclado, puedes ver en qué elemento estás. Eliminar el anillo de enfoque "porque es feo" es un error común y grave.
• Teclado.Todo el formulario se puede completar y enviar sin tocar un ratón. Se puede cerrar un modal; se puede escapar de un menú.
• Texto alternativo.Una breve descripción de lo que significa una imagen. Ayuda tanto a los usuarios ciegos como a los motores de búsqueda.

La accesibilidad no es una fase separada y costosa. Es un conjunto de hábitos: nunca depender solo del color para transmitir significado, etiquetar campos en lugar de depender de marcadores de posición, escribir mensajes de error que un humano pueda entender. Incorporado en el tiempo de diseño cuesta centavos. Añadido después del lanzamiento cuesta dinero real.

El texto es parte del diseño

Una interfaz está hecha de palabras más que de gráficos.El encabezado, la etiqueta del campo, el texto del botón, el mensaje de error: todas estas son decisiones de diseño que se expresan en letras.

Lo que nos da una regla: diseñar sin contenido terminado es adivinación. El diseñador inventa un encabezado de tres palabras; el del cliente es de doce. Inventa tres beneficios; los reales son dos, y son diferentes. El prototipo se desmorona en la etapa de contenido, y todos se sorprenden.

Palabras que fijan interfaces

• Los botones describen el resultado."Obtener una cotización" es mejor que "Enviar". Una persona debería saber qué sucede después del clic.
• Los encabezados responden, no provocan."Sitios web para clínicas médicas" funciona; "Creamos el futuro" no.
• Los errores dicen qué hacer."Formato inválido" es malo. "Ingrese el número de teléfono como +44…" es bueno.
• Las etiquetas superan la conjetura.Si un campo necesita algo específico, dilo antes del error, no después.
• Menos palabras, mismo significado.Cada frase extra disminuye las probabilidades de que se lea la necesaria.

Una práctica ahorra semanas: redacta el texto para las pantallas clave antes de que se dibuje cualquier cosa, incluso de forma aproximada, en una hoja de cálculo. Luego, el diseñador trabaja con longitudes y significados reales en lugar de doblar la realidad para ajustarse a un diseño.

Cómo dar retroalimentación útil y cuántas rondas de revisión son normales

La causa más común de proyectos prolongados no es "un mal diseñador" — es la retroalimentación expresada como gusto."No me atrapa", "hazlo más moderno", "a mi esposa no le gustó" — no puedes responder a eso con trabajo, solo con otro intento de adivinar.

La fórmula para un comentario útil

Habla sobre el problema, no sobre la solución. La forma es: lo que veo → lo que me preocupa → lo que arriesga. Por ejemplo: "La primera pantalla no dice que trabajamos a nivel nacional. Los clientes preguntan sobre eso en la primera llamada — temo que algunos de ellos no lleguen al formulario en absoluto." Eso es algo con lo que un diseñador puede trabajar. "Haz que el botón sea rojo" es una solución terminada, y probablemente no se trata del botón.

Reglas que aceleran la aprobación

• Reúne las revisiones en una sola lista de todos los involucrados, en lugar de goteándolas en el chat todo el día.
• Designa a un único tomador de decisiones. Si cinco personas aprueban, el modelo se convierte en un promedio — y los promedios no venden.
• Míralo en tu propio teléfono, no solo en un monitor grande. Así es como lo ven tus clientes.
• No reabra decisiones ya tomadas. Una estructura acordada se reabre para nuevos hechos, no para un nuevo estado de ánimo.

¿Cuántas rondas son normales?

Práctica común: dos rondas de revisiones por etapa (estructura, concepto, maquetas) más un pulido final. Eso no es tacañería del estudio, protege el proyecto. Rondas interminables casi siempre significan que el objetivo no está acordado, no los píxeles. Si en la tercera ronda se discute sobre lo mismo, el problema reside en la etapa de investigación, y ahí es donde deberías volver.

Errores comunes y costosos

• Diseñar sin contenido.Una maqueta construida sobre texto de muestra colapsa cuando llega el texto real. Siempre.
• Copiar a un competidor.Estás copiando una imagen sin saber si funciona para ellos.
• Decoración sobre claridad.Animación, paralaje y deslizadores en lugar de responder "¿qué vendes?".
• Muchos objetivos en una pantalla.Cinco botones con el mismo peso equivalen a cero clics.
• Diseñando para el jurado.Un mockup de premios y un mockup de ventas son géneros diferentes.
• Nadie posee la aceptación.Un proyecto sin un propietario de decisión se prolonga durante meses.

Lista de verificación: juzgando un diseño antes de que pase al desarrollo

Antes de que los mockups vayan a la construcción, ejecuta esta lista. Cada elemento es un cambio que cuesta minutos ahora y días después.

Significado

• En 5 segundos, la primera pantalla te dice: qué empresa es, qué ofrece, a quién, y qué hacer a continuación.
• Cada pantalla tiene una acción principal, y visualmente es la principal.
• Las objeciones clave son respondidas: precio o un rango de precios, plazos, garantías, quién eres.
• Cada reclamo está respaldado: estudios de caso, reseñas con nombres, números que realmente puedes probar.

Estructura

• Los bloques siguen "respuesta → detalle → prueba → acción".
• Navegación: 5–7 elementos, etiquetas en las palabras del cliente, cualquier cosa importante en 3 clics.
• No hay dos páginas sobre lo mismo.

Integridad

• Hay una versión móvil de cada tipo de página, no solo de escritorio.
• Los estados son: vacío, cargando, error, éxito, texto largo, muchos elementos.
• El texto es final, las imágenes son reales, no hay Lorem ipsum en ninguna parte.
• Existen páginas de utilidad: 404, gracias, fallo de pago si necesitas una.

Sistema y accesibilidad

• Los botones, campos y tarjetas provienen de un solo conjunto en lugar de ser redibujados por pantalla.
• El espaciado sigue un solo paso; hay exactamente tantos colores como se necesitan.
• El contraste del texto es suficiente, el enfoque es visible, el formulario se puede completar con el teclado.
• Las imágenes tienen descripciones alt, los campos tienen etiquetas, los errores tienen texto humano.

Preparación para la construcción

• Un desarrollador revisó los maquetas antes de la aprobación y confirmó que se puede construir según el cronograma.
• El comportamiento está documentado: clics, aperturas, animaciones, comportamiento del formulario.
• Está claro qué es editable en el administrador y qué está codificado de forma rígida.
• Alguien es nombrado para aceptar la QA de diseño después de la construcción.

Si cada elemento es un sí, entrégalo con confianza. Si más de tres son un no, no estás listo — y la construcción no parcheará esos agujeros, los fijará en concreto. ¿Quieres una mirada externa a tu sitio actual o a los mockups que alguien dibujó para ti?Ponte en contacto — lo compararemos con esta misma lista y te diremos honestamente qué arreglar primero.

Preguntas frecuentes