🚀 Awesome Rocketseat Resources

Versão com preview.

👨‍💻 Ilustrações e Vetores

Lista caprichada de vetores e ilustrações que deixam qualquer site moderno e bonito:

🖼️ Figma

Figma é um software que usamos para prototipar as telas da aplicação web e mobile, trouxemos alguns links que irão ajudar a te inspirar:

📸 Fotos

Se seu site ou sua apresentação precisa de uma imagem bonita, com certeza essa lista vai te atender super bem:

😺 Animações e Gifs

Os Gifs ganharam o coração da galera e uma  aplicação com animações ficam bem divertida de utilizar, se for criar um app você precisa conferir o Lottie  que deixamos em primeiro da lista:

🎉 Ícones

Segue uma lista de ícones para projetos web e mobile (React Native), cada uma mais bonito que o outro:

👌  Geradores de Favicon

Todo site ou app precisam de um favicon, tanto o ícone do aplicativo na tela Home ou também no título na aba do navegador. Essas ferramentas vão te ajudar, você pode pegar o logotipo do  projeto e gerar os ícones do app e o favicon:

👍 SVG

😛 Emojis

Emojis servem para dar emoção no texto, muita gente gosta! Aqui na Rocketseat trabalhamos remoto e usamos bastante no chat do Discord e também nos posts como você já deve ter percebido. Confira a lista:

🔤 Fontes

Tipografia é muito importante, você pode baixar as fontes no seu computador e instalar facilmente. O primeiro link é bem mais que o suficiente para te atender,  deixamos mais três links com fontes bem legais para seus projetos.

⚙️ Ferramentas

Com o Canva você pode criar várias artes gráficas para posts no Facebook, Instagram, Miniatura do seu canal no Youtube, capa para LinkedIn, Twitter, Facebook. Tem uma infinidade de templates pagos e gratuitos, além de imagens e outros recurso que você pode utilizar.

Remove.bg te ajuda a remover o fundo do background das imagens sem a necessidade de ser especialista em Photoshop. Adeus varinha mágica! É muito fácil, só fazer upload da imagem e baixar a imagem sem o fundo, e o site permite ainda você fazer alguma customizações e correções.

Se você curte o photoshop, você vai curtir esse site que trás o photoshop no navegador e de graça. Bem útil para fazer uma edição rápida em alguma imagem.

Site bem legal para criar seus logotipos ou se inspirar:

🎨 Paletas de Cores:

Só o Diego Fernandes mesmo para decorar o código das cores no CSS. Temos aqui uma lista de sites onde podemos pegar o código RGB e colocar no frontend da nossa aplicação:

⌨️ Formatar o código para postar no blog:

Pegar o código no VSCODE e jogar no blog pode perder a indentação, você pode utilizar algumas das soluções abaixo:

🤖 Compressão de imagens para melhorar performance do site

Se você produz conteúdo em um site ou se é um web developer tem que conhecer essas ferramentas abaixo para melhorar a performance no carregamento da página. Uma imagem com muitos bytes pode prejudicar. Alguns CMS já fazem a otimização para você, mas não custa nada checar, se a imagem estiver muito grande utilize esses sites que diminuem alguns bytes e preservam a qualidade da imagem. O SEO agradece!

🔥 Outros

Trouxemos alguns sites que podem te inspirar nos seus projetos. Os repositórios no Github com o nome awesome-xxxx tem várias coisas legais, a comunidade contribui com vários links, o mais famoso é do Sindre Sorhus, primeiro da lista.

🙏 Considerações finais

Confira se todos os recursos podem ser utilizados com ou sem os créditos ao autor de cada recurso. Alguns sites pedem para que citem o nome do criador da arte gráfica. ⚠️  Fiquem atentos!

Espero que tenha curtido! 💜

O aprendizado é contínuo e sempre haverá um próximo nível!