Why seeing design like a puzzle can change the way you work

At Crème de la Crème, we’re building a product that helps freelancers and companies work together. We have to build fast but without sacrificing quality. That’s why we always try to reduce the number of tools and resources that we use daily. This is the first article in a long series devoted to improving productivity in product teams.

To understand the reasoning behind this, you have to take a step back and realise that each time you leave sketch or make a round trip, you waste time. We see the design and more broadly the product process like a puzzle, where every needed resource or tool is a piece. The aim is to have puzzles with fewer and fewer pieces, project after project 💪

The fewer tools you use, the more productive you are.

We consider a tool to be a set of resources, some software, an API or anything else that you use daily to create a product.

Consider the example of icons, which are a headache for every designer. Each time you need a new one, it has to be the same style as the previous one you chose. That’s why entire libraries have been created. The purpose of this article is to share with you the 4 resource libraries that we use every day at Crème de la Crème to help us design and create new products.

Unsplash

This is definitely our favourite stock of photos. The quality is awesome and the shots are amazing. Every time we need an image, Unsplash is very helpful. Even more since it was integrated into the Craft Plugin made by InVision. One shortcut, beautiful images in seconds 🙌

You can even create categories directly via Craft and insert one or many contextualised images in one click.

Some amazing pictures

Flat UI Colors

Flat UI Colours is a great tool if you are looking for a new modern colour and don’t have a specific graphical charter (yet). They recently released a new update of the site with a lot of different palettes, filtered by tone. A varied choice for anyone who wants it.

To be honest, we don’t use it daily. However, when we talk about adding a new colour to our colour palette, I love taking the time to go on Flat UI and try a few colours on our design, especially the American Palette 🇺🇸

The American Palette

Material Icons

This is definitely one of the best resources you can find for free. At Crème Crème de la Crème, we’re using the Material Icons library for all our call to action icons. We created a file on Sketch dedicated to our Material Icons library. Now that it’s added to our design system, it means we just have to copy and paste the icon onto our mockup.

Furthermore, this library can be easily implemented by the technical team using a single line of code. It also means that none of the icon’s quality is lost.

Tips: You can download the sketch file here 🎁

Some of the Communication icons

Icons8

We’ve always wanted to have beautiful icons for our website, but without a graphic designer, this was sometimes difficult to achieve. That’s why we sought a third party solution.

Icons8 is an amazing library of 69,000 high quality icons. We usually use them when we want to illustrate something like a feature and want it to be beautiful.

This is why we use two different kinds of icon set: Material icons as pictograms and Icons8 icons as illustrations.

The great news is that we’ve recently hired Hugo , a graphic designer who is currently working on a homemade icons and illustrations library. This means that sooner or later, we’ll leave Icons8

Some icons available on Icons8

I will share with you the tools that we use in the product team and why we chose no more than 5.

I hope you enjoyed this article. If so, feel free to 👏 👏 👏