Crítica no Web design # 71: A pata mais fofa
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 é a Cutest Paw, uma galeria de fotos de animais em todo o mundo. Vamos pular e ver o que pensamos!
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 $ 49 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 Cutest Paw
Este site definitivamente leva o prêmio pela nossa crítica mais "awwww" indutora de todos os tempos. Este site não passa de um fluxo interminável de fotos de animais fofos e engraçados. Como podemos suportar olhar para algo assim e ainda ser capaz de oferecer feedback construtivo sem nos distrair com os filhotes dormindo? Felizmente, somos 100% dedicados a ajudar os criativos a melhorarem o seu design na web. Fique para trás filhotes, temos um trabalho a fazer.
Aqui está uma captura de tela da página inicial:
Primeira impressão
Sempre que avalio um design, vou além da estética e pergunto qual é o objetivo da peça e se o design concluído está ou não atingindo esse objetivo. O objetivo aqui para um usuário é simples: visualizar muitas e muitas fotos. O site Cutest Paw parece servir muito bem a seu propósito. O layout é otimizado para uso máximo do espaço e não desperdiça muitos pixels em colírio supérfluo não crítico.
Como a crítica de design da semana passada, essa será bastante breve. O site Cutest Paw é muito simples, portanto não há muito o que criticar. No entanto, como sempre, tenho alguns comentários que acredito que ajudarão o designer a melhorar o site. Vamos pular e começar.
Layout
Este site é um excelente exemplo da utilidade do jQuery Masonry, um incrível plug-in de layout que realmente torna fácil a configuração de layouts impossíveis. A beleza da Maçonaria é que ela renuncia ao comportamento do CSS que configura um layout horizontal antes de distribuir o conteúdo verticalmente. Em vez disso, cria uma pilha vertical justa e agradável, semelhante à forma como os tijolos são colocados.
O resultado neste caso é uma grade incrivelmente estreita de imagens que, como mencionei acima, realmente maximiza o número de fotos que podem ser visualizadas em um espaço pequeno. O site também usa uma técnica de rolagem infinita que continua carregando conteúdo à medida que você avança na página.
A combinação de layouts de estilo de alvenaria e rolagem infinita foi recentemente popularizada pelo Pinterest, que você não pode deixar de pensar ao usar este site. A combinação dessas duas técnicas facilita a navegação sem precedentes. Por comparação, a paginação requer muito esforço da parte do usuário. Aqui, basta rolar e rolar até ver tudo o que há para ver ou decidir mudar para outra coisa.
Barra Lateral
Como o conteúdo continua rolando para sempre, torna-se necessário ter uma navegação um pouco fixa. O Pinterest usa uma barra na parte superior do site, o Cutest Paw segue seu próprio caminho e implementa uma barra lateral atrasada que rapidamente se atualiza à medida que você avança na página. Isso é bastante eficaz, mas devo admitir que a animação, que é um tanto encantadora a princípio, rapidamente se torna perturbadora e um tanto irritante.
A barra lateral é bem projetada e claramente organizada, do ponto de vista da usabilidade (animação à parte), é muito bem feita. É bom ver um botão "Voltar ao topo" implementado aqui, assim que comecei a rolar, procurei um deles imediatamente e o encontrei facilmente. No entanto, pode ser mais eficaz, pois é uma espécie de escala na parte superior ou inferior do lado direito da pilha de fotos, onde a atenção do usuário provavelmente será focada e reduzirá a necessidade de procurá-la.
Tema
Vale a pena discutir a estética geral da página; de fato, pode ser um dos pontos mais importantes a considerar. Por um lado, a página é atraente. O fundo preto é elegante, elegante e ajuda as fotos a se destacarem. Por outro lado, o histórico e até mesmo os adjetivos que acabei de usar parecem todos errados para este site.
Palavras como "fofo" e "difuso" são como as pessoas descreveriam o conteúdo, e ainda o tema visual do site é uma textura grunge preta. Esses dois conceitos parecem opostos polares e criam uma espécie de dissonância visual. Como já afirmei, sou um grande defensor do uso do design não apenas como um colírio para os olhos, mas para reforçar um propósito e uma mensagem. O design da sua página transmite uma personalidade e, quando você a interpreta errado, diminui o impacto e o sucesso do projeto. A justaposição de conceitos neste design é como ver um motociclista de 300 libras de couro, coberto de tatuagem, ensinando uma aula de pré-escola, os dois simplesmente parecem estar em desacordo.
O designer acertou em cheio o layout, que é honestamente a parte mais complicada de um site como esse. Agora é hora de reformular completamente a aparência do site, mantendo a estrutura principal. Comece com um esquema de cores mais amigável e / ou use uma textura muito menos ousada. Talvez algo que transmita uma sensação suave (sem ser feio e brega). Confira Padrões sutis para obter ótimos recursos.
Logotipo
O logotipo é mostrado na captura de tela anterior. É obviamente muito apropriado para o site, a pata é um símbolo instantaneamente identificável. Como logotipo, porém, ele tem uma falha importante no fato de ser tão genérico. É um círculo com uma pata nele, talvez a primeira coisa que 99 de 100 não designers inventariam, dadas as instruções para criar um logotipo de pata.
O problema com isso é que você realmente não pode possuí-lo. Se você se esforçar o suficiente, provavelmente poderá encontrar algo semelhante para várias empresas e sites. Talvez você não esteja buscando criar uma marca global, mas o objetivo de um logotipo ainda é ter algo que dê uma cara à sua marca (por menor que seja) e torne-a identificável. Isso não está no topo da lista de prioridades, mas, a longo prazo, eu recomendaria explorar algo um pouco mais exclusivo.
Enviar Página
Como mencionei no início deste artigo, este site é bastante simples, então encerraremos isso em breve. A última coisa que gostaria de discutir é a página em que os usuários podem enviar suas próprias fotos:
O problema que tenho com esta página é o tipo de efeito de Iniciação que está acontecendo. Você tem uma captura de tela de uma página da Web lançada em uma página da Web muito parecida. É inclinado para se destacar um pouco, mas ainda é uma combinação perturbadora. O problema aqui é que o plano de fundo da página e a imagem são essencialmente os mesmos, portanto a imagem não é realmente separada de maneira significativa. Eu recomendo talvez analisar um efeito de traçado e cortar essa grade de imagem com uma visão ainda mais ampliada. Como uma saída fácil, você pode colocar aqui um animal grande e fofo que de alguma forma transmite a ideia de compartilhar, fazer upload, etc.
Conclusão
Para resumir, aqui está uma lista rápida de meus pensamentos sobre o design.
Boa
- Layout: este é um uso perfeito para alvenaria jQuery
- Rolagem infinita: facilita a navegação
- Navegação simples, mas eficaz
Precisa de trabalho
- Estética geral: muito escura e suja
- Logo: muito genérico
- Página de inscrição: a captura de tela não está funcionando
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.
