# Dicas para um web design minimalista e usável

> Crie web design minimalista e usável com dicas práticas. Aprenda a priorizar conteúdo, melhorar navegação e criar experiências eficientes. Simplifique!

URL: https://dpw.dev/acessibilidade/dicas-para-um-web-design-minimalista-e-usavel/  
Publicado em: 2008-06-30  
Categoria: acessibilidade  
Tags: arquitetura-da-informacao, web-design  
Autor: Tárcio Zemel

As tendências para _web design_ indicam que o _design_ minimalista é uma boa pedida. Estas "tendências minimalistas", na verdade, insinuam que o conteúdo dos _sites_, por ser o mais importante, deve ter ênfase e destaque, e o _layout_, _design_ e elementos visuais, devem contribuir para que os que os acessem tenham uma navegação ótima, encontrando aquilo que querem e/ou precisam rapidamente, da maneira que suas visita, suas experiências, sejam as melhores possíveis.

Pessoalmente, acredito ser esta uma **excelente abordagem** a se adotar ao pensar em e construir um _design_ para _web_. Penso que o desenvolvedor _web_, neste caso, só tem a ganhar "seguindo" esta tendência atual. Para tanto, conhecer algumas técnicas de desenvolvimento é de extrema importância. Técnicas essas que o capacitarão a estruturar o bom _design_ minimalista. **E a usabilidade agradece**.

## Ocupe de 60% a 80% da página com conteúdos (relevantes)

"O conteúdo é o rei". Esta célebre frase - que, de tão repetida, já não se sabe mais quem a disse originalmente - é um dos pilares para se compreender e praticar a feitura de um _design web_ minimalista. Para o "rei" devem ser feitas todas as "honrarias"; em outras palavras, os esforços do desenvolvedor _web_ devem focar o conteúdo do _web site_, servindo os elementos o _layout_ e elementos visuais como auxiliadores da consecução deste objetivo.

Não raramente é possível encontrar _sites_ e _blogs_ com um _design_ lindíssimo que não tem um conteúdo digno desta beleza toda. Nestes casos, há muito capricho e dedicação em conseguir uma bela estética e o "rei" é deixado de lado: o conteúdo não é relevante e, em alguns casos, é totalmente confuso e desconexo.

Ocupar de 60% a 80% das páginas de seu _site_ ou _blog_ com conteúdos - conteúdos relevantes e de qualidade, quero dizer - é um enorme passo em direção ao objetivo de **conseguir um bom _web design_ minimalista**. E por "conteúdos relevantes e de qualidade" menciono aqueles conteúdos que realmente sirvam para seu visitante; conteúdos que sejam realmente condizentes com o tema e função de seu _site/blog_ e que recompensem o visitante por ter dedicado um pouco de seu tempo a fazer uma visita.

## Apresente as informações mais importantes primeiro

Apresentar as informações mais importantes (mais relevantes) primeiro pode parecer algo óbvio, mas, na realidade, muitíssimos desenvolvedores não sabem e/ou não seguem este básico princípio.

Uma boa arquitetura da informação, aliada a um bom estudo sobre a usabilidade, sugere que **apresentar os conteúdos mais importantes primeiro é indispensável para que a experiência dos visitantes seja melhor**. Nada mais desagradável que ficar procurando por algo que já deveria estar lá. Pior ainda é quando, mesmo depois da procura, não se encontra nada...

Então, reforçando mais uma vez os esforços para se fazer um _web design_ minimalista, é importante apresentar os conteúdos mais relevantes, aqueles conteúdos que são mais úteis e que os visitantes mais procuram, logo "de cara".

## Se algo não é relevante, simplesmente não precisa estar lá

Esta preciosa dica, se seguida, certamente aumentará o nível de qualidade e objetividade de seu _site_ ou _blog_. Pense bem: se algo não é relevante ou necessário para a situação, então por que está lá?

Se o usuário já está logado, então não é mais preciso que seja mostrado o formulário de autenticação. Se determinadas opções do menu não podem ser acessadas naquela hora, então não é preciso que estejam lá.

Estes são exemplos simples de poluição visual desnecessária. Existem muitos mais casos que, seja por falta de conhecimentos ou outro motivo, muito desenvolvedores insistem em cometer.

**Se algo não é relevante, simplesmente não precisa estar lá!**

## O background não é mais importante que a informação

É comum encontrar _web sites_ e _blogs_ que, na busca por uma diferenciação e inovação, acabam utilizando _backgrounds_, ou planos de fundo, muito extravagantes, que mais atrapalham que ajudam.

Imagens de fundo devem servir para:

- **Contribuir para a experiência dos visitantes, direcionando seu olhar para o conteúdo;**
- **Servir como elemento visual que serve de "agrado" ao visitante, suavizando a "carga sensorial" e aparecendo como algo bonito de se ver;**
- **Causar sensações planejadas e direcionadas nos visitantes, contribuindo, dessa forma, para a estratégia de divulgação geral e servindo como auxílio de melhoramento de sua experiência na visitação;**

Mas o que muito se vê pela _web_ são planos de fundo confusos e esteticamente desagradáveis; texturas fortes, que atrapalham a leitura e cansam mais rapidamente a visão; em geral, elementos que diminuem o tempo de permanência e que minam a boa sensação de fazer uma visita àquele _web site_.

Tendo cuidado com o uso de planos de fundo esdrúxulos e que mais atrapalham que auxiliam, o desenvolvedor _web_ deve se valer do bom senso e estudos de _design_ antes de optar, impensadamente, por usar uma imagem ou textura como _background_.

## Faça um bom contraste entre plano de fundo e texto

Reforçando o tópico anterior, para um _design_ de _web_ minimamente usável, o ato de ler daqueles que são visitantes devem ser natural e agradável. E este objetivo não pode ser alcançado se o visitante faz esforços desnecessários para ler seu conteúdo, que está sendo ofuscado por um background mal planejado!

Repetindo: um plano de fundo não deve ser posto ao caso; muito antes pelo contrário, deve somente ser usado quando se tem absoluta certeza de que, se figurar como elemento visual do _site_, mais contribuirá que atrapalhará.

Fazer um bom contraste entre plano de fundo e texto usado é também uma regra básica de _design_ que, infelizmente, é amplamente negligenciada. Conseguir um bom contraste entre estes elementos constitutivos da página é fácil: basta ser simples!

Os livros que lemos têm suas páginas com texturas fortes e pesadas, da mesma cor que o texto ou é simplesmente papel branco com tinta preta impressa? Os jornais se valem de _background_ extravagantes para apresentar suas notícias ou é simplesmente "papel puro" e tinta?

**Simplicidade é chave!**

Não que não se deva nunca usar um plano de fundo nas páginas dos _sites_ e _blogs_ (tanto que existem muitos que se valem deste recurso muito bem); mas, se o fizer, deve-se, além de usar o bom-senso e discernimento lógico, ter em mente dicas como:

- **Não utilize a cor do plano de fundo próxima a cor do texto.** Isso dificulta a leitura, cansa mais rapidamente o leitor e, em casos extremos, torna impraticável a leitura dos conteúdos;
- **Se for usar texturas, que sejam suaves.** Texturas como plano de fundo, como explicado, devem ser usadas com bastante cautela. Se é para usar alguma, que seja suave e agradável; que auxilie a experiência positiva que o visitante tem ao acessar as páginas;
- **_Backgrounds_ múltiplos pode ser uma boa solução.** Múltiplos planos de fundo podem ser eficientes em diversos casos. Usar um plano de fundo "geral" escuro, com um plano de fundo "secundário", mais claro, no lugar onde está o texto, é uma boa técnica para "controlar" o direcionamento do foco de visão.
- **_Backgrounds_ animados não existem.** Isso é um mantra, entendeu? Repita: _backgrounds_ animados não existem!

A principal dica para fazer um bom contraste entre planos de fundo e texto é se valer do bom e velho fundo branco com texto escuro. Como mencionado, veja como são livros, jornais e revistas - a comparação com a mídia eletrônica, neste caso, é perfeitamente válida.

Não é obrigatório que o texto seja, necessariamente, preto; o que vale é o bom contraste, que possibilite uma boa leitura e dê ensejo a um bom _design_, que seja facilmente usável e sensorialmente útil. Fazer um bom contraste entre plano de frente e plano de fundo é, também, uma regra de **acessibilidade**.

Existe um _software_ sobre análise de contraste entre cores do primeiro e segundo planos. Dê uma olhada no artigo do [Maujor](http://www.maujor.com/ "Visitar o site do Maujor.") sobre o [Analisador de Constraste de Cores](http://www.maujor.com/tutorial/ccanalyser.php "Ler artigo sobre o programa Analisador de Constraste de Cores.").

## E essas dicas de minimalismo e usabilidade funcionam mesmo?

Se estas dicas para um _web design_ minimalista e usável forem estudadas e aplicadas de forma correta, forem sabiamente usadas e postas em prática nos momentos adequados, certamente que você conseguirá um **projeto com mais qualidade** e um **resultado final satisfatório**!

Alertando que esta são apenas algumas dicas. Estudos contínuos e atualizações constantes na área de usabilidade e obtenção de conhecimentos atuais no campos de _design_ certamente farão com que seu trabalho seja muito melhor e que você desenvolva um senso de criação de sites mais crítico e acurado.

Novamente o convido a observar o mundo à sua volta e fazer suas próprias constatações. Veja em publicações impressas e em mídias virtuais de qualidade, como o assunto da usabilidade e minimalismo é tratado na prática. Veja como são construídos bons _web designs_ e o que sugerem os bons desenvolvedores.

Na verdade, fazer _sites_ e _blogs_ minimalistas e usáveis não é complicado. As pessoas é que complicam!

**E você, conhece alguma técnica para fazer _web sites_ minimalistas? Gostaria de dar um conselho sobre usabilidade? Comente e ajude todos nós a aprendermos mais coisas!**

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml