BuscaPé, líder em comparação de preços na América Latina
Mary Design

Mary Design

O seu blog de design!!!

Mary Design RSS Feed
 
 
 
 

Os melhores sites são úteis e feios

Esse título peguei emprestado do artigo de Gerry McGovern pois achei inusitado e propositalmente queria chamar a sua atenção. Pensei em colocar um ponto de interrogação no final mas pensei “colocando um ponto final fica mais provocativo”.

Você deve ter pensando no mínimo algo como “O quê?! O Bruno, um webdesigner, dizendo que os melhores sites são feios?”. Bem, não sou eu que estou dizendo, é o que podemos constatar dando uma rápida olhadela pela internet.

Antes de tudo, claro que a afirmação acima pode parecer generalização. Mas como disse, foi apenas para despertar sua atenção para o fato que descrevo a seguir. Contudo, é claro que encontramos sites belíssimos e úteis por aí mas vamos falar aqui de sites conhecidissimos, famosos, que são úteis, dão a maior grana porém… são feios.

Sempre digo aos meus alunos, leitores e clientes que site bom é aquele que funciona e tem bom conteúdo. Um bom exemplo disso é o site Ponto Flash. Não é preciso dizer que, no aspecto do design, esse site peca bastante. Porém tem um conteúdo riquissimo. Quem aqui nunca procurou algo sobre flash e acabou caindo nele? Posso dizer com toda certeza que qualquer webdesigner que trabalha com Flash já passou por lá alguma vez na vida.

pontoflash.jpg
Quando você ler esse artigo, pode ser que o layout do Ponto Flash tenha mudado. Por isso estou falando desse layout aí da foto.

Podemos dizer que o Ponto Flash é um exemplo de site útil e feio. As cores não harmonizam, o amarelo dificulta a leitura, o logo é difícil de entender, mas e daí, lá tem o conteúdo que procuro e resolve meus problemas.

Outro bom exemplo de site extremamente útil e com design bem questionável é O Viajante. Este site é tão bom que faz parte dos sites de conteúdo da UOL. Nele encontramos informações riquíssimas sobre todos os destinos do mundo, sem falar na maravilhosa seção “barbadas & roubadas” onde os leitores dão as dicas de viagem. Esse é outro site que de tão relevante aparece no topo do Google quando procuramos informações sobre alguma cidade. Justamente um site cujo layout não se adapta bem a resoluções maiores que 800×600, um menu complicado de entender, um logotipo que se repete juntamente com um fundo vermelho, dificultando seu entendimento. Mas e daí, o que que tem? O importante é ter acesso a este conteúdo exclusivo que me ajudou em diversas viagens que fiz.

oviajante1.jpg
Aqui está o layout do Site “O Viajante” no momento em que escrevi esse artigo.

Outros exemplos famosos podem ser citados. Google parece um site criado nos primórdios da Internet quando ainda se usava o Mosaic. YouTube é um site tão simples que se eu apresentasse um layout semelhante para um cliente no mínimo ele iria dizer “tá muito careca, precisamos deixar ele mais colorido, vivo. Ah Bruno, seja mais criativo, como é que você quer vender um layout pelado desses pra mim, sem graça?”

E o MySpace? Uma salada de cores presentes num layout que nos remete aos portais quadradões de 1998. Além das chamadas, a única imagem visível é o logo. O resto são apenas cores hexadecimais, divs e fontes. Já o delicious é tão careca e tem um layout tão feio que a primeira vez que vi pensei logo de cara que tratava-se daquelas páginas fake com links patrocinados.

Agora o que tem em comum o Google, Youtube, MySpace e Delicious. Todas são ferramentas úteis, que favorecem a criação de conteúdo feito por qualquer pessoa, classificando as mais relevantes e portanto oferecendo um bom material. Sabemos muito bem que mesmo com um layout péssimo ou sem graça, Google, Youtube e MySpace ganham rios de dinheiro.

Moral da história: do que adianta um layout lindíssimo se o conteúdo do seu site não presta?

Exemplificando, sempre gosto de comparar o design à mulher: uma mulher bonita e burra não vai muito longe. A mulher feia e inteligente é útil, tem conteúdo e consegue fisgar os mais bonitos com suas cantadas inteligentes, mas pode ter no início uma dificuldade em sua aceitação. Agora uma mulher bonita, simpática, atraente e inteligente, é sucesso na certa, em qualquer lugar que chegue.

Portanto, um site com bom conteúdo e bom layout vai facilitar muito a sua vida. Afinal a primeira impressão é a que fica. Por isso se o seu conteúdo é fantástico, o design do seu site também deve ser.

Exemplos de bom conteúdo e bom layout não faltam: Submarino, MSN, Imasters, Trip, Bolsa de Mulher, National Geographic e tantos outros.

Cabe a nós, webdesigners, criarmos layouts nos atentando ao conteúdo, a facilidade de acesso e navegação, desenvolvendo formas de destacar conteúdos importantes sem quebrar a harmonia, a suavidade e o conforto na sua leitura. Nossa função é deixar a internet mais bonita, mas com equilíbrio, utilizando doses suficientes de beleza, sem alterar o sabor de um bom conteúdo.

Não leia esse artigo. Você já tem muita coisa pra ler.

Semanas atrás acessei o site d’O Globo e tive uma boa surpresa. Depois de muitos anos com o mesmo layout, resolveram modificá-lo por completo. No primeiro dia que acessei achei tudo muito bacana. As cores, a leveza… até que com o passar dos dias comecei a perceber que essa leveza não era tão grande assim.

O primeiro obstáculo que encontrei foi “reacostumar” os olhos. Como diz Steve Krug, nós não lemos uma página, apenas passamos os olhos. E com os olhos acostumados com o site anterior, tudo era mais fácil. Sabia exatamente onde estava tudo. Mas com o site novo tudo tinha mudado de lugar.

O destaque estava do lado esquerdo ao invés do direito. As chamadas tinham mudado sua

\nSerá mesmo que aquela chamadinha ali, da Alessandra Negrini, que está selecionado, \n merece ter um nível de destaque maior que a notícia que vem abaixo dela "Congresso faz último esforço concentrado antes das eleições"?

\nAcredito que em pouco tempo toda essa estrutura deverá ser repensada. Do que \n adianta tecnologia, um bonito layout, se a estrutura da informação não foi concebida \n se preocupando com o que poderia se tornar excesso ou irrelevante para o usuário?

\nÈ muita informação, de dar dor de cabeça. Ao entrar no site me sinto num lugar \n barulhento, onde todos gritam, como nas antigas bolsas de valores, antes da informatização, \n onde os operadores berravam como malucos. É dessa forma que me sinto no site do O Globo.
\n

\n E isso não é "privilégio" só do O Globo Online. Essa semana instalei o Google Deskbar. \n O software promete uma infinidade de informações em seu desktop. Olha que interessante: \n notícias em tempo real, previsão do tempo, aniversariantes do dia puxados de sua lista \n do orkut, fotos que ele caça no seu computador e fica mostrando pra você… que bacana! \n Mas peraí. Pra quê eu preciso de tudo isso? Pra desviar minha atenção quando eu ver \n uma notícia interessante, deixando de trabalhar? Previsão do tempo? Pra quê se eu não \n sou agricultor, não vou à praia amanhã nem viajo todos os dias?

\nEstamos vendo nascer o excesso de informações que os estudiosos diziam tempo atrás que \n iríamos ter um dia… acho que já estou sofrendo disso. Todo dia lançam uma nova preocupação \n em nossa vida: tenho que acessar o orkut, responder scraps, atualizar fotolog, ler as notícias da última hora, toda hora ( atualizadas de hora em hora ), ler fóruns, conversar no MSN, falar \nno Skype, agora até vídeo eu tenho que atualizar no You Tube. Tudo isso junto, feito ao mesmo\ntempo. Pra quê?”,1] ); //–>

Será mesmo que aquela chamadinha ali, da Alessandra Negrini, que está selecionado, merece ter um nível de destaque maior que a notícia que vem abaixo dela “Congresso faz último esforço concentrado antes das eleições”?

Acredito que em pouco tempo toda essa estrutura deverá ser repensada. Do que adianta tecnologia, um bonito layout, se a estrutura da informação não foi concebida se preocupando com o que poderia se tornar excesso ou irrelevante para o usuário?

É muita informação, de dar dor de cabeça. Ao entrar no site, me sinto num lugar barulhento, onde todos gritam, como nas antigas bolsas de valores, antes da informatização, onde os operadores berravam como malucos. É dessa forma que me sinto no site do O Globo.

E isso não é “privilégio” só d’O Globo Online. Essa semana instalei o Google Deskbar. O software promete uma infinidade de informações em seu desktop. Olha que interessante: notícias em tempo real, previsão do tempo, aniversariantes do dia puxados de sua lista do orkut, fotos que ele caça no seu computador e fica mostrando pra você… que bacana! Mas peraí. Pra quê eu preciso de tudo isso? Pra desviar minha atenção quando eu ver uma notícia interessante, deixando de trabalhar? Previsão do tempo? Pra quê se eu não sou agricultor, não vou à praia amanhã nem viajo todos os dias?

Estamos vendo nascer o excesso de informações que os estudiosos diziam tempo atrás que iríamos ter um dia. Acho que já estou sofrendo disso. Todo dia lançam uma nova preocupação em nossa vida: tenho que acessar o orkut, responder scraps, atualizar fotolog, ler as notícias da última hora, toda hora (atualizadas de hora em hora), ler fóruns, conversar no MSN, falar no Skype, agora até vídeo eu tenho que atualizar no You Tube. Tudo isso junto, feito ao mesmo tempo. Pra quê?

Cuidado, podemos ficar todos loucos.

Vamos tentar escapar disso!

Internet para quem não vê

Quando lançaram o novo site do Jornal O Globo no ano passado, escrevi um artigo fazendo uma crítica a sua nova forma de organização das manchetes. Uma verdadeira salada de chamadas, sem uma ordem de importância bem definida.

Deixa eu entrar aqui no site do O Globo para exemplificar o que estou querendo dizer… no momento que escrevo esse post, Segunda, dia 25/06/2007, temos na mesma ordem de importância a notícia “Primo de Saddam vai a forca” e logo ao lado uma informação importantíssima “Fábio Assunção acompanhado, mas não com a namorada oficial”. O que tem a ver Fábio Assunção traindo a namorada com o primo do Saddam sendo enforcado no Iraque? Complicado…

Além disso contei 104 chamadas visuais apenas na primeira tela, incluindo os 24 botões só no menu do topo, onde tentei mostrar a overdose de informação que a primeira página trazia ao coitado do leitor.

Analisei tudo isso pelo lado de uma pessoa que tem a capacidade de ver. Mas como o site é visualizado por aqueles que não vêem?

Sim, estou falando dos deficientes visuais. Eles também acessam a internet e parecem muito felizes por isso. Felizes até topar com sites como o do O Globo.

Veja nesse vídeo como os deficientes visuais navegam pela internet e quais dificuldades encontram. Você verá eles navegando não só no O Globo como também na Americanas, Banco do Brasil e outros sites.

Um vídeo essencial para discutirmos a acessibilidade web. Depois de ver esse pequeno documentário, aposto que você verá a construção de sites por um outro ângulo. Até eu comecei a rever meus conceitos depois desse vídeo.

Então senta que lá vem a história!

40 dicas para tornar seu site mais eficiente e funcional

Essas 40 dicas são ótimas e assino embaixo. Foram passadas para mim pelo amigo Luiz Rodrigues, aluno também do Curso Online de Design Web. A fonte dessas 40 maravilhosas dicas é a Revista “Aprenda Criar Sites” Ano III Nº12. Para quem já conhece, vale a pena ler de novo, para os que não conhecem, leiam!

1. Menos é mais: essa máxima há muito tempo usada para a arte gráfica e o design também é válida para a Web. Ao planejar seu site, pense de forma simples. Páginas de Web rebuscadas e cheias de movimento já deram o que tinham que dar, mostrar ícones se mexendo e animações complexas não vão levar a nada, no máximo à perda de foco para o que realmente deve ser destacado em seu site.

2. Informações a dois cliques: planeje seu site de tal forma que toda e qualquer informação deve ficar a dois ou no máximo três diques da Home (página inicia!) de seu site. A idéia é facilitar ao máximo o acesso do internauta às informações.

3. Cuidado com as animações: com o surgimento de programas gráficos de animação como o Flash, o uso de animações se tornou indiscriminado. Os criadores de páginas na Web seguiam a linha de quanto mais animações, melhor. Hoje basta você pensar no que de fato é necessário para seu site. Use, sim, o advento da animação, mas dose e pondere com a real necessidade da utilização desse artifício.

4. Cores similares sobrepostas: cuidado ao usar cores similares, principalmente quando elas precisam ser sobrepostas, como um logo laranja sobre um fundo amarelo, por exemplo. Por mais que em seu monitor esteja tudo claro, lembre-se de que há inúmeras variações de brilho e contraste de monitor para monitor e que aquilo que está claro para você pode surgir como uma grande imagem chapada a quem estiver acessando seu site.

5. Logomarca à esquerda: esse já é um padrão na Internet mundial e que vale a pena ser levado em conta. Sempre que possível, use a logomarca da empresa no canto esquerdo superior do site. Esse local facilita a visão da logomarca, além de ser um dos principais pontos de atenção que as pessoas têm ao acessar um site.

6. Dê uma prévia do assunto a ser tratado: quando se tem muito conteúdo no site, é interessante fazer um pequeno resumo na Home do que será tratado em determinada seção. Você pode fazer links em forma de manchetes, com um título da seção e uma pequena parte do texto que será tratado nela, É mais ou menos o que é feito hoje nos grandes portais da Internet.

7. Animações de abertura: animações na abertura do site foram tendência durante um bom tempo, mas aqui também se encaixa a pergunta da real necessidade desta animação. Ela agregará informações substanciais ao conteúdo do site? Ou está lá só para “fazer uma gracinha”? Se a resposta for a segunda opção, por que não tirar essa animação e proporcionar um acesso mais rápido ao site? Mas não encare isso como uma regra, e sim como uma dica prática.

8. Caso a animação inicial se faça necessária: só use uma animação de abertura, ou algo assim, se for de suma importância e precise ser feito. Nunca, mas nunca, deixe de incluir a opção de pular a abertura do site e ir direto ao conteúdo.

9. Contatos sempre à vista: muita gente se esquece de uma das utilidades mais básicas de um site: gerar contato do internauta com a empresa ou pessoa dona do site. Mas como esse contato acontecerá sem que a pessoa que visita o site tenha acesso fácil a informações como e-mail da empresa, telefone e endereço? Por isso. não pense duas vezes e espalhe e deixe bem visível essas informações por todo o site.

10. Formulário de contato: e se o contato é tão importante, incentive esse processo incluindo um formulário de contato prático e simples ao site, isso será sempre positivo.

11. Mapa do site: se há muito conteúdo no site e a quantidade de seções acabou ficando maior do que deveria ser, não hesite em colocar um link para um mapa/resumo do site. Coisa simples e direta, para o entendimento imediato de como estão dispostas as informações no site.

12. Menu de seções sempre à vista: outra maneira de facilitar a vida de quem visita o site é deixar sempre à vista todos os links/botões de acesso às seções. Muitas pessoas costumam cometer o erro de criar seções que possuem somente um botão de voltar, então temos de retornar à Home para só assim ter acesso aos links de acesso às seções. Por que não facilitar isso deixando sempre à mão todos os links/botões do site?

13. Botão de página inicial sempre à vista: quando falamos em facilitar o acesso às sécões, não esqueça que a Home também é uma delas, na verdade a mais importante. Portanto, inclua sempre um botão de acesso à página inicial por todo o site.

14. Logomarca como link para a página inicial: com o uso cada vez mais cotidiano da Internet, certas funcionalidades acabam caindo no conhecimento popular, se tornando quase que automáticas. Uma delas é que a logomarca da empresa no site remeta à página inicial quando clicada. Portanto faça isso também, é simples e torna a navegação ainda mais prática.

15. Itens desnecessários: muitas vezes complicamos a navegabilidade de um site com o argumento de que há muita informação a ser incluída nas páginas. É verdade, isso acontece, mas às vezes enxertamos o site com informações e funcionalidades irrelevantes. É possível ver em muitos sites de empresas grande, botões com opções para tornar aquele site a página Inicial do usuário ou incluí-lo nos favoritos do navegador. Neste caso se encaixa novamente a pergunta: isso é de fato necessário? O número de pessoas que colocaram sua página como a inicial é relevante? Além do mais, ocupam um espaço precioso que podia ser usado por informações relevante ao conteúdo e ao objetivo real do site.

16. Datas no topo da página: outra coisa que se tornou comum, mas totalmente dispensável: site que inclui no topo informações como hora, dia da semana, mês e ano. A não ser que estejamos falando de grandes portais que oferecem notícias, não há a mínima necessidade de informar ao seu internauta que dia e horas são naquele momento.

17. Marcas d’água: esse é um costume importado do design gráfico direto para Web, mas que merece cuidado. Em um trabalho impresso, você tem a possibilidade de visualizar como uma marca d’água saiu e se não
atrapalhou o entendimento das informações de fato importantes. Na Web não há como saber como essa marca d’água ficará em monitores com a calibragem diferente da sua. Então, pense duas vezes antes de usar esse artifício.

18. Links relacionados: citar links relacionados ao site que está fazendo também é algo que pode ser evitado, ocupa espaço e nem sempre agrega informações relevantes. Caso esse links sejam realmente necessários,
que tal incluí-los dentro do próprio texto?

19. Seja objetivo: por mais óbvio que isso possa parecer, é algo extrema valia. Antes de criar seu site, ponha no papel o que de fato você quer comunicar e transmitir. Entenda a visita ao seu site como uma
oportunidade e não espere que o internauta vá visitar e ler todo seu site, pois na grande maioria das vezes isso não acontecerá. Portanto é preciso ser claro e objetivo, dê de imediato ao internauta as informações principais sobre seu trabalho e do porquê da existência desse site.

20. Na página inicial já diga a que veio: pegando carona na dica anterior, entenda sua página inicial como o primeiro contato do internauta ao seu conteúdo. Por isso, deixe bem claro o que você e sua empresa fazem,
quais suas especialidades. Nunca conte com a boa vontade do internauta, achando que ele irá sempre buscar informações em lugares específicos.

21. Internauta não tem de descobrir como navegar: muito sites inovam na maneira de navegar dentro das páginas que oferecem, transformam seus botões e acesso em imagens que se movem ou usando botões que são parte de um grande cenário. Isso pode significar nota 10 em inovação, mas 0 em funcionalidade. Cuidado ao fazer isso, há casos de sites que priorizam o design em detrimento da funcionalidade, quando na verdade o design tem de ser uma ferramenta para se chegar a um site funcionai e eficiente.

22. Qual seu tipo de público?: é claro que há casos distintos de como criar um site. A primeira pergunta a ser feita é: quem vai acessar esse site? Tomando como base essa resposta, você pode, sim, arriscar-se numa
página inicial mais inovadora e fora dos padrões, mas se o site não for voltado para um público bem específico, a melhor saída é sempre priorizar a funcionalidade e a objetividade. E em tempos de uma rede cada vez mais sortida, fica mais difícil definir quem de fato vai acessar seu site. Portanto, fique atento àquilo que pode representar uma dificuldade desnecessária ao internauta.

23. Menus que se desdobram: cuidado com menus que se desdobram demais. Há casos que se torna quase um desafio conseguir clicar em uma subseção desses menus. Caso esse desdobrar seja de fato necessário, tente fazer com que todas as subseções venham logo em seguida aos botões iniciais.

24. Botões do lado esquerdo: assim como a logomarca da empresa já se tornou padrão ficar à esquerda do site, os botões de acesso às seções também. Não é uma regra, longe disso, mas, se possível, aproveite-se
dessa ideia para criar seu site. Botões do lado esquerdo do site já estão hoje no consciente coletivo dos internautas.

25. Trabalhe o texto: lembre-se sempre de que o texto é parte, sim. do layout do site. Muita gente costuma apenas “desovar” as informações ao longo da página, deixando tudo muito carregado e cansativo. Use o texto do site ao seu favor. Dívida por assuntos, crie boxes de cores diferentes para destacar determinada informação, faça colunas. Isso ajudará demais na montagem de um layout agradável.

26. Use um espaço determinado para animações e afins: em l vez de usar o site para inserir diferentes imagens ou animações, crie um espaço fixo em seu site para incluir isso. Você pode fazer uma barra superior, por
exemplo, com algo se movendo, trocando imagens discretamente. Aproveite e mantenha esse contexto em todo o site. Isso ajuda a dar um padrão à sua página, evitando a bagunça de diferentes informações portados os lados.

27. Foco em solução: vale sempre lembrar que o site existe para cumprir uma função, seja de divulgar uma empresa, vender um produto ou simplesmente tornar público um currículo ou características profissionais
de alguém. Mas o que é importante destacar aqui é que todo site tem uma função principal. Então é sempre indispensável focar nesse objetivo e na solução que a criação deste site se propôs. Planeje o site voltado para isso, baseado na solução que tem de ser dada.

28. Destaque, se for preciso: às vezes, uma seção do site precisa de mais atenção que as outras, então, fique à vontade para fazer o botão específico desta seção de uma cor ou tonalidade diferente. Não é a saída
mais indicada para compor a beleza do site, mas resolve bem a questão da necessidade de destaque.

29. Muitos destaques não destacam nada: mas vá devagar com os destaques. Muitos sites tentam destacar tudo de uma só vez. Aqui a questão é simples, quando tudo está destacado, nada se destaca. Então
pegue leve com negritos e cores berrantes em excesso.

30. Site Map: antes de partir. Para a construção de site, é fundamental a criação de um site map, que nada mais é do que um pequeno guia/esquema de seu site das seções e suas ramificações. É algo bastante simples de fazer, mas que fará uma diferença enorme na hora de criar o site. Se você tiver uma visão completa do que irá fazer, fica tudo mais claro para criar um site funcional.

31. Quem é você? O que essa empresa faz? Às vezes nos esquecemos de algo básico: falar quem somos ou o que a empresa dona do site faz. Não se pode acreditar que todo mundo que vá acessar seu site, saiba onde está entrando. Por isso, faça um pequeno resumo logo na entrada do site, algo simples, com informações rápidas e diretas.

32. Cuidado com as fontes: fique atento ao uso de mais de duas fontes diferentes em seu site ou até da mesma fonte sem tamanhos diferentes. Isso gera uma tremenda confusão na organização e no layout.

33. Crie um padrão e siga com ele: ao montar seu site, cuidado para não dar uma cara diferente a cada seção. Você pode até mudar cores, variando essas seções, mas crie um padrão para o site e o siga durante todas as páginas. É horrível parecer estar em um site diferente cada vez que se entra em determinada seção.

34. Se precisar explicar, é porque não está funcional: aqui a dica é simples, se for preciso colocar alguma explicação em qualquer parte do site de como o internauta deve agir, é porque a funcionalidade do site falhou.
Evite ao máximo usar deste artifício.

35. Crie um caminho: organize os assuntos e links a serem tratados no site,de forma a dar importância primeiramente ao que mais importa. Mostre antes de tudo o que você
mais quer destacar no site. Isso não precisa ser explícito, mas arquitetando seu site de correta, você poderá internauta pelos temas mais importantede seu site.

36. Menu e o resumo em uma só palavra: crie um menu para navegação em seu site e aceite o desafio de resumir cada l seção com uma só palavra. Se conseguir fazer isso, você
terá praticamente tudo o que pode ser encontrado no site de forma direta e objetiva.

37. Navegabilidade em mutação: não transforme seu esquema de navegabilidade em algo eterno. Por melhor seja que seu esforço para deixar tudo prático e fácil, dúvidas de internautas sempre aparecerão. Se
isso acontecer ótimo, use-as para aprimorar o esquema usado por você para a navegação do site.

38. Ilustre: o bom uso das imagens pode ajudar a mostrar o que cada seção do site traz. Quando possível, ilustre os links com imagens relacionadas ao tema.

39. Separe os assuntos por temas: se a quantidade de conteúdo a ser disposta for muito grande, facilite o entendimento de suas informações agrupando os tópicos em temas. Isso facilita demais na hora de buscar
determinado assunto dentro do site.

40. Siga o exemplo: há ótimos sites com bons exemplos de como resolver de forma inteligente a disposição de conteúdo aliado a uma navegabilidade inteligente, confira alguns exemplos: http://www.sp.senac.br/jsp/default.jsp?newsID=0 e http://g1.globo.com/

Categories

Tags

Archives

Popular Posts

  • None found

Recent Comments

Links

Meta