© Edgar Guillén / Creative Studio® | Todos los derechos reservados
Soy estratega de marketing digital con más de 16 años de experiencia en desarrollo web, diseño UX/UI y campañas digitales. Ofrezco soluciones dinámicas y centradas en el usuario para hacer crecer tu marca.
Una interfaz que se ve bien pero confunde al usuario no sirve. Diseño pensando en cómo la gente realmente usa un sitio o una aplicación: dónde hacen clic, qué los frena, por qué abandonan el carrito, por qué llenan medio formulario y se van. Eso viene de años combinando diseño gráfico con datos de comportamiento real.
Mi formación es licenciado titulado en Diseño Gráfico y Comunicación Visual por la Universidad Chapultepec, más una Maestría en Marketing Digital y eCommerce por el ITAM. Esa combinación es la que da el resultado: interfaces que se ven bien porque respetan los principios visuales, y que funcionan bien porque están construidas sobre lo que los usuarios realmente hacen.
Wireframes de baja y alta fidelidad en Figma, prototipos interactivos navegables, diseño de interfaces para sitios web y aplicaciones móviles, sistemas de diseño escalables, identidad visual digital, briefs creativos, y mapas de flujo de usuario. Todo con un enfoque medible en usabilidad y conversión.
Cada proyecto pasa por las mismas etapas de descubrimiento y validación, pero el nivel de profundidad se ajusta al presupuesto y a la etapa del producto. Una startup en su primera versión necesita algo distinto a un banco que ya tiene millones de usuarios activos. La metodología se adapta; los principios no.
Antes de dibujar una sola pantalla, hay preguntas que resolver. Quién es el usuario. Qué está tratando de hacer. Qué obstáculos encuentra hoy. Qué está haciendo la competencia mejor o peor. Sin estas respuestas, el diseño es una opinión. Con ellas, es una hipótesis medible.
Entrevistas con usuarios, análisis heurístico de la interfaz actual, revisión de datos existentes en Google Analytics y Hotjar, benchmarking competitivo. El objetivo es entrar a la etapa de diseño con hipótesis claras sobre qué hay que cambiar y por qué. No es una fase larga, pero es la que evita rediseñar dos veces.
Los wireframes son el esqueleto de la interfaz. Aquí decidimos qué elementos van en cada pantalla, cómo se distribuyen, qué jerarquía tienen. Trabajamos en blanco y negro para forzar decisiones sobre estructura, no sobre color o estética. Todavía no es momento de definir tipografías ni paletas: primero hay que probar que la lógica de navegación funciona.
Los wireframes se revisan con el cliente y, cuando es posible, se validan con usuarios reales. Un prototipo de baja fidelidad puede detectar problemas que costarían mucho más caro corregir después del desarrollo. Esta etapa protege el presupuesto del proyecto completo.
Con los wireframes aprobados, pasamos al diseño visual. Aquí entra la identidad visual: paleta de colores, sistema tipográfico, iconografía, ilustraciones, espaciado, componentes reutilizables. Todo se construye en Figma con una estructura de sistema de diseño, no como pantallas sueltas. Esto significa que el equipo de desarrollo recibe un archivo profesional, no un PDF con imágenes.
Los principios visuales que aplico vienen de años de diseño gráfico y comunicación visual, ajustados a los estándares actuales de diseño digital: Material Design de Google, Human Interface Guidelines de Apple, principios de accesibilidad WCAG 2.1 nivel AA. El resultado es una interfaz que respeta las expectativas del usuario y se ve bien en cualquier contexto.
Un prototipo interactivo en Figma le permite al cliente y al equipo de desarrollo ver cómo se sentirá el producto antes de escribir una sola línea de código. Las transiciones, los estados de los botones, los flujos de navegación completos: todo se puede probar. Cuando el proyecto lo permite, hacemos pruebas de usabilidad con usuarios reales sobre estos prototipos.
Las pruebas de usabilidad no requieren muestras grandes. Con cinco usuarios se detectan el 85% de los problemas de una interfaz. Es una inversión pequeña que ahorra mucho tiempo y dinero en desarrollo, y evita el escenario más común: lanzar un producto y descubrir en producción los problemas que se hubieran detectado en una hora de pruebas.
Para proyectos que van más allá de una landing page, un sistema de diseño es indispensable. Componentes, tokens de color, tipografías, espaciados, estados de interacción, patrones de navegación. Todo documentado y organizado en Figma con variables y componentes reutilizables.
Un buen sistema de diseño hace tres cosas: acelera el trabajo del equipo, garantiza consistencia visual entre pantallas y facilita la vida del equipo de desarrollo. La inversión inicial se paga sola en los primeros meses de operación del producto, especialmente cuando entran nuevas personas al equipo o cuando el producto crece con nuevas funcionalidades.
Empresas que están lanzando un producto digital y necesitan que la interfaz funcione desde el día uno. Equipos que ya tienen un sitio o aplicación pero notan que los usuarios no completan las acciones clave: no terminan el registro, no llegan al checkout, no encuentran la información que buscan. También para equipos de desarrollo que necesitan un diseñador que entienda tanto la parte visual como la lógica de negocio detrás.
He trabajado con productos digitales en múltiples industrias: farmacéutica (Farmacéuticos Maypo), telecomunicaciones (IUSACELL), automotriz (Motocicletas BAJAJ), medios (Grupo Fórmula, Grupo Salinas) y consultoría (Grupo Asesores en Negocios). Cada industria tiene sus particularidades, pero los usuarios se comportan de forma sorprendentemente similar cuando la interfaz respeta principios básicos.
Todo diseño se entrega optimizado para al menos tres tamaños de pantalla: móvil, tableta y escritorio. En México, más del 70% del tráfico web es móvil, así que el diseño empieza siempre por el móvil y escala hacia arriba. Esto no es una preferencia, es una necesidad práctica para cualquier proyecto que quiera competir en el mercado actual.
La accesibilidad también entra desde el inicio: contraste de color suficiente, tamaños de texto adecuados, áreas táctiles con espacio para ser tocadas con el pulgar, alternativas textuales para elementos visuales. Un sitio accesible no solo cumple con estándares legales cada vez más estrictos, también posiciona mejor en Google y aumenta la base de usuarios potenciales.
¿Cuál es la diferencia entre UX y UI? UX (experiencia de usuario) se enfoca en cómo se siente usar el producto: qué tan intuitivo es, qué tan rápido lleva al usuario a lograr lo que quiere hacer, qué tan claro es cada paso. UI (interfaz de usuario) es la capa visual: colores, tipografías, iconos, botones. Los dos van juntos, pero atacan problemas distintos. Un buen diseño resuelve ambos.
¿Puedo saltar la etapa de wireframes y ir directo al diseño visual? Técnicamente sí, pero rara vez es buena idea. Saltar wireframes es como construir una casa sin planos: se puede, pero los errores salen a mitad de la obra y cuestan mucho más caro corregirlos. Los wireframes toman entre uno y tres días de trabajo, y ahorran semanas de rediseño después.
¿El diseño incluye el desarrollo del sitio o la aplicación? El servicio de diseño UX/UI entrega archivos de Figma listos para pasar a desarrollo. El desarrollo se cotiza por separado. Si necesitas ambos servicios, se puede armar un paquete integrado que optimiza tiempos y presupuesto.
¿Trabajan con equipos internos o solo hacen todo el proyecto? Ambos. Muchos proyectos se ejecutan en colaboración con equipos internos de producto, desarrollo o marketing. La estructura de trabajo se ajusta al equipo del cliente, no al revés.
Un diseño puede verse hermoso y no convertir. Sucede todo el tiempo. Los principios de diseño para conversión son distintos a los de diseño editorial o de branding: aquí importa la claridad más que la creatividad, la jerarquía visual sobre la simetría perfecta, y la fricción reducida sobre las animaciones sofisticadas. Cada elemento en pantalla debe tener una razón para estar ahí.
La jerarquía visual guía al ojo del usuario en un orden específico: primero la propuesta de valor, luego la prueba social, después el llamado a la acción principal. Los elementos secundarios apoyan pero no compiten con el flujo principal. Este es el trabajo silencioso del diseño para conversión, el que no se nota cuando está bien hecho pero se siente cuando falla.
La accesibilidad no es una casilla que se marca al final del proyecto. Se integra desde las primeras decisiones de diseño. Contraste de color mínimo de 4.5 a 1 para texto normal y 3 a 1 para texto grande, según WCAG 2.1 nivel AA. Áreas táctiles de mínimo 44 por 44 pixeles para elementos interactivos en móvil. Textos alternativos descriptivos para imágenes que aportan contenido. Navegación funcional con teclado para usuarios que no pueden usar el mouse.
Un diseño accesible amplía la base de usuarios potenciales entre un 15 y un 20% simplemente porque no excluye a personas con discapacidad visual, motora o cognitiva. También favorece el posicionamiento en Google, que penaliza sitios inaccesibles. Y en muchos países se está volviendo un requisito legal, no una recomendación.
Un buen diseño no termina en Figma: termina cuando los desarrolladores lo implementan correctamente. La transferencia diseño-desarrollo es donde muchos proyectos se caen. Los archivos que entrego incluyen tokens de diseño exportables, especificaciones detalladas de espaciado, componentes con variantes documentadas, animaciones y transiciones descritas, y estados hover, active, focus y disabled para cada elemento interactivo.
Además del archivo de Figma, entrego una guía de estilo digital con las reglas del sistema de diseño, y estoy disponible durante el desarrollo para resolver dudas del equipo técnico. Esto reduce el famoso "no se ve como en el diseño" que aparece cuando la comunicación entre diseño y desarrollo es deficiente.
Además de diseño de interfaces, ofrezco desarrollo de identidad visual digital: logotipos adaptados a formatos digitales, paletas de color extendidas para pantallas, sistemas tipográficos completos, iconografía personalizada, y guías de estilo para uso en redes sociales y materiales gráficos digitales. Todo con base en mi formación como licenciado en Diseño Gráfico y Comunicación Visual, reforzada con años de experiencia aplicando marca en canales digitales.
La identidad visual bien construida es un activo del negocio. Reduce el tiempo que toma producir cada nuevo material, mantiene consistencia en todos los puntos de contacto con el cliente, y refuerza el reconocimiento de marca. Un manual de identidad digital cubre todos los escenarios: web, redes sociales, correos electrónicos, presentaciones, campañas publicitarias, materiales impresos derivados.
No todo proyecto de diseño arranca desde cero. Muchas veces el punto de partida es un sitio que ya existe pero que se quedó atrás. El rediseño implica auditar la interfaz actual, identificar qué funciona y no debe cambiarse, qué está frenando la conversión, qué elementos visuales están desalineados con la marca, y qué expectativas modernas de usuario no se están cumpliendo.
Un rediseño exitoso mantiene la esencia de la marca y la modernización se siente natural. Los cambios se justifican con datos, no con opiniones subjetivas. El resultado es un sitio que se ve al día sin traicionar la identidad que ya tiene reconocimiento entre los clientes existentes.
Si tienes un producto digital en mente o un proyecto de rediseño pendiente, la primera conversación es gratuita. Podemos revisar tu situación actual, tus objetivos y tu presupuesto disponible para definir el mejor camino a seguir. Cada proyecto es distinto, así que las cotizaciones se arman a medida después de entender los detalles específicos del caso concreto.
La colaboración con equipos de marketing es igual de importante. El diseño no vive en un vacío: se conecta con las campañas publicitarias, con las landing pages, con los correos electrónicos, con las publicaciones en redes sociales. Un sistema de diseño bien construido facilita que todo el ecosistema visual del negocio hable el mismo idioma, sin que cada canal tenga que reinventar la rueda con cada nueva pieza gráfica que se produce.
Figma como herramienta principal de diseño y prototipado, con todas sus funciones avanzadas: variables, componentes, auto-layout, tokens de diseño. Adobe Illustrator y Photoshop para producción gráfica específica. Miro y FigJam para sesiones de trabajo colaborativo. Hotjar y Microsoft Clarity para análisis de comportamiento de usuarios reales. Google Analytics 4 para validar decisiones de diseño con datos.
© Edgar Guillén / Creative Studio® | Todos los derechos reservados