Principais conceitos de Web Design e Desenvolvimento

Você sabe o que é pregnância da forma, leiturabilidade e escaneabilidade? Conheça conceitos de web design que fazem muita diferença na criação de sites e apps.

Por Fabio Lobo, publicado em 29/09/2020.

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.

pessoa ajustando controles de um aplificador ao máximo - as opções são relacionadas a UX; à frente há o texto Conceitos de Web Design

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

ilustração de organograma do meu site
Exemplo de organograma.

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

elementos que formam o logo do airbnb: pessoas, lugares, amor e a letra A
A identidade visual do Airbnb foi construída com significado, conceito.

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

psicologia das cores aplicadas em diferentes marcas conhecidas
Psicologia das cores aplicada em marcas conhecidas.

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

logo do site fabiolobo
Exemplo de logo com gestalt.

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

comparação entre alinhamentos à esquerta, justificado, à direita e centralizado
Efeito do alinhamento e espaçamento de textos.

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

mapa de calor de um site
Exemplo de mapa de calor visual de um site.

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

mesa com um computador, uma luminária e uma planta; na tela do computador há um wireframe de um site
Exemplo de wireframe planejado com mobile-first.

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.

Repare que o foco está cada vez mais nas telas pequenas. Isso porque já faz eras que o acesso à internet via dispositivos é maior em comparação a desktops e laptops.

Eis que veio o conceito do mobile first, um dos mais recentes fundamentos do web design. Trata-se de criar sites primeiro para telas pequenas, e aí adaptá-los através do design responsivo para telas maiores.

Com isso foi colocado em prática o mobile-first indexing, que é o Google priorizando o conteúdo do seu site para telas menores na hora da indexação.

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

printscreen de resultados no think with google - test my site
Comparação de velocidade do meu site antes e depois de otimizações.

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

exemplo de howto no google
Exemplo de rich snippets no Google.

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.

O Google está priorizando cada vez mais imagens e vídeos, ainda mais com a popularização das Web Stories. Com recursos como lazy-loading e imagens em webP, faz todo sentido, já que tudo carrega só quando deve – e de maneira leve.

Sem contar que SEO está cada vez mais focado nos nossos dois velhos conhecidos: usabilidade e acessibilidade.

Ou seja, eu poderia mudar o título desse texto de “Conceitos de Web Design e Desenvolvimento” para “Boas práticas de SEO” que o conteúdo continuaria fazendo sentido.

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

printscreen da tela de edição de uma página de política de privacidade no gutenberg
Exemplo de política de privacidade pré-criada pelo WordPress.

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.

Revisão

Tirou todas as suas dúvidas sobre conceitos de web design? Confira abaixo:

O que é Web Design ou Web Designer?

Web Design é uma vertente do design voltada para a web – mais precisamente na criação de sites. Web Designer é o profissional que trabalha com Web Design e precisa dominar os conceitos de Web Design.

Boas práticas de Web Design ajudam o SEO?

Sim, principalmente fundamentos como UX, acessibilidade, mobile first, e velocidade – tudo tem cada vez mais um papel importante com otimização para buscadores.

Como testar o Web Design do meu site?

Você pode testar as melhores práticas de web design como mobile first e mobile friendliness no search.google.com/search-console, acessibilidade das cores com o Coblis no color-blindness.com, e performance, acessibilidade e boas práticas com o web.dev.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

Por que assinar seus trabalhos?

Um web designer ou desenvolvedor deve ou não adicionar sua assinatura no rodapé dos sites que faz? Confira os prós e contras!

Criação de logo com conceito e identidade visual

Eu sou designer de logo: saiba como é o trabalho de design de logotipos e identidade visual. Veja exemplos, tendências, manual da marca, conceitos e inspirações.

Como melhorar o SEO de seu site visando subir nas buscas

Quer saber como otimizar ainda mais seu site? Saiba como é feito um trabalho de SEO e siga os passos para ter um site melhor indexado.

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento