🔗 Sites úteis para devs [inspiração/ilustração/icones/mockups/fotos/fontes/cores]
Primeiro post aqui, espero que agregue um pouquinho a todos!
Uma lista de links que podem ser extremamente úteis para os devs front-end:
Inspiração:
- https://mobbin.design/
- https://www.behance.net/
- https://dribbble.com/shots/popular/web-design
- https://siiimple.com/
- https://www.awwwards.com/
- https://muz.li/
- https://saaslandingpage.com/
- https://www.landingfolio.com/
- https://onepagelove.com/
- https://www.darkmodedesign.com/
- https://uiverse.io/all
Ilustrações
- https://blush.design/pt
- https://storyset.com/
- https://iconscout.com/
- https://icons8.com.br/
- https://www.shapefest.com/
- https://undraw.co/
- https://www.figma.com/community/file/1093360606711181437
- https://www.drawkit.com/
- https://www.manypixels.co/gallery
Icones gratuitos
- https://iconsax.io/
- https://feathericons.com/
- https://icons8.com/
- https://fonts.google.com/icons/
- https://ionic.io/ionicons
- https://react-icons.github.io/react-icons
- https://flaticon.com/
- https://thenounproject.com
- https://icomoon.io/
- https://game-icons.net
Mockups
- https://pt-br.mockuuups.studio/
- https://br.freepik.com/mockups
- https://mckups.com/
- https://shotsnapp.com/
- https://www.ls.graphics/
- https://smartmockups.com/pt
Fotos
- https://unsplash.com/
- https://pixabay.com/pt/
- https://www.freeimages.com/
- https://www.pexels.com/pt-br/
- https://icons8.com/photos
Tipografia/Fontes
- https://fonts.google.com/
- https://www.dafont.com/pt/
- https://fontjoy.com/
- https://www.fontsquirrel.com/
- https://www.myfonts.com/
Cores/Paletas
- https://coolors.co/
- https://colorhunt.co/
- https://color.adobe.com/pt/
- https://colorbox.io/
- https://picular.co/
- https://paletton.com/
Bibliotecas front-end
- https://getbootstrap.com/
- https://tailwindcss.com/
- https://bulma.io/
- https://mui.com/
- https://vuesax.com/
- https://headlessui.com/
- http://tachyons.io/
- https://ant.design/
- https://vuetifyjs.com/
Geradores CSS
- https://animista.net/
- https://cubic-bezier.com/
- https://shadows.brumm.af/
- https://cssgradient.io/
- https://csslayout.io/
- https://bootsnipp.com/
- https://neumorphism.io/
- https://hype4.academy/tools/glassmorphism-generator
- https://getwaves.io/
Ferramentas diversas
- https://tinywow.com/
- https://www.4devs.com.br/
- http://gitpod.io/
- https://www.w3schools.com/
- https://css-houdini.rocks/
- https://metatags.io/
- https://carbon.now.sh/
- https://devdocs.io/
- https://caniuse.com/
Editores/Compiladores online
Geradores IA
Resources em geral
- https://freedesignresources.net/
- https://reallygoodemails.com/
- https://mixkit.co/
- https://freefrontend.com/
- https://www.blobmaker.app/
Quem tiver mais sugestões, deixem nos comentários também!!!
Edit: Galera muito obrigado a todos que comentaram e deram um "tabup" nesse post, estou muito feliz que esses links possam vir a ajudar todos 😁
Igor, abre uma nova categoria, "IA" com geradores de texto e geradores de imagem!
Geradores de Imagem por IA:
Geradores de Texto por IA:
https://textsynth.com/playground.html
Alguns outros links que podem ser úteis:
Freebies diários de fontes, ícones, mockups e mais:
https://freedesignresources.net/
MOdelos de Email em HTML:
Stock para B-rolls e Vídeos free
E free frontends
Extremamente util, eu abri somente por curiosidade e me surpeendi de mais... to chocado com esse conteudo insano... Obrigado por compartilhar
Artigo extremamente util, principalmente para novos projetos que ainda buscam uma identidade visual, ou inspirações.
Muito show ter esse tipo de conteúdo pra orientar a galera, principalmente quem esta começando e não sabe onde procurar ainda. Além disso, atualmente estou fazendo a matéria de desenvolvimento web no curso de ADS e em nenhum momento os professores orientaram a utilizar ícones ou imagens de licença livres nos trabalhos. Coisa que é importante, ainda mais pra galera que ta começando, quer montar porrifólio e afins...
Aqui um exemplo de post para favoritar(Quando tiver essa opção) pois sempre precisamos de algo que está aqui para os projetos. Sempre bate um branco, um esquecimento e a pesquisa leva um tempinho além do risco de tirar o foco hahaha Obrigado pelo compilado =)
Incrível, conheço um ótimo para almentar a resolução da imagem
muito bom, isso irá ajudar bastante iniciantes.
Excelente! Já salvei aqui nos favoritos pra quando eu precisar de material!
Já favoritei e tenho certeza que o post vai ser muito útil pra mim. E como contribuição eu sugiro adicionar o https://headlessui.com/ como biblioteca front-end.
Toppp já ta salvo
Excelente conteúdo! Mas eu adicionaria também o Gitpod e o Codepen. Gitpod é quase um "VS CODE" virtual em que você consegue abrir e programar em cima dos seus repositórios criados. http://gitpod.io/
Já o codepen, eu gosto de ver ele como um verdadeiro parquinho, visto que nele você consegue ter acesso a projetos surpreendentes feitos somente com HTML, CSS e Javascript puro. https://codepen.io/
Excelente idéia, é muito útil ter estes links na hora de desenvolver. Gostaria de compartilhar alguns que conheço:
Paletas de cores baseadas em fotos da natureza: Colorpalettes.earth
Gerador de Paletas de cores: Paletton
Gerador CSS Glassmorphism: Glassmorphism-Generator
Gerador CSS Neumorphism: Neumorphism.io
Alguns truques de CSS: CSS Houdini
Gerador de "bolhas": Blobmaker.app
Gerador de "ondas": Getwaves.io
Site que gerar fotos de trechos código para compartilhar: Carbon
Site para testar a compatibildade de parâmetros com os navegadores: Caniuse
Documentação para devs: Devdocs.io
Demonstração do Stable Diffusion 2(IA que gera imagens através de texto): Stable-diffusion-huggingface
Cara, que top, quanto mais referência melhor, show de bola!
Parabéns, conteúdo de grande valor!
Sensacional, esse tipoo de conteúdo será muito util.
Que isso! Muito bom, parabéns pela iniciativa!
Aqui tem varios sites que focam no uso do Dark Mode - https://www.darkmodedesign.com/
Me ajudou bastante! Eu sempre fico horas precurando cores pra colocar nos projetos.
Extremamente útil, parabéns a todos os envolvidos nesse projeto massa!
Segue minha contribuição para quem está iniciando com o Desenvolvimento Web Vanilla:
Vamos pra cima comunidade!
Nesse link pode encontrar diversos componentes e seu código html/css para estilização, super recomendo pra quem busca inspiração.
Obrigado desde já pessoal!
Um ótimo post para favoritar, e claro, muito boa as dicas dos sites e com cada tópico explicado, muito bom este post !!
Olá pessoal!
Gostaria de contribuir lhes mostrando esse site que também serve para inspiração:
https://www.frontendeverything.in/
Obrigado desde já!
Gosto muito do site https://bootsnipp.com/ com muitas ideias para o que fazer com o bootstrap.
God post, salvou minha documentação no Notion, haha =)
Muito legal!
Excelente site com várias ferramentas para desenvolvedor, que contém diversos geradores, como gerador de CPF, gerador de cartão de crédito e até gerador de pessoa (com nome, e-mail, cpf, endereço) para você só copiar e colar, e ainda pode ser gerado um json com essas informações.
Além de gerador, o site também possui validadores de documentos, funções strings, funções matemáticas e funções de data.
Pessoalmente, eu utilizo bastante o gerador de pessoa.
O site é esse: https://www.4devs.com.br/
Cara eu queria muito poder favoritar/guardar no meu perfil essa postagem, pq eu sempre busco sites de referência para mockup e ilustração e acaba sendo bem complicado de encontrar. Vou deixar algumas sujestões minhas:
Icons
Opa! Muito obrigado, Igor! Esses sites vão me ajudar bastante no dia a dia.
Deixo aqui a minha contribuição para quem precisa manipular e converter arquivos, como imagens e PDF (mas não somente esses kkkk).
Sempre que preciso dessas coisas eu uso esse site:
- Converter PDF em Texto
- Converter JPG em WEBP
- Remover fundo de imagem
- Merge/Split de PDF
- Extrair imagem de PDF,
- e por aí vai...
Se me permite, eu adicionaria na lista o http://tachyons.io/ É excelente para os projetos que trabalhamos!
Parabéns pela iniciativa!
incrível! deixo aqui minha contribuição que nada mais é que modelos prontos em HTML/CSS https://csslayout.io/
Muito bom ! Extremamente útil.
Deixo aqui minha contribuição também para Vue, uma lib que venho usando por um tempo.
Valeu ! Abraço.
um site que agrega todos esses:
Gostei bastante da recomendação e gostaria de "re-recomendar" o replit, eu uso o aplicativo dele e recomendo bastante, para quem tem apenas celular para programar é um grande adianto. Antes do replit eu usava o Acode, que é bom também, além de, diferente do replit, ser offline, mas nesse não há uma grande variedade de linguagens, como o React, que foi o que me fez migrar. Mesmo assim eu continuo tendo ambos no meu dispositivo. Enfim, quem não começou a programar por não ter computador, recomendo dar uma olhada em um desses. só para fechar, no Acode eu usava Html, css e js.
Adiciona aí na parte de ícones:
Sobre favoritar o post do amigo, é simples né pessoal: utilize a funcionalidade de favoritos do seu navegador.
Muito show os links
Eu amo o svgrepo para catar uns svg bacana e colocar nos meus projetinhos. Recomendo a todos.
Bibliotecas para front-end
Lista muito boa!
Estou deixando uma que uso bastante para gerar Grids
Muito bom, ajuda muito ter um ponto central de utilitario.
Aqui vai minha contribuição, https://replit.com/ , um editor online com diversos templates de código e mais algumas ferramentas. Sempre uso quando preciso testar algum código rapidamente.
Segue mais um para essa lista MA RA VI LHO SA! 😍 https://freefrontend.com
tem esse repositorio de ideias de projetos pra iniciantes https://github.com/florinpop17/app-ideas muito bom também.
Muito bom, já favoritei aqui, muitos eu ainda não conhecia. Seria legal adicionar uns geradores de CSS, como animista , box shadown generetor, cubic bezier, entre outros.
Também tenho alguns:
Comprimi imagens para vários formatos possíveis, reduz muito o tamanho sem perder a qualidade https://squoosh.app/
Guia, resumo de como usar o BEM (nomear classes no html) https://9elements.com/bem-cheat-sheet/
Diversos símbolos html https://www.toptal.com/designers/htmlarrows/
Um resumo visual sobre o GRID https://grid.malven.co/
Fizeram o Windows 11 em React, é open source, só por curiosidade https://win11.blueedge.me/
Muito bom, vou guardar está informação pois sempre utilizamos a maioria informado.
Excelente lista de sites, com certeza vem a somar bastante com todos os devs, sempre precisamos de auxilios de sites como o listados acima.
Muito boa a lista. Gostaria apenas de acrescentar o React Framework Ant Design https://ant.design/
Boaa, vai me ajudar bastante quando eu for fazer meu portfólio!!
Agradeço pelos links, ajudou muito a encontrei até o que não estava procurando...
Muito obrigado pelo post valioso!
Segue os meus 0,02 ml nesse oceano de facilitações:
https://jmespath.org/ # Para ajudar a construir aquela query jmes braba no json. https://jsonlint.com/ # Para ajudar com o lint daquele json gigante.
Uma boa sugestão para os desenvolvedores é o site Free for dev: https://free-for.dev/#/ Nele temos diversas ferramentas de graça de diversas utilidades, façam um bom uso!
Muito bom, tem o https://dribbble.com/ que eu uso pra me inspirar também, lá tem uma aba somente pra web design.
Conteúdo valiosíssimo! Pra mim que me considero uma pessoa com muito mau gosto (hahaha, é), é bom ter onde buscar inspirações que fujam do terror que é minha mente 😂
Segue um site muito bom, cheio de conteudos;
Cara, que massa, vou fazer bom uso da seção de insipirações 😅
Simplesmente Gênio, obrigado!