Principais conceitos de Web Design e Desenvolvimento

Engana-se quem pensa que criar um site consiste em fazer um layout bonitinho e responsivo. Não: há diversos conceitos de web design e desenvolvimento que devem ser levados em consideração.

Inclusive, quando falamos de boas práticas de web design, é impossível não citar desenvolvimento. Não existe web design sem código.

Vou falar um pouquinho sobre o assunto nesse texto aqui.

10 conceitos de Web Design e Desenvolvimento

Criei uma lista com os itens que considero serem mais importantes na criação de um site.

Isso não só baseado no meu trabalho, mas em diversos estudos e recomendações de boas práticas. Em cada tópico haverá um ou mais links que dão embasamento aos argumentos e também trazem conteúdo complementar.

Até porque se eu escrevesse tudo por aqui certamente você iria preferir esperar sair o filme.

Bom, vamos lá!

Arquitetura da informação

A arquitetura da informação consiste em organizar todos os elementos de um site para torná-lo fácil de navegar. Isso tem tudo a ver com usabilidade (UX) e acessibilidade.

Na imagem acima você pode ver um organograma que fiz do meu site. Essa é uma das etapas – a partir dessa imagem eu sei exatamente quais serão todas as páginas e subpáginas do site e o que cada uma dela representará.

É tudo planejamento – inclusive tenho um post inteiro dedicado ao assunto.

Uma das etapas mais importantes da arquitetura da informação (e também entre os conceitos de web design como um todo) é o wireframe, que define a estrutura (ou diagramação) do site através de linhas e formas geométricas.

O wireframe pode se transformar em um protótipo, o que ajuda bastante em testes de usabilidade. Através de um protótipo é possível saber se o site está realmente organizado e intuitivo.

Tendo tudo isso em ordem, aí sim vem a etapa do layout, que é a criação do site como será visto no navegador. Muita gente confunde essa parte como “fase do design”, mas a verdade é que toda a arquitetura da informação faz parte do design.

Isso porque design não significa “visual”, e sim projeto. O que define função e usabilidade de qualquer coisa é justamente o design.

Identidade visual

A identidade visual tem a ver com todos os elementos gráficos que representam uma marca, produto ou empresa.

Cores, tipografia, ícones, estilos, padrão de imagens, enfim, a comunicação visual como um todo.

Quando trabalhada junto com uma equipe de publicidade ou marketing digital, a identidade visual ajuda a construir uma personalidade.

Um exemplo claro disso é a facilidade que temos para reconhecer produtos de uma marca sem necessariamente ver o nome dessa marca estampado no produto.

Um dos elementos mais importantes da identidade visual é o logo, é claro. É a assinatura da empresa, e pode contar uma história quando criado com conceito.

Para muitos, inclusive, o logotipo passa a primeira impressão da marca, produto ou empresa. E como a primeira impressão é a que fica, é imprescindível ter um logo que tenha tudo a ver com seu negócio.

Para tanto você deve contar com um profissional ou até mesmo se aventurar utilizando um criador de logo, por exemplo.

Psicologia das cores

Outro conceito ligado à identidade visual, a psicologia das cores é uma ferramenta importante para passar sensações e despertar sentimentos.

Não é balela, é comprovado. Não é por acaso que marcas gigantes utilizam cores específicas, como ilustrado na imagem acima.

Outro exemplo clássico são pôsteres de filmes, que são um universo único de estrutura e uso das cores.

Porém, é fácil se confundir com a utilização de apenas uma cor. Afinal, toda cor pode significar mais de uma coisa – como o vermelho, que representa amor mas também remete a agressividade.

O que faz toda a diferença é a combinação de cores – um conceito conhecido como acorde cromático.

Por exemplo, se você juntar vermelho com rosa, não há dúvidas de que a sensação passada é de amor. Junte vermelho com preto e laranja e pronto, terá um ar agressivo.

Gestalt e pregnância da forma

Semelhança da forma, pregnância da forma e até mesmo boa forma. Todos esses termos estão relacionados com Gestalt, ou teoria da forma.

Gestalt, em resumo, é um conceito que ajuda a criar uma forma bem definida, que seja agradável e compreensível. Com isso é possível identificar o significado de uma forma apenas observando-a.

Utilizei meu logo como exemplo acima porque há um trabalho de Gestalt nele. Ao observar o ícone você visualiza um lobo, que também forma um F.

Dentre as leis ou princípios do Gestalt podemos citar Unidade, Segregação, Proximidade, Semelhança, Unificação, Continuidade, Fechamento e, a mais importante de todas, Pregnância.

Essa última tem a ver com a facilidade de interpretação de uma forma. Para efeito de comparação, ao todo são três níveis de pregnância da forma:

1. Alta pregnância: Quando não há nenhuma dificuldade para compreender a forma. Ou seja, a forma é bem organizada, clara e intuitiva.
2. Média pregnância: Quando é possível compreender a forma, mas há um certo trabalho para isso. Um exemplo é quando você está lendo um texto e precisa se aproximar mais da tela para enxergar o que está escrito.
3. Baixa pregnância: Quando só é possível entender a forma com muito esforço, ou até mesmo tendo um certo conhecimento sobre o que está sendo comunicado. É assim com tipografias psicodélicas, logos de bandas de black metal e prescrições médicas.

Em web design a pregnância da forma é extremamente importante para acessibilidade, usabilidade e para vendas também através de call to actions e banners bem planejados, por exemplo.

Infelizmente esse conceito pode ser utilizado para o mal também. É o caso dos dark patterns, que basicamente levam o usuário a fazer o oposto de o que ele quer.

Legibilidade e leiturabilidade

A legibilidade tem tudo a ver com o item anterior. Afinal, um texto bem formatado e com uma tipografia fácil de compreender é um elemento de alta pregnância.

Porém, o conceito de legibilidade não deve ser aplicado apenas no texto – mas no layout inteiro.

Um botão bem definido, um formulário fácil de ser preenchido, um menu acessível… tudo isso tem a ver com legibilidade, o que também está diretamente relacionado a dois conceitos de web design muito comentados por aqui: usabilidade e acessibilidade.

Quando está tudo em perfeita harmonia, aí sim entra a tal da leiturabilidade, que tem a ver com o conforto visual proporcionado pelo design. Ou seja, é um conceito que pode fazer muita diferença na taxa de rejeição do seu site.

Um texto bem organizado e estruturado, com hierarquia, divisões e mídias complementares tem uma leiturabilidade muito boa. Logo, irá agradar o leitor.

E se agrada o leitor, ele irá consumir seu conteúdo e estará motivado a navegar pelo site.

Escaneabilidade

Sabe quando você acessa um site em busca de uma informação rápida? É frustrante quando você não consegue encontrar o que procura só de bater o olho, não é mesmo?

O conceito de escaneabilidade no web design tem a ver com – adivinha – usabilidade. Quanto mais fácil de encontrar um meio de contato no site, uma seção no menu ou um tópico em um texto, melhor a escaneabilidade do site.

Tudo tem que ser muito rápido na internet. Não pense que um usuário irá passar horas em seu site se ele realmente estiver interessado – se a navegação for ruim, ele vai procurar um site melhor pra acessar.

Um dos maiores focos quando o assunto é escaneabilidade é conteúdo. Trabalhar com um índice, listas, tópicos e imagens relacionadas dão maior dinamismo à leitura.

Posso usar como exemplo esse texto aqui. Duvido que a grande maioria das pessoas irão ler o texto completo, parágrafo por parágrafo.

Criar uma lista com tópicos facilita a identificação de assuntos que são do interesse do usuário. Assim, se alguém acessar esse post e quiser ler só um ponto ou outro, vai poder fazer isso rapidamente utilizando o índice no início do texto ou passando o olho pelo conteúdo ao rolar a tela.

Mobile first e design responsivo

Dentro de mobile first e design responsivo encontramos outros princípios do web design.

Por exemplo, o design responsivo tem uma vertente chamada design adaptativo. Enquanto o primeiro se encaixa em todos os formatos de tela, pixel a pixel, o segundo apresenta uma estrutura de layout diferente para cada breakpoint definido.

Podemos citar também a versão mobile, que é outra versão do mesmo site mas que é acessível apenas em smartphones e tablets. Normalmente é uma versão mais enxuta em comparação ao que se vê em telas grandes como desktops e laptops.

Não se esqueça do AMP, um framework que propõe um desenvolvimento focado em desempenho. Visando mais velocidade, o Google não só indexa a versão AMP como armazena em seu próprio servidor.

Ou seja, se seu site segue as boas práticas do mobile first (que passa por outro conceito, o mobile-friendly) e é veloz em dispositivos móveis, ele terá vantagem nos resultados das buscas.

Mas se ele foi pensado e otimizado apenas para telas grandes, com um design responsivo meia-boca para telas menores, certamente você verá seus concorrentes em posições melhores no buscador.

Há uma forte tendência, inclusive, ao mobile-only. Como o nome já diz, são sites pensados apenas para telas pequenas. Eles funcionam normalmente em telas grandes, mas com estrutura totalmente voltada para smartphones e tablets.

Velocidade de carregamento

Uma das essências no web design é saber trabalhar com recursos otimizados.

Exemplos:

• Minificação: No mundo ideal seu site tem apenas uma linha de código. Acredite, remover elementos como espaços em branco de indentações (ou para melhor legibilidade) e comentários faz toda diferença no peso final do seu site.
• Adiamento de recursos: Seja carregar um javascript após alguns segundos ou só depois da interação de um usuário, ou trabalhar com critical css, adiar recursos que não serão utilizados imediatamente sempre é uma boa alternativa para acelerar o carregamento da página.
• Compressão / otimização de imagens: Um dos erros mais graves que vejo muita gente cometendo nessa área – sejam “profissionais” de web design ou produtores de conteúdo – é a falta de omitização de imagens. Não é nem um pouco difícil de fazer e tem um impacto muito positivo na velocidade e no desempenho do site.
• Extensão de imagens: Outro erro muito comum é não salvar imagens com o formato adequado, como JPG para fotos, PNG para ilustrações e SVG para ícones e outros elementos de layout.
• Lazy loading: Em pouco tempo essa será uma função nativa de todos os navegadores. Mas enquanto não é, retardar o carregamento de imagens é outra técnica infalível para acelerar o carregamento de um site.

Esses conceitos básicos são imprescindíveis na hora de criar um site leve e com carregamento rápido.

Lembrando que tudo isso são fatores de indexação no Google, que tem uma série de recomendações de boas práticas como CLS, LCP e FID.

SEO

SEO não poderia deixar de estar nessa lista.

Você deve até estranhar que esse tema esteja em uma lista focada em web design, inclusive. Mas repare que também estamos falando de desenvolvimento – não existe uma coisa sem a outra.

Mas não para por aí. Foi-se o tempo em que SEO era sinônimo de código, texto e link.

Hoje em dia não basta escrever um conteúdo cheio de palavras-chave e pronto. Seu site precisa ser bem feito e seguir boa parte do que foi citado nos tópicos anteriores para brigar por boas posições no Google.

Além disso os rich snippets vieram pra ficar. São resultados mais dinâmicos na SERP, com muito mais destaque que os demais itens exibidos pelo buscador.

Então, além de tudo o que você já está cansado de saber sobre otimização para buscas, ter noções dos conceitos de web design é uma grande vantagem competitiva.

Segurança e privacidade

O que privacidade e segurança têm a ver com Web Design?

Certamente você teve essa dúvida agora.

Tem tudo a ver a partir do momento em que você pode enganar o usuário através de dark patterns, induzindo-o a aceitar cookies quando ele não queria isso.

Outro exemplo clássico são banners de publicidade em sites de download. Ah, a velha batalha para encontrar o botão certo pra baixar o que você deseja!

Além disso, algumas bibliotecas utilizadas podem comprometer a segurança e a privacidade do usuário. É o caso de recursos desatualizados, ou a utilização de plugins suspeitos (ou pirateados).

Então, por um lado a estrutura do site deve ser clara o bastante para que o usuário saiba o que irá acontecer a cada clique, a cada página carregada.

Por outro, é preciso tomar cuidado com o que está sendo utilizado e feito por trás do site – ou seja, no código.

Como ter um site com web design perfeito?

Trabalhar com Web Design é, acima de tudo, criar um site ou app perfeito para o usuário.

E como é um site perfeito? Bom, o projeto tem que ter, no mínimo…

1. Facilidade de usar e navegar;
2. Uma identidade visual profissional e que gere identificação com o público;
3. Cores bem planejadas para causar sensações e desperar interesse;
4. Uma estrutura intuitiva, com elementos de fácil identificação;
5. Boa legibilidade, leiturabilidade e acessibilidade;
6. Praticidade a ponto de o usuário bater o olho e encontrar o que quer;
7. Responsividade para diferentes tamanhos de tela;
8. Leveza e rapidez no carregamento;
9. Conteúdo completo e de qualidade;
10. Respeito com o usuário.

É isso.

Lembre-se de que o foco é e sempre será no usuário. O Web Design não tem que agradar o diretor da empresa ou priorizar questões estéticas. Tem que servir para o usuário.

Créditos das imagens: DesignStudio, Nielsen Norman Group, Freepik e sites citados.

A cópia dos conteúdos e trabalhos deste site não é permitida. Saiba mais clicando aqui!