Every designer has their resource list, this is ours.

Anyone involved in the development of a digital product has always relied on the internet as an essential tool when it comes to doing their job. Even though we can find almost any type of information or tool online to help us be more efficient, the problem lies on the amount of results available, which makes us waste precious time on finding the best solution to our problem.

This post is a summary of some of the resources, organized by topics that the design team in Paradigma uses the most, and although some of them are well-known, I’m sure you’ll find some link worth saving.

Inspiration

During the process of creating a digital product, looking up references is common for many professionals. In Paradigma we make time to have a look at:

• Site Inspire: Our favorite, because it compiles very different sites with proven quality.
• Awwwards: Usually shows more creative or experimental projects, so it’s more useful for finding tricky details than for finding full references.
• Media Queries: Focused on “responsive” websites. Very useful for finding specific solutions to issues related to this area.
• Dribbble and Behance: These galleries generally show designs out of context and without a layout, which makes them less useful. However, you can find and get inspiration from some truly great visual exercises.
• Codrops: It will be very useful when looking for an example of the interaction of a specific component, since it shows us functional demos from which we can directly take the code if we wish to.

Mockups & Devices

To display a design within its context of use is a common resource since it helps the viewer to understand its functionality and makes it look better. This type of montage can be quite expensive, so there are different websites that offer high quality resources, free of charge or at a cost. Our favorites are:

• Pixeden: Here you can find any type of high-quality vector resources; from devices to all kinds of montages, including icons and logotypes. Even though there are more and more resources you have to pay for, it’s still the reference point in this area.
• Graphic Burguer: Very similar to Pixeden in terms of quality and diversity. Nonetheless, this one offers a bigger selection considering it compiles resources from different sources. It also offers resources you have to pay for.
• Perfect Pixels: It only offers devices but they are diverse and of course vector devices, which allows us to edit them and use them in any size.
• Mockuuups: Although they charge for their resources, there is a free section where you can download a big number of files. In case you need something quite specific there are often discounts.

Photography

In some cases the designers must work on the first drafts without having the definitive graphic material from the client or a specific budget to purchase photographs. In these cases, where we can’t use paid photography databases, we can use the following:

• Unsplash: large size, high-quality photographs completely free of charge. It could be improved by adding a search bar.
• Pixabay: It usually has more conventional images compared to Unsplash, but when you are in a hurry or if you are looking for something in particular, this site is very useful.

Font

Selecting the correct font can be a vital component for a successful project. That’s why before randomly choosing a font from Google Fonts, we recommend you to visit the following websites.

• Typewolf: Absolutely essential. Its recommendation lists are both varied and accurate. Their user guides and attached resources also deserve a special mention.
• Typ.io: It shows real examples of the use of fonts. It’s very useful for combining different styles or looking for inspiration.

Color

Sometimes, things that seem simple, like choosing a color scheme, can end up giving us a lot of problems when we present it to the client or other people who have different criteria. Below we have listed tools that help us when choosing colors and finding alternatives to the ones we already have:

• Kuler: Easy and intuitive, with this tool we can use predesigned palettes or create new ones using a base color or an image.
• Colors and UI Gradients: These are two simple color and shade galleries, which are very useful for those times we are stuck on choosing a color.

Iconography

Although the ideal situation is that each project has its own particular iconography, sometimes we don’t have time to carry out its own full set or we need a specific resource. For these situations we recommend:

• Other Icons: Offers icon sets with different sizes and formats. Sometimes it’s worth spending money since it saves us so much time and effort.
• Flaticon, Iconfinder and The Noun Project: These three websites are very similar and,in general, the icons aren’t as well polished as in other websites. Despite this, they are highly recommended due to their diverse selection of icons and their search bar, which is a fantastic help when you are looking for a specific resource and not an icon set.
• Fribbble: This website compiles all of the free resources shared by Dribbble’s users in that community. Although you can find everything, the free icon sets are plenty.
• As we have already pointed out, websites such as Pixeden or Graphic Burguer also from time to time share high-quality icon sets.

Mobile apps

Due to the particular nature of mobile apps, these have their own resource and inspiration websites. Our favorites are the following:

• Facebook Design Resources: Facebook’s design team shares a great number of vector resources, including mockups, devices and GUI elements for various mobile devices.
• Inspired UI, Mobile Patterns and Capptivate: These three similar inspiration websites give you very interesting options, such as being able to filter according to the operative system or the interaction we are looking for. Additionally, Capptivate shares animated GIFS in order to see the animation of the apps.
• Android Asset Studio: This website has various tools to create all types of assets for an android app. When the developer isn’t in charge of this job, it will be very useful because it creates resources for all densities simultaneously.

Ux and Prototyping

In order to name all the area’s most noteworthy authors, we would actually need a whole post. However, we have to highlight some of our most visited websites:

• UX Movement, Smashing Magazine, Nielsen Norman Group and Luke Wroblewski: They are four basic sources, ideal for any designer interested in the world of user experience. In Spanish we must highlight “No Solo Usabilidad” which offers excellent articles from an academic point of view.
• UX Stack Exchange and Quora: If you have a specific query or you are looking for information about something in particular that you can’t find, you can always try to search in these websites or even ask your own questions.
• Invision and Marvel: These two tools have earned a reputation for being essential when presenting drafts within a navigation flow. They offer numerous and interesting possibilities. They have plans you have to pay for as well as options free of charge.

Resolutions and navigations

Last but not least, we will mention those websites that show us actual statistical usage data referring to devices and computers, and information about screen sizes and densities.

• Stat Counter: What makes this website different from others of the same kind, is that it offers information based on unbiased sampling. It allows us to filter according to region, date and device.
• Screen Sizes: An essential tool when facing an app design. It will be key for us to see the different screen sizes and densities we have to design for.
• My device: It offers a list of devices similar to Screen Sizes, but it also gives us specific information about the device you are visiting the website from.

From Paradigma we encourage anyone, from the amateur designer to the most experienced one, to add to this list all of those resources that could go on it. We promise we will update and spread all the improvements we can find.