Si buscas herramientas para UX e investigación, léete este artículo que escribí hace unas semanas 😉
Herramientas para el uso de la tipografía
El contenido es el protagonista del diseño UI, así que no está de más que pongas especial atención a la tipografía (aunque también puedes leerte este y este artículos de uiFromMars).
Tiff
Es bastante probable que en algún momento hayas querido comparar dos tipografías que se parecían… pero no. Con Tiff podrás: simplemente escoge las dos y observa sus diferencias y similitudes 🙂
Archetype
Durante varios años he estado usando Modular Scale, pero hace poco encontré Archetype y me he enamorado.
Te ayuda a crear combinaciones de tipografías de una forma increíblemente fácil: simplemente escoge las dos tipografías de Google Fonts, el tamaño base, la escala (tienes una ayuda para seleccionar la que te irá mejor), ajusta el espaciado y… voliá!
Además también podrás exportarlo a Sketch y en CSS. Todo son ventajas, oiga 🙂
FontFace Ninja
Casi que te diría que esta es mi extensión por defecto en Chrome. Con FontFace Ninja podrás saber qué tipografía utilizan en una web, así como sus tamaños, espaciados, colores y dónde hacerte con ella.
Typewolf
Si ya le has puesto el ojo a alguna tipografía y quieres ver cómo queda en combinación con otras y en un diseño ya hecho, Typewolf es lo que necesitas.
Aquí encontrarás capturas de diseño que con una y otra tipografía (por ejemplo, la GT America Mono) y también recomendaciones sobre cómo combinarlas, guías y otros recursos.
Herramientas para generar paletas de colores
Estos recursos te permitirán crear y utilizar combinaciones de colores que funcionarán bien en cualquier diseño que estés haciendo.
Adobe Color
Utilizando Adobe Color podrás crear paletas aprendiendo a la vez teoría del color: todas las combinaciones que genera están basadas en colores complementarios, análogos, tríadas…
Podrás personalizar fácilmente el color base (en hexadecimal) y la herramienta te generará el resto. También puedes cambiar el modo de color y escoger entre RGB, CMYK, HSV y LAB.
ColorFavs
Si tienes una imagen en la que quieres basarte para generar una paleta, ColorFavs es la herramienta que necesitas.
Sencillamente sube la imagen y espérate unos segundos para que se genere una paleta basada en ella. Así de fácil 🙂
HueSnap
Es similar a la anterior, aunque en este caso cuando le das a “Create Palette” te permite subir una imagen para que escojas tú mism@ el color que necesitas.
HueSnap también te permite acceder a Explore, un apartado en el que hay diferentes paletas hechas por otros usuarios.
Color Leap
Esta herramienta sirve más para saciar tu curiosidad que para otra cosa: en ella recopilan paletas de color utilizadas desde la cultura egipcia hasta los años 60.
Por ejemplo, en Color Leap verás el clásico cartel de “We can do it”, su paleta de color y las de otros carteles de la época.
Iconos, iconos e… iconos
Como el propio nombre indica, y por si no te habías dado cuenta, aquí te listaré algunas herramientas y sitios web en los que encontrar iconos de calidad 🙂
Flaticon
Sin lugar a dudas, mi favorita. En Flaticon encontrarás 2 millones (sí, 2.000.000) de iconos.
Da igual el estilo que busques: de línea, de un solo color, multicolor, más realistas, etc. los tienes todos aquí.
Son los más básicos, pero también los que mejor encajarán en tus diseños: sus proporciones están bien planteadas y son iconos fácilmente reconocibles.
Icons 8
En el extraño caso en el que no encuentre un icono concreto en Flaticon o en Material Design, Icons 8 es la otra fuente que consulto.
Tienen más de 100.000 iconos que puedes personalizar antes de descargarte. También puedes descargarlos en PNG, SVG y PDF.
Semantic UI
Esta web la he descubierto hace muy poco: en ella encontrarás iconos organizados de forma semántica.
Es decir, podrás buscar iconos que representen “salud”, “mapas”, “logística”, etc. Vale la pena que le eches un vistazo.
Herramientas de accesibilidad
Si buscas herramientas para comprobar la accesibilidad de tus diseños puedes leerte este artículo que escribí en el que recopilo 7 herramientas muy útiles.
Allí encontrarás extensiones del navegador para hacer una auditoría rápida, herramientas para comprobar el contraste en tu paleta cromática y tipografías y hasta simuladores para ver cómo alguien daltónico o con problemas de visión ve tu diseño.
Únete a 3.636 diseñador@s y recibe los mejores contenidos para crecer.
Resumen de privacidad
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Tag Manager para recopilar información anónima tal como el número de visitantes del sitio o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Muchas gracias. Valioso aporte.
Uy, se ha quedado sin linkear el artículo sobre UX y herramientas de investigación 👀. ¡Lo busco, que suena bien! 🙂