Crítica Web Design # 77: Capital Chás
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 Capital Teas. Vamos pular e ver o que pensamos!
Explorar recursos de design
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 Capital Chás
O Capital Teas é um comerciante de chá especializado de quinta geração, propriedade familiar. Eles oferecem mais de 175 variedades de chás de folhas soltas da mais alta qualidade e infusões de ervas dos melhores países e regiões em crescimento do mundo, incluindo Sri Lanka, Índia, China, Japão, Malawi e Quênia. Seus produtos de chá incluem bules tradicionais e modernos, cervejeiros e infusores e muitos outros itens especiais. Eles também oferecem mel artesanal, geléias, chocolate com infusão de chá e outros alimentos gourmet que acompanham seus chás.
Aqui está uma captura de tela da página inicial:
Primeira impressão
Minha primeira impressão de um site baseia-se fortemente na idéia de saber se posso ou não saber exatamente o que é isso nos primeiros três segundos após ver a página inicial. Isso mesmo, três segundos. Você precisa chamar minha atenção, me dizer quem você é e o que você é em menos tempo do que a pessoa comum amarra um sapato.
No caso de Capital Teas, eles passam neste teste com cores vivas. Este site grita loja de chá on-line (no bom sentido). Vejo fotos de chá por toda parte, a palavra “chá” aparece várias vezes, as cores sugerem chá; Sou instantaneamente bem orientado e sei que se estou procurando comprar um chá, estou no lugar certo.
No que diz respeito à estética visual e ao layout do site, eu diria que ele tem bons ossos. Há uma estrutura sólida e uma estética visual atraente iniciada. Precisa de um pouco de trabalho, mas nada muito importante. Vamos dar uma olhada em algumas das áreas específicas para ver se podemos encontrar algumas sugestões de melhoria.
Cabeçalho
Uma das áreas em que vejo mais problemas é o cabeçalho. Parece que ele foi projetado para ser simples, mas o departamento de marketing pegou e jogou no lixo. Há tanta coisa apertada que parece confusa e permanece como uma forte contradição com a estética razoavelmente limpa estabelecida pelo resto da página.
Os ícones sociais, em particular, podem usar uma grande limpeza. O design de cada um é inconsistente, vários itens do Facebook parecem redundantes, há problemas de sobreposição e tudo neste local é repleto de muito pouco espaço para respirar.
O “Acordo do dia” e a inscrição no boletim do outro lado também estão melhorando o visual. Esses elementos não estão alinhados particularmente bem com qualquer outra coisa na página e parecem lançados como uma reflexão tardia.
Como corrigi-lo
Algumas decisões difíceis precisam ser tomadas aqui, porque algo tem que acontecer. De fato, várias coisas têm que ir. Parece que alguém tentou colocar um monte de elementos de rodapé em um cabeçalho apenas para obter um lugar melhor na página, mas lembre-se, se tudo for especial, nada será especial. Você precisa escolher o que tem mais importância e dar a seus itens uma hierarquia visual clara.
Eu recomendo mover a maior parte do conteúdo do cabeçalho para outro lugar. Tente identificar os elementos absolutamente críticos. Comece com o logotipo. É uma peça bonita que define uma ótima sensação do mundo antigo para o site, dando mais atenção removendo os elementos circundantes. O outro item necessário é o carrinho de compras. Se você pode reduzir o cabeçalho para esses dois itens, você está indo muito bem. Caso contrário, permitirei a inclusão do acordo do dia. Tudo se move para o rodapé ou melhor integrado ao restante da página.
Enquanto você está nisso, encontre um conjunto de ícones sociais simples que tenha ícones correspondentes para todas as redes sociais que você precisar.
Navegação
Abaixando a página, em seguida, chegamos à navegação. Fazer uma navegação dupla eficaz e sem confusão é um negócio complicado, mas eu realmente gosto da maneira como ela é tratada aqui. Um menu de texto puro foi combinado com uma caixa de pesquisa e empilhado em um menu colorido baseado em ícones, e o resultado é uma grande variedade de maneiras de encontrar o que estou procurando.
Uma coisa que acho um pouco estranha é o design dos menus suspensos na navegação principal. Eles têm uma sensação desconectada e flutuante que quase parece que algo não está funcionando direito.
Eu recomendo repensar isso e experimentar diferentes idéias visuais que tornam as listas suspensas mais integradas e conectadas ao menu principal.
Conteúdo principal
A área de conteúdo principal consiste em três caixas. Estes são uma boa mistura de formatos e consistem em um grande controle deslizante, uma imagem estática e um pequeno filme (que felizmente não é reproduzido automaticamente). Esta área é ótima. Adoro o fato de ter sido emparelhado em três caixas, o layout é bonito e limpo e realmente dá foco aos produtos e informações que estão sendo mostrados.
Fotografia
Como fotógrafo, sou um otário por boas fotos e este site é entregue com sucesso nessa área. Parece que os proprietários realmente investiram em fotografia de qualidade e vale a pena fazer seus produtos parecerem muito sofisticados e atraentes.
Tipografia
Após o cabeçalho, a segunda área importante que precisa de atenção imediata é a tipografia. A maioria dos designers recomenda que você escolha um ou dois tipos de letra sólidos para um projeto inteiro, talvez três se estiver se sentindo aventureiro e com habilidade suficiente para realizá-lo. Perdi a conta de quantos tipos de letra vi na página inicial sozinho neste site.
Seu tipo é um dos indicadores mais fortes do estilo do seu site. Ele define um clima, um período de tempo, um tom profissional e muito mais. Se é inconsistente e disperso, também são as mensagens que está transmitindo.
Definitivamente, recomendo desfazer todas as várias fontes e escolher uma ou duas com um alto grau de legibilidade e um tom que corresponda às intenções do design. O resultado será uma sensação profissional muito mais consistente para o site como um todo.
Conteúdo Secundário
Há uma faixa de caixas na parte inferior do site que chamarei de "conteúdo secundário" para nossos propósitos. Esse layout combinado com as três caixas acima é simples e sólido. Isso me lembra alguns dos layouts em nosso artigo 10 Exemplos de layout de site sólidos.
Meu único problema real nessa área é a tipografia, que eu já reparei. Especificamente, o problema aqui é que o tipo de letra em "visualizar este produto" é tão fino que é quase ilegível.
Conclusão
Em resumo, o Capital Teas tem um ótimo começo para um site super atraente. A estrutura básica do layout é sólida, as fotos são lindas e a navegação dupla funciona bem, embora eu normalmente desencoraje essa rota. Algumas áreas para se concentrar em melhorar incluem o cabeçalho, que precisa ser organizado, e a tipografia, que precisa ser emparelhada em alguns tipos de letra selecionados.
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.
