A importância de um projeto web coeso. + bancos de imagens

A identidade visual é elemento chave para qualquer projeto. A maneira como você apresenta seu conteúdo visualmente afeta a experiência do usuário e a percepção que ele vai ter. "Afinal, se entramos em um site de jogos não esperamos encontrar uma receita de pudim, né?" 👀 A coerência visual é essencial para garantir que sua mensagem seja comunicada com clareza. Aqui, vou compartilhar um pouco sobre a importância de manter uma coerência e como você pode alcançá-la em seu projeto Front-End. Incluindo dicas de bancos de imagens, ilustrações, ícones...

FOTO: Site do McDonald's

Por que a identidade visual é importante?

Definir o tema do seu projeto e buscar com que as cores, fontes, ícones, layouts e outras características visuais - que fazem parte da sua identidade - façam sentido é manter uma apresentação lógica. Não é a toa que sempre voltamos quando estamos satisfeitos, ou sempre lembramos de uma marca famosa como o McDonald's. "Se entramos em seu site esperamos ver o que já conhecemos: o M amarelo, as cores: vermelho e branco, as embalagens e os lanches." Quando os elementos apresentam coesão, ela cria uma experiência visual clara para o usuário. Além disso, harmonia entre os elementos ajuda a reforçar uma marca e tornar sua mensagem memorável!

Caso o contrario, se optarmos por não definir uma linguagem visual, o projeto ira oferecer uma péssima experiência ao parecer desorganizado e confuso. Se elementos diferentes são usados de forma inconsistente, pode ser difícil para que os usuários entendam a sua mensagem ou encontrem o que estão procurando. Por outro lado, ao definirmos um padrão, estabelecemos um fluxo visual fácil de seguir, tornando a experiência mais agradável e intuitiva.

Como escolher as melhores imagens para o meu projeto?

1 - Defina sua identidade visual.:

Antes de desenvolver um protótipo em Ui ou HTML e CSS, é importante definir sua identidade e a mensagem que quer passar. Isso inclui escolher uma paleta de cores, fontes e outros elementos visuais que você usará consistentemente em todo o projeto. O Design System é um processo importante, aqui é onde você desenha os botões as cores e define fontes e os tamanhos e ao longo do processo em CSS você terá uma referência predefinida e uniforme.

FOTO: Exemplo de design system

Nesta etapa de criação se torna fundamental buscar referências similares com as suas ideias (ou buscar por outras que não tenha nada haver, mas tenham design) no Behance, Dribbble, Pinterest, Freepik... o importante aqui é trabalhar o nosso olho para chegar numa solução e apliarmos nossas ideias. Logo teremos repertorio para irmos construindo o nosso próprio estilo ao mesmo tempo que desenvolvemos o projeto. Quem sabe aquele estilo de menu da Dio não fique bom no meu projeto?

Já dizia uma escola de design, a BauHaus... "Menos é Mais: Minimalismo, soberania e eficiência!" O que importa é ser funcional! Claro que as vezes, se você é desenvolvedor, vão acabar aprovando um projeto com botões cheios de firula... (Assista esse Vídeo: Designer vs. Programador) Mas basicamente, a forma segue a função. Se no mundo físico a cadeira é feita para sentar, o botão de um site deve ser clicavel ou será inútil.

2 - Escolha fontes legíveis e defina Hierarquias.:

Ao escolher fontes para seu projeto WEB, certifique-se de que sejam legíveis e fáceis de ler. Você pode usar fontes diferentes para cabeçalhos e texto principal, mas certifique-se de que elas estejam dentro do contexto. Para paginas WEB e aplicativos o ideal é utilizarmos fontes sem serifa, elas ajudam a gente a ler mais rápido por aqui! Em quanto as demais fontes podem ser usadas para títulos, logos, artes... o importante é ter uma estrutura de texto legal para que os olhos não cansem de ler.

3 - Use imagens consistentes

As imagens são uma parte importante da linguagem visual, é preciso que sejam consistentes em estilo e tom para manter um visual legal. Sobre qualidade, imagens em PNG podem ser a melhor opção, já que o JPG é um tipo de arquivo que perde muita qualidade ao comprimir, mas se o caso for tamanho de arquivo o JPG muitas vezes é uma mão na roda por ser mais leve. E uma coisa muito importante: somente os imagens em PNG podem ser exportados como "sem fundo". Claro que existe o SVG, mas aqui estamos falando de imagens!

Se preferir use o Remove.bg (é online e fácil para remover fundos de imagens).

Exemplo de Mockup para ui

Uma boa opção é usar bancos de imagens e buscar pelas que correspondam ao estilo da mensagem que você quer passar (em muitos você pode criar pastas e ir salvando algumas ideias) e se possivel ofereçam a licença gratuita para uso (não queremos que batam em nossa porta com um processinho legal porque não pagamos pelos direitos autorais né?). Separei alguns para darem uma olhadinha:

Pexels - FOTOS & VIDEOS

Unsplash - FOTOS

Icons8 - Vetores e bonecos de massinha 3D (grande maioria gratuita)

Undraw.co - Ilustrações

Flexiple - Ilustrações

Open Doodles - Ilustrações

Isoflat - Imagens isométricas

Freepik - E por fim, o queridinho dos Designers que tem tudo isso ai que citei em cima e muito mais! esse banco é muito bom, serio mesmo! Com imagens, vídeos, mockup (maquetes digitais) para você personalizar a apresentação do seu projeto, arquivos e lettering personalizáveis, vetores, fontes, ícones, layouts para se inspirar... sim, muita coisa! Até dá pra usar alguns botões e Design System predefinidos (Se for coerente com o seu projeto.)

4 - USE O GOOGLE! E ISSO NÃO É UMA AMEAÇA!

E eu não poderia esquecer, claro, do próprio GOOGLE! Para buscar as melhores fotos com qualidade. A dica é: após adicionar a sua busca > clique em Feramentas > defina no filtro o Tamanho Grande. Lembra que eu falei que o PNG geralmente é mais pesado que o JPG? Então, assim se torna mais fácil encontrar imagens com uma qualidade melhor - porem pesadas. O google também disponibiliza fontes, vídeos, e muitas outras possibilidades!

Foto: como buscar imagens melhores no google

Outra coisa que além de fontes e imagens o google tem o Introducing Material Symbols com vários ícones numa mesma linguagem visual! E tem até a opção de estilizar, você pode definir o peso das linhas, o grau e o tamanho em pixels!

Foto: Material Symbols GOOGLE

Acho que é isso por hoje, espero ter passado uma visão rápida sobre Design para melhorar o seu projeto.

Sentiu falta de alguma informação? Que tal deixar aqui nos comentários? 😉