UX y UI no son sinónimos y tampoco son nombres elegantes para “hacer pantallas bonitas”. UX se ocupa de cómo una persona entiende y completa una tarea; UI se concentra en la interfaz visual e interactiva con la que esa tarea se realiza.
Esta URL tiene una señal propia que conviene conservar: en la ventana de 90 días revisada recibió 34 impresiones y un clic. Apareció para consultas como “diseño ux en panama” y varias búsquedas explícitas de cursos UX/UI, algunas entre posiciones 1 y 10. En cambio, la URL separada dedicada a Figma no registró impresiones en la misma ventana. Por eso el contenido útil sobre Figma debe concentrarse aquí, dentro de una guía más amplia de UX/UI.
Qué debería aprender primero una persona principiante
Antes de dominar una herramienta, necesitas comprender el proceso que convierte un problema en una interfaz que pueda probarse.
Una ruta inicial razonable cubre:
- problema y objetivo;
- usuario y contexto;
- contenido y flujo;
- wireframes;
- diseño visual;
- prototipo;
- prueba con usuarios;
- iteración;
- documentación y entrega.
No necesitas hacer investigación académica para una práctica inicial. Sí necesitas evitar diseñar sólo a partir de tus preferencias personales.
UX empieza con una tarea concreta
Una pregunta como “¿cómo mejoro esta app?” es demasiado amplia. Conviene formular una tarea observable:
- reservar una cita;
- enviar una solicitud;
- encontrar un precio;
- completar una compra;
- recuperar una contraseña;
- entender el estado de un trámite.
Después pregunta:
- ¿quién realiza la tarea?;
- ¿qué información necesita antes de empezar?;
- ¿qué puede salir mal?;
- ¿cómo sabe que terminó correctamente?;
- ¿qué pasos son realmente necesarios?
Este análisis evita crear pantallas que se ven bien pero no resuelven el problema principal.
Investigación básica sin inventar “personas”
Una persona ficticia con nombre, edad y fotografía no se convierte automáticamente en investigación UX.
Para un proyecto pequeño, puedes empezar con evidencia más directa:
- conversaciones con usuarios reales;
- tickets o preguntas de soporte;
- búsquedas internas;
- grabaciones o notas de sesiones;
- errores observados en formularios;
- consultas repetidas antes de comprar;
- analítica del flujo cuando existe y puede usarse de forma responsable.
Documenta qué aprendiste y qué sigue siendo una hipótesis. No presentes una suposición como si hubiera sido validada por usuarios.
Flujos antes que pantallas
Antes de abrir Figma, dibuja el recorrido principal.
Por ejemplo, para solicitar una cita:
Inicio → elegir servicio → elegir horario → datos mínimos → confirmar → resultado
Luego agrega excepciones:
- horario ya ocupado;
- dato inválido;
- conexión interrumpida;
- usuario que regresa a modificar una selección;
- servicio que requiere información adicional.
Un buen flujo revela problemas que una pantalla aislada no muestra.
Wireframes: decidir estructura sin distraerse con decoración
El wireframe permite discutir jerarquía y navegación antes de invertir tiempo en colores, tipografías e imágenes.
Comprueba:
- qué aparece primero;
- qué acción es principal;
- qué información puede posponerse;
- si los controles tienen etiquetas claras;
- qué ocurre cuando no hay datos;
- cómo se muestra un error;
- cómo regresa la persona al paso anterior.
Un wireframe puede hacerse en papel. La herramienta no es lo importante todavía.
Dónde entra Figma
Figma es útil para convertir estructuras en componentes visuales, prototipos clicables y sistemas reutilizables. Puede servir para:
- frames y layouts;
- componentes y variantes;
- Auto Layout;
- estilos y variables;
- prototipos;
- comentarios y revisión;
- handoff entre diseño y desarrollo.
Aprender Figma tiene más sentido cuando cada función responde a una necesidad del proyecto. Por ejemplo, Auto Layout se comprende mejor al diseñar una tarjeta que debe crecer con contenido variable que memorizando todos sus controles de forma aislada.
UI: jerarquía, legibilidad y consistencia
Una interfaz inicial debería permitir distinguir con rapidez:
- dónde estoy;
- qué puedo hacer;
- qué es más importante;
- qué información pertenece junta;
- qué cambió después de una acción.
Trabaja con:
- contraste;
- tamaño y peso tipográfico;
- espacio;
- alineación;
- estados de controles;
- consistencia de componentes;
- mensajes de error y confirmación.
No dependas únicamente del color para comunicar un estado importante. Una persona con dificultad para distinguir ciertos colores todavía debe poder entender el resultado.
Accesibilidad desde el principio
La accesibilidad no debería agregarse al final como una lista de correcciones.
Durante el diseño pregunta:
- ¿el contraste permite leer el contenido?;
- ¿los controles tienen nombres comprensibles?;
- ¿el orden de la información tiene sentido sin depender sólo de la posición visual?;
- ¿los objetivos táctiles son razonables?;
- ¿un mensaje de error explica qué corregir?;
- ¿el flujo puede completarse con teclado cuando corresponda?;
- ¿la animación es necesaria para entender la interfaz?
No necesitas ser especialista en accesibilidad para comenzar a evitar problemas básicos.
Prototipos: usa la fidelidad que responda la pregunta
No todo prototipo necesita parecer una aplicación terminada.
Baja fidelidad
Sirve para probar estructura, navegación y comprensión.
Media fidelidad
Permite validar jerarquía, contenido y componentes principales.
Alta fidelidad
Es útil cuando necesitas probar detalles visuales, transiciones o una experiencia cercana al producto final.
Si la pregunta es “¿la persona encuentra dónde reservar?”, un prototipo sencillo puede ser suficiente. Hacerlo fotorealista no mejora automáticamente la prueba.
Cómo hacer una prueba de usabilidad pequeña
Una práctica inicial puede hacerse con pocas personas si eres explícito sobre sus límites.
- Define una tarea.
- Da contexto sin decir exactamente dónde hacer clic.
- Observa antes de explicar.
- Registra dónde duda, retrocede o interpreta algo distinto.
- Pregunta qué esperaba encontrar.
- Corrige el prototipo.
- Vuelve a probar los cambios importantes.
No conviertas “a dos personas les gustó” en evidencia de que el producto funcionará para todo el mercado.
Qué debería mostrar un portafolio UX/UI
Un portafolio útil no es sólo una galería de pantallas finales. Debería permitir entender:
- cuál era el problema;
- qué restricciones existían;
- qué investigaste;
- qué hipótesis formulaste;
- cómo cambió el flujo;
- qué probaste;
- qué aprendiste;
- qué quedó pendiente.
Si el proyecto es ficticio, dilo. Si rediseñas una marca existente sin relación con ella, aclara que es un ejercicio.
Cómo evaluar un curso de UX/UI
Antes de inscribirte, pregunta:
- ¿se trabaja con un problema real o sólo se copian pantallas?;
- ¿incluye investigación y pruebas, no únicamente Figma?;
- ¿cada participante recibe feedback sobre su trabajo?;
- ¿se cubren errores, estados vacíos y escenarios alternativos?;
- ¿se explica accesibilidad?;
- ¿el proyecto de portafolio documenta proceso y decisiones?;
- ¿qué experiencia previa se requiere?;
- ¿qué herramientas y cuentas necesitas?;
- ¿la constancia ofrecida corresponde realmente al programa?
Una formación de UX que sólo enseña dónde están los botones de Figma se queda corta. Una formación que habla de investigación sin dejarte observar o probar nada también.
Un ejercicio completo para empezar
Toma una página de contacto o reserva y desarrolla este ciclo:
- identifica la tarea principal;
- reúne cinco preguntas o problemas reales de usuarios;
- dibuja el flujo;
- crea wireframes;
- diseña una versión visual;
- construye un prototipo en Figma u otra herramienta;
- pide a varias personas que completen la tarea;
- documenta tres problemas observados;
- itera;
- escribe un caso breve con antes, decisión y resultado.
Ese ejercicio enseña más UX/UI que reproducir una pantalla popular píxel por píxel.
Formación y Crezendo
Crezendo mantiene áreas de formación relacionadas con diseño y habilidades digitales, pero la disponibilidad, nivel y modalidad deben confirmarse. Puedes revisar los talleres vigentes o consultar una necesidad específica.
Esta guía no debe interpretarse como anuncio de una cohorte abierta permanente de UX/UI o Figma. Si buscas formación, describe tu nivel, objetivo y el tipo de proyecto que quieres ser capaz de resolver.
