Por razões que são quase demasiadamente numerosas para listar – marketing, vendas, psicologia, confiança, percepção profissional, etc – a forma como o seu site é vista pelos seus usuários deve estar primeiramente, todo em sua cabeça. Os seguintes 7 lembretes importantes irão lhe ajudar a ir na direção certa, mas você é o único que conhece seus clientes (ou deveria) para os melhores pontos de personalização.

1 – Foco do usuário

É importante nunca perder o foco. Você precisa pensar como o seu usuário. Seus clientes precisam sempre encontrar o que eles procuram, seja para pagar uma conta, encontrar um telefone ou o endereço da sua empresa com extrema facilidade. Faça sempre que possível que a vida de seu usuário seja facilitada. Quanto mais complicado e demorado for para encontrar a informação desejada, mais eles abandonarão seu website, e consequentemente não voltarão.

2 – Compreensão do usuário

Entenda a realidade de seu website. Ele é comercial? Então faça com que ele seja visto desta forma. Não há a necessidade de confundir a cabeça de seu usuário/cliente. Ajude-o a encontrar de forma fácil e rápida o que ele deseja. Uma boa idéia é disponibilizar ferramentas como sitemaps ou sistemas de busca.

3 – Velocidade de carregamento

Sim, seu site precisa carregar rápido, então velocidade é importante. Pra isso, basta reduzir o tamanho/qualidade das imagens, não exagerar no tamanho do flash, scripts, etc. Analise cuidadosamente as funcionalidades para que cada uma delas tenha seu valor.

4 – Layouts simples, às vezes, são a melhor opção

O Flash é uma ferramenta poderosíssima, quanto a isso não há discussão, principalmente quando é para demonstrar algo que é difícil colocar em palavras. Mas ele tem um problema tão forte quanto o seu poder, o peso de suas animações! As vezes suas animações se tornam tão pesadas que as pessoas perdem até a paciencia para carregá-las, mesmo sabendo que será repleto de efeitos, movimentos e etc.
Além disso, ele acaba sendo uma grande distração, o que pode tirar (e vai!) o foco do usuário. Dependendo da sua aplicação, a utilização de animações deste nível não são indicadas.

5 – Necessidade do usuário

Defina antes de desenvolver o layout todo o tipo de pessoa que você espera que visitará seu website e considere tudo o que eles desejam e procuram. Depois desta análise, tende desenvolver um layout que abranja o maior número de usuários (definidos no início do projeto) possíveis a encontrar os itens mais importantes em seu website.

6 – Compatibilidade entre navegadores

Que o site deve funcionar em todos os navegadores, isso já não é mais nenhuma novidade. Porém muitos se esquecem de testar as aplicações javscript. Algumas, infelizmente, não funcionam corretamente em todos os navegadores, então nunca se esqueça de testá-las exaustivamente.

7 – Sem surpresas

Use o óbvio, comum e padrão em elementos padrões de um website. Navegação não é algo que necessite ser muito criativo, pois ele precisa ser imediatamente compreendido e utilizável. Constância no mundo ‘www’ é, atualmente, uma coisa boa. Ela facilida a vida das pessoas pois ao acessar, o usuário se sente num “território familiar”.

Portanto, mais do que cair em profunda concepção metafórica ou querer mostrar todos os truqes possíveis, você deve concentrar-se em tornar o seu site uma solução para os seus clientes. Tornar a vida deles mais simples e fácil.

Adaptação do artigo: How to create an attractive user friendly

Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante. A usabilidade pode também se referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência percebida de um objeto. (ver definição completa em: pt.wikipedia.org/wiki/Usabilidade)

O seu website deve possuir um layout simples, de fácil interpretação e acesso à informação. O visitante, quando entra em alguma página, scaneia o site rapidamente a procura da informação que ele deseja (ver artigo sobre CopyWriting), se em pouco tempo ele não encontra, ele irá embora e talvez nunca mais volte. Muitas vezes utilizamos sistemas de busca em nossos sites para que o visitante não fique procurando o que deseja. Caso ele não encontre pelo sistema de busca, ele já entende que aquela página não possui o que ele está procurando. Ele irá sair e provavelmente não voltará novamente. Mas caso encontre, ele permanecerá (pelo menos por alguns instantes a mais) em seu site e é nessa hora que começa a guerra visitante x usabilidade.
Se o seu site tem uma boa interface, uma boa navegação, um conteúdo claro e simples, existe uma chance de você conquistar esse visitante, mesmo que o assunto não seja aquele que estava sendo procurando inicialmente (isso acontece comigo com certa frequencia, por sinal). Interfaces complexas, com títulos de difícil interpretação e assimilação confundem o usuário, fazendo com que ele desista de procurar o que deseja ou que não se interesse pelo assunto e vá procurar outro site que seja mais simples de se encontrar o que ele procura.

Por aí ja deve ter dado pra sentir o drama, né? Usabilidade é um conhecimento que todo designer deve ter. Layouts aplicados com essa preocupação são melhores, mais fáceis, mais rentáveis e muitas vezes (mtas mesmo – mas isso é questão de estilo e pauta pra outro post ) mais bonitos.
Eu fiz uma lista com algumas dicas de como melhorar a usabilidade de seu site ou de seus layouts, veja:

1. Copywriting

Sempre faça uma boa descrição do que se trata o site para que o visitante, na hora que entrar, já saiba o tipo de conteúdo que será encontrado ali para que ele não perca tempo tentando descobrir. Mas lembre-se, Copywriting é uma parte muito importante quando o assunto é usabilidade, por dois motivos: 1) facilidade de encontrar o item desejado; 2) prender o visitante; Um bom copywriting realmente prende o visitante, mesmo que o assunto não seja o procurando inicialmente. Para entender melhor como o copywriting funciona, leia um artigo (traduzido por mim) sobre o tema neste link.

2. Facilidade de navegação

Certifique-se de que seu site possui uma fácil navegação (peça pra algum amigo – de preferencia que não entenda do assunto – que navegue em seu site) e verifique se haverá dificuldade de interpretação dos links, de navegação e etc. Nestes testes, sempre acabamos mudando alguma coisa.

3. Páginas leves

Se o seu visitante tem uma conexao dial-up, por exemplo, ele demorará muito para carregar uma página que possui muitas imagens, animaçõe e etc. Então, otimize o máximo que puder o tamanho de suas páginas. Sites que demoram para serem carregados, mesmo quando se tem uma conexao banda larga, irritam seus visitantes e eles, com certeza, irão embora sem nem ver a sua “obra”. Otimização SEMPRE (que possível, claro)!

4. Evite músicas, vídeos e animaçoes na página inicial

Estes recursos são ótimos e muito úteis, mas quando usados da meneira correta. Imagina o seu usuário ter que carregar uma animação 3D sempre que tiver que carregar seu site? Já imaginou o dilema? E musica? Já pensou que ele pode estar acessando a sua página às 3h da manha de uma quarta-feira e o som não está baixo? Posso listar uma infinidade de problemas que estes recursos (chatos) podem causar a seus usuários e fazer com que eles não voltem, ou pelo menos demorem bastante. Mas se mesmo assim vc não vê outra alternativa e tem que colocar algum destes recursos em seu site, NUNCA se esqueça que: se houver música, o botao OFF deve estar visível a 10mil anos luz de distância; Se houver vídeos, o botão de STOP deve estar visível ou pelo menos seja simpático e não inicie o video automaticamente; Se houver animações, a opção “pular introdução” é uma ótima saída.
Você não vai querer que seus visitantes tenham aversão ao seu site, né? Então atende para esta dica.

5. Usar os standards de design a que os usuários estão habituados

Todas as páginas de Internet têm um conjunto de regras que convém obedecer, como por exemplo: sublinhar links, permitir sempre o retorno à página principal ou ter menus de navegação e muitas outras “regras”. Quando isso não acontece os visitantes ficam confusos, mas claro que isso é muito relativo. Ele pode variar conforme a usabilidade do seu site mas é uma preocupação que deve estar sempre presente durante a criação e desenvolvimento. Nunca se esqueça disso!

6. Escrever o conteudo do site sem erros ortográficos

Um erro ortográfico pode indiciar que não houve muito cuidado na preparação do site. Se tiver muitos erros ortográficos e frases mal redigidas, parecerá que o site é pouco profissional e terá pouca credibilidade. E não é isso que queremos, né? Então tenha sempre um português, no mínimo, bom. Pegue corretores ortográficos (tipo, word) ou um amigo para corrigir seus textos. É uma boa saída para que fugiram das aulas de português.

7. Escrever o texto de forma legivel e com uma dimensão adequada

Para garantir uma boa usabilidade, o texto deve ser escrito com letras não mto grandes e legiveis. Deve também usar cores que permitam uma leitura correta do texto (um bom contraste ajuda muito – mas cuidado com os daltônicos!). E não se esqueça das pessoas com problemas de visão , preocupe-se em construir seu site onde seja possível se alterar o tamanho da fonte pelo browser sem que haja quebras no layout.

8. Restringir acesso à informação

Evite restringir o acesso ao conteúdo com senhas. A maioria deles não fara um cadastro em seu site só para continuar lendo um artigo. Caso isso seja necessário, mostre ao seu usuário que ele terá outros benefícios. E ainda sim, apenas as pessoas realmente interessadas sobre o tema do seu site farão o cadastro.

As dicas encontradas aqui não são apenas para se ter um bom layout mas também para se ter uma boa navegação. Elas são importantes e devem estar presentes desde a criação do layout até o desenvolvimento. Nunca se esqueça que seu site não foi feito apenas para você e sim para os seus visitante. Se preocupar com eles é uma das tarefas de um bom designer.

1. Ignorando a compatibilidade entre navegadores

Este é provavelmente o problema número 1 com desenvolvimento web. Já que você tem que ter layouts que têm a mesma aparência, não importa qual browser os seus visitantes utilizam para visualizar a página. Este fato pode, por vezes, parece ser a causa mortal de sua existência: há diferenças fundamentais na forma como o Internet Explorer visualiza uma página versus Firefox. Embora não seja tão má como se costumava ser, há ainda muita diferença entre os navegadores.
É fácil para desenvolvedores de web desenvolver um layout no seu navegador favorito e sem se preocupar com a aparência que terá em outros grandes navegadores, como muito provavelmente você não verá as diferenças.(Eu sou um grande agressor do presente. Às vezes eu vou fazer o layout do site no Firefox e esqueço de checar no IE antes de terminar!) Embora existam alguns métodos comprovados e verdadeiros para ajudar a salvaguardar o seu browser para diferentes renderizações de layouts, a melhor forma de garantir que tudo está em perfeitas condições é só usar o Browsershots. Browsershots dá uma imagem exata do que se parece com o seu site em vários browsers e em plataformas diferentes, permitindo a você ter certeza que nada parece errado em um navegador.

2. Não se importar com pequenas resoluções

Embora um bom número de nós desenvolvedores web têm grandes monitores em seus computadores – e são muito orgulhosos com isso – uma boa parte dos visitantes do seu site talvez não. Você pode verificar isso em programas de análise (o Google Analytics faz isso maravilhosamente bem) para ver qual a resolução dos seus visitantes. No entanto, existe um mundo de diferença na forma de um projeto aparece numa resolução 1024×768, por oposição a uma resolução 800×600. Você pode fazer um lindo design, porém inútil.
Contabilidade para pequenos navegadores, significa que todos os seus visitantes estão felizes ao encontrar um design perfeito e a informação de que necessitam.

3. Não considerar frameworks

Se você está desenvolvendo um layout CSS a partir do zero, você pode querer perguntar-se porquê. Assim como não há nada novo sob o sol, o mesmo acontece com o CSS. São muitos os quadros CSS lá fora, como Blueprint quadro e os 960 CSS Framework. Estes são criados para ajudar você a criar layouts à prova de bala, sem ter de começar algo do zero. Estes esquemas têm cruz-browser compatibilidade e foram rigorosamente testadas. Realmente, a menos que você esteja fazendo algo que precisa ser totalmente radical pantloads de código personalizado, basta usar um quadro CSS.
Por quê reinventar a roda?

4. Não utilizando classes genéricas

Ele pode ser bastante fácil não pensar no futuro quando estamos desenvolvendo sites. Muitas vezes nós o nomeamos nossas CSS Classes com algo diferente cada vez que desenvolvemos um site, por oposição a fazer uma simples classe CSS que podemos reutilizar repetidamente ao longo do nosso projeto, sem ter que desenterrar o que usou antes. Isto irá assegurar que o nosso site premanecerá constant durante todas as páginas.

Você pode usar uma classe generica como:
(ps: o duplo ‘right’ é resultado de um bug no visualizador do nosso código. O código correto é .right {float:right}, claro.)

Para fazer as coisas floating à direita quando vc quiser, basta colocar uma ID como:

Eu uso geralmente pelo menos 3 classes genericas quando estou construindo um site:

5. Não validar o HTML

Aposto que você não sabia que a validação de seu HTML poderá também afetar o seu CSS, não é? Bem, ela pode. Primeiro e acima de tudo, você não pode validar o seu CSS até ter HTML válido. Em segundo lugar, há muitos casos que poderiam ser o HTML que está causando os seus problemas e não o código CSS. Muitas vezes pensamos que o nosso CSS altera o layout quando na verdade é um pouco de HTML malformados que ferra nosso layout. Uma DIV aberta aqui, outra class errada ali… ele poderia ser qualquer coisa. Verifique se o seu HTML está validado antes de você tentar diagnosticar um problema CSS.

6. Não validar o CSS

Eu costumava incomodar constantemente um amigo quando tinha problemas com o CSS. E ele sempre, pacientemente, sempre me perguntava: “Você validou o CSS? Se não, Qual é o erro?”. Não demorou mto pra eu aprender a validar o CSS antes de pedir ajuda.
Se você tiver validado o código CSS, as probabilidades de se ter um CSS compatível com todos os browsers é muito maior.

7. Usar imagens grandes como background

Muitas vezes, novos designers usam imagens superdimencionadas em seus layouts. Por exemplo, uma imagem de 3000px X 5000px para não ter problemas com eventuais resoluções. Em vez de usar uma imagem muito grande, eles poderiam usar uma imagem pequena e repetí-la através do CSS como num passe de mágicas!
A diferença é enorme: em vez de carregar uma imagem de 200kb, você carregará apenas uma imagem de alguns bytes.

Se você tiver uma imagem de fundo muito grande, você estará perdendo de 2 maneiras?

1. Uso desnecessário de banda;
2. O usuário esperará mto mais tempo para carregar a imagem de fundo.

Às vezes, grandes imagens são inevitáveis, especialmente com a recente tendência de desenhar esquemas ilustrativos na web. No entanto, repetir imagens ou cores sólidas no fundo é a melhor opção.

8. Usar CSS para tudo

Quanto as pessoas aprendem sobre uma tecnologica, elas ficam mto excitadas sobre isso e querem usar isso para tudo, mesmo quando essa opção não é a melhor para o seu projeto.
Por exemplo, mtas vezes é muito mais fácil usar tabelas para organizar o conteúdo do que criar um layout baseado em CSS com floatings e DIV’s. Nós temos que nos lembrar a ração do porque usar essas tecnologicas, como o CSS é porque ela deve acelerar o desenvolvimento. Quanto isso começa a nos atrasar, talvez estejamos indo pelo caminho errado.

9. Usar CSS inline (no HTML)

Este é o pecado original de desenvolvedores web, e isso acontece mais do que você gostaria de saber. Se você está construindo um projeto, quase sempre irá optar por manter o seu CSS e HTML separados. Isso garante que quando (aviso prévio, eu não disse “se”), você decidir mudar o design do site, você não terá que cavar através do HTML de cada layout e encontrar os malditos CSS anexado a um elemento inline.

Ao invés de usar este:

Você deve mover o estilo para uma folha de estilo externa como este:

CSS inline quase sempre deve ser evitado. É fácil de usar e ótimo para testes, mas que provavelmente você não irá querer isso em seus códigos.

10. Utilizar muitos arquivos

Você já viu um layout com 12 CSSs diferentes anexados a ela? É um pesadelo para qualquer pessoa tentar fazer alterações em seu layout. Não só isso, diminui o tempo de processamento de cada ficheiro, como o navegador tem de fazer um pedido por cada um. É melhor usar um esquema simples que usa 1 ou 2 ficheiros de CSS. O tempo de analisar 12 processos contra um único arquivo é bastante significativo. Não só isso, você economizará o próximo fulaninho que terá que fazer as mudanças em seu layout com um monte de problemas.
Ninguém quer abrir 12 arquivos para fazer um simples, site-wide mudar!

Artigo traduzido e adaptado para o portugues (http://nettuts.com/articles)

Excelente idéia. Temos que admitir.

Parabéns Yurko! ;D

1. Não use mais do que 3 cores;
2. Livre-se de tudo que não é necessário;
3. O tipo (fonte) deve ser fácil de ler até mesmo para a sua avó;
4. Ele deve ser de fácilmente reconhecido;
5. Crie uma unica forma para o design do logotipo;
6. Ignorar completamente o que pessoas leigas (pais, cônjuge, outros) pensam sobre o desenho;
7. Confirme a opiniao de mais de 3 pessoas sobre o visual da logo;
8. Não combine elementos de logotipos populares;
9. Não use clipart sob quaisquer circunstância;
10. Ele deve ficar bem em preto e branco;
11. Certifique-se de que ele é reconhecível quando invertido e redimencionado;
12. Se o logotipo contém um ícone ou símbolo, assim como textos, cada um deve ter seu lugar para que eles se completem;
13. Evite as tendências recentes utilizadas no design das logos. Em vez disso, faça com que eles tenham um olhar atemporal;
14. Não utilize efeitos especiais (incluindo, mas não limitados a: gradientes, sombras, reflexos, outros).
15. Ajuste o logotipo em um formato quadrado, se possível;
16. Evite excesso de detalhes;
17. Considere os diferentes lugares e várias maneiras que o logotipo será apresentado;
18. Expresse sentimentos de ousadia e confiança, nunca fraqueza e aborrecimento;
19. Saiba que você não irá criar um logotipo perfeito;
20. O logotipo deve ter alguma ligação com aquilo que ela está representando;
21. Você deve surpreender o cliente com a apresentação;
22. Não use mais de dois tipos (fontes) diferentes;
23. Cada um dos elementos deve estar alinhado (esquerda, direira, centro, superior ou inferior);
24. O logotipo deve parecer sólido;
25. Saiba quem estará olhando para o logotipo antes de você iniciar o desenvolvimento dela;
26. Sempre escolha função ao invés de inovação;
27. Se a marca tiver um nome memorável, ela deve ser o logotipo;
28. Ele deve ser reconhecido quando espelhado;
29. Mesmo as grandes empresas precisam de pequenas logos;
30. Todos devem gostar do design da logo, não apenas a empresa que irá utilizá-la;
31. Crie variaçoes. Quanto mais variações, mais chances você terá de encontrar o design certo;
32. A logo deve ter um aspecto consistente em diferentes plataformas;
33. Ela deve ser fácil de se descrever;
34. Não use taglines na logo;
35. Faça sketches das suas idéia usando papel e lápis antes de trabalhar num computador;
36. Mantenha o design da logo o mais simples possível;
37. Não use nenhum “swoosh” ou “globo” como símbolo;
38. Ele deve ser visualmente equilibrado;
39. Evite brilhos, neons, cores escuras ou que causem aborrecimento;
40. O logotipo não deve quebrar nenhuma das regras citadas acima.

Quem tiver mais dicas, deixe uma mensagem para que eu vá adicionando na listinha. =D

Excelente idéia. Criativo demais… será que um dia teremos trabalhos brasileiros assim? Bom, eu ainda não tive a oportunidade de receber um cartão de visita como esse. Recebo apenas cartões comuns, nome da empresa e o nome do funcionario. Gostaria mesmo de ver coisas criativas como isso por aqui. ;D

Fonte: http://www.fubiz.net

Link para o meu perfil: http://www.colourlovers.com/lover/HitomiChan

Crie uma ilustração com as três peças disponíveis na ferramenta do site do concurso. Você pode aumentar as peças, rotacionar, e trocar as cores. As ilustrações mais legais vão ficar expostas no site do evento durante um ano.

Mãos a obra!

fonte: www.designgrafico.com.br

Quem pode participar do Casulo – Concurso de Arte Pública
O concurso está aberto a todos os estudantes, artistas ou não, que poderão participar com trabalhos figurativos, abstratos, fotográficos, gráficos ou tipográficos ou qualquer outro tipo de representação visual, criados com a utilização de ferramentas digitais.
Regulamento: www.oifuturo.org.br/concursocasulo
Fale com a gente: casulo@oifuturo.org.br

fonte: www.designgrafico.com.br