Crítica Web Design # 11: Scott Block
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 portfólio pessoal de Scott Block, um web designer de Maryland.
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 Scott
“Eu moro em Columbia Maryland, a uma curta distância de carro de Baltimore e da capital do país. Quando eu tinha doze anos, combinei minha paixão pelos Baltimore Ravens com meu crescente interesse em tecnologia e comecei a fazer sites sobre os Ravens. Desde então, refinei diligentemente minhas habilidades e agora crio sites para várias pessoas e organizações. Agora sou proficiente em combinar html com css, javascript, php e ajax, para criar sites bonitos e funcionais. "
Aqui está a página inicial do site:
Embora haja definitivamente algum potencial aqui, há muitas coisas que eu corrigiria nesta página. Vamos olhar para eles um por um.
Esquema de cores
As cores usadas no site de Scott criam uma paleta bastante agradável quando removidas individualmente, como visto abaixo.
No entanto, não sou louco pela distribuição das cores. Eles parecem implementados aleatoriamente em pontos da página simplesmente por uma questão de variação, em vez de serem aplicados com propósito e lógica. Pense em cada escolha de cor que você faz e como ela se vincula ao restante do conteúdo da página.
Logotipo
Sua posição no canto superior esquerdo do site faz desse logotipo a primeira coisa que os usuários veem quando visitam o palco. Você quer aproveitar esta oportunidade para causar uma forte primeira impressão. Infelizmente, sinto que esse logotipo está acabando.
Eu posso ver como as formas dos blocos estão sendo trabalhadas nas letras, presumivelmente para vincular ao sobrenome do designer, mas simplesmente não está funcionando. O SB tem legibilidade bastante fraca e parece um pouco antiquado.
Navegação e cabeçalho como um todo
A área de navegação é bastante simples, apenas algum texto com divisores horizontais e um sublinhado para indicar a página atual. Eu sou a favor de manter a navegação simples, então acho que esta área está bem feita.
Quando você passa o mouse sobre um link na navegação, um ícone aparece sob o logotipo do Scott Block. Esse é um efeito puro que eu nunca vi executado dessa maneira (com o efeito de foco tão distante do link).
Quando você analisa a área do cabeçalho como um todo, existem alguns problemas notáveis que podem ser abordados. Como eu disse acima, o efeito de foco do ícone é puro, mas está causando alguns problemas. Quando você não passa o mouse sobre um link na navegação, há um grande espaço vazio ao lado da cópia do cabeçalho que faz você se perguntar por que não está alinhado com nada.
Uma maneira possível de ajudar nisso é aplicar um ícone ao estado padrão que muda para outro ícone quando você passa o mouse sobre um link e volta ao ícone original quando o cursor passa. Infelizmente, quando o efeito de foco do ícone está presente, o logotipo e o ícone criam uma pilha vertical estranha.
No geral, o espaço negativo nessa área poderia usar uma reestruturação completa. Além do problema com o ícone ausente, o logotipo principal ocupa muito espaço vertical e está criando lacunas estranhas.
Área em destaque
Gosto de repetição em um design e posso ver como os ângulos desta seção refletem o do logotipo, mas como ele não está realmente funcionando no logotipo, o mesmo se aplica aqui. A natureza inclinada dos cabeçalhos parece um pouco estranha, assim como o padrão cruzado criado pelas cores aqui.
Inconscientemente, seu cérebro deseja conectar os dois itens da mesma cor, mas aqui as duas áreas não estão relacionadas.
Além disso, há vários efeitos de foco instantâneo nessa área que não servem para nada. Quando você passa o mouse sobre uma seção, uma sombra projetada é criada. A web nos ensinou a reconhecer essa atividade como uma indicação de que estamos passando o mouse sobre uma área clicável. No entanto, essas áreas não são clicáveis e fazem com que pareçam criar apenas confusão para o usuário.
Rodapé
O rodapé é bastante simples, mas novamente vemos que ele poderia usar um pouco de refino.
Primeiro de tudo, o botão está em um local estranho. Ao projetar, sempre tenha cuidado em colocar as coisas nos buracos só porque você tem espaço. Um forte alinhamento à esquerda é estabelecido aqui pelo texto, mas depois é arruinado pela colocação do botão.
Além disso, a animação instantânea do botão é um pouco demais. Um sprite de imagem é usado aqui e há uma animação entre os dois estados dos botões, onde você pode ver uma parte da imagem deslizar para fora enquanto a outra desliza. Não é fácil dizer o que está acontecendo no início e, portanto, é um pouco desconcertante.
Recomendações Gerais
Apresentei algumas críticas severas acima e acho que seria melhor tentar unir tudo. Aqui estão minhas sugestões:
Para começar, redesenhe o logotipo para algo mais moderno e horizontal. Em seguida, estabeleça um alinhamento rígido à esquerda na página. Alinhe a área de navegação e o bloco de cópia abaixo dele no lado esquerdo da página e talvez mova o novo logotipo para a direita.
Varie o tamanho do texto na página para criar títulos claros e cópia de suporte. Tudo é atualmente muito grande. Lembre-se: quando você torna tudo especial, nada é especial.
Jogue fora as formas atuais na seção em destaque e na lista com marcadores gigantes (incorpore seus serviços em outro lugar). Crie uma única visualização grande e abrangente do projeto, que se estenda por toda a área de conteúdo.
Por fim, refaça o rodapé para que o alinhamento esquerdo acima seja respeitado. Em outras palavras, tire esse botão do canto direito.
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.
