desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web

  • Feed artigos
  • Feed comentários
  • Feed por e-mail
  • Início
  • Ferramentas
  • Downloads
  • Feeds
  • Mapa do blog
  • Sobre

Dicas para um web design minimalista e usável

30 de junho de 2008 8 comentários

Web design minimalista.

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 sobre o 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!

Categorias
acessibilidade, design, usabilidade
Indicar artigo
x

 





Indicar artigo
Comentários RSS
Comentários RSS
Trackback
Trackback

Todo desenvolvedor web deve ler

Use a cabeça: HTML com CSS e XHTML. Criando página web com CSS. Usabilidade na web. Não me faça pensar. Design para a internet.

Artigos relacionados a "Dicas para um web design minimalista e usável"

  • Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
  • Definição de acessibilidade e conexão com design
  • Gestalt aplicado ao design web (parte 2): princípio da proximidade
  • Gestalt aplicado ao design web (parte 6): princípio da experiência passada
  • “Sexy Buttons” em menus do Wordpress
  • Pirâmide de conteúdo: estrutura lógica de web sites (para pessoas)
  • Logos, logos e mais logos: uma excelente coletânea de sites sobre logotipos
  • Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes
  • Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
  • Tipografia com foco ao web design (parte 1): considerações sobre fonte, tipo, tipologia e tipografia

8 comentários em "Dicas para um web design minimalista e usável"

Diego Soares (30/06/2008)

Tárcio,

Muitos bloggers reclamam do sucesso de seus respectivos blogs, porém se esquecem que um conteúdo de qualidade requer muito trabalho e dedicação.

O conteúdo de um blog pode afetar o blogger em vários aspectos: Page Rank, visitas e monetização(para os probloggers).

Eu postei em meu blog sobre o primeiro fator essencial para que o conteúdo do blog comece bem, esse fator é a escolha do domínio, o link é http://www.professionalblogger.com.br/seo-para-blogs-o-dominio-e-tudo/

Abraços,

Diego Soares

Tárcio Zemel (30/06/2008)

@ Diego Soares
Realmente, Diego, a peça-chave para o sucesso dos blogs textuais é a qualidade dos artigos! Depois de escolher um bom nome para o domínio, como você bem disse em seu artigo, seguir essas dicas de usabilidade e pensar em adotar um design minimalista são belos passos rumo ao sucesso!

Abraços!

Saulo (30/06/2008)

Muito bom o artigo, parabéns!
mantra axiomatizado, hehe

Daniel (30/06/2008)

Muito fod* o artigo. Tão completo que me deu preguiça de ler todo, mas vou lê-lo todo quando for fazer meu prox tema.

delicioused :)

Tárcio Zemel (1/07/2008)

@ Saulo
hehehe… Mas esse “mantra” eu tenho certeza que você já sabia! ;-)

@Daniel
Não fique com pressa, Daniel, o artigo fica aí para você o consultar posteriormente! Quando seu próximo tema ficar pronto coloque o endereço para podermos apreciar! Obrigado pela visita!

  • websapiens.net
    Trackback em 30 de junho de 2008
  • domelhor.net
    Trackback em 30 de junho de 2008
  • 4 caracteristicas de um ProBlogger de sucesso | Fique Rico Online
    Pingback em 14 de agosto de 2008

Comente!

Translator

Portuguese flagItalian flagChinese (Simplified) flagEnglish flagGerman flagFrench flagSpanish flagJapanese flag

Artigos mais visitados

  • Briefing para desenvolvimento de web sites: considerações, dicas e modelos
  • 10 fontes de inspiração para fazer logotipos de qualidade
  • CSS float: considerações, dicas e macetes para bons layouts na web
  • Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
  • Baixar ícones de alta definição e qualidade

Categorias

  • (x)html (5)
  • acessibilidade (4)
  • blogs (7)
  • css (17)
  • design (31)
  • firefox (6)
  • indicações (50)
  • javascript (5)
  • jquery (8)
  • miscelânea (31)
  • php (7)
  • séries (9)
  • seo (12)
  • usabilidade (8)
  • wordpress (20)

Eu indico

  • ChromeBrasil
  • Fique Rico
  • Insistimento
  • Maikel Neris
  • Professional Blogger



Artigos Recentes

Check list de uma instalação básica do Wordpress

Ícones de setinhas para download (grátis)

Componentes de um sistema de navegação

10 fontes de inspiração para fazer logotipos de qualidade

Richard Stallman e os programas baseados na web

Meta tags

Últimos Comentários

André: Hum, engraçado. Encontrei o conteúdo em inglês e fui redirecionado depois de comentar, hehe. De (...)

André: Great article! I'm brazilian problogger studing typography and minimalist web design to apply in (...)

Nildo Jr: Cara... vai estudar!!!!!... vai estudar a historia da maconha... e saber o pq dela ser (...)

Ramon: Alguém deveria gravar em vídeos para quem não puder ir, concerteza é um excelente (...)

Chris Benseler: Acho que podiam ser adicionados a essa lista uma ferramente de busca interna no (...)

Mais Comentados

Meta tags (16)

CSS float: considerações, dicas e macetes para bons layouts na web (15)

Google Chrome - primeiras impressões sobre o navegador da Google (14)

Como montar um portfolio sem ter clientes (13)

Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade (13)

desenvolvimento para web trata sobre padrões da web, usabilidade, acessibilidade,
web design, SEO e tecnologias web, tais como HTML, XHTML, CSS, javascript, jQuery, PHP e mais.

A tradução automática é do Wordpress Global Translator Plugin e há alguns direitos reservados.