Matias Villagran Diseñador UX / UI (2025)

30/06/2023

Vamos a diseñar un empty state ✨ de esos que quedan perfectos 😉
�Ingredientes:
�📝 Copy/Texto
🖼️ Ilustración
⭐️ Funcionalidad
💣 Call to action
🔗 Link�

Preparación:�
Vas a mezclar primero el copy con la ilustración
Una vez pronta la mezcla, le agregas una funcionalidad y su(s) Call to action correspondiente(s)
Agregas un link relacionado al empty state por si la persona usuaria necesita una opción más
Haces pruebas con los usuarios

😄✌️

29/06/2023

Estas son las cuentas que más me inspiran cuando tengo que diseñar interfaces 👨‍💻�Considero que su trabajo es excelente y si lo observas detenidamente vas a poder aprender mucho 😄�ike · Emmanuel Ikechukwu
Uno de los diseñadores que más admiro por la calidad de su trabajo, aprendo mucho de ver las interfaces que diseña.

· Michal Malewicz
Es un gran educador a través del contenido que comparte en sus posts, literalmente siempre aprendo algo nuevo.

· Yuhang
Admiro muchísimo su trabajo, porque es elegante y moderno, la forma en que presenta las interfaces es excelente.

· Halo Lab - Digital Agency
Esta es una de mis agencias de diseño favoritas, se dedican diseño, desarrollo y marketing de productos digitales.

· UnArshia
Es un director creativo independiente que crea contenido UI increíble que definitivamente deberías ver.
agency · Arounda Agency
Una agencia digital que desarrolla desde MVPs hasta productos para starutps, el trabajo que realizan es increíble.

· Vladimir Gruev
Es un diseñador que ayuda a marcas digitales diseñando apps y sitios web de otro nivel.

Estos son algunos de los perfiles que más me inspiran, si tienes otros puedes compartirlos en los comentarios 💪

22/06/2023

Esto es algo que hace tiempo me preguntaron y por fin me pude organizar para hacer un pequeño post sobre ello 😊

Cuando diseñes un Design Kit o un Design System puedes seguir estos pasos, agregar y/o modificarlos según tu necesidad:�
+ Bosqueja primero ✍️ en lo personal prefiero ir probando como se ven los componentes en relación con otros para poder crear la mejor versión posible de los componentes

+ Define los componentes 😉 una vez que hayas probado y establecido cuales vas a necesitar crear

+ Agrega estados y variantes 🟡🟢🔵 a los componentes que las necesiten, para así poder cubrir la mayor cantidad de escenarios posibles

+ Documenta! 📄 no te olvides de esto es super importante para quienes implementen tu trabajo que sepan si hay reglas, patrones o limitantes a seguir

+ Actualiza ↻ el Design Sysyem/Design Kit a medida de que pase el tiempo, ya que las necesidades de los usuarios varían con el tiempo

08/06/2023

La consistencia es todo un tema, y que requiere de mucha práctica 👴, pero estos 5 tips te van a ayudar en el ese proceso 😁

✨ Usa un estilo visual, esto quiere decir que tus botones, campos de texto, cards, texto deben tener similitud y armonía entre ellos.

🤖 Elimina la confusión evitando usar lenguaje o elementos gráficos que sean desconocidos para los usuarios del producto digital.

📏 Usa estándares tales como grillas, jerarquía y zonas táctiles, lo bueno de esto es que no hay que inventar la rueda 😉

👓 Aplica estándares de accesibilidad, da un paso adelante y asegúrate de cumplir con algunos estándares tu yo del futuro te lo va a agradecer

🙋‍♂️ Diseña para los usuarios, si tienes en mente lo que ellos necesitan entonces tus diseños van a tener sentido, nunca pierdas eso de vista!

06/06/2023

Este post esta completito, vas e encontrar estos 3 temas:
5 tips de diseño de iconos para que mejores la interfaz de usuario cuando diseñes 😉
6 librerías a las que puedes acceder para obtener iconos
3 Beneficios de utilizar iconos en las interfaces

En resumen aquí tienes los tips:

▪️ Consistencia de estilo

▪ ️Usa el estilo más apropiado

▪ Iconos acompañados de labels

▪ ️Rodea los iconos con margin

▪ ️Elige formas accesibles de mostrar los iconos activos

02/06/2023

Aplica estas leyes y verás cómo mejoran las interfaces que diseñes sustancialmente 😊
Te las dejo listadas por si quieres investigar más por tu cuenta 🧐 (es algo que siempre deberías hacer)

▪️ Ley de proximidad

▪ ️Ley de semejanza

▪️ Ley de continuidad

▪️ Ley de Tesler

▪️ Ley de figura-fondo

▪️ Ley de contraste

▪️ Ley de Miller

31/05/2023

Te tengo 5 consejos para crear un portafolio increíble! ✨
El proceso de creación de un portafolio no es tarea fácil, tanto para Juniors como para Seniors. 👨‍💻

Recientemente he tenido la gran oportunidad de ver varios portfolios de diferentes diseñadores latinoamericanos 🌎 y he notado algunos patrones que se repiten independientemente del país de procedencia. Por ese motivo decidí crear este post para poder ayudarte en el proceso de creación de tu portfolio 💛

Piensa en estas 5 cosas:

▪️ En que plataforma vas a crear el portfolio? Puedes aprovechar la oportunidad de crearlo en la herramienta de trabajo que mejor domines.

▪️ Que es lo que le va a importar a la persona que vea mi portfolio? Las introducciones personales son para las entrevistas, enfoca tu portfolio no solo en tu trabajo sino en -cómo tu trabajo trajo a la mesa una resolución con respecto al problema que enfrentaste-

▪️ Cuando muestres un trabajo en tu portfolio no des todos los detalles del proceso en cambio enfócate en contar una historia, porque eso si es interesante.

▪️ Enfócate en que área te quieres destacar dentro del diseño y formula tu portfolio en base a eso.

▪️ Aplica tu estilo visual en el portfolio porque es un proyecto más y es ideal que dejes tu marca en el.

27/04/2023

Había hecho un post con empresas de las que podemos aprender UX y UI y esta vez les traigo 📱 5 apps de las que pueden aprender diseño, estas son apps que yo uso ⏰ diariamente, semanalmente y mensualmente por lo que la recomendación es real.
Aquí te dejo el listado de apps:

🟢 Spotify

🔴 Airbnb

⚫️ Zara

🟠 Headspace

🟡 How We Feel

21/04/2023

¿Cuánto cobra un Diseñador UX/UI? 🤑
Bueno en este post te cuento cuanto cobra un diseñador UX/UI en America del Sur

⚠️Este post esta basado en mi experiencia, con salarios de Uruguay y junto al podcast que grabe con Franco Falaschi, por lo que los salarios pueden variar de país en país⚠️

Tu salario estará determinado por tu experiencia 😎 , país 🌎, empresa 🏢 y el contrato que firmes con la empresa 📄 por lo que debes estar atento a todas estas variantes.

No todos los casos son iguales pero quiero compartir este post para que tengas una base en caso de que te encuentres cuestionando cuanto cobrar y dentro de qué valores se debe encontrar tu salario 💸

Muchos éxitos!

19/04/2023

6 buenas prácticas para el uso de color ✨ que deberías aplicar 😉

1. Mide el uso del color de identidad, no está bueno que tu app tenga el color de tu identidad visual por todos lados, ya que puede ser una distracción y en algunos casos confundir al usuario 😵‍💫

2. Usa el color como un complemento ➕ para la comunicación entre el producto y el usuario 🤝

3. Utiliza colores levemente opacados en lugar de colores muy fuertes, debido a que pasamos bastante tiempo frente a las pantallas y nos puede causar fatiga visual

4. Para entender menor como y donde usar el color diseña siempre primero en blanco y negro, vas a ver que te ayudará a darle un buen enfoque al uso del color 😁

5. Importantísimo, no te olvides de revisar el contraste de los colores para asegurarte de que sean accesibles las combinaciones de colores ✅

6. Por último ayúdate con plug-ins, hoy en día está repleto de herramientas que aceleran nuestro trabajo, sácales provecho!

10/04/2023

Segunda parte de principios de UX aplicados en UI ✌️😁
Lograr entender y aplicar estos principios te ayudará a diseñar mucho mejor 😎
Aquí traigo algunos ejemplos que yo mismo diseñé acerca de estos principios del diseño de experiencia de usuario✨

Ley de Proximidad
Región común
Ley de Miller
Posición en serie
Efecto Von Restorff

30/03/2023

Encontrar buenos ejemplos de UX aplicados en UI a veces puede ser dificil 🥲 a veces los ejemplos que hay en internet son muy parecidos o no del todo claros 🧐
Por eso quiero compartir algunos ejemplos que yo mismo diseñé acerca de principios del diseño de experiencia ✨

Visibilidad de Estado
Conexión entre el sistema y el mundo real
Uso y control del usuario
Consistencia y estándares
Reconocer antes que recordar

28/03/2023

15 Minutos de Diseño 🎙️ surgió de la idea de probar otro formato para llegar a más personas que tengan interés en el diseño. Al principio pensé que lo estaba haciendo para los demás 🤔, pero cuando empecé a grabar me di cuenta de que yo mismo estaba disfrutando muchísimo de poder conocer a otros diseñadores y diseñadoras ✨

Yo no tenía idea de como grabar, apenas si entendía la app para grabar del celu 😵‍💫, había coordinado varias reuniones 🗓️ cuando aún no tenía un micrófono y tampoco el software para grabar, tampoco tenía un lugar específico y no sabía como funcionaban las plataformas RSS - en resumidas cuentas no tenía idea de lo que estaba haciendo pero si estaba seguro de que lo quería hacer 💪.

Y bueno.. como todas las historias del señor Villagrán me imagino que a esta altura ya saben como soy 😛 si hay algo que no he hecho o que sea desconocido y desafiante, ahí estaré yo intentando hacerlo 😎 Así surgió este podcast, para devolver de alguna forma algo de todo lo bueno que me ha pasado desde que soy diseñador y para que puedan escuchar no solo de mí sino de otros colegas, y aprender cómo es ser un diseñador en base a sus experiencias e historias.

��PD: Prometo que para la temporada 2 me s**o la gorra 🧢

23/03/2023

Pop-ups 😵‍💫 este componente puede ser amado u odiado, tu decides jajaja

Podemos clasificarlo en 3:
Pop-ups del sistema
Pop-ups de superposición parcial
Pop-ups de pantalla completa

✅ Primer consejo:
Nunca muestres un pop-up enseguida que termina de cargar una página web o sección en una app, dale tiempo al usuario de asimilar todo lo que esta sucediendo.

✅ Segundo:
Evita usar pop-ups que bloqueen el contenido que el usuario estaba viendo, evita que los pop-ups sean molestos para el usuario

✅ Tercero:
Jamás de los jamases muestres más de un pop-up a la vez, es como tener dos CTA uno al lado del otro, eso no se hace

✅ Cuarto:
Si vas a solicitarle data a tus usuarios por medio de los pop-ups que sea la menor cantidad posible, ya que este componente no esta hecho para sobrecargarlo de información y/o formularios

✌️😉 happy designing

17/03/2023

😎 7 tips para que crees la navbar perfecta:
☑️ Divide la navbar de 3 a 5 secciones
☑️ Utiliza labels para nombras las secciones
☑️ Acompaña los nombres de las secciones con iconos
☑️ Para dispositivos sin botones de inicio, apps recientes y atrás, agrega un espaciado en la parte inferior
☑️ Utiliza iconos rellenos para las sección de la navbar que se encuentre activa
☑️ Agrega indicadores como puntos o color de fondo para realzar la sección activa (opcional)
☑️ Usa color, lineas o sombreados para separar la navbar del resto del contenido de la app

😁✌️

14/03/2023

Hablemos de los colores nuevamente 🌈, como vimos anteriormente el color acompaña los mensajes que transmitimos en una interfaz, pero no son la principal forma de comunicación con el usuario y con Manu ✌️ te explicamos algunos otros puntos que te ayudarán a entender y trabajar mejor con el color: ▫️Costumbre y percepción de los colores: Ley de Jakob los usuarios prefieren que un sitio/app/programa funcione del mismo modo que los que ya conocen ▫️Estándares de comunicación: Ya que la interpretación de los colores varía según la cultura es mejor usar otros elementos como los iconos, que se entienden de forma más general
▫️Contexto y acompañantes: Cuando asignes colores a los componentes es importante que tengas en cuenta de que otros componentes van a estar rodeados

09/03/2023

8 diferencias entre el diseño para Android y iOS 👽🍏

☑️ La unidad de medida: Pixeles vs Puntos
☑️ Fuente: Roboto vs San Francisco
☑️ Estilo de diseño: Minimalismo vs Skeumorfismo
☑️ Componentes: Barra de título, Call to action, Alertas, Action Sheets, Componentes de navegación

Hay muchas más diferencias pero creo que estas son bastante notorias y te pueden ayudar a la hora de decidir cómo diseñar para un sistema operativo y otro.
¿Tienes alguna otra diferencia? Déjala en los comentarios 😉

06/03/2023

hola 😃👋
Así es como yo trabajo con el color cuando diseño, cada uno puede encontrar su propia forma de llegar al final, pero así es como mejor me ha funcionado a mi, te explico:

☑️ Elijo un color de fondo (claro/oscuro) porque esto va a afectar el contraste con la paleta de colores que elija luego 🔳🔲

☑️ Elijo 3 colores principales que se diferencien lo suficiente 🟢🟣⚫️

☑️ Luego utilizo algún plugin para crear las variaciones de colores en base a los colores que previamente elegí 🖥️ 🎨

☑️ De ser necesario los ajusto manualmente 🤏🧐

☑️ Luego decido que porcentaje del total de colores va a tener cada color ya que los colores hay que usarlos con propósito 📊 😌

☑️ Por último empiezo a probar los colores dentro de los diferentes componentes que tenga diseñados 📱

Matias Villagran Diseñador UX / UI