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!

Artigos Relacionados

• Definição de acessibilidade e conexão com design
• Recursos de usabilidade grátis
• Pirâmide de conteúdo: estrutura lógica de web sites (para pessoas)
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• Ícones de setinhas para download (grátis)
• Componentes de um sistema de navegação

Definição: o que é acessibilidade?

O termo “acessibilidade” tem muitos significados, dependendo de como é interpretado, de quem fala e da área a que se refere. De uma maneira geral, acessibilidade refere-se ao fato de algo ser acessível às pessoas, sejam elas quais forem, sejam os meios que estejam usando quais forem, sejam suas dificuldades e limitações quais forem.

Este é um conceito “ideal” que certamente não é alcançado em todas as vezes. Mas é o que todos os envolvidos com as atividades em que a acessibilidade tenha importância significativa devem ter em mente.

Por exemplo, um órgão público que organiza e providencia um concurso mas não tem infra-estrutura para que pessoas com necessidades especiais tenham acesso às salas de aula (seja por não ter rampas no local, elevadores com portas pequenas, etc) está impedindo o acesso a essas pessoas.

Acessibilidade na web

Na busca, aqui no blog, acredito eu que a pessoa gostaria de uma definição de acessibilidade em um contexto voltado à web, claro; e é justamente nesta vertente que vou focar.

Acessibilidade na web refere-se ao site ser acessível a quem o visita. Muito fácil, muito simples! Teoricamente, isso é tudo o que há para ser dito. Agora, como a acessibilidade vai se dar “são outros 500″…

O desenvolvedor web deve seguir inúmeras regras de acessibilidade; regras estas idealizadas e desenvolvidas especialmente para o acessos no ambiente virtual. Em nosso caso, regras desenvolvidas especialmente para serem conhecidas e aplicadas na idealização, contrução e manutenção de web sites.

Idealmente aquele sucinto conceito é o correto; na prática, é bem mais complexo e demorado prover a acessibilidade na web.

Para o caso da acessibilidade na web, o W3C definiu as “Diretrizes de acessibilidade ao conteúdo da Web“, ou WCAG. Basicamente, essas Diretrizes aconselham, instruem, o que devem os desenvolvedores de web fazer e/ou deixar de fazer em contextos de desenvolvimento web. O que, se implementado, será benéfico; o que, se não implementado, será maléfico quando as pessoas acessarem os sites.

Acessibilidade e conexão com Design

O Design, especificamente, no caso, o Web Design, tem muita conexão com a acessibilidade! Um bom design web deve ser consoante com a acessibilidade. Um site deve possuir bom layout, boa estruturação, bom design e ser acessível. Claro, estamos novamente no “mundo das teorias”. Na prática, desenvolver um site que atenda a estes (e outros) objetivos é bem complexo. Alguém enfie isso na cabeça dos clientes, por favor! :-D

Então, no modo que penso, a acessibilidade tem conexão com o design a partir do momento em que ambos, conjuntamente, aproximam-se o máximo possível do conceito ideal citado acima, com o objetivo de permitir que qualquer pessoa, em qualquer lugar, utilizando qualquer tipo de dispositivo, tenha uma experiência agradável (muito a ver com usabilidade, também), que encontre caminhos fáceis para as tarefas e/ou partes do site que lhe são mais úteis.

Conclusão sobre acessibilidade e conexão com design

O que foi dito neste artigo é, na verdade, uma sucinta abordagem. Quando se fala em acessibilidade e design, outros “núcleos” no desenvolvimento para web devem ser levados em consideração, como usabilidade, arquitetura da informação, bom planejamento, correta aplicação de tecnologias, e muitos outros.

Tudo isso somado à uma boa interface, elementos visuais agradáveis e leveza no carregamento, a meu ver constituem uma boa aliança entre acessibilidade e design, e servem como imensos auxiliares para que o visitante tenha acesso ao mais importante: conteúdo!

Artigos Relacionados

• Dicas para um web design minimalista e usável
• Recursos de usabilidade grátis
• Ícones de setinhas para download (grátis)
• Baixar ícones de alta definição e qualidade
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• Componentes de um sistema de navegação

| View | Upload your own

Ah, e confiram, também, o artigo sobre o tema, da própria autora dos slides.

Artigos Relacionados

• Breadcrumbs: guia completo com exemplos e melhores práticas
• Recursos de usabilidade grátis
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Dicas para um web design minimalista e usável
• Definição de acessibilidade e conexão com design
• Colorblind Web Page Filter
• jQuery: apresentação

O Colorblind Web Page Filter permite que você veja os sites “através dos olhos” de quem tem deficiência cromática (não sei se é o termo mais adequado) ou “cegueira de cores“, que é a incapacidade que algumas pessoas têm de diferenciar algumas cores. Através da simulação destas deficiências, é possível visualizar como um site é visto por quem não tem a visão perfeita.

Sobre o Colorblind Web Page Filter

Apesar de a apresentação do software não ser lá das melhores (e cada vez mais eu acredito que o “skinless” é proposital), quem o acessa consegue, com facilidade, realizar a tarefa a que ele se propõe: enxergar páginas web (inclusive as imagens) como se tivesse alguma deficiência cromática.

O processo de simulação é bem rápido e a renderização não demora a acontecer. Através da escolha do tipo de cegueira de cores que se quer simular e mais algumas outras opcionais (como desabilitar filtro de imagens, desabilitar CSS, etc), de forma ligeira o site é renderizado conforme se escolheu.

O Colorblind é uma ferramenta diferente e útil: diferente devido ao fato de não ser comum este tipo de simulação em se tratanto de desenvolvimento web, principalmente na parte de web design; útil porque, através da visualização e percepção de como uma pessoa que apresenta algum distúrbio desses enxerga o mundo, realmente dá o que pensar e, talvez, decidir se usar aquelas milhões de cores no seu site é realmente necessário…

256 cores seguras para web

No site do Colorblind Web Page Filter é possível encontrar algumas opções para “filtrar” como se deseja que a simulação da deficiência cromática seja apresentada. O mais importante é definir que tipo de deficiência cromática se quer simular dentre as mais de 10 disponíveis – muitas delas a maioria de nós sequer ouviu falar.

Após anos trabalhando com desenvolvimento web eu me perguntava o motivo de ainda existirem as “256 cores seguras para web“, mesmo diante de tantos avanços tecnológicos – de hardware e software -; com o passar dos anos; com a consolidação da informática e da internet na vida das pessoas; não seria possível que algumas pessoas utilizassem equipamentos tão antigos a ponto de nós, desenvolvedores, termos que garantir compatibilidade com máquinas obsoletas a esse ponto.

E foi acessando o Colorblind Web Page Filter que “a ficha caiu”. Na verdade, as tais 256 cores seguras para web ainda existem em função das pessoas que apresentam cegueiras de cores diversas. Como é possível simular no software, dependendo de qual deficiência se escolhe, a mesma página é exibida com cores completamente diferentes. Então, usando as cores seguras, é praticamente garantido que mesmo as pessoas com deficiência cromática visualizarão o site exatamente conforme foi desenvolvido com essas cores.

Conclusão sobre as cores nos sites

Então, fica a dúvida: “A partir dessas informações é para voltar a usar somente 256 cores nos projetos?”. E a resposta é: depende. No desenvolvimento web, como costumo dizer, deve-se analisar cada site, levar-se em consideração cada aspecto do briefing, cada assunto que foi tratado com o cliente, cada objetivo a que o site se propõe.

Por exemplo, se a situação é o desenvolvimento de um site para as classes A e B, com exigências de animações mil, com campanhas publicitárias em diversas mídias (online e offline), então, por favor, use e abuse dos recursos, interatividade e cores para atingir o objetivo do projeto; se estamos falando de um projeto governamental, aí a coisa muda de figura, já que os sites do governo devem, em tese, ser destinados ao maior número de pessoas possível de forma a garantir a total visibilidade, usabilidade e acessibilidade do mesmo – e existem até leis que tratam sobre o assunto.

Logicamente são bem distantes e a maioria dos projetos estará situado no meio destes dois extremos. Mas, diante disso, é possível constatar que, na perspectiva do desenvolvimento para web, mais importante que saber quantas cores usar em um web design é saber qual é o objetivo do projeto e qual seu público alvo para fazer o que for necessário e possível para que tudo corra bem e seja um sucesso.

Concorda?

Artigos Relacionados

• Recursos de usabilidade grátis
• Melhores editores WYSIWYG para seu projeto
• Ferramentas e recursos para desenvolvimento web
• Ferramentas gratuitas para testes de segurança em sites
• Ferramentas para o twitter
• 7 ferramentas para web designs melhores
• Dicas para um web design minimalista e usável
• Definição de acessibilidade e conexão com design
• “Acessibilidade Web: Sete Mitos e Um Equívoco”