Crítica Web Design # 58: Quote Roller
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 Quote Roller, um aplicativo da web maravilhoso para criar e enviar propostas profissionais.
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 o Quote Roller
“O Quote Roller ajuda a automatizar e otimizar o processo de criação da proposta. Esqueça copiar e colar texto de rotina no Word. Com o Quote Roller, você pode salvar e reutilizar informações gerais sobre sua empresa, termos de serviço e outras coisas que costumava colocar manualmente em propostas. O Quote Roller também vem com uma interface amigável e intuitiva de arrastar e soltar, que possui recursos ilimitados de personalização. ”
Aqui está uma captura de tela da página inicial:
Impressão inicial
Logo de cara, posso dizer que realmente gosto deste site. Ele exemplifica várias tendências no design moderno da web, o que significa que não é exatamente único, mas na verdade não precisa ser. O objetivo é comunicar que o Quote Roller é um utilitário avançado, moderno e de criação de cotações, e esse design faz exatamente isso.
É extremamente importante manter objetivos como esse em mente ao criar um site. Muitos designers partem em uma direção que se adapte ao seu humor em um determinado dia, resultando em belos sites com mensagens confusas. Os gráficos em um site são a principal fonte de comunicação e você deseja garantir que eles digam o que você deseja!
Cores
A primeira coisa que quero discutir é o esquema de cores, porque ele usa uma técnica muito popular que discutimos aqui antes. A paleta principal utiliza vários tons de azul, uma opção ideal para uma aparência limpa e profissional. Uma vez que esse escopo restrito de cores é estabelecido, é trazida uma cor de ênfase que realmente se destaca na página, neste caso, laranja.
Isso funciona muito bem porque oferece muito poder para direcionar os olhos do usuário. Ao rolar a página, você vê muito azul e branco interrompidos por muito poucos pontos brilhantes de laranja. Seus olhos gravitarão naturalmente em direção aos pontos brilhantes, onde você verá e lerá exatamente o que o designer deseja. É uma técnica super simples, com fortes resultados.
Tema Gráfico
O conteúdo principal do site é mantido em um retângulo de canto arredondado. Ele é colocado em cima de um plano de fundo texturizado em tela. Essa textura atraente, mas sutil, adiciona muita dimensão à página e é realmente fácil de construir. Ensinamos uma técnica semelhante neste artigo.
A área de navegação tem uma fita muito legal em volta. Isso serve para ajudar a área de navegação a se destacar e dar um efeito tridimensional à página como um todo.
Outra camada é adicionada logo acima do rodapé, onde residem as cotações e recomendações do cliente. Esses tipos de efeitos dão ao site uma sensação agradável e polida. Você pode dizer que os designers realmente passaram algum tempo refinando a qualidade estética.
Tipografia
Você não tem o orçamento para o Typekit ou um serviço de fonte da web premium semelhante? O Google Web Fonts oferece uma alternativa incrível, gratuita e simples de implementar. O Quote Roller usa o Google Web Fonts para o título "Merriweather", um serifa exclusivo e sofisticado.
Observe que a implementação da fonte personalizada aqui é bastante conservadora, apenas as manchetes estão usando Merriweather, o resto é Arial. Usar uma fonte personalizada para a cópia do corpo é bom, mas nem sempre é a melhor opção devido ao tempo de carregamento. Além disso, é muito fácil ficar louco com fontes sofisticadas e ter o resultado final parecido com uma bagunça. Uma rota mais segura é encontrar apenas uma fonte personalizada e deixar o toque de design exclusivo.
Mensagens
As mensagens no site são muito simples e claras: “Criar, acompanhar e enviar propostas” é a primeira coisa que você lê. Não há rodeios, você entende imediatamente o que está acontecendo.
Isso é reforçado por muitas capturas de tela. Eu absolutamente odeio encontrar um novo aplicativo Web e, em seguida, procurar por minutos a fio para encontrar uma captura de tela. Às vezes, não há na página inicial nem no vídeo de introdução! Se você está ocultando sua interface até que um usuário realmente se inscreva, vou assumir que você tem vergonha disso.
Indo mais longe na frente das mensagens, eu também gosto de como os recursos foram apresentados neste site. O título em negrito com um ícone minúsculo e um sublinhado sólido separado do parágrafo parece realmente nítido. Essa área é altamente legível e usa muito espaço em branco para dar espaço a cada item.
Página do Tour
Se você está procurando alguma inspiração sólida para a página de tour de produtos, a Quote Roller é ótima. Eu gosto das capturas de tela grandes, alternando os lados da página. Rolar esta página realmente oferece uma visão rápida, mas completa, do que você obterá ao se inscrever no aplicativo.
Conclusão
O Quote Roller é um site realmente ótimo que serve bem a seu propósito. É limpo, moderno e profissional, uma combinação perfeita quando você está vendendo um serviço da Web para profissionais de negócios.
As mensagens são muito claras, com muito reforço através de ícones e capturas de tela. As cores são perfeitas e há muita atenção aos detalhes.
No geral, eu dou um grande polegar para cima e não consigo pensar em nada negativo para dizer sobre isso!
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.
