¿Qué es UX/UI?
UX (User Experience) y UI (User Interface) son términos que se refieren a toda experiencia o sensación que tiene un usuario al utilizar un producto o servicio; UX engloba todo lo que se refiere a la experiencia (arquitectura de la información, investigación…) mientras que el UI se refiere a la interfaz con la que el usuario interactúa con el fin de conseguir su objetivo (botones, colores, tamaños…)
El término UX, Experiencia de Usuario, se le atribuye en gran parte a Donald Norman, psicólogo cognitivo y diseñador que trabajó en Apple en la década de los 90.
Fue uno de los pioneros en preocuparse por como los ordenadores pudieran llegar a ser utilizados por cualquier persona, con lo que estudió el comportamiento humano ante estos e investigó la manera en la que fueran menos intimidantes y más usables.
Diferencias entre UX y UI
| User Experience | User Interface |
| Se enfoca en aspectos funcionales que garantizan una experiencia óptima | Se enfoca en los aspectos estéticos como los colores, tipografías, botones… |
| Hace que la interacción tenga un valor relacionado con la marca. | Direcciona al usuario, permitiéndole navegar, interactuar o consultar |
| Tiene en cuenta las necesidades del usuario y su comportamiento | Crea una interfaz acorde con las expectativas del usuario |
Herramientas
Todas estas herramientas funcionan bastante bien para tu desarrollo de proyectos de usabilidad y existen varías clases, como podrían ser:
Generación de paletas de colores
Herramientas para encontrar iconos
Herramientas para uso de tipografías
Archetype
Te ayuda a crear múltiples combinaciones tipográficas de una manera bastante sencilla: solo tienes que escoger dos tipografías de Google Fonts que te gusten, el tamaño base, la escala, ajustar espaciados…
FontFace Ninja
Extensión bastante útil de Chrome con la que podrás saber que tipografía utilizan en la web, tamaños, colores, donde conseguirla….
https://youtu.be/U_np8e0Z0HE?si=7Yc1EMpA4gnIXTYO
Typewolf
En esta página encontrarás capturas con las distintas combinaciones de tipografías y también muchas recomendaciones
Herramientas para generar paletas de colores
Adobe Color
Podrás crear paletas de color con todas las combinaciones posibles como colores complementarios, análogos, tríadas…
HueSnap
Haciendo click en «Create Palette», te da la oportunidad de crear paletas de distintas formas, a partir de una imagen que subas o mediante un cuentagotas.
Aunque también existe la posibilidad de explorar las diferentes paletas de colores que han creado los usuarios
Color Hunt
Gratuita y fácil de usar que tiene una colección de paletas de colores prediseñadas para el uso de la marca. Una vez que busques una paleta de colores seleccionando un color o una colección, puedes comenzar a navegar por miles de esquemas de color generados automáticamente creados por otros diseñadores.
Herramientas para encontrar iconos
Flaticon
Sin duda el mejor sitio para encontrar iconos, con una biblioteca de seis millones de iconos
Entre ellos podrás encontrar de todos los estilos: de línea, un color, varios colores, realistas…
Semantic UI
En esta web encontrarás los iconos ordenados de manera semántica
Icon Finder
Podrás encontrar cualquier icono que estés buscando dentro de su amplia biblioteca con todos los estilos
¡Espero que te haya gustado el contenido!, si es así anímate a dejar un comentario, si es que utilizas estas herramientas o alguna distinta para que todos podamos conocerlas y ampliar conocimientos entre todos
