Harmonia das cores: o jogo

post26

Já divulgamos aqui alguns jogos para designers desenvolvidos pela Method of Action. Um que brinca com a percepção entre letras, kerning, de uma tipografia, e um outro com o shape de cada tipo. Ótimos, veja eles no final deste post.

Um terceiro jogo desta marca é sobre cor. Te desafia e te ajuda a entender as propriedades de uma cor e suas harmonias. Ele também é muito bom, mas extremamente angustiante, principalmente para um daltônico feito eu (ainda vou fazer um post sobre isso) 😦

Este jogo tem 6 fases: HueSaturationComplementaryAnalogousTriadic e Tetradic. E consiste em você marcar a mesma cor nos centros e nas bordas do círculo central.

cores

Bora jogar? Clique aqui e divirta-se!

obs: de acordo com o projeto de lei nº 12345678 aprovado ontem, daltônicos estão liberados da divulgação da sua pontuação 😛

Quer continuar “brincando”? Jogue o Kern Type e o Shape Type.

Data: dez. 2013
Fonte: designechimarrao.com.br

27 blogs que todo designer deve conhecer

Acabamos de ver no blog Assuntos Criativos que o Vitamina Publicitária foi listado nos “26 blogs que todo designer deve conhecer”. Repassando a honraria e divulgação de todos os envolvidos pra você manter-se antenado, adicionamos mais um que fazemos questão de divulgar, o Café com Galo. Segue a lista!

Designers Brasileiros

Blog sobre dicas de design, eventos, colunas, tutoriais e assuntos gerais relacionados ao mercado brasileiro.

1-designers-brasileiros

Assuntos Criativos

Blog referência na área de Design e Publicidade.

assuntos-criativos

100% Design

O 100% Design aborda variados assuntos e é fonte de inspiração visual e informação de qualidade com mais de 500 posts e 8.000 imagens.

100-design

Bons Tutoriais

Blog de Design com uma pitada de criatividade de qualidade, Inspirações, Ideias para Campanhas Publicitárias, Tutoriais Photoshop, Web Design e muito mais.

BonsTutoriais

Boteco Design

O Boteco Design teve início como um grupo do Google de colegas da faculdade que gostavam de divulgar e comentar notícias, trabalhos, exposições, cursos, e tudo mais relacionado ao nosso curso, Design.

boteco-design

Choco La Design

Choco La Design é um dos maiores veículos independentes de produção de conteúdo relacionado a Design.

chocola-design

Clube do Design

Dicas para designers. Os melhores posts de design, em um só lugar. Photoshop, Illustrator, CorelDRAW, Indesign e mais.

clube-do-Design-Blog

Criatives

Blog de Design e Criatividade com inspirações, tutoriais, Web Design, Eventos de Design, Dicas para Blogs e idéias para Campanhas publicitárias.

Criatives

Cutedrop

Visual e inspiracional. Blog sobre design, tecnologia, moda, culinária, publicidade, música e muito mais.

cutedrop-Design-Blog

Design Blog

Blog de design gráfico e web com artigos exclusivos, dicas, teoria do design e muito mais para você aprender design.

Design-Blog

Design Culture

O Blog Design Culture nasce para levar o melhor do Design, Cultura, Comunicação, ações criativas e as mais diversas expressões de artes.

design-culture

Design Fera

Blog Parceiro do DB e um dos maiores do Brasil.

design-fera

Design In a Box

Blog com informações sobre design gráfico, web design, ilustração, arte, publicidade, fotografia, moda e todas estas coisas bacanas que nós adoramos.

Design-in-a-box-Design

Irresistíveis

Inspiração para mentes criativas.

design-irresistiveis

Design On The Rocks

Blog referência quando o assunto é Design, com layout e domínio nova, visa crescer muito mais.

design-on-the-rocks

Vitamina Publicitária

Portal sobre Publicidade, Design, Marketing Digital, Redes Sociais, Tecnologia e Jornalismo. Somos nós!

design-vitamina publicitaria

Designer Effects

O Designer Effects é um blog que aborda tudo sobre o mundo do design, do impresso a web, do analógico ao digital.

designer-effects

Designerd

Blog de Design e Web Design, com dicas para estudantes e profissionais, inspirações para designers, ilustradores e outros profissionais criativos e muito mais.

Designerd-Design

Designine

O blog mostra, como conteúdo principal, campanhas publicitárias, design, artistas e seus trabalhos, novidades e muita criatividade!

designine

Des1gn’On

Blog voltado para estudantes, profissionais e pessoas em geral que curtem design e artes. Na minha opinião, é um dos blogs mais bacanas atualmente voltados a design. Também é um dos parceiros do Vitamina Publicitária.

Designon-Design

LogoBR

É respeitado e citado como referência por estudantes, acadêmicos e profissionais quando se trata de branding.

LOGO-BR

Orange Design

A maior razão para a existência do Orange Design é divulgar o design e sua profissão através de artigos, entrevistas com designers premiados e análise de produtos.

Orange-Design

Paroxismo Records

Blog parceiro do Designers Brasileiros e trata sobre vários assuntos.

paroxismo-records

Pixel Coffee

Podcast bem humorado sobre design, propaganda, games, programação, música e muito mais.

pixel-coffe

Revelando Ideias

Blog dedicado inteiramente para os apreciadores de inovação, criação, design, fotografia, ilustração, animação e muito mais.

Revelando-Ideias-Design

Sala7 Design

O Sala7 é um blog feito por estudantes de design que resolveram juntar o interesse, estudo, paixão e vontade bloggar, tudo em um só lugar.

Sala7-Design

Café Com Galo

Blog muito bacana sobre design, entretenimento, fotografia e marketing.

cafe-com-galo

E você, conhece outros blogs bacanas sobre design? Conta pra nós nos comentários que podemos adicionar à lista.

Data: nov. 2013
Fonte: vitaminapublicitaria.com.br

10 dicas essenciais para criação de sites

A V2 Design listou algumas dicas para a criação de páginas de sucesso. Confira

A criação de sites é um campo enorme, cheio de técnicas e boas práticas que garantem bons resultados. Mas muitas vezes é difícil saber qual caminho escolher diante de alguns desafios comuns do desenvolvimento de sites. Mas existem algumas dicas e truques que podem servir para grande parte dos projetos com os quais você vai trabalhar na vida. Acompanhe 10 conselhos da Gerente de Marketing da V2 Design, Flávia Alessandra Ferreira, que foram publicado na reportagem “50 erros e soluções para sites” da edição 145 da Revista W:

1- Faça tudo o que for possível para tornar seu site mais leve e rápido

Já falamos inúmeras vezes de técnicas para melhorar a performance de um site. Manter conteúdo estático em cache, otimizar a página para os browsers, manter o código limpo, reduzir excessos de mídias. Tudo é válido e existem muitas opções que podem ajudar a deixar um website enxuto. O importante é que isso seja, sim, uma das prioridades durante o processo de desenvolvimento. (Leia mais 10 dicas para sites rápidos aqui)

2- Use HTML5. Ele é amigável aos motores de busca, rápido e flexível

Não restam dúvidas quanto aos benefícios do HTML5. Os atributos e novos elementos trouxeram muitas facilidades, entre elas está o fato de que a sua estrutura é muito bem reconhecida por motores de busca, sobretudo os do Google. Isso porque o buscador dá bastante importância a tudo que é mais semântico na web. Mas é claro que existem alguns mitos e verdades sobre o assunto que precisam ser desvendados, antes de mais nada. Uma boa dica é um artigo sobre o assunto publicado no Tableless (leia aqui).

3- Separe informação com menus e submenus

Bons menus fazem parte de uma boa navegação, o que é essencial para manter o visitante de um site satisfeito com a experiência. É preciso separar as informações de uma página de forma hierárquica, de algum termo mais geral para outro mais específico. Pode parecer óbvio, mas há inúmeras páginas por aí que acabam misturando tudo e bagunçando as coisas. No mobile, por exemplo, os menus precisam ir direto ao ponto. Nada de colocar um guarda-chuva imenso de itens que com certeza não caberão na tela de um smartphone.

4- Trate fotos antes de publicá-las. Imagens com alta resolução prejudicam o carregamento da página

Tratar imagens não significa enchê-las de efeitos no Photoshop. A questão aqui é trabalhar em fotos que atendam às necessidades do projeto. Se puder abrir mão de imagens pesadas, não pense duas vezes. Mas em alguns casos, como para projetos touch ou otimizados para telas de alta resolução talvez esse não seja o caminho. O tipo do projeto também influencia. Como mostrar o portfólio de um fotógrafo ou de uma agência de publicidade sem boas fotos? Não tem jeito. Uma opção que pode atender alguns casos é o uso de algumas ferramentas de compressão (listamos algumas aqui).

5- Cores fortes estão permitidas. Mas é preciso conhecer as combinações e atender aos objetivos do projeto. Se não tiver certeza, fique na linha do clean. O risco de erras é menor

Escolher uma combinação de cores pode ser uma tarefa cheia de indecisões. Na dúvida, há especialistas que acreditam que o azul é uma cor de sucesso na internet. Mas antes de sair espalhando a cor pelo layout, o ideal é escolher uma paleta que combine com o projeto. Se for um site de hospital, não é recomendado que você escolha um vermelhão com um amarelo reluzente (amarelo exige parcimônia). Tente traduzir a personalidade do projeto com as cores. Como fazer isso? Com um bom briefing e uma boa pesquisa sobre os objetivos (seus ou de clientes).

6- A navegação deve seguir uma ordem lógica. O CSS torna uma página mais acessível, além de XHTML e ferramentas de validação

Pensar nas trajetórias do usuário pela página faz parte de estudos para desenvolvimento de interfaces. Alguns recursos podem ser usados nesse sentido para que você organize as informações e elementos visuais de um site de acordo com a navegação. Além de abusar de CSS e XHTML ferramentas que demonstram heatmaps mostram as chamadas “áreas nobres” de um site. São elas que merecem a sua atenção.

7- Cuide dos títulos das páginas. Elas ajudam os buscadores a encontrarem seu site e favorecerem o SEO

Este ponto está mais relacionado com o conteúdo, que é o filé do site. Depois de cuidar de uma boa “apresentação deste filé no prato”, com bons métodos de design, pensar em conteúdo é crucial para uma página de sucesso. Quando o assunto é SEO, leve em consideração que o Google dá preferência para conteúdos relevantes, então cuide do seu texto, prefira os que tem mais de 500 caracteres e repita algumas vezes as palavras-chaves mais importantes para tentar melhorar o posicionamento orgânico. Esses são pequenos passos iniciais.

8- Use apenas um tipo de fonte em todo o website. Se quiser mais de uma, use apenas para destaques, citações e títulos. Assim o visual fica mais limpo e padronizado

A tipografia é um dos aspectos mais importantes do design. Além de ser um detalhe visual importante, precisa estar de acordo com a legibilidade do conteúdo escrito da página. Leve em conta em que plataforma o site vai ser mostrado, a quantidade de informação que será inserida e o posicionamento. Faça um bom tour por sites de fontes para se inspirar e saber quais são as tendências (conheça algumas páginas sobre o assunto aqui)

9- Códigos devem ser escritos manualmente ou por programas específicos, como Dreamweaver. Um processador de textos qualquer poderá criar códigos desencessários e inválidos

Existem inúmeras ferramentas ótimas para escrita de códigos (além do Dreamweaver). Escolha de fontes confiáveis e recomendadas e fique de olha nas novidades em softwares para esse setor. O importante é encontrar a ferramenta que mais agrade o seu workflow e que atenda ao menos as necessidades essenciais de programação.

10- Espaço em branco ajuda a deixar o conteúdo legível – não exagere, para não comprometer o design.

O espaço em branco é constantemente a parte “polêmica” do design. Isso porque encontrar a dose certa pode não ser tão fácil quanto parece. Mas, acredite, quando você exagerar no espaço em branco as lacunas no design ficarão bem claras. O mesmo para os casos em que a empolgação acaba poluindo uma interface com muitos elementos. O melhor jeito de lidar com isso é: experimente. Não tenha medo de começar de novo. Reorganize tudo se achar necessário, leve em conta o respiro que o usuário precisa ter ao enxergar a página. E tente equilibrar tudo com o conteúdo.

Data: nov. 2013
Fonte: revistaw.com.br

20 dicas experts de web design

Confira alguns conselhos essenciais em HTML5, CSS, Responsivo e SEO

Um dos grandes desafios em trabalhar com  web é acompanhar as novidades tecnológicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. Há tantas ferramentas e plataformas que se multiplicam todos os dias, que é difícil conhecer todas (talvez humanamente impossível também). Mas estar atento às dicas essenciais já basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multidão de novidades:

HTML 5

01- Escolha um estilo de código

O HTML5 permite que a marcação seja escrita em maiúsculas, minúsculas ou uma mistura delas. Além disso, ninguém é obrigado a criar todos os atributos em elementos como <img>. Você pode até omitir o atributo type quando usar <style>, <link> ou <script>. O estilo é uma escolha sua, mas se está trabalhando com uma equipe, verifique se todos estão em sintonia. E ainda há um número de elementos e atributos que estão ultrapassados em HTML5, como <big>, <center> e <font>. Melhor deixá-los para lá.

02 – Leia as specs

As especificações são uma parte importante. A versão de HTML5 é mantida tanto pela WHATWG (o principal padrão de especificação e a W3C (HTML5). Se você não tem certeza sobre qual especificação ler, o especialista Oli Studhilme escreveu um pouco sobre o assunto no HTML5 Doctor (leia aqui). Ler as specs é a única maneira de entender, de fato, alguns elementos e APIs. Elas também contribuem para uma leitura rápida sobre os fundamentos para projetar HTML5.

03- Planeje sua marcação

Depois de ler as especificações, você entenderá melhor a estrutura de um documento, com os Document Outlines (saiba mais aqui). Pense neles como o equivalente às visualizações de documentos do Microsoft Word. Usar o conceito de documento outline vai ajudar a criar uma marcação bem estruturada. No processo de criação do design, é possível criar uma lista alinhada à página, o que vai obrigá-lo a pensar os níveis de títulos que devem ser usados e quais elementos serão colocados em cada lugar. Por isso, ter blocos de conteúdo organizados faz toda a diferença.

04- Escolha o elementos certo

Falamos antes sobre elementos que estão ultrapassados na quinta versão do HTML. Mas não se preocupe, ainda há 30 novos elementos que foram adicionados e muitos outros que ainda serão definidos. Por isso, pode ser difícil escolher o elemento certo para cada projeto. Para resolver voltamos à premissa de usar um elemento para descrever o significado do conteúdo, e não a sua aparência. Pense com cuidado sobre o significado disso antes de adicionar elementos. Consulte de novo o HTML5 Doctor para ajudar a escolher os certos.

05- Guerra de codecs

Você já deve ter ouvido falar que o HTML5 vai matar o Flash. Isso tem se espalhado largamente por conta do vídeo e áudio em HTML5. Não ter que depender de plug-ins para executar conteúdo de mídia é um grande passo para uma web aberta, mas ter que lidar com tecnologias competitivas não é. Quando criar conteúdo multimídia para o seu site codifique seus arquivos múltiplas vezes e inclua opções para browser com capacidades inferiores. Um artigo de Kroc Camen chamado ‘Video for Everybody” (Vídeo para todos) é um ótimo começo sobre como lidar com isso (acesse o artigo aqui).

CSS

01- Crie soluções independentes

Desenvolva qualquer efeito de CSS, 3D, rolagens ou transições fora do documento principal. Assim, é possível criar uma solução individual e organizada que poderá até ser usada depois em outros projetos. Fazer experimentos desorganizados dificulta a verificação caso alguma coisa não esteja funcionando como esperado.

02- Ordem relevante

Todo mundo sabe que tentar editar códigos CSS de outra pessoa é complicado. Sempre use múltiplas linhas CSS com as declarações ordenadas por relevância. Dessa forma, seu código poderá ser entendido por você ou qualquer outro envolvido no projeto.

03- Saiba seu papel

Mantenha classes bem focadas nas suas funções. Cada classe deve ter uma única responsabilidade, totalmente contida dentro dela. Deixe todos os atributos envolvidos nessa função em vez de tentar atribuir múltiplas responsabilidades.

04- Nomes

Use hífen nos seletores de nomeação. Por exemplo: isto-eh-bom{}isto_eh_ruim{}, istoEhMuintoRuim{}. Isso ajuda a manter o seletor de nome legível e geralmente mais simples.

05- Prefixos

Os prefixos de fabricantes de navegadores devem desaparecer quando o CSS3 se tornar um padrão e for adotado pelos browsers. Por enquanto, use todos os prefixos onde são aplicáveis. Sempre termine com uma declaração genérica, sem prefixo.

Responsivo

01- Significado

Por definição, um web site responsivo usa layouts flexíveis e media queries para moldar e adaptar-se ao seu ambiente de visualização. É importante notar que o web design responsivo não é nem um nem outro. Você deve encontrar harmonia em ambas as técnicas e quando o fizer, irá criar layouts responsivos da melhor maneira.

02- media queries

Os seus breakpoints de media query devem ser escolhidos de acordo com as necessidades do seu site. Há muitas resoluções de telas e não se deve incluir os breakpoints para todas as variações existentes. Há muitas resoluções de telas na tentativa de realizar isso. Comece com resoluções bem básicas de dimensões e adicione a elas breakpoints de acordo com as necessidades do seu projeto.

03- Mobile-first

Em resumo, mobile first significa desenvolver para telas pequena primeiro e depois para desktops. Isso vai contra a abordagem tradicional no qual web designers precisam ter um site no desktop e depois cortar alguns bits para conseguir um site mobile. As restrições de plataforma fazem com que você trabalhe a hierarquia do conteúdo, então essa abordagem é perfeita para design responsivo.

04- Derrube pixels

Elimine atributos com declarações fixas de pixel em HTML e no seu CSS. Imagens, em particular, precisam carregar e a melhor forma de fazer isso é declarar a porcentagem de tamanho no elemento <img>. Também é sábio criar classes CSS com tamanho em percentual, então você pode simplesmente incluir <img> ou outras tags  HTML.

05- Confie no JavaScript

Às vezes você tem pouco controle sobre a marcação do seu site. Isso só não acontece quando você está construindo um tema para CMS como WordPress, por exemplo. Escrever um script para remover um tamanho fixado ou atributos de estilo de tags HTML é fácil e rápido em um jQuery. Use e abuse. Isso vai garantir que o seu conteúdo será fluído.

SEO

01- Tags únicas

Use tags de títulos únicos e descrições para cada página do seu website, o que é óbvio para muita gente, mas é importante. Tente incluir suas palavras-chave de SEO enquanto cria textos. Mantenha as tags de títulos com no máximo 70 caracteres e as descrições cm pelo meno 155. Não use meta palavras-chave, elas ajudam concorrentes a encontrarem suas palavras.

02- 301 redirecionamentos

Se mudar para um novo websites ou URL use o recurso 301 redirecionamentos para novas páginas. O mesmo vale para quem tem múltiplos domínio: use apenas um como principal e redirecione os outros. Isso vai gerar backlinks e evitar a duplicação. Serviços com o Open Site Explorer ou Majestic SEO podem ajudar.

03 – Link interno

Faça bom uso de links internos. Quando se cria um bom visual para um site, às vezes, esquecemos quais páginas são importantes e como referenciá-las. Garanta que seus links internos irão suportar as páginas mais importantes.

04- Use microdata

Tire vantagem de cada pedaço do Google usando microdados. Já viu estrelas de classificação em uma lista orgânica? Esse é um exemplo ótimo que pode melhorar suas taxas de cliques. Você pode acompanhar estimativas, vídeos, pessoas, produtos e muitas outras coisas. Viste schema.org para saber mais.

05- Pensamento social

Mecanismo de busca estão valorizando sinais sociais, então abuse de redes sociais. Tenha certeza de que sue conteúdo será fácil de compartilhar e promover. Concentre-se em conseguir compartilhamento e retuítes, em vez de apenas conseguir mais seguidores e “curtir”.

Confira outras centenas de dicas na edição 146 da Revista W!

Data: nov. 2013
Fonte: revistaw.com.br

Sites perfeitos

Alguns deslizes podem comprometer (e muito) um projeto de website. Descubra alguns deles e saiba como evitá-los

Trabalhar na criação de websites exige olhos atentos. Seja o próprio site ou o de um cliente, há muitos elementos com que se preocupar, dede o código á interface. É comum que alguns pontos sejam esquecidos e alguns problemas apareçam, o que pode afastar os preciosos visitantes do seu espaço na web. Por isso, a Revista W consultou especialistas da área e reuniu os erros mais cometidos por desenvolvedores e web designers.

Planejamento

1 Falta de planejamento

Definir o planejamento pode parecer óbvio mas nem todo mundo executa todas as etapas. Em primeiro lugar, é importante pensar no usuário que verá o trabalho final, suas necessidades e o que ele deseja da sua página. Uma boa pesquisa de público pode dizer muito sobre o perfil dos seus usuários em potencial. Abuse de mídias sociais para saber mais sobre o público-alvo, assim ficará mais fácil definir conteúdo, design e navegação do site.

Faça mapas do site, fluxo de processo e rotas de usuário pela página. Tudo isso é importante para criar a sua Arquitetura da Informação. E muitas vezes esboços em papel resolvem as ideias básicas para o site, tipos de templates, funcionalidades, tipografia, menus e botões. Criar wireframes é essencial para quem trabalha com design interativo. Além do papel, protótipos em HTML também podem ser feitos. Para criar mockups, os serviços mais populares são o Balsamiq Mockups, o Gliffy, o Axure e o Mockflow. O melhor desse último é que é totalmente gratuito.

Após levar em conta os aspectos tecnológicos (se o site usa streaming de vídeo, hospedagem, animações em Flash, HTML, se será estático ou dinâmico, entre outros), leve em conta o orçamento e organize os recursos disponíveis. Se está trabalhando em uma loja virtual ou site de serviço, estude bem a concorrência. E o mais importante (que vale para qualquer site ou app): inclua espaço no seu projeto para futuras evoluções, quando a página estiver encaminhada.

2 URL não combina

O endereço principal do site deve estar alinhado com a personalidade da sua marca. Deve passar uma mensagem e, ao mesmo tempo, ser atraente. O nome do seu domínio não pode ser tão genérico – que possa perder o foco, mas nem tão específico que se torne complicado ou trabalhoso para digitar. Escreva e reescreva, fale me voz alta e digite no browser para ver como fica. Pergunte aos amigos o que acham. Uma boa URL é aquela que fica guardada na cabeça do usuário e é capaz de se espalhar pelas redes sociais como uma boa forma de marketing online.

3 Falta de visibilidade

Existem muitos sites com conteúdo bacana. Mas muitos acabam passando despercebidos no Google por não investirem em mecanismos de publicidade. O SEO (Seacrh Engine Optimization) é o mais comum, fácil e rápido de ser conquistar esse objetivo. Este é o caminho para fazer com que a sua página seja encontrada nos mecanismos de busca. Ferramentas como Google AdWords permitem que um desenvolvedor iniciante consida facilmente criar uma campanha de divulgação. Se você puder investir, existem agências especializadas em marketing digital que podem ajudar a colocar seu site visível até mesmo nas redes sociais.

Design

4 Cor errada

Há dois erros clássicos: criar uma interface abusando de uma só cor ou uma dezena delas. É preciso estudar as cores e manyer o equilíbrio para não exagerar na dose. O primeiro passo é conhecer o público e os objetiso do projeto. O azul é a cor mais segura porque agrada a homens e mulheres. Além disso, estimula o cortex pré-frontal e causa a sensação de produtividade e estabilidade, segundo Flávia Alessandra Ferreira, gerente de marketing da V2 Design. Não é à toa que Twitter e Facebook se deram tão bem no azul. As cores devem ser usadas para complementar a mensagem e não para serem a mensagem em si. Um vermelho brilhante, por exemplo, seria péssimo para um site da área da saúde.

5 Tipografia ruim

Títulos muito grandes ou uma mistura de fontes diferentes na mesma página é uma das principais gafes cometidas por muitos sites. Antes de escolher a tipografia correta para a sua página, alguns fatores devem ser considerados, como a legibilidade (facilidade de leitura), tamanho, cor e, principalmente, contraste com plano de fundo. Para títulos, um bom padrão de tamanho está entre 12 e 16 pixels. Evite também fontes com serifa, como Times New Roman, que não conseguem ser bem definidas pelo monitores, inclusive smartphones e prejudicam a leitura. Três opções muito usadas são Helvetica, Trajan e Garamond.

6 Tela branca

Segundo Tiago Fernandes, Diretor da Skidun, uma das piores inimigas das boas ideias é a tela branca. “Excluídas raríssimas exceções, é sempre mais indicado pesquisar referências e investir em alguns rabiscos no papel antes de salvar o primeiro PSD no Photoshop. É mais rápido, menos intimidador e você poderá até descobrir prazer nisso”. Um bom exercício de criatividade para qualquer designer.

Navegação

7 Não localizar seus usuários

Um erro clássico é pensar que todos os usuários irão começar a navegar pela página inicial. “Na maioria dos casos, acontece justamente o contrário, muit em funmção da relevância de conteúdo oferecida pelas páginas internas aos buscadores. Desta maneira, é educado da sua parte informar ao usuário onde afinal de contas ele foi parar”, explica Tiago Fernandes. Use marcações nos botões do menu para que sinalizem em que seção do site ele está.

8 Cadastros desnecessários

É muito comum ver blogs ou portais de notícias disponibilizarem conteúdos gratuitos e pagos (ou restritos). Muitas vezes, ambos os conteúdos são indexados pelos buscadores de forma que, quando um link é encontrado, i usuário é redirecionado para uma tela de login ou cadastro. “A primeira coisa a se pensar é que conteúdos restritos ou pagos não devem ser indexados para não gerar esse tipo de frustração ao usuário”, aponta Filipe Fernades, especialista em usablidade. Quando não puder evitar esses cadastros, ao menos, avise sobre o procedimento necessário no primeiro clique.

Velocidade

9 Página muito lenta 

Velocidade é a regra do jogo online. Uma fração de segundo pode ser tudo o que um visitante precisa para abandonar um site. A primeira premissa é: não se pode forçar o usuário a esperar por longos tempos de carregamentos. Outro ponto importante é: não adianta ter um site rápido, mas que tenha a navegação complicada. É fácil de usar?A navegação é eficiente? Os textos são objetivos e curtos? Decida se o conteúdo multimídia é realmente necessário. Se não agregar nada, corte, se sim, veja se não pode ser baixado depois de um pedido.

Use som mono ao invés de estéreo e se puder comprimir elementos de vídeos sem comprometer a qualidade, não pense duas vezes. Escolha imagens pesadas apenas se não houver outra opção e nunca use imagens maiores que o necessário. JPEGs são ótimos para fotos e GIFs para todo o resto. Já PNG, por exemplo, pode ser melhor que GIF para line-art e ferramentas de otimização. Uma dica de ferramenta é o Smush.it, que pega todas as imagens de um site e usa ferramentas open source para otimizá-las. Pequenas alterações no código também podem fazer a diferença.

A forma como folhas de estilo em CSS serão anexadas influencia na velocidade. Elementos <link> no fim da página podem impedir a renderização regressiva, atrapalhando o browser. Por isso, use <link>, coloque as folhas de estilo no início da página e junte scripts e estilos em arquivos únicos. Conteúdo externo exagerado, como anúncios, também gera lentidão. Compare ganhos da publicidade com perda de performance e cheque sempre sua hospedagem virtual.

Múltiplas plataformas

10 Admitir a diferença entre plataformas

Uma bela fonte pode perder totalmente a função s oferecer pouca legibilidade em telas pequenas. “Para piorar e aniquilar de vez com qualquer chance de leitura, coloque ainda o texto em cor branca sobre um fundo amarelo. É impossível que alguns usuários nem mesmo saibam que existe um texto”, alerta Tiago Fernandes, da Skidun. Ao desenvolver uma página mobile, dê prioridade às dimensões de textos e imagens, já que o espaço é bem menor.

Confira mais 40 problemas e soluções para sites na edição 145 de Revista W!

Data: nov. 2013
Fonte: revistaw.com.br