Aprender as habilidades necessárias para web design ou desenvolvimento web é o primeiro passo para trabalhar na web – mas isso também significa se familiarizar com as ferramentas do ofício. É por isso que juntamos esta lista de 99 ferramentas gratuitas que você precisará para desenvolvimento web, web design, ou ambos.

Todos os recursos desta lista são gratuitos e complementam as habilidades que ensinamos em nosso Web Design, Web Developer, e Front End Developer Blueprints (aulas conduzidas por instrutores que o guiam pelos fundamentos de cada função).

Como você aprender, mantenha esta lista à mão e pense nela como sua própria caixa de ferramentas virtual.

Recursos de Design Web

Esta lista de ferramentas de design web inclui ferramentas de design web para iniciantes, bem como recursos de design que lhe servirão durante toda uma carreira.

(voltar ao início)

Listas de Boletim Informativo

1. Creative Market
Antes de fazer qualquer outra coisa, vá para a lista de boletins do Creative Market. Uma vez por semana, você receberá um e-mail com 5 downloads gratuitos, incluindo tudo, desde padrões e fontes até modelos e temas.

(voltar ao topo)

Software + Apps

Estes programas de software e aplicações web fornecem uma base sólida para o design web.

2. CoffeeCup Software
Oferecem todo o tipo de aplicações gratuitas para web designers, incluindo um editor HTML, construtor de formulários web, designer de carrinho de compras, e muitos outros.

3. InVision app
Poderosas ferramentas de prototipagem e colaboração. Você pode obter maquetes e protótipos de alta fidelidade em poucos minutos.

4. Pixlr
Editar imagens diretamente no seu navegador.

5. Canva
Software de design gráfico incrivelmente fácil que qualquer pessoa pode usar. A função de busca e arrastar é tão simples e útil!

6. Easel.ly
Formosos templates infográficos gratuitos.

(voltar ao topo)

Fotos

Fotos são uma parte crítica do web design. Estes recursos fotográficos de estoque são importantes quando você precisa da foto certa agora mesmo.

7. Unsplash
Some of the most gorgeous free stock photos out there, and with toneladas of variety. Novas imagens são adicionadas todos os dias.

8. PicJumbo
Entregue fotos grátis na sua caixa de entrada que são totalmente grátis para uso pessoal e comercial.

9. Gratisografia
Free imagens de alta resolução que você pode usar em projetos pessoais e comerciais. Elas têm categorias fáceis de navegar: animais, natureza, objetos, caprichos e muito mais.

10. Compfight
Procure toneladas de imagens licenciadas para uso pessoal e/ou comercial, a maioria do Flickr.

11. IM Free
Recursos de web design curados, incluindo uma tonelada de fotos categorizadas, mais ícones e modelos.

12. Stock Up
Procure mais de 9.000 fotos de 26 sites diferentes, todos em um só lugar.

13. Morte à Foto de Stock
Entre em sua lista de e-mails e receba seus pacotes de fotos grátis em sua caixa de entrada uma vez por mês.

14. Little Visuals
Se você entrar na lista deles, você receberá 7 fotos de alta resolução grátis por e-mail uma vez por semana.

15. Novo Stock Antigo
Receba gratuitamente fotos antigas de arquivos públicos.

16. Cupcake
Fotos em alta resolução gratuitas de Jonas Nilsson Lee.

17. Pexels
10 novas fotos de estoque grátis todos os dias.

18. Magdeleine
1 fotos de alta resolução grátis por dia.

19. SplitShire
Fotos de alta qualidade gratuitas por um fotógrafo italiano.

20. ISO Republic
Fotos de alta qualidade comercializadas a criativos.

21. Paul Jarvis
Cadastre-se para obter 20 das melhores fotos de Paul Jarvis gratuitamente.

(voltar ao topo)

Symbols + Icons

Procura de símbolos ou ícones para usar no seu site? Não procure mais.

22. Pixeden
Tons de conjuntos de ícones livres, incluindo ícones meteorológicos, sociais, de linha e muitos outros.

23. Iconmonstrando
Mais de 2800 ícones em negrito, em alguns estilos diferentes.

24. Captain Icon
Mais de 350 ícones vetoriais livres para projetos móveis e web.

25. Ícones lineares
Uma fonte com 170 ícones diferentes para escolher de.

26. Font Awesome
Uma fonte de símbolos que lhe permite adicionar símbolos aos seus websites.

27. Fontello
Gera pacotes de fontes de ícones.

28. flaticon
Download de ícones vetoriais ou incluir ícones como webfonts.

29. The Noun Project
Procure um substantivo, obtenha um símbolo ou ícone livre.

30. Endless Icons
Livre biblioteca de ícones.

31. Ícones perfeitos
Personalizar e otimizar ícones de mídia social para o seu site.

32. iconSweets
60 ícones vetoriais gratuitos do Photoshop.

33. Icones redondos
Free quirky and professional icon bundles.

(back to top)

Fonts

Fonts são uma parte tão crucial do design que podem ser facilmente ignorados. Procure aqui, e encontre as fontes para levar seu design para o próximo nível.

34. Google Webfonts
Adicionar fontes ao seu site em apenas alguns cliques.

35. typegenius
Gerador de par de fontes.

36. Font Squirrel
Centenas de fontes totalmente livres.

37. Beautiful Web Type
Cheque uma coleção curada dos mais belos Webfonts do Google.

38. Lost Type
Lindas fontes pay-what-you-can.

(back to top)

Cores

Need help dialaling in the best colors for your design? Estas ferramentas de cor estão ao seu serviço.

39. Material UI
Uma galeria de Material Design e cores de design plano para usar em seus designs.

40. Paletton
Comece com qualquer cor e obtenha uma paleta (com 5 tonalidades por cor) baseada em alguns padrões de esquemas de cores diferentes: monocromático, adjacente, tríade, tetrad, ou personalizado.

41. Design Seeds
Tons de grandes paletas de cores tiradas a partir de fotografias. Você pode procurar por palavra-chave ou por cores similares.

42. Adobe Color Wheel
Escolha a partir de diferentes tipos de pares de cores e salve suas paletas de cores.

43. Paleta de materiais
Gere uma paleta de cores baseada em 2 cores.

44. Escolha uma paleta de cores plana UI
O nome diz tudo.

45. Cores de IU Plana
Ditto.

46. Bootflat
Picker de cor plana.

47. Coolors
Gerador de paleta de cores.

48. Skala Color
Paleta de cores livre.

49. BrandColors
Verifica as cores exatas que as principais marcas usam.

50. 0 a 255
Encontre a variação de cores perfeita que você está procurando.

51. Amantes das cores
Paletas de cores do usuário e adicione as suas próprias à comunidade.

52. Paleta para Chrome
Gera paletas de cores baseadas em imagens.

(voltar ao início)

Fotos + Texturas

Fotos, fontes e cores não são o fim de um design – você também precisa de fundos e texturas para mantê-los todos juntos. Encontre o seu com estas ferramentas.

53. Pattern8
Tons de funky, negrito e padrões de repetição brilhante para escolher entre.

54. Repeat-X Repeat-Y
Padrões de repetição impressionantes de todo o mundo.

55. Texture King
Todas as texturas que você poderia querer: grunge, ferrugem, gesso, concreto, sujeira e muito mais.

56. Patternico
Criar seus próprios padrões usando a fonte Font Awesome ícones. Personalize a cor do fundo, tamanho da tela e transparência da forma.

57. Padrões sutis
Padrões para download gratuito.

58. Lost and Taken
Textras livres em uma tonelada de categorias, incluindo papelão, pedra, metal, bolhas, sem costura, e mais.

59. BG Patterns
Criar padrões sem costura com cores, formas e mais personalizáveis.

(voltar ao topo)

UI (User Interface) Kits/Guides

Web design é mais do que apenas apelo visual. A forma como a interface do usuário de um site “se sente” para o usuário também é um fator crítico. Estas ferramentas ajudarão a garantir que o seu próprio design de interface está no ponto.

60. 55+ Elements Free UI Kit
Um kit de UI limpo e moderno. Certifique-se de pesquisar no site do Behance por toneladas de grandes recursos de outros designers!

61. Oh não, não outro Kit de IU
Um kit de IU simples, plano, de código aberto móvel e web que vem como um arquivo PSD.

62. PSD Booster Freebies
Tons de grandes kits de Photoshop gratuitos, incluindo kits de IU, temas, e mais.

63. Material Design Guidelines
O guia oficial dos padrões de Design de Materiais do Google.

(back to top)

Recursos de Desenvolvimento Web

Após um website ter sido projetado, ele precisa ser desenvolvido! Quer você esteja trabalhando em ambos os lados do processo (projetando E construindo um site), ou construindo um site baseado nos designs de outra pessoa, essas ferramentas de desenvolvimento o ajudarão a tornar esse design uma realidade virtual.

(voltar ao início)

Domínio Motores de Busca de Nomes

Nomes de domínio estão no coração de um site – eles são o endereço direto onde os usuários podem encontrar seu site online. Mas a internet é um lugar lotado, e pode ser difícil encontrar o nome exato do domínio que você quer. Estas ferramentas vão ajudá-lo a descobrir que um nome que você quer está disponível, e a criar um que É se a sua primeira escolha não for.

64. Namemesh
Um poderoso motor de busca de nomes de domínio que o ajuda a encontrar domínios que são curtos, divertidos, comuns, similares e vários outros qualificados.

65. Nameboy
Introduza uma ou duas palavras-chave e obtenha uma lista de domínios disponíveis que os incorporem.

66. Panabee
Descreva o que você quer em duas palavras e Panabee irá gerar uma lista de nomes de domínio potenciais.

67. Impossibilidade
Gerar nomes de domínio aleatórios com base em uma palavra.

68. LeanDomainSearch
Procurar um nome de domínio por palavra-chave.

(voltar ao topo)

Frameworks, Templates, Code Packs, + Themes

Por vezes você precisará codificar cada parte de um website a partir do zero – mas às vezes não o fará. Aqui está uma lista de frameworks, templates, pacotes de código e temas que você pode usar para cortar em trabalhos pesados.

69. WP-Flex
Uma caldeira de tema WordPress em branco e responsiva que segue as melhores práticas e requisitos oficiais do WordPress Codex.

70. Foundation
Uma estrutura de resposta avançada que é uma das mais populares por aí.

71. Ionic
Criar aplicativos móveis usando as tecnologias web que você conhece e ama.

72. Initializr
Gere rapidamente um template baseado em HTML5 Boilerplate.

73. Materialize
Uma estrutura moderna e responsiva baseada nas especificações de Design de Materiais do Google.

74. WordPress Plugin Boilerplate
Se você quiser criar plugins WordPress, o Plugin Boilerplate é um ponto de partida padronizado, orientado a objetos.

75. Front-end Boilerplate
Um ponto de partida básico para criar seus sites para que você não tenha que recriar tudo do zero cada vez.

76. HTML5 Boilerplate
O primeiro e o melhor. Código HTML5 boilerplate livre.

77. HTML5 UP
Modelo HTML5 livre e totalmente responsivo.

78. 1 Line CSS Grid Framework
Um framework para CSS que tem apenas 1 linha de comprimento!

79. 960 Grid System
A Skillcrush favorite.

80. Starkers para WordPress
Um modelo básico para desenvolver seu primeiro tema WordPress.

81. Barebones para WordPress
Modelo WordPress gratuito para desenvolvedores.

82. Sublinha
Modelo WordPress para a construção de um novo tema.

83. Sage for WordPress
Um tema inicial para WordPress baseado em HTML5 boilerplate e Bootstrap.

84. Whiteboard para WordPress
Um tema WordPress limpo e básico para desenvolvedores.

85. Bootstrap
Um HTML, CSS e estrutura JS responsivos.

86. Bootswatch
Temas livres para Bootstrap.

(voltar ao topo)

Code Style Guides

Você não pode começar a codificar sem aprender habilidades básicas, mas uma vez que você tenha essas habilidades pregadas, é hora de aprender a codificar artisticamente. Estes guias irão ensinar-lhe as melhores práticas de codificação que irão elevar o seu trabalho para além do nível básico.

87. Web Field Manual
Uma coleção de recursos, melhores práticas, inspiração, e materiais de referência para a codificação moderna. Há também seções preenchidas com ferramentas e recursos adicionais e informações específicas de linguagem.

88. Google Developers Web Fundamentals
Um recurso abrangente para as melhores práticas de desenvolvimento web, direto do Google. Perfeito tanto para novos desenvolvedores quanto para aqueles que querem tornar seus projetos melhores.

89. Deployments Best Practices
Até você implantar um site ou aplicativo, não deixe de conferir essas melhores práticas para garantir que tudo corra bem.

90. GitHub
GitHub’s very own code style guide.

91. Google
Guia de estilo de código do Google.

92. Mozilla
Guia de estilo de código dos profissionais do Mozilla.

(voltar ao topo)

Validação de código

Concluído com esse site? Não tão rápido. Antes de marcar o projeto “concluído”, use essas ferramentas para embrulhar as pontas soltas em seu código e verificar se você está atendendo aos padrões de acessibilidade, estilo e melhores práticas da indústria.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Código Beautify

98. JSLint

99. Free Formatter

(back to top)

>Pronto para combinar estas ferramentas com as habilidades que você precisa para ganhar dinheiro em tecnologia? Confira nossa página de programas para encontrar o curso Skillcrush Blueprint que é certo para você. Em apenas três meses você pode estar qualificado para começar a trabalhar na web.