Some of my favorite tools, in no particular order, about typography, icons, photos, and colors.

The building blocks to create the wireframes, designs, flows, anything visual.

Typography

google-fonts

Typography in graphic design includes the choice of typeface, color, size, length, design, layout, etc. It’s not only about attractiveness but more importantly about readability. It is the art of displaying content so be wise about your choices.

  • Google Fonts – makes products and web pages run faster by safely caching fonts without compromising users’ privacy or security.
  • Do you want to find a typography from an image? Then use what the font, it doesn’t always work great.

Icons

icons

While icons might be one of the least thought of elements in a design project, they can be one of the most interesting. They add visual interest and interactivity. You can add some animation, create reusable packs for different projects, combine them to create a new symbol.

  • Flat icon is the largest database of free icons (and the one I use more on my projects). The icons are available in PNG, SVG, EPS, PSD, and Base64. In most cases, like in PNG, you can customize every property of the icon, for example, the color, the size. Usually, you have to credit the designer.
  • Iconmonstr lets you discover 3989+ free simple icons in 272 collections. Once again you can customize and download everything.
  • I also quite often use Iconbros and FontAwesome font for icons

Photos

photos

Photos are a crucial aspect of your site as users tend to focus on imagery before wording. Everyone likes images, they are convenient, easy to engage with and easy to memorize. To choose an image be sure to consider your brand and your target audience.

  • Pexels helps designers, bloggers and everyone who is looking for an image to find great photos that you can use everywhere for free. You can use them for any personal or commercial purpose.
  • Pixabay is a vibrant community of creatives, sharing copyright free images and videos. All contents are released under Creative Commons CC0, which makes them safe to use without asking for permission or giving credit to the artist — even for commercial purposes. The site provides vector graphics, videos and more.
  • Burst is a free stock photo site with 1000’s of high quality and royalty-free images available.
  • StockSnap provides the highest quality images from a pool of submissions and features them on the site free for download.

All of the options above provide high-quality photos, not the cheesy stock photos from the memes and B2B presentations.

Colors

colors

A few rules and tools to keep in mind.

Make sure the choice of colors for a site fits the intended content and the users’ expectations. Never use more colors than the necessary ones. Do not use colors that do not support or add to the information being displayed. Remain consistent throughout the site with your color choices.

As for the tools, take a look at the list below:

  • Adobe Colors CC: you can pick colors from the color-wheel, select a color-rule, adjust the shades. It is also very easy to upload an image and select your own colors.
  • Palleton is one of my favorites, you can customize even more properties than in Adobe Colors CC.
  • You can find a great collection of colors in Material UI.

Conclusion

Now you have all the tools and all the Lego blocks to create something beautiful.

Tools to use in your next UI, UX task


PS. Beautiful, isn’t it?
lego-porsche

RELATED ARTICLESMORE FROM AUTHOR