Briefing e contrato em mãos!

Com o briefing em mãos, está na hora de criar o mapa do site e fazer um brainstorming. É importante manter seu cliente a par do que você está fazendo para que ele saiba o que está sendo feito. Se você desaparecer durante as primeiras semanas, seu cliente vai começar a enviar e-mails ou ligar para o seu telefone para saber como que as coisas estão indo. Caso você atualize-o constantemente, ele se sentirá mais seguro em relação ao seu trabalho.

Cobrando o cliente nas datas certas

É importante que você lembre as datas de cobrança. Para isto, utilize lembretes como os disponíveis no iCal (para Mac) ou até mesmo configure o Google Calendar para lhe enviar um lembrete três dias antes do vencimento de cada parcela. Dois dias antes, envie o e-mail de cobrança ao seu cliente para que ele lembre de pagar no dia.

Peça para que confirme o pagamento, assim você pode deixar anotado em seu calendário que ele efetuou o pagamento. Aproveite e agradeça toda vez que ele pagar ;)

A metade do projeto

Chega um ponto do projeto onde você já tem tudo quase pronto: o design foi aprovado e codificado em CSS/HTML e agora basta acertar os detalhes finais. Essa é uma das partes mais demoradas.

Os detalhes são os mais demorados

É importante fazer o seu cliente parte deste processo final para que ele possa verificar se está tudo como planejado.

Comece a fase do beta-testing, onde você analisa se o site funciona em todos os navegadores mais atuais, assim como sistemas operacionais diferentes. O Adobe Browser Lab é uma ótima ferramenta que permite que você teste em navegadores e SOs diferentes sem ter que instalar nada.

Lance o “Release Candidate”

Assim que o site estiver pronto e você acha que já dá pra deixá-lo visível ao público, vá fazendo testes variados com seu cliente. Acesse todas as páginas, reveja todo o conteúdo. Peça para que seu cliente tire um tempo para navegar pelo site todo quando ele tiver um tempo livre – evite de fazer isto durante uma reunião com ele, para que ele possa focar melhor.

Revendo o site durante seu tempo livre, o cliente pode se focar inteiramente no site e verificar tudo com calma. Assim não ocorre do cliente olhar tudo rapidamente e aprovar, pedindo para fazer alterações mais tarde, quando o contrato já expirou.

Colocando no ar e última cobrança

Pronto! Basta publicar o site a todos e fazer a cobrança final (se houver). Mas não pense que acabou! Se você quiser ter um serviço diferente, ainda existem mais coisas que podem serem feitas.

Manutenção e serviços adicionais

Ofereça serviços de manutenção ao seu cliente. Estes serviços podem variar de atualizar o código do site quando necessário até atualizar fotos dos produtos. Você pode oferecer um valor mensal fixo ou um preço especial por atualização. No entanto, lembre ao cliente que após o site ser publicado, alterações maiores no design e no conteúdo devem ser orçados a parte como um novo projeto.

Serviços adicionais podem incluir um acompanhamento de visitas e SEO (seu site já deve ter SEO, mas lembre-se que estas otimizações devem ter um acompanhamento constante para melhores resultados).

Agora sim, acabou. Seu projeto web foi entregue, o cliente adorou seu trabalho e você está feliz. Parabéns!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

O contrato: definindo tudo antes do início

Contrato: peça fundamental

O contrato é de extrema importância e muitas vezes é ignorado pelos web designers (e até mesmo os outros designers das outras áreas). Ele serve para proteger o seu interesse como profissional e os interesses do seu cliente. Eis algumas coisas que devem ser explícitas no contrato:

Descrição do projeto, revisões e layout

O que seu cliente está contratando? Explique todo o processo, desde o briefing até a geração de alternativas e finalmente o formato de entrega do projeto. É muito importante que você deixe claro em relação as revisões. Quantas revisões que seu cliente terá direito de fazer pelo preço acertado?

No xCakeBlogs, oferecemos até duas revisões pelo preço acertado. Por que? Pois alguns clientes abusam e não aprovam a primeira versão do layout, não aprovam a segunda e ainda pedem mais alternativas. É por isto que, se não for aprovado da primeira vez, revemos o briefing com o cliente para ver o que nós entendemos errado. Pedimos que o cliente faça uma crítica construtiva e compare com o briefing que ele enviou. É importante para sabermos o que foi feito de errado por nossa parte (ou se o cliente estava indeciso na hora que escreveu o briefing). Caso passe das duas revisões sem sucesso, informamos que novo pagamento e novo briefing deverão serem feitos. Isto fica explícito no contrato.

Pagamentos

No contrato deve estar escrito se a forma de pagamento é à vista ou parcelado (que é combinado previamente). Independente de qual for, deixe claro quando cada pagamento é feito. Se for a vista, peça para que seja pago no início do projeto para evitar que o cliente desista no final e não te entregue nada, e se você quiser ofereça algum tipo de remuneração em caso de desistência (por exemplo, 50% do valor pago ou a porcentagem de acordo com quanto do projeto já foi feito). Se o pagamento escolhido foi parcelado, informe as datas de pagamento de cada parcela e o valor delas.

É importante que você sempre peça um valor adiantado, independente de quem for o cliente. Até mesmo parentes podem tentar te passar a perna!

Direitos autorais e copyright

Quem terá o direito autoral sobre o que foi criado? E quem terá a responsabilidade sobre o uso de fontes, fotos, arquivos vetoriais, etc? É ideal que, caso o cliente fornecer as fotos e fontes para serem usadas no layout, você deixe claro que o direito autoral é de responsabilidade dele. Já vi acontecer designers serem ameaçados de processo por terceiros pois seu cliente usou uma imagem deles como fundo para o site sem o consentimento do autor.

Prazos

Defina os prazos para cada etapa e data para entrega final. Lembre-se de dar uma margem de segurança, pois raramente o projeto é entregue exatamente na data prevista. Algumas vezes o cliente demora para preencher o briefing ou para aprovar uma das revisões, atrasando todo o processo. Deixe claro que, se o cliente não obedecer o cronograma (você deve definir a data limite para ele enviar o briefing, enviar o material para ser usado, aprovar as revisões, etc), você não deverá ser culpado pelo atraso na entrega.

Aprovação final

Consiga uma assinatura ou assinatura digital na versão final antes de ir ao vivo. Isto vai te salvar muita dor de cabeça se algo estiver escrito errado ou existe algum problema no código. Além do mais, isto dá ao seu cliente a confiança que ele precisa. Caso algo estiver errado após a aprovação final, você poderá cobrar adicional.

Cancelamento de projeto

Outra forma de se assegurar caso o projeto seja cancelado. Afinal de contas, você não pode ser lesado pelo tempo gasto com algo que foi cancelado antes de você receber uma compensação decente.

Os contratos não precisam ser sempre assinados e enviados via correios. Hoje em dia, a justiça já permite o uso e-mails como documento legal, então se seu cliente aprovar o contrato via e-mail já é válido (só não vale mensagens instantâneas como MSN ou “aceitação verbal”).

Existem muitos modelos de contratos disponíveis na web, basta dar uma procurada.

O briefing

Muitos designers pulam a parte do briefing por ser algo que as vezes o cliente demora a respoder, então eles fazem tudo às cegas. E isto só pode resultar em desastre.

Nem sempre é fácil entrar na cabeça do cliente, e isto será o seu salva-vidas. Pode até ser um briefing pequeno, mas com as perguntas certas você vai poupar muito tempo ao seu cliente e a você mesmo. O bom que briefings curtos podem até ser feitos via telefone (lembre-se de anotar tudo que ele falar!). Eis algumas coisas que você pode incluir em seu briefing, mas lembre de adaptá-lo aos projetos específicos que você faz.

Especificações técnicas

Dimensões, alinhamento e tipo de largura. Geralmente o cliente não vai ter idéia do que ele quer nesta parte, então nós no xCakeBlogs não colocamos este tipo de pergunta no briefing. Caso o cliente queira especificar que ele quer um layout com largura fluída, por exemplo, ele irá especificar isto de qualquer forma.

Pergunte também sobre domínio e hospedagem (seu cliente já possui? Caso não tenha, ele aceita sugestões?). Você irá fazer o upload da versão final do site, ou isto fica a encargo do cliente?

Conteúdo

Um mapa do site é bom. Peça que seu cliente defina quais páginas que serão criadas e o que ele terá de conteúdo. Se você ver que a estrutura não é das melhores, ofereça alternativas antes de começar o projeto.

Peça para que ele informe todo o conteúdo neste momento. Textos, logo, fotos, etc. Caso não esteja no contrato, informe-o que o texto precisa estar revisto e corrigido, e que as imagens já devem vir tratadas – tudo em formato digital! Já tive clientes me enviando texto escrito a mão (caneta e papel!) e fotos impressas. Quando falei que teria que cobrar para digitalizar tudo, o cliente ficou pasmo – afinal de contas, ele tinha escrito todo o texto no computador e, como não tinha impressora, passou tudo para o papel. As fotos? Ele também tinha em formato digital mas mandou revelar só para me entregar. Acho que ele nunca ouviu falar de “e-mail”.

Outra coisa que você pode pedir é todo o material de marketing prévio da empresa para você ter uma idéia de como eles administravam a comunicação empresarial no passado.

Dados de marketing

Público-alvo, percepção atual da empresa e percepção desejável, estilo, cores e formalidade do design. Além disto, a diferença entre eles e as empresas concorrentes.

Esta parte da diferença entre eles e as empresas concorrentes nem sempre pode ser algo claro. Muitas vezes o cliente procura defender sua empresa como se você fosse um comprador em potencial. É necessário lembrar ele que você precisa das informações reais. Se o preço do produto do seu cliente é maior do que do concorrente, por que é assim? Informe seu cliente que ele não precisa defender as diferenças, pois isto não vai lhe ajudar muito. A questão do preço por exemplo, pode ser por que a qualidade é maior (neste caso, você pode deixar o site com cara mais de “exclusivo”).

Peça por referências também. De preferência, referências do gosto do cliente. Em seguida, você vai analisar se as preferências pessoais do seu cliente são similares às preferências do público-alvo dele. Se notar uma diferença muito grande, informe isto. É importante ele saber que o site não é para agradar ao gosto pessoal do dono, mas sim ao gosto do público-alvo.

Amanhã continua o artigo. Fique ligado! Assine o feed RSS para não perder!

Inspiração: Onextrapixel

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

Antes de mais nada, vou tratar neste post sobre como fazer avaliações heurísticas em sites, mas pode ser também traduzido para qualquer outra área do design, inclusive o de design gráfico e de produto.

O que é uma avaliação heurística?

De acordo com este site,

A avaliação heurística permite uma avaliação contínua do processo, com baixo custo. Envolve especialistas avaliando o design com base em um conjunto de critérios de usabilidade ou heurísticas. O design é examinado em busca de instâncias nas quais esses critérios são violados. Os critérios de usabilidade são relacionados a princípios e guidelines e podem ser selecionados ou derivados deles.

Nestas avaliações, um pesquisador age como o usuário-alvo e tenta completar uma série de tarefas pré-determinadas no site desenvolvido. Por exemplo, tentar comprar um produto, tentar fazer um pagamento de um produto ou até mesmo encontrar informações importantes (como telefone, endereço ou e-mail para contato).

Um conjunto de critérios para análise (neste caso, proposto por Nielsen e Molich (1990)), inclui:

1. Diálogo simples e natural;
2. Fala a língua do usuário;
3. Minimza a carga cognitiva do usuário (“não faça o usuário ter que pensar”);
4. Consistência;
5. Feedback;
6. Saídas marcadas claramente;
7. Atalhos;
8. Mensagens de erro precisas e construtivas;
9. Previne erros;
10. Ajuda e documentação;

Em resumo, avaliações heurísticas são uma forma barata e rápida de analisar se um site serve ao seu propósito.

O bom deste tipo de análise é que qualquer pessoa pode ser a cobaia destes testes e o custo deste tipo de teste é baixíssimo. Estes testes vão servir para analisar o que funciona e o que pode ser melhorado, além de servir como base para quando o designer estiver considerando novos protótipos.

O que preciso para uma avaliação heurística?

Um computador, um checklist e de 3 a 10 avaliadores. Uma câmera ou software que grava a sua tela (como Camtasia ou iShowU) também é recomendado para uma análise posterior mais a fundo.

É preferível que cada avaliador seja único. Procure escolher pessoas diferentes, como por exemplo alguém mais jovem, outra pessoa mais de idade, um designer, um analista, uma secretária, etc. Quanto mais diverso for seu grupo avaliador, melhor! E eles nem precisam ser seu público-alvo.

Estes avaliadores podem ser seus amigos ou familiares, pessoas envolvidas ou não no projeto. Você pode por exemplo pegar colegas de trabalho, levá-los para a sala de conferência, pedir umas pizzas e fazer os testes em grupo, ou ligar para amigos diferentes e convidar para tomar um café por sua conta em algum lugar que tenha wi-fi e de onde você pode usar seu notebook.

Alguns experts recomendam trabalhar com o grupo como um todo, mas o processo também pode ser feito individualmente. Vou relatar como fazer os dois tipos de testes.

O checklist deve conter os critérios que devem ser analisados. Os avaliadores precisam ter a opção de marcar “concluído” ou “não concluído”, dar uma nota de 0 a 5 referente a facilidade de concluir a tarefa, além de um espaço para observações. Vou colocar um checklist abaixo que pode ser usado em qualquer site. No entanto, o seu deve conter os critérios específicos do seu site – os objetivos que os usuários devem atingir; em um site de e-commerce, o objetivo é fazer com que o usuário faça uma compra. Em um site empresaria, é fazer com que o usuário entre em contato para mais informações, etc.

Caso o site não seja um projeto pessoal, lembre-se de perguntar ao cliente a quem você está trabalhando o objetivo dele.

Como fazer uma avaliação heurística individual?

Com sua checklist em mãos, está na hora de chamar um dos seus avaliadores. Explique o que será feito – você estará observando como ele usa o seu site e como completa as tarefas determinadas na lista. Lembre-o de que não está sendo avaliado sua inteligência ou conhecimento técnico e se um erro aparecer ou ele não conseguir efetuar uma tarefa, o avaliador não será culpado de nada. É importante deixar isto claro ao avaliador para que ele não ache que está sendo testado (o objetivo é você testar o site!), assim ele terá mais liberdade e usará o site como usaria normalmente, sem tentar agradar você. Informe também que se ela não conseguir concluir uma tarefa, ela não precisa se debater e deve passar para a próxima.

Se você possuir uma câmera, tente gravar a reação facial da pessoa afim de analisar se ela está com cara pensativa, de perdida ou se ela apenas segue seus instintos. Use um software para gravar o que ela faz no computador – cada click e movimento de mouse.

Assim que o avaliador conseguir concluir uma tarefa, peça para que ela preencha o checklist informando se conseguiu ou não, a dificuldade e qualquer observação que ela tenha.

Como exemplo, vamos supor que você pediu para que o avaliador encontrasse o e-mail para contato no site. Ele conseguiu, mas demorou muito tempo procurando pelo endereço no site apenas para descobrir que o link para a página de contato estava um pouco apagada, sem contraste e com um tamanho de fonte pequeno. No checklist, ele deve dar uma nota de 2 a 4 (já que ele conseguiu fazer a tarefa, mas não foi fácil) e no campo das observações deve notar que “o link foi difícil de ser encontrado”.

Em uma folha que só você pode visualizar, cronometre o tempo que a pessoa demorou para efetuar cada tarefa e note também se ela teve dificuldade (ficou mexendo muito o mouse, clicou em páginas que pareciam ter a informação, usou o sistema de busca, etc) ou se ela fez algo imprevisto para chegar na informação (ex: procurou no Google).

Como fazer uma avaliação heurística em grupo?

Entregue uma checklist a cada pessoa e projete o site na parede com um projetor (ou use uma tela grande para que todos consigam ver nitidamente tudo). Você pode continuar de duas formas:

1. Você pode guiar as ações e pedir para que os avaliadores acompanhem e analisem se parecer ser algo que eles fariam naturalmente;
2. Perguntar o que eles fariam para conseguir completar o ítem da lista deles.

Agora basta escutar o que eles tem a dizer. Lembre-os que não há uma má opinião e nenhuma deve ser sensurada por mais ninguém. Colete todo o feedback pertinente.

Formatando os dados

Depois de fazer todos os testes com todos os analisadores, está na hora de compilar tudo e ver o que precisa ser feito.

Você pode pegar um screenshot da tela e apontar o que gera problemas aos usuários ou fazer uma apresentação em PowerPoint / Keynote para mostrar ao seu chefe. Até mesmo uma planilha com o problema e o grau de dificuldade que os analisadores tiveram pode servir.

Aproveite para incluir o que pode ser feito para mudar os problemas apresentados. A fonte precisa ser aumentada em algum lugar? Alguma informação precisa ser relocada? Um formulário de contato deve pedir menos dados desnecessários?

Resultado de uma avaliação heurística

Faça uma outra checklist destes problemas e categorize a importância de cada problema em “Urgente”, “Importante” e “Implementação futura”. Vá marcando o que for feito e se não foi feito, especificar o por que.

Pronto. Sua avaliação heurística está feita, e agora você pode ter certeza que seu site serve ao propósito. Após as implementações terem sido feitas, você ainda pode efetuar um novo teste (pode ser um grupo misto: algumas pessoas que já participaram do teste antes, e algumas outras novas pessoas).

O importante é você atingir uma porcentagem mínima de sucesso, como por exemplo 90% de sucesso em um objetivo importante do site (comprar algo na loja online) e 70% em objetivos secundários (encontrar um número de telefone para tirar dúvidas).

A forma gratuita de fazer uma análise heurística

Sim, existe uma forma de fazer esta análise onde você não gastará um centavo e não precisa lidar com mais ninguém – basta você mesmo fazer o teste, usando seu bom senso. No entanto, lembre-se sempre de pensar como um usuário pensaria.

Checklist básico de usabilidade

A lista abaixo é o básico que pode (e deve) ser usado em qualquer análise heurística. Existem várias listas similares, no entanto essa lista do Dr. Peter Meyers serve a qualquer propósito.

Acessibilidade

• Tempo de abertura do site é razoável
• Contraste entre texto e fundo é adequado
• Tamanho de fonte / espaçamento facilita a leitura
• Flash e add-ons são usados moderadamente
• Imagens possuem ALT tags
• Site tem uma página de Erro 404

Identidade

• Logo do site está bem posicionado
• Tagline da empresa é clara
• Propósito do site é entendido em 5 segundos
• Acesso rápido a informação da empresa
• Acesso rápido a contato com a empresa

Navegação

• Navegação principal é facilmente identificável
• Itens de navegação são claros e concisos
• Quantidade de botões e links é razoável
• Logo do site é linkado à página inicial
• Links são consistentes e fáceis de serem identificados
• Caixa de busca é de fácil acesso

Conteúdo

• Títulos são claros e descritivos
• Conteúdo crítico está acima da dobra
• Estilos e cores são consistentes
• Ênfase (bold, etc) é usado de forma moderada e adequada
• Anúncios e pop-ups são não obstrutivos
• Texto é conciso e explicativo
• URLs são amigáveis
• Títulos HTML são explicativos

Simples, não?

Existem outras listas mais completas na web, inclusive Jakob Nielsen tem alguns livros interessantes sobre isto – como “Projetando Websites com Usabilidade” e “Usability Engineering“.

Lembre-se sempre de incluir na lista os objetivos do seu site!

Boa análise a todos! ;)

Bibliografia – Qualitative Web Analytics, Avaliação heurística, Jakob Nielsen, Wikipedia

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Análise: Sites de faculdades de design
• Como estragar seu site – parte 2
• Plakker Album – Pegue aqui sua figurinha exclusiva!

Faça seu site inteiramente em tabelas

Sites em tabelas eram algo grande 10 anos atrás. Hoje em dia, não é mais prático isto. A atualização do código de um site em tabelas é uma tarefa complexa, além de gerar muita dor de cabeça. xHTML e CSS avançaram tanto nos últimos anos e seu uso facilita a vida de programadores e designers.

Fazer alterações em um site com xHTML e CSS é muito mais fácil para os dois profissionais. Os designers podem apenas alterar o CSS, sem ter que tocar no código do programador e vice-versa. Sites como da Universidade Tuiuti poderiam ser simplificados facilmente.

Sei que falar da necessidade de usar xHTML e CSS aqui é como ensinar o padre a rezar missa, mas tem muita gente que ainda acha que tabelas são o futuro da web.

Tente entender este código. Lhe desafio!

Insira vários pop-ups ou faça seu site abrir em uma nova janela

Se você quiser ser levado a sério, não tente controlar o navegador do seu usuário. Não faça seu site abrir em uma nova janela com largura e altura fixa, sem a barra de ferramentas dele. Navegadores atuais já bloqueiam automaticamente pop-ups, então há chances de que seu site nem abra.

Até anúncios que são abertos em pop-ups são uma perda de tempo. Mesmo que você esteja ganhando R$ 0,01 com cada impressão de tela, saiba que você estará perdendo público. Claro, se seu objetivo for de  enganar o usuário para ganhar dinheiro e não estiver nem aí se ele vai voltar ao seu site, aí é outro assunto. É besteira colocar pop-ups justamente por causa dos navegadores que bloqueiam, mas creio que se o seu objetivo for este, você provavelmente está lendo este artigo para realmente estragar seu site.

Abra links em uma nova janela

Pessoas vão me crucificar por isto, eu sei. De um lado, os orgulhosos donos de sites não querem que seus links abram na mesma janela para que o usuário não saia dele. Então qualquer coisa que a pessoa clica é aberta em uma nova janela.

Do outro lado, os usuários normais que – por causa destes orgulhosos donos de sites – não podem controlar como eles mesmos navegam na web. É a famosa discussão de “usar ou não usar o target=_blank“.

Minha opinião sempre foi clara: nunca tente controlar as ações do usuário. Se ele quiser abandonar seu site, ele irá. Mesmo se o link abrir em nova janela automaticamente, ele vai fechar a janela do seu site se ele quiser. Afinal de contas, para um usuário abrir um link em nova janela, é simples: basta clicar com o botão do meio do mouse no link ou clicar segurando o botão CTRL (ou CMD) do teclado. Até mesmo um clique com botão direito selecionando “Abrir link em nova janela / aba” já serve. Mas e como fazer com que um link não abra em uma nova janela? O usuário não tem como fazer isto.

Uma analogia simples: a velocidade máxima permitida na cidade é de 60 km/h. Os orgulhosos donos de sites – que neste exemplo são fabricantes de carros – fabricam carros que não podem ultrapassar a velocidade de 60 km/h. Os usuários normais – que são os compradores de carros – não podem exceder este limite mesmo se estiverem em uma rodovia, que possui uma velocidade máxima de 110 km/h. O usuário não tem controle sobre algo que é dele: o carro (que na analogia, é o navegador).

Por isto que, toda vez que um desenvolvedor vem se defender por usar o target=_blank, eu sempre respondo: pare de pensar como um dono de site por um momento. Pense como um usuário normal. O usuário normal tem como escolher entre abrir em nova janela ou não. Se você obrigar ele a abrir em nova janela, ele não tem nenhuma outra opção. Você, como pessoa, prefere ser obrigado a fazer as coisas ou quer ter uma escolha?

Faça seu site funcionar apenas em um navegador

Note como não falei “faça seu site funcionar apenas no Internet Explorer” ou Firefox, Safari, Chrome, etc. Tem muitos desenvolvedores e web designers que fazem seu site funcionar apenas em um, qualquer que seja. Mesmo se o público-alvo do seu site for apenas usuários de um navegador específico, não quer dizer que você deva relaxar e fazer ele funcionar apenas nele, ficando totalmente zoneado em outros.

Não vou entrar na discussão de qual navegador é melhor, o importante é que seu site funcione no mínimo nos 4 navegadores mais populares em suas versões mais recentes. Internet Explorer 6? Dispenso comentários. Quem ainda usa aquilo provavelmente não merece a atenção de ninguém.

Use cores ruins

Fundo rosa-choque e fonte em amarelo. Que coisa agradável. Sim, você tem todo o direito de gostar destas cores, mas é legível? Não custa nada procurar uma paleta de cores boa – tem até sites ótimos pra isso: o ColorLovers (meu favorito) e o ColorSchemer. Faça testes antes de lançar um site: envie o link para um amigo e pergunte pra ele se ele consegue ler o texto. Pergunte se não dói os olhos.

Argh! Meus olhos! Meus pobres olhos!

Aprenda um pouco sobre design e desenvolvimento

Essa é a maior dica que dou a quem pretende ser um web designer algum dia. Aprenda bastante primeiro. Claro, você nunca vai parar de aprender coisas novas – mesmo com 12 anos trabalhando na web, sei apenas 50% do que gostaria de saber e menos de 10% do que é possível se aprender.

Existe material o suficiente na web e em livros. Leia bastante, experimente bastante.

Artigo inspiracional.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 1
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

A cada dia serão postadas, em um dos 27 sites participantes, 2 novas figurinhas. E hoje temos 02 figurinhas exclusivas disponíveis aqui, que podem ser adicionadas no seu álbum. Basta clicar nas figurinhas abaixo.

A ilustração do Matmour foi feita pelo paraguaio Oz Montania ( www.behance.net/OzMontania ) e a do Nakamura pelo brasileiro Rubens Scarelli ( www.behance.net/RubensScarelli ).

Peraí, você ainda não fez o seu álbum?

O que você tá esperando? Os 70 primeiros a completar o álbum ganham revistas Zupi. Além disto, há coisa mais divertida que colecionar figurinhas?

Corre lá: Plakker.net e cadastre-se para começar a colecionar figurinhas!

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Novo Forum de Design
• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como fazer avaliações heurísticas em sites
• O que você faria se não fosse designer?

Hospede seu site em servidor gratuíto

Quando eu era mais novo, hospedagem podia custar de R$ 30 a R$ 1.000 – sendo que o mais barato te dava 5Mb de espaço em disco e 100Mb de transferência – ou seja, nada. Portanto hospedava meus sites na extinta GeoCities, zip.net ou hpg.com.br. Bons tempos: os sites eram lentos, dava para colocar apenas arquivos HTML, e era obrigatório ter banners.

Hoje em dia você pode ter um plano simples por R$ mensais, ou pagar R$ 10 para ter um plano de hospedagem e transferência ilimitada e de qualidade (sem querer fazer jabá, mas já fazendo, eu recomendo a Brasilserv). Cinco reais é o preço de uma cerveja de 600ml no bar. Na minha cidade, com R$ 5 você consegue pegar dois ônibus e ainda sobra 60 centavos.

Simplesmente não há mais desculpas para hospedar seu site em servidores gratuítos que possuem tantas limitações e obrigatoriedades.

Tenha uma página introdutória

Quando digo “página introdutória”, estou me referindo as famosas splash pages, página inicial de um site que não contém nada além do logo da empresa ou talvez uma animação desnecessária e um botão de “Entrar”.

O mundo roda a uma velocidade de quebrar o pescoço – mais do que nunca, o ser humano não tem mais paciência de esperar para ver seu conteúdo e é comprovado que o bounce rate (taxa de desistência) é muito maior em sites que não mostram o conteúdo de primeira. Sem contar que páginas introdutórias são péssimas para otimização de sistemas de busca, já que a página inicial é considerada a página mais importante de um site.

Faça um site inteiro em Flash sem necessidade alguma

Não vou entrar no mérito da discussão “Flash versus HTML”. No entanto, uma coisa é certeira: fazer um site inteiro em Flash sem necessidade é como comprar uma Ferrari e só andar na cidade, onde a velocidade máxima permitida é de 60 Km/h. Estou falando daqueles sites que não possuem animação alguma, ou possui animações tão cruas que um simples comando de JQuery resolveria.

Sites estáticos em Flash são uma perda de tempo tanto para o desenvolvedor quanto para o usuário. Mesmo com conexões de banda larga bem difundidos, nem todos os aparelhos móveis conseguem acessar conteúdo em Flash (e os que conseguem, mesmo em conexões 3G, podem sofrer na hora do download).

Veja o caso do site da Asteca Silk: Flash totalmente desnecessário. Sem contar que, se você estiver usando um aparelho móvel e estiver na estrada procurando o endereço da empresa, você nunca vai conseguir achar pois não há texto nenhum no site. Sem contar outra coisa extremamente irritante:

Tenha música tocando em seu site

Você gosta de funk? Não? Ok, mas vamos supor que eu goste. Portanto, vou colocar um pancadão tocando como música de fundo do Design Blog. E o pior: não vou dar a opção de desligar a música. Você vai continuar aqui no blog? Duvido.

Não importa se você colocar uma “música neutra” – muita gente navega escutando sua própria música ou não escuta música nenhuma, mas esquece a caixa de som ligada. Nos dois casos, sua música de fundo atrapalha. Mesmo se colocar um botão de parar música, muitas pessoas podem escolher fechar seu site na hora, sem precisar gastar os segundos necessário para achar o maldito botão.

Simplesmente não há desculpas para se fazer isso nos dias de hoje. Mesmo em sites cujo foco seja música, não se coloca música tocando sem o consentimento do usuário. É como se alguém estacionasse seu carro na frente da sua casa e colocasse uma música alta no som. Não importa se você gosta ou não do estilo musical: é um desrespeito ao usuário.

Tranque a cópia de texto e imagem

Ocasionalmente no xCakeBlogs, aparece algum cliente que quer proibir a cópia de seus textos ou imagens. Por sorte, até hoje consegui convencer todos de abandonar esta idéia. Afinal de contas, não estamos mais em 1999.

A principal forma de bloqueio é por meio de JavaScript, onde o botão direito do mouse é desabilitado e a combinação das teclas CTRL + C também não é permitido. Isso funcionava na época onde tínhamos apenas o Internet Explorer e Netscape Navigator. Hoje em dia, mesmo se você programar a mesma função para todos os navegadores mais populares, desabilitar o JavaScript é feito com o click de um botão. Sem o JavaScript ativo, sua função já não presta mais.

Esses scripts ainda tem outro ponto negativo: a redução de acessibilidade. Usuários que conseguem navegar apenas com o mouse ou apenas com o teclado, usuários que possuem necessidades especiais ou até mesmo que sofrem da falta de visão terão um gigante obstáculo ao acessar seu site. E não venha com essa desculpa de “não é meu público alvo”.

Imagens então? Mesmo colocando marca d’água e colocando a imagem dentro de um arquivo Flash ou criando uma camada vazia por cima, basta apertar o botão de Print Screen no Windows ou CMD + Shift + 3 no Mac e editar no Photoshop. Pronto!

A dica é simples: tem medo do seu conteúdo ser roubado? Não coloque ele online.

Semana que vem tem a continuação deste artigo, fiquem ligados!

Inspiração

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Regras implícitas no web design
• 13 dicas para newsletters em HTML

Este artigo comporta-se como um protesto contra designers que desdenham o web design e acham-se capazes de criar um site como um impresso. Estendem-se as empresas que incentivam seus designers GRÁFICOS a produzirem layouts sem instruí-los sobre essa nova área, muitas vezes longe da abordada em seus cursos. E, sobretudo, os cursos superiores de Design, que em sua maioria não abordam o tema com a devida importância, contratando professores despreparados, com o intuito de apenas completar a grade curricular.

O web design é uma especificação do Design digital que se equivale ao gráfico e produto.

Web design

O projeto de uma interface para web interage com muitas outras áreas além da visual, como é de costume na produção de um cardápio ou de um flyer ou uma peça gráfica em geral. É nessa linha que surgem os primeiros tropeços da falta de informação destes pseudo-webdesigners.

Acostumados a tratarem apenas do visual, deixam de lado a premissa mais importante da web hoje, o UCD(design centrado no usuário), que trata-se em priorizar os diferentes tipos de usuários avaliando suas capacitações e limitações.

A internet reproduz o mesmo site de diversas maneiras, as cores e a resolução mudam de monitor para monitor, a renderização de browser para browser, a velocidade de navegação de usuário para usuário, interferindo diretamente na percepção visual da página, ao contrário de um material impresso. Não apenas as limitações de hardware, deve-se compreender que falando de internet, tratamos de padrões rígidos que para serem quebrados devem ser estudados e testados de forma a descobrir seu sucesso. Denominamos de acessibilidade esses padrões invisíveis que se repetem em vários sites e tornam-se comuns, habituando o usuário. Por exemplo, a barra de busca encontra-se preferencialmente ao lado direito e ao topo; para retornar à página principal, normalmente clicamos na logo da empresa.

Mapa do tesouro da usabilidade

Tais fundamentos estão inseridos no usuário e muda-los drasticamente, tornará sua interface não-intuitiva, obrigando o usuário a pensar e exigindo uma curva de aprendizado para a navegação. No final frustrando-o.

Uma interface digital necessita interação e dinamismo, tudo acontece muito rápido, estamos há um click de outro site, a pressa ao usar o computador faz com que o usuário não tenha uma leitura atenta e navegue a partir da tentativa e erro. É preciso resumir e sintetizar a informação, de modo que seja encontrada rapidamente. Tendo agora mais uma área envolvida no projeto de um website denominada de “Arquitetura da informação”.

Passado essa turbulência, ainda temos mais um obstáculo pela frente, o programador, ou seja, aquele que irá desenvolver o front-end do website, tirá-lo do layout e aplicá-lo. Por ser apenas um designer e não um web designer ele não tem domino de xhtml e CSS, ferramentas básicas para criar a estruturação e a estilização da página, projetando-a como um impresso, alinhando todos os itens de um menu à esquerda e o último, por capricho, a direita.

Na montagem do layout é necessária mais uma classe para poder alinhar esse ultimo item, adicionando linhas de código ou até mesmo uma imagem a mais, aumentando o tempo de produção do programador e deixando o site mais pesado.

Diagrama para o webdesign

A interface web trabalha com marcações que trazem a idéia de padrões. Todo o título deve ser estilizado de forma similar para facilitar a identificação do usuário na página(acessibilidade) e pelo modo com que as linguagens de
marcações trabalham. A partir do momento que este designer aprender a implementar seu próprio layout vai entender o funcionamento e projetar pensando na montagem. Minimizando o tamanho do site e agilizando processo de produção.

O motivo desse desdenho em relação ao web design está no fato de ser uma área nova que cresce em tamanho e faturamento, absurdamente. A falta de um mercado sólido abre brechas para qualquer fundo de quintal se aventurar na construção de websites e a falta de profissionais capacitados obriga ou abre oportunidade para o designer gráfico se adptar, porem essa adaptação muitas vezes vem com a falta de informação e domínio do assunto não levando atenção necessária. Bastando contratar alguém que implemente os layouts e estará pronto para web. Essa idéia muitas vezes agrada o cliente nas primeiras impressões, mas não os seus usuários, tornando o website falho.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Plakker Album – Pegue aqui sua figurinha exclusiva!
• Entrevista: Paul Boag
• Novo Forum de Design
• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1

Hoje em dia, nós usuários de internet em geral, presenciamos uma era muito importante para esse mundo on-line. As pessoas estão começando a perceber o potencial que essa ferramenta, que é a internet, possui, e por isso a demanda de websites, hotsites, etc. Só vai crescer. E isso é extremamente bom para nós que dependemos desse crescimento para conseguirmos o pão de cada dia em nossa casa, mas com o surgimento de diversos outros profissionais da área (pra não falar nos “sobrinhos”), como fazer para se destacar aumentando a renda e o crescimento como profissional?

Neste post (aliás, meu primeiro post) iremos discutir alguns tópicos de como se diferenciar e não ser somente mais um webdesigner no bolo, mas “O” Web Designer.

Responsabilidade

Alguns realmente não sabem o significado dessa palavra e muito menos colocam ela em prática, mas se o seu objetivo é se destacar não so como web designer, mas em qualquer profissão, tenha responsabilidade. Sendo responsável as chances de os seus clientes te indicarem são muito grandes. Ou seja, responsabilidade = mais clientes.

Habilidade

Existe uma frase que eu costumo dizer, “A melhor ferramenta de design é a que está sentada em frente ao computador”, ou seja tendo habilidade e criatividade (que será o próximo tópico) você consegue desenvolver algo realmente bonito e apresentável, que chame a atenção do público e que possua qualidade. Deixo aqui outra frase para você que pensa que não possui habilidade alguma: Nenhum de nós nasceu sabendo sequer ligar um computador, portanto o aprendizado e a experiência são os degraus para a habilidade.

Criatividade

Criatividade… pode ser a chave do seu sucesso como web designer ou o seu “Calcanhar de Aquiles”. Imagine que por mais que você possua habilidade no web design, que seja realmente um dom, você pegue um job de uma desentupidora de ralos de banheiros presidiários (estranho, mas imagine que o $$ seja bom e o seu $$ esteja escasso), e o cliente ainda pedisse que você desenvolvesse um site que deixasse claro o que a empresa faz no layout, mas sem nada muito explícito. Você saberia se virar? É meu caro, é ai que entra a criatividade, sem ela tanto web designers, como designers em geral ficam como que sem combustível em uma corrida. Por isso, se faltar criatividade procure ver trabalhos de outros profissionais, e galerias de websites para dar uma reabastecida na sua mente.

Profissionalismo

Chegamos ao último tópico (já tava cansado de ler, né?!), e o fato de estar por último não quer dizer que não tenha importância, pelo contrário, ser um real “profissional”, tanto na hora de aceitar o trabalho, quanto na hora de desenvolvê-lo e receber o “$$” por ele, é o que pode te diferenciar ainda mais dos outros web designers. Ter sempre um contrato para passar para o cliente, ir de acordo com o tema da empresa, e apresentável nas eventuais reuniões, ser firme na hora de dizer o preço do job, exibir o valor explicando o motivo e passar credibilidade são algumas das atitudes que um web designer profissional sempre toma, se tornando assim um destaque na área.

Bom pessoal, essas são algumas sobre essa área que cresce cada vez mais no nosso país, claro que um conhecimento da área e experiência são muito importantes mas esses tópicos são dicas de como realmente se destacar e juntando essas dicas a um conhecimento, você realmente terá todo potencial para ser “O” Web Designer.

Quer ser um colunista Design Blog e ser famoso? Entre em contato conosco.

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• Regras implícitas no web design

Encontrei neste blog uma lista de coisas que webdevelopers não devem fazer quando estão criando um site para e-commerce ou vendas em geral. Foi nele que me inspirei para fazer minha versão destas regras.

1) Jamais altere o tamanho do browser do usuário

Sim, eu sei que você consegue usar aquele JavaScript na sua página, e como se fosse um mini-milagre, o navegador é redimensionado para cumprir sua vontade e deixar seu site com uma visualização pré-definida por você. Mas não faça isso.

Essa “técnica” é criada por pseudo-web designers (os famosos micreiros) que acreditam que devem controlar a experiência de navegação de cada usuário. Ninguém gosta de se sentir limitado, então por que você acredita que seria diferente com o seu usuário?

2) Não enrole o usuário antes dele entrar no site

Se seu site requer que o usuário carregue a página inicial e depois tenha que abrir o verdadeiro site em um pop-up, você perde. Embrulhe tudo, jogue no lixo e comece novamente. Se seu site não abre automáticamente assim que a pessoa digita o endereço e a mensagem não é mostrada logo de primeira, fica muito difícil de alguém ficar esperando para continuar o acesso no seu site (não importa o quão bacana é sua introdução em Flash).

3) Não faça o usuário ter que decidir entre Flash e HTML

Se seu site pergunta ao usuário qual versão que eles gostariam de acessar: a versão em HTML ou em Flash, você também perde. É como perguntar ao seu consumidor se ele gostaria de entrar na loja tosca ou na loja melhor, onde a “loja melhor” requer óculos especiais e uma espera de 30 segundos.

O que você está realmente perguntando ao usuário é “você quer sair agora e comprar da minha concorrência porque eu coloquei esse impedimento antes de você descobrir o que eu vendo?“.

4) Não faça sites inteiramente em Flash se você pretende vender algo

Se seu site é feito inteiramente em Flash, demita sua empresa de web development, e se você mesmo que criou, coloque no seu portfólio sob a pasta “Projetos inúteis que eu fiz” e comece de novo. Flash é uma ferramenta que serve apenas para impressionar. Ainda não encontrei um site bom em Flash que tenha uma excelente acessibilidade sem pesar ridicularmente demais.

E note que não tem como pular a abertura

5) Não tente reinventar a navegação do seu website.

Colocar o menu no topo, na esquerda, até na direita funciona porque você não quer tentar reinventar o jeito como pessoas interagem com interfaces digitais enquanto tenta vender o seu produto ou serviço. Pessoas ficam confusas, irritadas e depois vão embora.

6) Design web é diferente de design gráfico

Se você é um designer de impressos e faz sites como algo complementar, pare de criar sites e providenciar “conselhos” para seus clientes de impressos sobre web design. A diferença entre design de impressos e web design é como fazer o design de uma propaganda para um carro de corrida e realmente construir esse carro de corrida.

7) Seu site precisa ser acessível em outros navegadores

Seu site não funciona em Firefox? O ano de 1999 ligou e falou que quer a internet dela de volta. Acredite: há alguns desenvolvedores que não prestam suporte para outros navegadores.

Sim, na maioria dos mercados Firefox comanda apenas 10 a 15%, mas para alguns sites é uma porcentagem muito maior (alguns inclusive têm 80% de acesso vindo de usuários rodando Firefox). Além do mais, se a equipe que você contratou não fizeram seu site compatível com Firefox eles obviamente não sabem o que está acontecendo no mundo. A falta de conhecimento sobre Firefox por um web designer mostra que ele não está a par da cultura Web e isso é um péssimo sinal caso você seja um dono de negócio.

8) Por favor, evolua

Não estamos mais em 1999. Na verdade, estamos a mais de 10 anos desta data. Sob hipótese alguma use textos piscantes, marquees, Frontpage, pop-ups, download de fontes e introduções em Flash.

Se você considera sites com essas coisas como “sites bem elaborados”, você precisa olhar o ano do seu calendário. A web evoluiu e os web designers sensatos viram que essas porcarias citadas não agregavam em nada (e portanto, deixaram de usá-los).

9) Música de fundo é para sites de música

Se seu site é diretamente relacionado a música (ex: site de banda e não seu portfólio de design), não faça ela começar a tocar assim que o site é aberto. E sob hipótese alguma esconda o ícone de parar a música.

Muitos usuários navegam na internet em horário de trabalho, e alguns esquecem as caixas de som ligadas. Há ainda aqueles que escutam música no computador com fones de ouvidos a um volume baixo. Acessar um site que começa a tocar música faz qualquer um querer esganar o maldito desenvolvedor.

10) Procure utilizar navegação em texto

Mesmo que só fique visível quando as imagens são desabilitadas. Alguns aparelhos móveis ou pessoas com conexão mais lentas podem desabilitar imagens e sofrer com a falta de um menu legível.

11) Prefira mapas de site

Um mapa de site mais bem pensado com sub-seções lógicas é melhor que menus “drop-down”. Em termos simples, drop-downs nem sempre funcionam. Ou seja, talvez não rode em alguns navegadores.

12) Facilite encontrar informações

Se seu site precisa de um sistema de busca para o usuário poder encontrar informações, é bom começar de novo e demitir o cara que fez o mapa do site (e aqueles menus drop-down na navegação). Sistemas de busca são ótimos, mas se seu usuário precisar procurar por conteúdo no seu site, você já está irritando 50%+ dos seus consumidores.

13) Tempo de download é importante

Tempo de download ainda é um fator em mais de 70% dos internautas brasileiros. Embora você viva no mundo maravilhoso da ADSL ou internet a cabo, a predominância no Brasil ainda é da conexão discada. Se seu site é apenas para usuários de ADSL, não preciso nem te dizer que você está perdendo muitos consumidores.

14) Vídeos em Flash apenas

Se você tiver que colocar vídeo, não pergunte ao usuário qual a conexão dele ou qual player ele quer utilizar. A grande maioria não sabe qual a velocidade de conexão e nem sabem se eles sequer possuem Real Player, Windows Media Player ou Quicktime. Coloque seu vídeo embedded no Flash. O Flash ganhou a batalha em questão de vídeo faz muito tempo (é só ver o YouTube).

15) Não seja sempre o mais atual.

Só porque existe uma linguagem nova não quer dizer que você precisa usar ela em tudo. Lembre-se que alguns navegadores podem não estar aptos a essas mudanças.

16) Não controle o modo de navegar do usuário

Alguns sites não permitem o clique com o botão direito do mouse para “evitar a cópia”. Mas o que o desenvolvedor não sabe é que talvez o usuário use esse menu do mouse para tarefas específicas, como voltar de página, recarregar, etc. Além do mais, qualquer um pode simplesmente desativar o Javascript na sua página se ele realmente quiser copiar seu texto.

Essas são apenas algumas dicas do que não deve ser feito ao se criar um site – considere como um “erros mais comuns”.

O que mais você acha que web designers devem evitar de fazer?

Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos!

Artigos relacionados

• Como lidar com projetos web? Parte 2
• Como lidar com projetos web? Parte 1
• Como estragar seu site – parte 2
• Como estragar seu site – parte 1
• 13 dicas para newsletters em HTML