Crítica Web Design # 13: Prêmio Anual de Design
Toda semana, damos uma olhada em um novo site e analisamos o design. Apontaremos tanto as áreas que foram bem-sucedidas quanto as que poderiam usar algum trabalho. Por fim, finalizamos solicitando que você forneça seus próprios comentários.
O site de hoje é o Annual Design Awards.
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 $ 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 os Annual Design Awards
“O Annual Design Awards (apelidado ANNDAS) é um reconhecimento global das comunicações visuais de ponta, criadas para recompensar contribuições excelentes dentro da indústria de Design. Reunimos alguns dos talentos mais incríveis e figuras respeitadas de todo o mundo para julgar este evento global que visa se tornar o principal prêmio de design e estabelecer padrões internacionais. ”
Aqui está uma captura de tela da página inicial:
Design geral
Quero começar dizendo que este já é um site interessante. Eu amo o preto em conjunto com pops de laranja. Essa repetição única de uma cor brilhante ajuda a atrair os olhos dos usuários para as partes importantes da página.
O layout é sólido e contém bastante espaço em branco. Além disso, o volume visual dos objetos é bem disperso para destacar as áreas importantes.
Felizmente, parece que as pessoas que julgam o design dos outros têm um forte senso de design! Agora que analisamos o todo, vamos detalhá-lo peça por peça.
Área Logo
Vamos começar no lugar mais óbvio: o canto superior esquerdo. Aqui vemos o logotipo do Annual Design Awards uma espécie de círculo circular radiante.
O logotipo é simples, mas eficaz. Isso sugere um público jovem e nervoso que não gosta muito de linhas limpas e de um minimalismo chato (o site é realmente bastante limpo, mas de uma maneira sorrateira).
Os círculos são uma ideia ousada executada de maneira sutil (com bom gosto). É um elemento de design realmente simples que ajuda a chamar sua atenção para o logotipo e, consequentemente, o nome do site. Isso não funcionaria em um site confuso, mas essa página é simples o suficiente para não causar uma confusão visual e, em vez disso, cumpre seu objetivo perfeitamente.
Navegação
A área de navegação é bastante simples, apenas algum texto acima de uma barra horizontal com quebras para cada seção.
Eu realmente gosto da escolha da fonte aqui. Parece algo personalizado feito com @ font-face, então fiquei surpreso quando espiei o código e vi que era simplesmente o itálico da Geórgia.
Passar o mouse sobre uma seção destaca a barra em laranja. Isso é legal, mas parece um pouco estranho que o texto não faça algo tão bom (isso é bastante exigente, mas em sites de ótima aparência, eu tenho que falar sobre algo!).
Entendo por que o designer não alterou o texto tão bem, pois provavelmente seria um pouco difícil ler pequeno texto laranja em fundo preto. Talvez uma transformação CSS muito leve para girar o texto ao passar o mouse ajudaria. Não é grande coisa se for ignorado em navegadores mais antigos e seria um bom aceno para o estilo do logotipo.
Apresentação de Slides
Eu amo apresentações de slides em JavaScript, então acho que esta seção é ótima. A imagem desliza para a esquerda quando uma nova aparece e o texto tem um bom efeito de desbotamento. Também gosto muito da borda transparente e das marcas de corte.
No entanto, o botão reproduzir e pausar aqui não está diminuindo para mim. Eu vi um gráfico que eu queria ver novamente, mas não tinha como voltar atrás. Conseqüentemente, fui forçado a esperar que ele voltasse novamente (o que levou um tempo).
Eu recomendo colocar uma linha de pequenos ícones de círculo vinculados a cada imagem. É simples e sutil e oferece ao usuário uma sensação de onde eles estão na apresentação de slides e algum controle sobre a visualização de imagens específicas.
Seção de entrada
A próxima seção é onde os usuários normalmente se inscreveriam para entrar, no entanto, este é fechado por enquanto, conforme indicado pelo gráfico de notas adesivas.
O adesivo viola completamente o design (intencionalmente) e faz com que você não perca o fato de que os envios estão fechados. Isso funciona bem e informa imediatamente os usuários das informações que eles precisam saber.
Os gráficos sob o adesivo são um pouco perturbadores. Os preços parecem estranhamente colocados, com um esbarrando naquela caixa retangular à esquerda e o outro não esbarrando nela. Não sei exatamente o que está acontecendo aqui, mas parece um pouco fora.
Rodapé e formulário de contato
A última área que veremos é a parte inferior da página onde você pode se inscrever para receber informações. Há também os links de rodapé padrão e as informações sociais abaixo do formulário de contato.
Gosto que o formulário de contato esteja aninhado aqui em vez de em uma página dedicada e que haja apenas dois campos a serem preenchidos. Notei que os rótulos dos campos desaparecem quando você clica na caixa e não voltam quando clicam sem digitar nada. Isso apresenta um problema de usabilidade, pois eu estava clicando na página, mas não tinha certeza de qual caixa era o nome e qual era o email quando voltei.
Finalmente, a área do rodapé parece ótima, mas eu gostaria de ver algum espaço entre as palavras "Siga-nos" e o ícone que o acompanha. Agora eles estão um pouco esmagados.
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.
Interessado em ter seu próprio site criticado? Você pode encontrar mais aqui.
