Crítica Web Design # 25: Highwire
Bem-vindo à nossa 25ª 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. Finalmente, terminaremos pedindo que você participe e forneça seus próprios comentários. Vote na enquete na parte inferior desta página e / ou deixe um comentário com seus pensamentos!
O site de hoje é o Highwire.com, uma plataforma de loja online personalizada.
Se você deseja enviar seu site para ser apresentado em uma futura Crítica de design, leva apenas alguns minutos. Cobramos US $ 24 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 Highwire
“Criar sua própria loja de comércio eletrônico nunca foi tão fácil e acessível. Inscreva-se para uma avaliação gratuita hoje e comece a construir sua loja em apenas alguns minutos! ”
Aqui está uma captura de tela da página inicial:
Impressão geral
Se você passou aqui hoje para me ouvir falar de um design ruim, ficará desapontado. Acho que esse pode ser o melhor design de website enviado ainda para uma crítica de design.
O Highwire é simplesmente um site maravilhoso e é tão bem feito que seremos forçados a usá-lo como mais uma ferramenta de ensino positiva do que negativa. Continue lendo, porque podemos aprender muito analisando esse design. E não se preocupe, há algumas pequenas coisas que sugiro melhorar ao longo do caminho.
Paleta de cores
A declaração mais ousada feita neste site é colorida. A qualidade das imagens é excelente, mas é a cor que realmente chama sua atenção assim que você carrega a página. As cores básicas usadas aqui não estão exatamente quebrando o molde: verde, vermelho, azul, cinza e um pouco de laranja, mas são misturadas de uma maneira muito atraente.
Observe, porém, que eles escolheram um tom super brilhante de cada cor que realmente salta da página. Uma mistura de gradientes radiais e lineares faz com que as cores pareçam muito mais vibrantes e vivas, trazendo uma sugestão sutil de textura.
Layout e alinhamento
O layout deste site é sólido e realmente utiliza o uso adequado de espaço em branco e distribuição visual de peso. Observe na imagem modificada abaixo como linhas verticais fortes foram estabelecidas para garantir que tudo esteja bem e firme.
Observe também que o designer escolheu um alinhamento esquerdo e ficou preso a ele. Todo o texto é alinhado à esquerda e até os botões sob as miniaturas seguem essa tendência. Seus designs tendem a parecer muito mais coesos e consistentes quando você evita alternar alinhamentos em inervais aleatórios em todo o design.
Apesar de serem seções diferentes do código, o cabeçalho e o rodapé usam o mesmo gradiente para que você tenha a ilusão de um plano de fundo contínuo que o conteúdo flutua acima. Parece que eles simplesmente estilizaram a tag body, mas têm o benefício semântico de manter um cabeçalho e rodapé fortes.
Sombras e reflexões
Ultimamente, reflexões, gradientes e sombras suaves estão dando lugar a cores sólidas e a sombras duras e sem plumas. Quando começamos a deixar a web 2.0 agredida e abusada olhar para trás e passar para a próxima vítima, ainda é bom ver alguém usar o estilo do jeito que deveria ser.
As sombras e os reflexos aqui são bastante sutis e foram estruturados com cuidado para parecer realistas e simplesmente bonitos. Se você deseja adicionar um toque visual a um elemento, vale a pena dedicar um tempo para ajustar e experimentar até obter algo que realmente acrescente requinte e brilho a uma página, em vez de uma camada superficial de maquiagem.
The Burst: Evolved
Uma coisa que você aprende ao projetar para uma grande empresa de marketing é que os profissionais de marketing adoram explosões. Algo grande e pontudo que viola o design e, portanto, chama a atenção do cliente. Se os departamentos de marketing, e de fato muitos designers tivessem o que queria, tudo ficaria assim:
Só para você saber, da perspectiva do design, isso é clichê, feio, exagerado, desatualizado e qualquer outro adjetivo negativo que você possa imaginar. Como regra geral, nunca coloque uma estrela em nada.
Felizmente, esse designer entendeu essa regra e criou uma solução muito mais moderna e atraente, mostrada abaixo. Essa fita 3D envolve uma barra que descreve o novo recurso. Isso viola significativamente o design o suficiente para capturar sua atenção, mas não o suficiente para prejudicar a aparência de toda a página.
Melhoria sugerida
Como eu já disse várias vezes, esse é um design tão bom que é difícil encontrar algo errado com ele. No entanto, há algumas coisas que eu consideraria melhorar.
Para iniciantes, o site usa o Cufon para a tipografia personalizada. Reclamei sobre isso em nossa última crítica e continuarei a fazer o mesmo argumento sempre que vir o Cufon sendo usado. @ font-face é uma solução melhor, ponto final. O texto @ font-face é totalmente selecionável, o Cufon não. @ font-face usa CSS puro, o Cufon requer que o JavaScript esteja ativado. Como mencionei na última vez, quando o site da Cufon sugere usar o @ font-face, você sabe que é hora de jogar a toalha e pular a bordo.
A outra coisa que me incomoda é a barra do Facebook no topo. Se você desenhar uma linha no centro do texto nesta barra, como fiz abaixo, poderá ver que o logotipo do Facebook está desajeitadamente descentralizado. Não tenho certeza se isso foi intencional ou um acidente, de qualquer forma, eu o colocaria perto do centro.
Outras páginas
Terminaremos dando uma olhada rápida em algumas das outras páginas do site. Como você pode ver, eles são igualmente atraentes e todos muito bem projetados. Eu particularmente gosto das tabelas de preços!
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 respeite o designer do site e ofereça conselhos construtivos claros e desprovidos de insultos severos.
