Crítica Web Design # 40: FanExtra
Bem-vindo à nossa 40ª crítica de design! Toda semana, damos uma olhada em um novo site e analisamos o design. Vamos apontar as áreas que foram bem executadas, além daquelas que poderiam usar algum trabalho. Por fim, finalizamos solicitando que você forneça seus próprios comentários.
O site de hoje é o FanExtra, um fantástico site de recursos para designers.
Explore o Envato Elements
Se você deseja enviar seu site para ser apresentado em uma futura Crítica de design, leva apenas alguns minutos. Cobramos US $ 34 pela crítica do seu design - consideravelmente menos do que você pagaria por um consultor para dar uma olhada no seu site! Você pode encontrar mais aqui.
Sobre a FanExtra
“Tudo isso começou com um longo verão há mais de dois anos e uma paixão pelo design. Depois de apreciar alguns dos tutoriais do Photoshop publicados, decidi escrever alguns dos meus. Criei um blog para esse fim (PSDFAN.com) e comecei a usá-lo como minha saída criativa. Eu queria oferecer mais para a nossa comunidade em crescimento e poder evoluir o PSDFAN para algo maior. A ideia da FanExtra nasceu logo! A rede FanExtra é um local para designers de todo o mundo se unirem e explorarem suas idéias e criatividade. Você pode participar das discussões em nossos fóruns ou realmente aprimorar seu aprendizado através do nosso programa de associação FanExtra. ”
Aqui está uma captura de tela da página inicial:
Impressão inicial
O FanExtra é um dos casos mais interessantes para uma crítica de design que já tivemos. A razão para isso é que, na verdade, é uma página realmente atraente, mas que eu recomendaria que fosse quase completamente repensada.
Cada seção da página, do logotipo às miniaturas, fica ótima. No entanto, quando você analisa a página como um todo, existem alguns problemas genuínos com o fluxo de cada seção, além do maior problema, que é a clareza da comunicação da mensagem principal.
Esse problema é bastante comum e surge devido a uma palavra muito suja no design da web: suposição. Aqui, o designer provavelmente está próximo do projeto e, portanto, naturalmente tem problemas para ver que um visitante pode não entender o que está acontecendo. A suposição é que um visitante que encontrar esta página saberá o que é “FanExtra”, o que definitivamente não é algo que deve ser assumido aqui.
A comunicação
Quando você acessa uma página da Web, analisa instintivamente a área do cabeçalho da mesma maneira que analisaria o cardápio de um restaurante de fast food. As possíveis perguntas incluem: Onde estou? Qual é o custo? O que eles vão me dar pelo meu dinheiro? Eles servem produtos de Coca-Cola ou Pepsi? Ok, talvez essa última pergunta não se aplique aqui.
O que quero dizer é que, quando você olha para o cabeçalho deste site, ele não está abordando adequadamente todas essas questões cruciais:
Vemos como o site é chamado (FanExtra), juntamente com um grande campo para algum tipo de inscrição. Isso significa que estou inscrito na rede? Então, este é um serviço gratuito? À direita, vemos algo que sugere “tutoriais”, o que nos coloca no caminho certo, seguido por palavras como “texturas” e “vetores”, que representam um jargão bastante específico.
Se sou designer, nesse ponto provavelmente já descobri o que está acontecendo até certo ponto, mas esse é realmente o objetivo aqui? O visitante deve encontrar pistas e usá-las para interpretar o que é o site?
O mistério é revelado
Quando chegamos ao meio do site, o mistério é revelado:
Agora podemos ver que a FanExtra é "uma rede de sites tutoriais incríveis" oferecendo associações por US $ 9 por mês. Essa é a parte de comunicação mais importante da página e, no entanto, está escondida no meio da página. Essa deve ser a primeira coisa que o usuário vê.
Na verdade, acho que essa mensagem poderia ser ainda mais clara. A frase "sites tutoriais impressionantes" ainda é bastante vaga se você pensar sobre isso da perspectiva de quem está de fora. Algo como "sites tutoriais incríveis para profissionais criativos" realmente levaria essa afirmação muito mais longe. Imediatamente, você colocou seu público-alvo diretamente no nariz, de modo que, quando encontro esta página, recebo uma calorosa saudação informando que este site é especificamente para pessoas como eu.
Contraste visual vs. desorganização visual
Outro problema que vejo nas mensagens é como elas são estruturadas do ponto de vista visual. Vamos dar uma olhada na comunicação principal como está atualmente:
Aqui vemos uma pilha de três linhas, cada uma usando texto colorido diferente e pequenas variações da mesma fonte em termos de negrito e tamanho. Eu posso e escrevi artigos inteiros sobre contraste no design, mas o que se resume é o melhor dito em um conselho do autor do design Robin Williams: "não seja um covarde". Com isso, ela quer dizer que, para usar o contraste de maneira eficaz, os elementos realmente precisam se destacar bastante, caso contrário, o resultado é simplesmente desordem visual.
Veja como outro programa popular de associação de design, o Think Vitamin, estrutura a principal mensagem em sua página.
Aqui vemos um contraste enorme e superestimado entre o título e o subtítulo. O resultado é uma comunicação bonita e clara que lê perfeitamente. As pessoas que navegam na página leem o título quase por acidente e, se tiverem interesse, podem reservar um tempo para ler o subtítulo.
As características
A página termina com um conjunto massivo de marcadores no lado esquerdo. Esse é um uso bastante desagradável do espaço e cria uma lacuna desconfortável no lado direito.
A solução rápida para isso é simplesmente dividir os marcadores em duas pilhas separadas:
No entanto, isso é um band-aid e acho que a página poderia realmente fazer alguma cirurgia importante. Abordaremos brevemente isso na próxima seção.
Minhas recomendações gerais
Sinceramente, não acho que a instalação ininterrupta de coluna dupla esteja funcionando neste site. É muito rígido e, na verdade, interrompe o fluxo natural da comunicação, em vez de facilitar, que é o objetivo de um layout estruturado.
Minha recomendação é lançar esse layout completamente. Primeiro, abandone a estrutura rígida de coluna dupla. Em seguida, mova a comunicação principal para o topo da página. Crie uma caixa grande "em destaque" que abranja toda a largura da página e destaque parte do conteúdo que você detalha posteriormente (mais de 140 arquivos, 40 vetores, etc.). Certifique-se de que o título use contraste forte, frases e alvos nítidos e no máximo duas cores que combinem perfeitamente.
Por fim, depois de criar essa incrível área de cabeçalho que define perfeitamente o que é o site, para quem ele é e o básico do que ele inclui, você pode se concentrar em organizar suas outras informações abaixo, possivelmente em um formato de duas ou três colunas.
Sua vez!
Agora que você leu meus comentários, participe e ajude, dando ao designer mais alguns conselhos. Deixe-nos saber o que você acha que é ótimo no design e o que você acha que poderia ser mais forte. Como sempre, solicitamos que você também seja respeitoso com o designer do site e ofereça conselhos construtivos claros, sem quaisquer insultos severos.
