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

 

Criatividade

O clássico brasileiro: Bruno Ávila http://www.brunoavila.com.br/avante/cursos/web-designer-sem-criatividade-seja-bem-vindo.html

Tipografia

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

Dicas de Tipografia e Diagramação http://www.blogwebdesign.microcampsp.com.br/10-dicas-de-tipografia-e-diagramacao-para-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

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 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

Grids

Um resumo para ser usado como início no estudo de Grids http://design.blog.br/design-grafico/grids-o-que-sao-e-para-que-servem 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/    

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    

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...

  • Johan

    Muito legal sua iniciativa!
    Obrigado por compartilhar seu conhecimento e seu material de estudo!

    Para cores uso esse link, acho útil por isso quis compartilhar
    http://liveweave.com/colors/

    Abraços

    • Rodrigo Milano

      Muito obrigado Johan. Não conhecia esta ferramenta. Gostei e vou adicionar nos recursos!

  • Olá pessoal!

    Muito interessante este artigo. Muito material grátis. Uma relíquia em meio a tanta coisa sem futuro que muitos tem colocado na internet. Vou usar sim muito destas dicas para melhorar meus blogs. Obrigada

    Já uso esta ferramenta ela é show… Mind Meister Uma grande ferramenta, porém a versão gratuita permite apenas dois mapas

    Conheça meus blog.
    http://www.coachingparasucesso.com/blog
    http://livrosgratisbibliotecaonline.com/