Recursos para Web Designers – Tipografia, Cores, Layout e Grids

Layout Tipografia Design Grid

Layout Tipografia Design Grid

Informação é o que não falta para quem quer ser um Web Designer. Existem blogs sobre diversos assuntos por toda a internet. O problema é que esta informação está muito espalhada. A gente começa a guardar tudo em favoritos do navegador, favoritos online  e acaba sempre procurando no Google quando precisa. Pra piorar, existe muita coisa incompleta e duvidosa por aí.

Então eu resolvi pesquisar meus favoritos e  compilar tudo de melhor em um único lugar. Agora você poderá ter um fonte mais confiável e organizada. Criei esta lista e a separei por tópicos que envolvem o mundo do Web Design. Espero contribuir para organizar melhor todos estes assuntos tão vastos. A lista será atualizada toda vez que eu encontrar uma fonte confiável e de qualidade.

Puxem uma cadeira e divirtam-se

 

Ferramentas Gráficas Online

Eu uso muito o Canva. Ele possui uma interface bem direta e intuitiva. 

Entre as vantagens do Canva, eu destaco:

Os tamanhos de mídias pré definidos para redes sociais. 

  • Layouts prontos e gratuitos
  • Banco de imagens gratuito
  • Botões de compartilhamento em redes sociais

 

Confere o site do Canva aqui: https://www.canva.com/. Lembrando que ele roda no Google Chrome.

 

Tipografia

Artigo da Dani Guerrato sobre Tipografia http://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/

10 Erros Comuns em Tipografia http://www.pixwell.com.br/design/10-erros-comuns-em-tipografia  

Ícones do tipo fonte Font Awesome http://fortawesome.github.io/Font-Awesome/

Glyphicons http://getbootstrap.com/components/

 

Cores

Infográfico do Henrique Carvalho sobre a Psicologia das Cores. É um resumo. http://viverdeblog.com/psicologia-das-cores/

Dani Guerrato de novo! Sobre Cor e Webdesign 1 http://tableless.com.br/sobre-cor-e-webdesign/

Sobre Cor e Webdesign 2 http://tableless.com.br/cor-webdesign-2/

8 Ferramentas para escolher cores do seu site http://rodrigoamaral.net/2013/07/22/8-ferramentas-para-acertar-na-escolha-das-cores-do-seu-site/

Infográfico resumido – Cor aplicado ao Web Design http://www.raquelmelo.com/a-cor-aplicada-ao-web-design/

Ferramenta com paletas de cores HTML. Permite criar paletas usando uma ferramenta color picker: http://liveweave.com/

Layout

Livro: Princípios Universais do Design Eu tenho este livro e o considero obrigatório pra ler e reler pra vida toda http://www.livrariacultura.com.br/scripts/resenha/resenha.asp?nitem=5098977&nm_origem=rec_produto_viu-viu&nm_ranking_rec=3

Fundamentos do Desenvolvimento de um Layout Web [apresentação] http://pt.slideshare.net/richarleymenescal/aula-fundamentos-desenvolvimento-de-layout-web

Um livro já “antigo” mas que pode ajudar: 250 Segredos para Web Designers Talvez só ache PDF pra baixar porque deve estar esgotado http://revolucao.etc.br/archives/book-review-250-segredos-para-web-designers-de-molly-holzschlag/

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

 

Grids

Livro: Grid, Construção e Desconstrução http://www.livrariacultura.com.br/scripts/resenha/resenha.asp?nitem=11013869&nm_origem=rec_produto_viu-viu&nm_ranking_rec=1

CSS Grid – Uma nova especificação http://loopinfinito.com.br/2013/10/08/css-grid-isso-muda-tudo-de-novo/  

Meu artigo sobre a Grid do Bootstrap.

Mapas Mentais

Muito úteis para se organizar idéias. Eu os uso para criar um fluxograma de todas as páginas que o site terá  

Mind42 Gratuito e com boas ferramentas. Permite fazer anotações, importar imagens em cada nó. http://mind42.com/  

Mind Meister Uma grande ferramenta, porém a versão gratuita permite apenas dois mapas http://www.mindmeister.com/  

Ferramenta de Contraste

Contrast Checker Ajuda a analisar o contraste entre a tipografia e o fundo http://webaim.org/resources/contrastchecker/    

 

Ferramentas para Testes

GTmetrix – Análise de Velocidade do seu site https://gtmetrix.com

Cursos Online

Coursera – Aqui você encontra cursos gratuitos que podem te ajudar a aprender a programar, entre outras coisas. Abaixo selecionei dois cursos que você pode começar já: Curso: Programação de aplicativos para dispositivos móveis com sistema Android Nível: Especialização com Certificado Instituição de Ensino: University of Maryland Site da instituição: https://pt.coursera.org/umd Link do curso: https://pt.coursera.org/course/androidpart1 ———- Curso: Algoritmos Nível: Master com Certificado Instituição de Ensino: University of Maryland Site da instituição: https://pt.coursera.org/princeton Link do curso: https://pt.coursera.org/course/androidpart1    

 

Bancos de Imagens

FREE STOCK PHOTOS BANK

http://www.freephotosbank.com/ 
Para quem procura uma grande quantidade de fotos com alta qualidade, o banco de imagens Free Stock Photos Bank é uma grande dica.

 

FREE IMAGES

pt.freeimages.com/ 
Com mais de 350 mil fotos e imagens, é um acervo de imagens que está crescendo cada dia mais, principalmente devido a facilidade de acesso no site.

 

MORGUEFILE

http://morguefile.com/
Com um design limpo e prático, o MorgueFile é um dos bancos de imagens com ótima qualidade e, o melhor, gratuitas!

 

PIXABAY

https://pixabay.com/
No Pixabay você vai encontrar imagens, vetores, ilustrações e vídeos gratuitos que você pode usar aonde quiser e da maneira que desejar, livre de direitos autorais.

 

RGBSTOCK

http://www.rgbstock.com/
O banco de imagens foi criado por fotógrafos e ilustradores, tem uma grande quantidade de fotos de alta resolução. É possível você buscar as imagens por “palavras-chave” e também por categorias.

 

Conclusão

Estas são apenas algumas referências. Tenho certeza que existem muitas outras. Estou sempre pesquisando e adicionando mais itens. Você conhece algum recurso legal? Acha que ele poderia estar nesta lista? Comente abaixo e vamos enriquecer nossa comunidade.

 

Compartilhe

Rodrigo Milano

Trabalho há 14 anos com criação e desenvolvimento de sites e sistemas online.

Você pode gostar...