Tools for Designers - Typography, Colors, Layout and Grids

Tools for Designers
Tools for Designers -

My list of Designer Tools

Information is not lacking for anyone who wants to be a Web Designer . There are blogs on various subjects all over the internet. The problem is that this information is widespread. We start saving everything in browser favorites, online favorites and always end up looking on Google when we need it. To make matters worse, there is a lot of incomplete and dubious stuff out there.

So I decided to research my favorites and compile all the best in one place. Now you can have a more reliable and organized source. I created this list and separated it by topics that involve the world of Web Design . I hope to contribute to better organize all these vast issues. The list will be updated whenever I find a reliable and quality source .

Pull up a chair and have fun

Graphic Tools Online

I use Canva a lot. It has a very direct and intuitive interface.

Among the advantages of Canva, I highlight:

The pre-defined media sizes for social networks.

  • Ready and free layouts
  • Free Stock Photos
  • Share buttons on social networks

Check out the Canva website here: . Remembering that it runs on Google Chrome.


Typography is the basis of good Design. Among the tools for designers I know, I selected some below:

Dani Guerrato's article on Typography

10 Common Mistakes in Typography

Font Awesome font icons



Color unconsciously impacts people's emotional state. I have filtered below the best articles that talk about the subject. Color is one of the most important tools for designers.

Henrique Carvalho's infographic on the Psychology of Colors. It's a summary.

Dani Guerrato again! About Color and Webdesign 1

About Color and Webdesign 2

8 Tools to choose colors from your website

Summary infographic - Color applied to Web Design

Tool with HTML color palettes. Allows you to create palettes using a color picker tool:


Book: Universal Principles of Design I have this book and I consider it mandatory to read and reread for life

Fundamentals of Development of a Web Layout [presentation]

An “old” book that can help: 250 Secrets for Web Designers You may only find PDF to download because it must be sold out designers-de-molly-holzschlag /

Layout Book


Book: Grid, Construction and Deconstruction

CSS Grid - A new specification

My article on the Bootstrap Grid .

Mental maps

Very useful for organizing ideas. I use them to create a flowchart of all the pages that the site will have

Mind42 Free and with good tools. It allows you to take notes, import images on each node.

Mind Meister A great tool, however the free version allows only two maps

Contrast Tool

Contrast Checker Helps you to analyze the contrast between the typography and the background

Testing Tools

GTmetrix - Speed Analysis of your website

Think With Google - Website loading and responsiveness analysis:

Online courses

Coursera - Here you will find free courses that can help you learn to program, among other things. Below I selected two courses that you can start now: Course: Programming applications for mobile devices with Android system Level: Specialization with Certificate Educational Institution: University of Maryland Institution website: Link do course: ———- Course: Algorithms Level: Master with Certificate Educational Institution: University of Maryland Institution website: Link of the course:

Image Banks

For those looking for a large amount of high quality photos, the Free Stock Photos Bank image bank is a great tip.

With more than 350 thousand photos and images, it is a collection of images that is growing more and more, mainly due to the easy access on the site.

With a clean and practical design, MorgueFile is one of the image banks with great quality and, the best, free!

On Pixabay you will find free images, vectors, illustrations and videos that you can use wherever and however you want, free of copyright.

The image bank was created by photographers and illustrators, it has a lot of high resolution photos. You can search for images by “keywords” and also by categories.

Other banks

Free Vector Banks

Brand EPS

Retro Vectors…




PublicDomain Vectors


These are just a few references. I'm sure there are many others. I am always searching and adding more items. Do you know any cool features? Do you think he could be on this list? Comment below and we will enrich our community.