Recursos gratis para diseño UI: ilustraciones, fuentes, iconos, fotos…

Cuando estamos preparando un nuevo prototipo para una página web necesitamos una buena cantera de recursos que nos ayuden a facilitar el camino hacia la propuesta definitiva.

Hemos hecho una selección de páginas en las que podemos encontrar diferentes tipos de recursos que suelen ser necesarios en el proceso del diseño de una interfaz web. Además, todos gratuitos.

Inspiración

Antes de empezar hay que darse una vuelta por algunas webs que nos muestren las últimas tendencias y nos podamos inspirar en el look and feel que más nos encaje. No se trata de copiar, plagiar o fusilar, el trabajo de investigación en diseño web debe estar centrado en buscar soluciones concretas de navegación, composición de los elementos, paleta de color, fuentes y trabajo con las imágenes.

Land-book es un buen punto de partida, sus miniaturas altas y filtros ayudan.
Awwwards es uno de los mejores directorios de webs que hay en Internet.

Fuentes

La fuente que elijamos dará a nuestra propuesta personalidad, jerarquía y legibilidad, pero hay que tener en cuenta si se van a poder implementar en el desarrollo. Además, debemos minimizar la cantidad de estilos y familias para mejorar el rendimiento.

Typewolf nos muestra tendencias de uso y combinaciones tipográficas.
Con Type Scale podemos comprobar tamaños y su traducción real a web.

Iconos

Uno de los elementos que apoyan el contenido y señalizan la navegación son los iconos. Lo idóneo es crear nuestra propia familia, pero en ocasiones se trata de un lenguaje visual consolidado que no necesita de rasgos diferenciadores.

Boxicons nos permite descargar en SVG una gran cantidad de iconos.
The Noun Project es una galería de iconos muy originales.

Color

Aunque la paleta de color de una web suele ser monocromática, es importante cuidar la legibilidad del texto y no contaminar al resto del contenido. La combinación de colores que seleccionemos no solo refuerza la identidad de marca, sino que también aporta personalidad y es una herramienta muy interesante para conducir la navegación.

Color Tool es una excelente herramienta de Google que nos permite probar colores contrastados con textos.

Ilustraciones

En muchas ocasiones tenemos que probar distintas soluciones sin invertir una gran cantidad de tiempo desarrollando infografías de ejemplo para las propuestas. Una vez tengamos una respuesta positiva sobre cómo encaja una ilustración en nuestro proyecto, lo ideal sería realizarla por ti mismo o encargarla para que sea lo más original posible.

unDraw nos permite descargarnos infografías sencillas que suelen encajar bien para explicar servicios de una web.
Storyset nos permite descargar en SVG una gran cantidad de ilustraciones modificables.

Fotos

Uno de los contenidos más necesarios y difíciles de tener a mano cuando preparamos nuestro prototipo son fotos de calidad. En una gran cantidad de proyectos deberás hacer tu trabajo sin las fotos definitivas de la web. Deberás hacerte, entonces, con unas de ejemplo y gratis que, además, demuestren a tu cliente lo bien que quedaría la página si las fotos son profesionales.

Picjumbo nos ofrece buenas fotos a mucha calidad, aunque con un catálogo limitado.
Unsplash es otra alternativa con bastantes opciones.

Mockups

Y para que tu diseño se pueda entender mejor, es imprescindible mostrar tu prototipo en distintos dispositivos, como si la web ya estuviese funcionando. Es normal que una persona ajena al proceso de creación de una página necesite hacerse una idea, y los mockups son la mejor solución.

En Graphic Burger tienes algunos mockups gratuitos para distintos dispositivos.

En conclusión, utiliza recursos para desbloquear el proceso creativo y encontrar soluciones gráficas a tu proyecto. Pero no descartes realizar por tu cuenta algunos de estos elementos para darle más personalidad a tu trabajo.

1 comentario en “Recursos gratis para diseño UI: ilustraciones, fuentes, iconos, fotos…”

Dinos lo que piensas

Tu email no se mostrará ;)