Se crias apresentações, sites ou outros conteúdos para a Web, certamente saberás como pode ser custoso encontrar a “imagem certa” ou a paleta de cores ideal para o teu projeto.
Bom design parece ser cada vez mais a norma, mas o que acontece se fores um “zero à esquerda” nesse departamento, como eu? 😰
Não te preocupes. Existem imensos sites e ferramentas que te podem ajudar, muitos deles gratuitos.
Neste artigo, vou partilhar contigo alguns dos sites que visito com frequência sempre que chega a hora de embelezar um conteúdo criado.
Pelo caminho, aproveitarei também para recomendar algumas ferramentas que poderão ser úteis para programadores web.
Índice de Categorias
Esta lista é atualizada com frequência, à medida que vou descobrindo novos sites, ou quando recebo recomendações de colegas ou alunos.
Como a lista já vai longa, aqui ficam as categorias para que mais rapidamente consigas aceder ao que procuras.
- Bancos de Imagens stock
- Cores
- Logos e branding
- Vídeo stock
- Som stock
- Ícones
- Padrões
- Ilustrações
- Mockups e Placeholders
- Inspiração
- Ferramentas Online
- Tipos de Letra
Vamos começar!
Bancos de Imagens stock
Enquanto blogger, programador Web e professor de Marketing Digital, uma das minhas maiores dificuldades é encontrar boas imagens para enriquecer os meus artigos e as minhas apresentações Powerpoint.
Imagens stock são sempre complicadas de encontrar, mas é especialmente frustrante quando encontramos a imagem certa e descobrimos que não tem resolução suficiente para o nosso slide do Powerpoint, ou que não nos dão permissão para a utilizar no nosso site sem pagar.
Relativamente à resolução, podes recorrer ao Google Image Search para procurares por outras versões da mesma imagem, conforme explico neste artigo.
Quanto ao licenciamento, o que deves procurar são imagens que estejam ao abrigo da Creative Commons CC0 – imagens consideradas de domínio público, livres de direitos, que podes utilizar e modificar sem problema (mesmo para fins comerciais), sem ter de pedir permissão ao autor.
Na lista que se segue, todos estes bancos de imagens contemplam esta licença. As imagens são todas bastante pesadas por serem de alta resolução, portanto se as fores utilizar num site, não te esqueças de as redimensionar e de as comprimir (podes conhecer algumas ferramentas que te podem ajudar nesta secção).
Sem mais demoras, aqui fica a lista:
O Gratisography tem as fotografias que considero mais originais, mas nem sempre encontro um bom contexto para as usar.
Por esse motivo, a minha primeira paragem é habitualmente o Unsplash, provavelmente o site mais popular da lista. Para alguma variedade, consulto também o Pexels, o StockSnap e o PixaBay.
Se procurar fotos de locais ou cidades, o Travel Coffee Book e o Moveast são apostas seguras – este último é um artista português, pelo que encontrarás bastante fotos de Portugal.
Se estiveres com dificuldades em chegar à foto que pretendes, podes também recorrer a um agregador, como o Visual Hunt ou o Stock Up.
Cores
Existem muitas ferramentas online que podes utilizar para gerar paletas de cores e gradientes, que te poderão ser úteis para implementares num site ou numa apresentação.
Estas são aquelas que utilizo com maior frequência:
- Coolors
- Adobe Color
- CalColor
- Color Hunt
- Colors Wall
- Culrs
- Image Color
- Color Leap
- Gradient Hunt
- UI Gradients
- Duotone
O Coolors é das aplicações que mais utilizo no dia-a-dia – é o meu gerador de paletas de cores de eleição.
Podes carregar na barra de espaços para gerar uma paleta de 5 cores inteiramente nova, ou carregar no cadeado numa cor que tenhas gostado, para gerar apenas outras 4 cores que sejam compatíveis com essa. Também podes inserir uma fotografia, para retirar de lá as cores dominantes da foto, se preferires.
Se clicares em Explore, podes ver outras paletas populares, recomendadas por vários utilizadores.
Mais recentemente, foi adicionada uma funcionalidade que testa as tuas cores em termos de acessibilidade, simulando vários tipos de daltonismo.
Por fim, podes fazer copy/paste de cada cor ou exportar a paleta em vários formatos, como PDF, CSS ou SVG.
O Adobe Color não é muito diferente, e é uma boa alternativa. Eu simplesmente gosto mais do interface do Coolors.
O CalColor é um site com bastante personalidade e igualmente competente, que também vale a pena teres em conta pela forma única como apresenta e descreve as cores.
Se quiseres consultar mais sugestões de paletas, o Color Hunt é uma ótima fonte de inspiração, tal como o Colors Wall. Mais recentemente, surgiu o Culrs que também parece bastante promissor.
Apesar de outras ferramentas também o permitirem, podes recorrer à simplicidade do Image Color se pretenderes extrair uma paleta de cores baseadas numa fotografia.
O Color Leap é um site muito distinto dos outros: escolhes um período na História e vês algumas peças dessa era. Em cada peça, verás a paleta de cores utilizada. Um site bem original, que merece uma menção.
Para gradientes, geralmente consulto 2 sites: o Gradient Hunt e o UI Gradients. Ambos te permitem descarregar uma imagem com o gradiente, ou obter o código CSS.
Por fim, o Duotone possibilita-te alterar rapidamente as cores de uma foto, definindo 2 cores dominantes. Esta prática é útil quando queres colocar algum texto em cima da foto, por exemplo.
Este site usa o banco de imagens do Unsplash, mas também podes fazer upload de uma foto específica que queiras alterar.
Logos e branding
Se precisares de utilizar os logotipos ou cores de outras marcas, estes sites podem poupar-te bastante trabalho.
Se te aborrece ir ao Google procurar o logotipo de uma marca que precisas de inserir no teu projecto, vais gostar de conhecer o LogoSearch.
Este site, apesar de recente, já conta com imensos logotipos à disposição, todos eles no formatos mais apetecível: SVG.
Se precisas de saber as cores do logotipo de uma determinada marca, o BrandColors é o site que procuras.
Aqui podes encontrar as cores web de centenas de marcas, todas em formato hexadecimal, para fazeres copy/paste no teu projecto. Podes até exportar as colecções que criaste em CSS ou até Sass.
Vídeo stock
O uso de vídeos na web é cada vez mais recorrente, tanto para dinamizar sites como redes sociais.
Aqui fica uma lista de entidades que, à semelhança do que acontece com os bancos de imagens, te oferecem alguns vídeos para uso gratuito. Muitos deles já eram conhecidos por também oferecerem imagens, como o Pexels ou o PixaBay.
É mais complicado encontrar um vídeo que represente o que pretendemos do que uma imagem, pelo que o mais provável será precisares de descarregar vários exemplos, e depois editá-los. Consome mais tempo, mas o resultado pode justificar o trabalho acrescido.
Consulta este artigo se precisares de sugestões de aplicações gratuitas para editar vídeo.
Som stock
Às vezes precisamos de som para acompanhar uma voz ou que sirva como background de um vídeo. Eis algumas sugestões:
Poderás editar o som num bom editor de vídeo, ou recorrer a uma aplicação específica para esta tarefa, como o Audacity ou o GarageBand (apenas para macOS).
Ícones
Encontramos este tipo de ícones um pouco por todo o lado nos sites que navegamos – são especialmente populares na hora de listar as redes sociais em que uma marca está presente ou para personalizar menus de navegação.
No entanto, já existem tantos ícones gratuitos de qualidade, que podemos ser bem mais ambiciosos que isso. Estes sites disponibilizam milhões de ícones gratuitos, no melhor formato para o efeito (SVG) e, no caso do Font Awesome, até como tipo de letra que podemos instalar no nosso sistema.
Vamos à lista:
O Font Awesome é sempre a minha primeira paragem quando estou a desenvolver sites, mas quando procuro ícones mais específicos ou menos populares, recorro às restantes opções desta lista.
Por fim, o RealFaviconGenerator é uma ferramenta bastante útil quando preciso de criar um favicon nas várias dimensões necessárias.
Padrões
Em alguns projetos, já senti a necessidade de utilizar padrões para dar alguma vida a fundos de cor sólida, tanto em slides como em sites.
Neste momento, estas parecem-me ser as melhores opções no que toca a padrões para a web.
O Hero Patterns é uma criação de Steve Schoger, um designer canadiano com ótimas dicas sobre design tanto no Twitter como no YouTube. Neste site, podes personalizar as cores e descarregar o SVG ou copiar o código.
The Pattern Library tem uma abordagem diferente – vês um padrão de cada vez, sendo possível descarregar o PNG.
O paaatterns tem excelentes padrões, disponíveis em muitos formatos (Sketch, Figma, XD, Illustrator, PNG e SVG), mas terás que dar o teu email para descarregar a colecção completa.
Lisbon Azulejos é um projeto de um designer francês que se apaixonou por Lisboa, e decidiu criar dezenas de padrões baseados nos azulejos que fotografou durante as suas caminhadas. Merci, Mathieu!
Ilustrações
Os sites estão a recorrer cada vez mais às ilustrações para apresentar produtos – especialmente em landing pages.
Há várias vantagens: os SVGs não perdem qualidade ao redimensionar, permitem ser animados com CSS e são fáceis de colorir.
Felizmente, já existem bons sites para obter ilustrações, dos quais destaco:
Quase todos estes sites funcionam de uma forma similar – escolhemos a ilustração, alteramos a cor, e podemos descarregar a peça em SVG (ou PNG).
O UnDraw tem a minha preferência, mas o Blush é muito flexível no que toca a cores e elementos que podemos alterar na ilustração.
O Freepik é um site diferente dos restantes, visto tratar-se de um site que disponibiliza todo o tipo de materiais; como o visito maioritariamente para descarregar ilustrações, optei por o inserir especificamente nesta categoria.
Mockups e Placeholders
As Mockups são fundamentais na hora de apresentarmos o nosso logotipo numa t-shirt, boné, ou caneca. Atualmente, são também muito utilizadas para apresentar sites em dispositivos como portáteis ou tablets, por exemplo.
Os Placeholders também têm a sua utilidade, especialmente no momento de desenvolvimento de um site, em que sabemos que ali ficará uma imagem, mas não sabemos ainda qual. Quando o que está a faltar é texto, o famoso lorem ipsum é já bastante conhecido.
Mockups
- Smartmockups
- Screely
- Screenpeek
- Mockup World
- Facebook Design
- threed.io
- MockUPhone
- Graphic Burger
- Artboard Studio
Alguns destes sites têm planos pagos, mas todos têm mockups que podemos utilizar gratuitamente. Alguns têm a possibilidade de inserirmos o URL do nosso site para automaticamente colocar uma fotografia da nossa página, enquanto que outros requerem que a inserção seja feita manualmente.
Apesar da maior parte permitir a edição online, exportando depois o JPG no fim, também será boa ideia ter uma aplicação como o Photoshop pronta, no caso de ser necessário “juntar as peças” individualmente.
Todos os sites desta lista são relativamente parecidos, com a excepção do threed.io que é dedicado a mockups tridimensionais.
Placeholders
Se precisares de vários parágrafos de texto lorem ipsum, podes utilizar este gerador.
Para imagens, utilizo sempre o Placeholder.com e quando estou a desenvolver interfaces em que preciso de colocar caras de utilizadores, recorro ao Random User Generator ou ao UI Faces para ter alguma informação fictícia (ambos têm uma API).
Inspiração
Antes de começar, é sempre um bom exercício consultar alguns sites de referência, que podem servir não só para nos inspirar como para nos indicar algumas boas práticas que devemos ter em conta.
Estes são alguns dos sites que utilizo para “roubar” inspiração, seja para web development seja para Marketing:
- Behance
- Dribbble
- Land-Book
- Nicely done
- Awwwards
- Web Design Inspiration
- siteInspire
- Httpster
- Lapa Ninja
- Really Good Emails
O Behance e o Dribbble são as 2 maiores comunidades de designers, pelo que praticamente dispensam apresentações. Alguns dos designers mais talentosos do mundo colocam lá todos os seus trabalhos, tornando-os 2 ótimos recursos.
Se preferires sites que filtram os “bons” exemplos por ti, tens vários à disposição. Pessoalmente, dou prioridade ao Land-Book para sugestões de sites que estão a dar que falar, e consulto o Nicely done para boas inspirações para a criação de um componente web, como um dropdown, um modal ou um formulário.
Essas são as minhas preferências, mas também consulto sites como o Awwwards ou o Httpster quando quero aprofundar a minha pesquisa.
Quando é tempo de me virar para o Marketing, surgem 2 sites top of mind para necessidades mais específicas. No que toca a Landing Pages, a minha principal fonte de informação é o Lapa Ninja, e para Campanhas de Email, o Really Good Emails é a grande referência.
Ferramentas Online
Nesta secção coloco algumas ferramentas que te permitem criar ou manipular imagens sem saíres do browser. É impressionante o que podes alcançar sem instalares apps no teu desktop.
Vamos à lista:
Para criar imagens para blogs, redes sociais ou apresentações, o Canva é uma solução super popular e, na minha opinião, a ferramenta mais capaz de produzir bons resultados.
Escrevi sobre esta ferramenta há uns anos, se quiseres ler. Agora está ainda melhor!
Se precisares de algo semelhante ao Photoshop, mas no browser, a minha recomendação passa pelo Pixlr. Muito completo.
Se precisares especificamente de remover um fundo da fotografia, o remove.bg faz magia – começou por ser 100% gratuito, mas agora já tem algumas restrições. Ainda assim, a imagem criada poderá ter resolução suficiente para o que precisas – os resultados são mesmo muito bons.
Para criar ou editar vectores, podes utilizar o Vectr, que talvez seja o mais parecido com o Illustrator. Se precisares de criar uma forma de raiz, gosto muito da simplicidade do Blobmaker (já me salvou umas quantas vezes!).
Para ficares com um logotipo em poucos segundos, podes experimentar o Launchaco Logo Maker.
Se precisares de saber o tamanho certo dos ecrãs dos dispositivos mais populares da atualidade, passa pelo mydevice.io.
Para compressão de imagens, gosto de utilizar o Squoosh.app, desenvolvido pela malta da Google, ou o SVGOMG para o caso específico de tirar informação desnecessária dos SVGs.
Por fim, para executar acções em várias imagens em simultâneo, como conversões, redimensionamentos ou inserções de marcas de água, visita o iLoveIMG. E se precisares de melhorar a resolução de uma imagem, experimenta o Bigjpg — os resultados poderão surpreender!
Tipos de Letra
Escolher um tipo de letra que incentive a leitura é fundamental, e com a chegada das Web Fonts essa tarefa ficou bastante facilitada.
Seja para textos longos, ou para destacar um botão Call to Action, estes sites vão ajudar-te a encontrar os tipos de letra certos para o teu projeto.
O Google Fonts dispensa apresentações, sendo uma das soluções mais convenientes para rapidamente instalar e testar vários tipos de letra no nosso projeto. O FontPair é um bom complemento, visto que te sugere combinações de tipos de letra que possas usar nos títulos e parágrafos do teu conteúdo.
Em alguns casos, vamos precisar de um tipo de letra um pouco mais específico, e é aqui que dá jeito visitar sites como o DaFont, em que podemos visualizar o tipo de letra no ecrã e descarregá-lo em vários formatos, como OTF ou TTF. Os restantes sites desta lista são similares.
São estas as minhas “armas secretas”. Esqueci-me de algum site? Aceito sugestões!
