Os 10 melhores designs de sites que inspiram e convertem

Um site de alta qualidade faz maravilhas para qualquer empresa: melhora o reconhecimento da marca, aumenta a confiança dos consumidores, gera conversões e ajuda as empresas a alcançar objetivos específicos.

Neste artigo, listamos os 10 melhores designs de sites de 2021 que se destacam em apelo visual e envolvimento sem sacrificar a substância e a função.

1. Mais incrível

Recursos de destaque:

• Um vídeo de fundo inusitado
• Menu de navegação horizontal
• Um tipo de letra muito simples

More Awesome é uma agência holandesa de marketing e comunicação para empresas de tecnologia B2B. Eles fornecem marketing de conteúdo e serviços de estratégia de marca para seus clientes.

O site deles segue os princípios de um funil de conversão orientado por enredo, que é uma descrição especialmente aplicável à sua página inicial. Ele abre com uma proposição de valor e slogan simples (“Faça seu negócio crescer”), enquanto o fundo do vídeo de um cachorro adiciona um pouco de zaniness e um tom amigável à voz da marca.

Conforme o usuário rola, o slogan / UVP muda para algo novo, acompanhado por algumas linhas de mensagem em uma fonte muito legível. O background muda na seção com prova social, clientes anteriores e carteira.

A navegação do menu principal está localizada no lado esquerdo da tela. Uma navegação de layout de coluna contém um menu de hambúrguer com itens de link "Serviços", "Trabalho", "Equipe" e "Blog". Os ícones das páginas do Twitter e Instagram da agência estão localizados na parte inferior.

2. Fabricação de ponta por mídia vibrante

Recursos de destaque:

• Uma paleta de cores bem definida
• Layout industrial limpo
• Navegação do menu deslizante

A Leading Edge Manufacturing é uma empresa que presta serviços em design e desenho, usinagem, fabricação, revestimento e outros aspectos da indústria de fabricação. O site deles é uma cortesia da agência de criação Vibrant Media.

O design deste site é decididamente industrial na sua estética, adequando-se ao mercado e nicho da empresa. Gráficos de grade, imagens de equipamentos de tecnologia, layout preciso de colunas / linhas e cores cinza grafite contribuem para esse apelo.

Acima da dobra, há um controle deslizante de carrossel com cinco imagens diferentes apontando os cinco setores diferentes que esta empresa atende.

Um menu deslizante aparece à direita, enquanto CTAs arredondados e proeminentes estimulam os visitantes a solicitar um orçamento. O funil da página inicial em si é dividido em três seções: “Nosso processo”, “Por que nos escolher?” e “Testemunhos”.

3. Consultoria Dynamic Wave por Design com Artisan

Recursos de destaque:

• Imagens vibrantes acima da dobra
• Uso econômico de espaço em branco
• Uso generoso de CTAs

A Dynamic Wave Consulting é uma agência digital especializada em design, consultoria e planejamento de mídia para impulsionar o crescimento digital de seus clientes.

O site deles, desenvolvido e desenhado pela Design With Artisan, abre com uma foto bem colorida e vibrante de um surfista, como uma brincadeira com o nome da empresa. Uma fonte moderna sem serifa em branco contrasta com as cores vivas de forma bastante clara e o botão CTA azul leva o visitante à página de consulta gratuita.

Assim que o usuário começa a rolar, uma imagem colorida é substituída por muito espaço em branco e uma mensagem e UX geral muito centradas no usuário.

Salpicos de azul e laranja se separam do espaço em branco. Blocos com UVPs e serviços da agência são todos acompanhados por um CTA proeminente e um parágrafo detalhado focado nos benefícios desses serviços.

A navegação é um menu principal horizontal padrão na parte superior da página e desaparece quando o usuário rola a tela.

4. Dimeresfontein pela sétima temporada

Recursos de destaque:

• Páginas de produtos bem incorporadas
• Página inicial complexa e completa
• Uma paleta de cores relacionada ao vinho

Diemersfontein é uma vinícola e propriedade rural da África do Sul que organiza degustações de vinhos, casamentos, conferências e vários outros tipos de eventos.

A Seventh Season, um estúdio de web design que apresentou a sua expertise neste site, optou por um design bastante complexo e detalhado, incorporando cores terrosas associadas à vinificação: verdes, azeitonas, castanhos e bordeaux.

O menu de dois níveis incorpora as informações de contato e os principais pontos de interesse, bem como o CTA Compre online e um ícone de carrinho.

Um vídeo em loop da zona rural da propriedade está no fundo do site acima da dobra, incorporando alguns dos slogans da marca. Rolar para baixo revela um layout irregular composto pela história da propriedade e seu povo, informações sobre a colheita, vinhos emblemáticos e o formulário “Planeje sua visita”.

No que diz respeito aos destaques do site, a página de cada produto do vinho é minimalista e focada na descrição da bebida e na imagem em alta resolução de sua garrafa.

5. AL Aesthetics da Creative Ideaz

Recursos de destaque:

• Um menu deslizante no topo da página
• Muitos CTAs
• Abordagem interativa para fotos

AL Aesthetics é uma clínica de estética facial do Dr. Ash Labib. A agência Creative Ideaz desenvolveu um site para seu consultório particular que enfatiza a experiência, expertise e sucesso do médico com seus clientes anteriores.

O design deste site em particular segue as melhores práticas de uso de uma paleta em preto e branco, permitindo que as fotos da clínica e as alterações faciais do paciente façam toda a conversa quando se trata de cor e esplendor. A página inicial é aprimorada com vídeos que mostram os métodos da clínica para inspirar confiança nos clientes em potencial.

O conteúdo do site cobre a faixa de tratamento da clínica, os anos de experiência do fundador e as frases de chamariz colocadas estrategicamente que convidam os visitantes a agendar uma consulta gratuita.

A navegação do menu principal desliza da parte superior quando um usuário clica no ícone de um menu de hambúrguer. O menu e o CTA mencionado são fixos e sempre a apenas um clique de distância do usuário.

6. Darling Brew por Jumpin 'The Gun

Recursos de destaque:

• Páginas de produtos sem distração
• Cores da marca
• Uma IU divertida e jovial

Darling Brew é uma cerveja artesanal sul-africana cujo site é uma ideia da agência de criação Jumpin 'the Gun de Western Cape, SA.

Ostentando as cores da marca - preto e amarelo - o site é composto por uma variedade de conteúdos: desde a conquista da empresa de ser a primeira cervejaria neutra em carbono do país até as melhores opções de cerveja e mercadorias.

O layout divertido e lúdico corresponde ao comportamento e aos interesses do público-alvo da cervejaria. O menu principal pegajoso consiste nos pontos de jornada do usuário, opções de login do usuário e carrinho de compras.

Os CTAs são botões retangulares amarelos que são bastante proeminentes, apesar de se misturarem com os arredores da mesma cor.

As páginas de produtos de cerveja apresentam imagens vibrantes de garrafas de cerveja artesanal, um amplo conjunto de informações sobre cada bebida e um ambiente sem distrações para que o usuário possa se concentrar em comprar a cerveja da maneira mais rápida e fácil possível.

7. A&G Residencial por JK Premier Marketing

Recursos de destaque:

• Navegação bem organizada
• Mensagem descritiva
• CTAs em pontos estratégicos da jornada do usuário

A&G Residential é uma empresa de construção de casas na Carolina do Norte. O site deles é cortesia da JK Premier Marketing - um site, mídia social e agência de design gráfico.

Por ter muito conteúdo, o design do site A&G Residential conta com bastante cor branca, mas não muito espaço em branco, já que imagens, fotos, diagramas de casa e mensagens ocupam muito espaço para comunicar a oferta complexa da empresa.

CTAs retangulares dão um pouco de clareza à jornada do usuário e movem o visitante pelo funil em direção aos pontos de conversão com uma cópia clara e concisa. Um CTA com um número de telefone está localizado no canto superior direito do menu principal para que os clientes em potencial possam fazer uma ligação rápida via Skype ou serviço semelhante.

O menu principal de dois níveis oferece profundidade de navegação suficiente para fornecer muitas opções ao visitante, mas não sobrecarregá-lo com muitas opções de escolha. A hierarquia organizacional segue a lógica da jornada do usuário, resultando em uma experiência do usuário rápida e intuitiva.

8. Bonasila

Recursos de destaque:

• Um menu principal simplificado
• Imagens de plantadores de alta qualidade
• Uma mistura interessante de fontes

Bonasila é produtora e vendedora de uma coleção de plantadeiras de plástico reforçado com fibra. O site deles é uma combinação interessante de fontes, fotos, ilustrações personalizadas e mensagens que explica cada coleção de produtos detalhadamente.

Fontes grossas e ousadas em branco dominam a tela de abertura com uma foto de um interior suntuoso adornado com vasos Bonasila. Assim que o usuário começa sua jornada rolando, uma combinação de fontes grandes, imagens grandes de alta resolução e fontes sem serifa se desdobra em um longo funil de página inicial.

Imagens de plantadores coloridos combinados com blocos de verde ocasionais quebram o minimalismo de um fundo branco e uma fonte marrom claro. O menu principal é aderente e convenientemente limitado a apenas três opções, a fim de agilizar e simplificar a jornada do usuário.

9. Royce Chocolate da Arctic Grey

Recursos de destaque:

• Fotografia requintada
• Mensagens concisas
• Páginas de produtos minimalistas

Royce Chocolate é uma boutique e loja online de chocolates finos sediada em Hokkaido, cujo site, desenvolvido pela Arctic Grey, é tão atraente e de dar água na boca quanto você esperaria de um site que vende doces de primeira classe.

Acima da dobra, o site dá o tom para toda a experiência do usuário do visitante com fotos tiradas profissionalmente de trufas de chocolate. O fundo transparente do menu principal fica branco assim que o usuário começa a rolar.

O layout de várias colunas abaixo da dobra apresenta mais imagens de alta resolução de diferentes chocolates e mensagens notavelmente diretas, consistindo em apenas algumas palavras para apresentar coleções e informações vitais para o consumidor.

A seção Loja de navegação possui um layout de mega menu. Acessar qualquer página de categoria de chocolate revela um layout de quatro colunas para itens específicos e clicar em uma leva a uma página fotográfica onde os visitantes fazem a conversão com um botão Adicionar ao carrinho em negrito.

10. Cortinas exclusivas por agência de exploração

Recursos de destaque:

• Uma paleta de cores elegante
• Formulários CTA simples
• Conteúdo informativo

Unique Blinds é um produtor e vendedor de cortinas e persianas de Toronto, cujo site, projetado pela Explore Agency, é uma exibição de estética profissional e corporativa com uma paleta de cores muito simples.

Um filtro verde escuro envolve a fotografia de abertura de um interior acima da dobra. As fontes em tons de branco e cobre são os únicos outros tons, contribuindo para uma sensação geral muito elegante e elegante.

Embora o menu principal apareça apenas quando o usuário rola de volta para cima, a navegação do site e a jornada do usuário são bastante simplificadas e totalmente otimizadas para educar o visitante sobre os benefícios de usar os produtos Unique Blinds.

A própria homepage consiste em mensagens informativas sobre o processo de design, toda a coleção de cortinas da oferta da marca, depoimentos e artigos. Para completar, existe um formulário muito simples para agendar uma consulta gratuita como um meio eficaz de conduzir os clientes em potencial pelo funil.