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: https://www.canva.com/ . Remembering that it runs on Google Chrome.

Typography

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

Dani Guerrato's article on Typography http://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/

10 Common Mistakes in Typography http://www.pixwell.com.br/design/10-erros-comuns-em-tipografia

Font Awesome font icons http://fortawesome.github.io/Font-Awesome/

Glyphicons http://getbootstrap.com/components/

Colors

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. http://viverdeblog.com/psicologia-das-cores/

Dani Guerrato again! About Color and Webdesign 1 http://tableless.com.br/sobre-cor-e-webdesign/

About Color and Webdesign 2 http://tableless.com.br/cor-webdesign-2/

8 Tools to choose colors from your website http://rodrigoamaral.net/2013/07/22/8-ferramentas-para-acertar-na-escolha-das-cores-do-seu-site/

Summary infographic - Color applied to Web Design http://www.raquelmelo.com/a-cor-aplicada-ao-web-design/

Tool with HTML color palettes. Allows you to create palettes using a color picker tool: http://liveweave.com/

Layout

Book: Universal Principles of Design I have this book and I consider it mandatory to read and reread for life http://www.livrariacultura.com.br/scripts/resenha/resenha.asp?nitem=5098977&nm_origem=rec_produto_viu-viu&nm_ranking_rec=3

Fundamentals of Development of a Web Layout [presentation] http://pt.slideshare.net/richarleymenescal/aula-fundamentos-desenvolvimento-de-layout-web

An “old” book that can help: 250 Secrets for Web Designers You may only find PDF to download because it must be sold out http://revolucao.etc.br/archives/book-review-250-segredos-para-web- designers-de-molly-holzschlag /

Layout Book http://www.ciadoslivros.com.br/multiplas-faces-do-educar-2007-edicao-1-p156412

Grids

Book: Grid, Construction and Deconstruction http://www.livrariacultura.com.br/scripts/resenha/resenha.asp?nitem=11013869&nm_origem=rec_produto_viu-viu&nm_ranking_rec=1

CSS Grid - A new specification http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/

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. http://mind42.com/

Mind Meister A great tool, however the free version allows only two maps http://www.mindmeister.com/

Contrast Tool

Contrast Checker Helps you to analyze the contrast between the typography and the background http://webaim.org/resources/contrastchecker/

Testing Tools

GTmetrix - Speed Analysis of your website https://gtmetrix.com

Think With Google - Website loading and responsiveness analysis: https://www.thinkwithgoogle.com/intl/pt-br/feature/testmysite/

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: https://pt.coursera.org/umd Link do course: https://pt.coursera.org/course/androidpart1 ———- Course: Algorithms Level: Master with Certificate Educational Institution: University of Maryland Institution website: https://pt.coursera.org/princeton Link of the course: https://pt.coursera.org/course/androidpart1

Image Banks

FREE STOCK PHOTOS BANK

http://www.freephotosbank.com/
For those looking for a large amount of high quality photos, the Free Stock Photos Bank image bank is a great tip.

FREE IMAGES

en.freeimages.com/
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.

MORGUEFILE

http://morguefile.com/
With a clean and practical design, MorgueFile is one of the image banks with great quality and, the best, free!

PIXABAY

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

RGBSTOCK

http://www.rgbstock.com/
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

http://imcreator.com/free

https://www.foodiesfeed.com/

http://getrefe.com/downloads/category/free/

https://magdeleine.co/license/cc0/

https://pixabay.com/pt/

http://www.photos-public-domain.com/

https://morguefile.com/

https://www.lifeofpix.com/

https://kaboompics.com/

http://imcreator.com/free

http://jaymantri.com/archive

https://www.splitshire.com/topbestphotos/

https://gratisography.com/

https://openphoto.net/

http://littlevisuals.co/

Free Vector Banks

Brand EPS https://www.brandeps.com

Retro Vectors http://retrovectors.com/category/free…

Freepik https://www.freepik.com

Stockio https://www.stockio.com/free-vectors/

Vecteezy https://www.vecteezy.com

PublicDomain Vectors https://publicdomainvectors.org

Conclusion

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.