Todo diseñador tiene su lista de recursos, esta es la nuestra.

Cualquier persona implicada en el desarrollo de un producto digital siempre ha contado con Internet como un soporte imprescindible a la hora de realizar su trabajo. Aunque en la red podemos encontrar casi cualquier información o herramienta que busquemos para hacer más eficiente nuestro trabajo, el problema viene dado por el volumen de resultados, que hace que perdamos un tiempo precioso en encontrar la solución más adecuada al problema buscado.

Este post es una recopilación de algunos de los recursos, agrupados por temáticas, más utilizados por el equipo de diseño de Paradigma y, aunque muchos son grandes conocidos en el sector, seguro que algún enlace podrás guardar en favoritos.

Inspiración

En el proceso de creación de un producto digital, la búsqueda de referencias suele ser un lugar común para muchos profesionales. En Paradigma procuramos sacar unos minutos al día para visitar:

• Site Inspire: Nuestra preferida por recopilar sites de muy diversa índole y de una calidad contrastada.
• Awwwards: Suelen mostrar proyectos de carácter más creativo o experimental, siendo más útil para encontrar detalles de artificio que referencias completas.
• Media Queries: Centrada en páginas “responsive”. De gran utilidad para buscar soluciones específicas a problemas derivados de este ámbito.
• Dribbble y Behance: Estas galerías generalmente muestran diseños descontextualizados y sin maquetar, lo que les resta valor. Aun así, se pueden encontrar ejercicios visuales realmente brillantes de los que tomar inspiración puntual.
• Codrops: En el caso de que estemos buscando un ejemplo de interacción de algún componente concreto, Codrops nos va a resultar de gran utilidad ya que nos muestra demos funcionales de las que poder coger directamente el código si así lo queremos.

Mockups & Devices

Presentar un diseño dentro de su contexto de uso es un recurso que se utiliza frecuentemente, ya que ayuda al espectador a comprender su funcionalidad y hace que el trabajo luzca más. La elaboración de un montaje de este tipo puede ser bastante costosa; es por ello que existen diferentes páginas que ofrecen recursos de gran calidad, tanto en versión de pago como gratuitas. Nuestras páginas preferidas son:

• Pixeden: Aquí encontramos todo tipo de recursos vectoriales de gran calidad, desde dispositivos a montajes de todo tipo, pasando por iconos o logotipos. Aunque cada vez tiene más recursos de pago, sigue siendo la página de referencia en este ámbito.
• Graphic Burguer: Muy similar a la anterior en cuanto a calidad y diversidad. Sin embargo, esta ofrece mayor cantidad debido a que recopila recursos de diferentes fuentes. También tiene recursos de pago.
• Perfect Pixels: Únicamente ofrece dispositivos, pero estos son variados y, por supuesto vectoriales, lo cual permite que se puedan editar y emplear a cualquier tamaño.
• Mockuuups: Aunque el negocio de esta página es el pago de recursos, tiene una sección gratuita de donde se pueden descargar numerosos archivos. En caso de necesitar algo muy específico suele ofrecer descuentos muy a menudo.

Fotografía

En algunos casos, los diseñadores tenemos que trabajar en bocetos iniciales sin tener el material gráfico definitivo por parte del cliente o directamente no hay un presupuesto específico para la compra de fotografías. En estos casos en los que no podemos utilizar bases de datos fotográficas de pago podemos utilizar páginas como:

• Unsplash: Fotografías de gran tamaño y de buena calidad totalmente gratis. Una mejora muy notoria sería la implementación de un buscador en la página.
• Pixabay: Suelen ser imágenes más convencionales que la anterior, pero en el caso de no tener tiempo o buscar algo muy concreto esta página es de gran utilidad.

Tipografía

La selección tipográfica puede ser un momento clave para el éxito de un proyecto. Es por ello que antes de escoger una fuente al azar de Google Fonts recomendamos efusivamente visitar las siguientes páginas:

• Typewolf: Absolutamente imprescindible. Sus listas de recomendaciones son variadas y muy acertadas. Mención aparte merecen las guías de utilización y recursos que adjunta.
• Typ.io: Muestra ejemplos reales de utilización de fuentes. Muy útil para combinar estilos o buscar inspiración.

Color

En ocasiones algo que puede parecer sencillo, como elegir una gama cromática, nos puede dar verdaderos dolores de cabeza al exponerlo al cliente o a otras personas con criterios diferentes. Las herramientas que listamos a continuación nos ayudan a la hora de escoger colores y a encontrar alternativas a los que ya tenemos:

• Kuler: Fácil e intuitiva, con esta herramienta podemos tomar paletas ya diseñadas o crear nuevas a partir de un color base o de una imagen.
• Colours y UI Gradientes: Son dos simples galerías de colores y degradados de gran utilidad para aquellas veces que nos quedamos un poco atascados en la selección de un color.

Iconografía

Aunque lo ideal es que cada proyecto tenga su propia iconografía particular, en ocasiones no tenemos tiempo para realizar una familia propia o bien necesitamos de un recurso puntual. Para estas ocasiones recomendamos:

• Other Icons: Ofrece iconos en familias con diferentes tamaños y formatos. En ocasiones merecerá la pena pasar por caja debido a todo el trabajo que nos pueden ahorrar.
• Flaticon, Iconfinder y The Noun Project: Estas tres páginas son muy similares y, en general, los iconos no están tan bien rematados como en otras páginas. A pesar de esto son muy recomendables debido a la gran diversidad de iconos que encontramos y al buscador, que es de especial ayuda cuando necesitamos un recurso específico y no una familia de iconos.
• Fribbble: Esta página recopila todos los recursos gratuitos que los usuarios de Dribbble comparten en dicha comunidad. Aunque encontramos de todo, las familias de iconos gratuitas son abundantes.
• Como ya hemos señalado anteriormente, páginas como Pixeden o Graphic Burguer también comparten familias de iconos de gran calidad de cuando en cuando.

Mobile apps

Debido al carácter particular de las aplicaciones móviles, estas tienen sus propias páginas de recursos e inspiración. Nuestras favoritas son las siguientes:

• Facebook Design Resources: El equipo de diseño de Facebook tiene a bien compartir un buen número de recursos vectoriales, incluyendo mockups, devices y GUI elements de diversos dispositivos móviles.
• Inspired UI, Mobile Patterns y Capptivate: Son 3 páginas similares de inspiración que te permiten opciones muy interesantes como filtrar por sistema operativo o por la interacción que estamos buscando. Capptivate, además, comparte GIFs animados para poder ver las animaciones de las apps.
• Android Asset Studio: Esta página contiene varias herramientas para la generación de todo tipo de assets de una app de Android. En el caso de que el desarrollador no se encargue de este trabajo, te será de gran utilidad debido a que genera recursos para todas las densidades de forma simultánea.

Ux y prototipado

Nombrar aquí todos los autores de referencia del sector nos llevaría un post en sí mismo, aun así no hemos querido dejar pasar la oportunidad de destacar alguna de nuestras páginas más visitadas:

• UX Movement, Smashing Magazine , Nielsen Norman Group y Luke Wroblewski: Son cuatro fuentes básicas para cualquier diseñador interesado en el mundo de la experiencia de usuario. En castellano debemos destacar a No Solo Usabilidad, que ofrece excelentes artículos desde el punto de vista más académico.
• UX Stack Exchange y Quora: Si tienes alguna duda específica o estás buscando información sobre algo concreto que no encuentras, siempre puedes probar a buscar en estas páginas o incluso a crear tu propia pregunta.
• Invision y Marvel: Estas dos herramientas se han ganado merecidamente la fama de imprescindibles a la hora de presentar unos bocetos dentro de un flujo de navegación. Las posibilidades que nos ofrecen son muy numerosas e interesantes. Tienen planes de pago y gratuitos.

Resoluciones y navegadores

Por último, y no por ellos menos importante, un espacio dedicado a aquellas páginas que nos muestran datos reales estadísticos de uso referidos a dispositivos y navegadores e información de tamaños y densidades de pantalla:

• Stat Counter: Lo que diferencia a esta página de otras del estilo es que ofrece información basada en un muestreo enorme y sin sesgar. Nos permite filtrar por región, fecha y dispositivo.
• Screen Sizes: De obligada consulta a la hora de encarar el diseño de una app. Nos será clave para ver los diferentes tamaños y densidades de pantalla a los que tenemos que diseñar.
• My device: Ofrece una lista de dispositivos similar a la anterior, pero además te aporta datos concretos del dispositivo desde el que estás visitando la página.

Desde aquí animamos a que cualquier persona, desde el aficionado al diseñador más senior, aporte todos aquellos recursos que crea conveniente para completar esta lista. Prometemos actualizar y difundir todas las mejoras que encontremos.