UX/UI: ¿Qué es?, diferencias y herramientas

 

¿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:

 

Uso de tipografías

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…

Link

 

 

Semantic UI

En esta web encontrarás los iconos ordenados de manera semántica

Link

 

 

Icon Finder

Podrás encontrar cualquier icono que estés buscando dentro de su amplia biblioteca con todos los estilos

Link

 

¡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