Os 15 melhores exemplos de sites para ideias criativas e que aumentam a conversão em 2022

Diferentes sites de negócios têm objetivos diferentes, dependendo de sua oferta principal, modelo de negócios e setor. Mas os visitantes do site, bem, aparentemente temos um objetivo – julgá-los e impiedosamente.

75% das pessoas admitem julgar a credibilidade de uma empresa com base no design do site. Ênfase na admissão porque, na minha opinião, 25% simplesmente não é admitir. E essa é apenas a primeira impressão. Se você conseguiu que os visitantes permanecessem em seu site, agora cabe à experiência do usuário e à cópia do site mantê-los lá e levá-los a realizar as ações que apoiam suas metas de negócios.

Então, o que faz um ótimo site? Vamos dar uma olhada em 17 exemplos de sites de uma variedade de indústrias para descobrir - de copy a criativo e tudo mais.

Exemplos de sites para pequenas empresas

No passado, os sites eram principalmente para grandes empresas com grandes orçamentos. Mas com a tecnologia e as ferramentas atuais, eles são viáveis ​​para empresas de qualquer tamanho. Esses exemplos de sites de pequenas empresas são dos setores de TI, saúde e imobiliário.

Exemplo de site de TI: Código da Besta

A Beast Code é uma empresa de tecnologia de pequeno e médio porte que desenvolve soluções de software. Agora, como uma empresa de tecnologia e com um nome comercial como esse, eu tinha grandes esperanças para este site, e ele não decepcionou - e não apenas com a página inicial da nave espacial e o slogan do combatente.

O que o torna ótimo

• Primeira impressão: Embora não haja um botão CTA proeminente acima da dobra, não é por causa de outros elementos de distração. A simplicidade desta primeira pintura (um fundo de nave espacial sutilmente animado e futurista) deixa sua própria impressão em sua percepção das habilidades tecnológicas desta empresa.
• Contraste de cores: os botões vermelhos do CTA se destacam contra o fundo preto.
• Elementos de vídeo: no padrão Z, em vez de imagens estáticas, os blocos visuais são vídeos. Vídeos silenciosos e sem interrupções que dão vida à página.
• A redação: O tom de conversação e a capacidade de colocar seus processos complexos em termos leigos refletem inteligência, profissionalismo e humor.

Exemplo de site de negócios de saúde: Aledade

Começamos com o Aledade, um parceiro médico de cuidados primários que tem uma combinação de ofertas – suporte à gestão de consultórios, programas de parceria, um aplicativo e muito mais – para consultórios particulares, consultórios em grupo e centros de saúde comunitários. Mas apesar de ter uma oferta e um público complexos, o site faz um ótimo trabalho ao orientar os visitantes.

O que o torna ótimo

• Sensação geral : o rosto sorridente e as imagens suaves, combinadas com a fonte em negrito em maiúsculas, proporcionam uma sensação suave, mas autoritária.
• Organização: cabeçalho intuitivo e organizado, além de um menu menor abaixo do título projetado para ajudar os diferentes segmentos de seu público a encontrar o caminho.
• Movimento: Os elementos aparecem no pergaminho, dando ao site algum movimento e vida adicionais.
• Recursos: Enquanto a página inicial apresenta oito recursos impressionantes, o carretel em estilo de cartão com miniaturas de imagem o torna limpo e organizado.

Exemplo de site imobiliário: Frisbie Realty

Com este exemplo de site, temos outra excelente primeira impressão visual, mas desta vez de volta à Terra. O que você está vendo abaixo é a página inicial da Frisbie, uma pequena empresa imobiliária em Palm Beach.

O que o torna ótimo

• Mensagens visuais: A imagem permite que você saiba imediatamente que este é um corretor de imóveis de alta qualidade, e ainda assim a iluminação quente e o título de “bem-vindo ao lar” dão uma sensação convidativa.
• Funcionalidade: A função de pesquisa de propriedades logo abaixo da imagem com um belo botão azul contrastante.
• Movimento: Um tema comum entre esses exemplos (e uma tendência do site), os elementos aparecem e se movem levemente ao rolar.
• Conteúdo: Existem guias de bairros em destaque na página inicial, um ótimo exemplo de marketing de conteúdo.
• Acessibilidade: as opções de acessibilidade do site no canto inferior esquerdo, como aumentar ou diminuir o tamanho do texto, ajustar o contraste, sublinhar links e muito mais.

Exemplos de sites de comércio eletrônico

Os sites de comércio eletrônico são meio que seu próprio animal, especialmente se você tiver muitos produtos para oferecer. Aqui estão alguns exemplos de uma variedade de verticais.

Exemplo de site de comércio eletrônico de supermercado: Gopuff

Gopuff não é o seu site típico de entrega de supermercado. Da mesma forma que a Tend (acima) faz a odontologia de maneira diferente, Gopuff cria uma experiência única de compras on-line em mercearias/lojas de conveniência.

O que o torna ótimo

• Layout: enquanto a maioria dos sites de comércio eletrônico possui mega menus complexos, o GoPuff tem um layout mais simples com um formato de carrossel, que é executado em suas páginas de subcategoria.
• Relacionabilidade: Entre os produtos apresentados (Pringles, Beer, enxaguante bucal) e a cópia utilizada (“Nós não aumentamos ou aumentamos os preços. Sim, você leu certo.”), você pode dizer que a GoPuff conhece bem seu público-alvo.
• Consistência: Gopuff não se destina às suas compras semanais de supermercado. Está lá para você quando você está em apuros e precisa de algo de última hora. A cópia concisa e não florida do site, a simplicidade do design e até mesmo a ausência de ângulos de 90 graus no site contribuem para essa sensação de conveniência e facilidade.

Exemplo de site de comércio eletrônico de aluguel: Zumper

Zumper diz que “a experiência de aluguel de hoje está quebrada. É desatualizado, exaustivo e lento” e tem a missão de “mudar a maneira como você aluga, para sempre”. Acho que eles estão começando muito bem.

O que o torna ótimo

• Os pequenos detalhes: em vez de “insira um local”, a mensagem da caixa de pesquisa diz: “Onde você quer morar?” Na ilustração do apartamento na página inicial, há toalhas penduradas na grade da varanda. Esses pequenos toques dão personalidade ao site.
• Valores na página inicial: Role até o final e você verá os três valores principais da Zumper — inclusivo, seguro e respeitoso — com um link para ler mais. Como já vimos em alguns dos exemplos acima, isso está se tornando uma prioridade maior para empresas de todos os setores.
• Gráficos: Ilustrações desenhadas à mão e design plano são tendências de sites e páginas de destino que estamos vendo este ano, e Zumper acerta em cheio. Além disso, veja a seção “cidades mais quentes” e você verá um excelente uso de emojis.

Exemplo de site de comércio eletrônico de varejo: guloseimas asiáticas sutis

Sutis Asian Treats - um jogo de palavras do popular grupo do Facebook - é um ótimo exemplo de um site de comércio eletrônico super pequeno.

O que o torna ótimo

• Logo animado: Quão fofo é aquele pequeno ícone de chá de bolhas?
• Top nanobar: Isso é comum em sites de comércio eletrônico, pois você pode usá-lo para anúncios importantes, incluindo promoções de vendas.
• Emojis: Estamos vendo cada vez mais emojis em sites nos dias de hoje. Adicioná-los ao menu de navegação aqui ajuda a separar cada um - e fica fofo também!
• Logo centralizado: a maioria dos sites tem um logo clicável (para a página inicial) no canto superior esquerdo. Este (assim como o de Chinelle) está no centro, abaixo de alguns dos outros elementos de navegação - diferente o suficiente para ser único, mas ainda intuitivo o suficiente para uma experiência de usuário tranquila.
• Não tão sutil. 500% açúcar. Caso em questão

Exemplos de sites de negócios de serviços

Sites de negócios baseados em geração de leads ou serviços têm objetivos diferentes de sites de comércio eletrônico. Aqui estão alguns exemplos de empresas grandes e pequenas.

Exemplo de site de agência de design: Born & Bred

Para a maioria das empresas, é melhor manter o layout e o design tradicionais de outros sites do seu setor. Mas como uma empresa de design, você pode ir contra a corrente. Afinal, você quer mostrar o que você pode fazer. Agora, uma captura de tela aqui não faz justiça ao site de Born & Bred porque é a experiência de rolagem que realmente o torna legal, então não deixe de conferir.

O que o torna ótimo

• O tema do passeio: o site foi projetado para levá-lo a uma experiência de passeio enquanto você rola. Além disso, o rolo de vídeo reproduzido no topo captura momentos sinceros no escritório.
• Valores: Valores centrais diretamente na página inicial. Meu tipo de site.
• A cópia: Assim como Beast Code, esses caras se divertem muito. Por exemplo: “E à sua direita… mais estudos de caso. Por favor, mantenha seus olhos e cursor dentro da janela do navegador o tempo todo.”
• Nanobar: A barra na parte superior tem links para um artigo sobre um prêmio recente e anúncios com um fundo gradiente atraente e atraente.

Exemplo de site de dentista: Tend

Passando do design, temos um exemplo de site de dentista a seguir - e muito legal. O slogan da Tend é “Dental feito diferente” e podemos ver isso imediatamente na página inicial. Vamos dar uma olhada.

O que o torna ótimo

• O vídeo: Em cerca de 10 segundos, o vídeo silencioso em tela dividida na página inicial mostra clipes de uma visita ao paciente, mostrando exatamente como a Tend faz a odontologia de maneira diferente. Não é o seu vídeo explicativo tradicional, mas muito eficaz.
• Design limpo: Sem trocadilhos, mas o layout simples torna este site atraente.
• Prova social: não há apenas um carrossel de depoimentos atraente, mas as quatro guias usadas para organizar os depoimentos também servem como recursos do negócio. Marketing odontológico muito inteligente!

Exemplo de site de publicidade: Onze

Assim como em uma agência de design, o site de uma agência de publicidade precisa ser de primeira, e a Eleven não decepciona. Novamente, a captura de tela não faz justiça à página inicial, mas você ainda pode ter um gostinho do brilho deste site cativante.

O que o torna ótimo

• Plano de fundo do vídeo: o vídeo de plano de fundo de largura total na página inicial é um rolo de destaque com toneladas de recursos visuais impressionantes que chamam sua atenção (quadro A acima).
• Design limpo: não há um botão CTA proeminente na primeira pintura, e com bom gosto. Os elementos brancos simples sobrepostos no plano de fundo do vídeo mantêm o vídeo no centro das atenções, que é a chamada à ação.
• Centrada nas pessoas: a Eleven não apenas tem uma seção clara de diversidade, equidade e inclusão em sua página sobre nós, mas também dedica uma página totalmente separada para fotos/retratos de todos os seus funcionários (mais seus cães).

Exemplo de site SaaS: Chartbeat

Sites SaaS podem ser complicados porque você deseja demonstrar o que sua plataforma pode fazer, mas sem sobrecarregar os visitantes. Chartbeat faz um ótimo trabalho com isso através de suas ilustrações e cópia concisa.

• O título: Boa proposta de valor no título com “Desbloqueie o valor em seus dados de conteúdo”.
• Animação: A imagem do painel na página inicial é animada na velocidade certa para mostrar diferentes aspectos da ferramenta sem que seja demais.
• Menu de navegação exclusivo: Chartbeat minimiza o espaço que seu menu de navegação ocupa, listando os itens na lista suspensa horizontalmente - uma forma diferente, mas agradável de organização.
• Não há muita conversa: a página inicial tem muito pouca cópia de marketing. As ilustrações e depoimentos de clientes falam enquanto a cópia de marketing permanece concisa e tece tudo junto.

Exemplos de sites de portfólio

Sites de portfólio são usados ​​por estudantes e profissionais para mostrar seu trabalho e fornecer uma extensão de seu currículo. Designers, desenvolvedores, fotógrafos, planejadores de eventos e modelos são apenas alguns dos muitos negócios que usam sites de portfólio.

Exemplo de site de portfólio de fotógrafo

Chinelle Rojas é fotógrafa de autorretrato, designer de logotipos e empreendedora com um site de portfólio muito legal. Entre e você se sentirá como se tivesse entrado no mundo dela.

O que o torna ótimo

• Música: Na página inicial, você pode escolher uma das seis músicas para tocar enquanto navega no site.
• Cores vibrantes: Além de uma colagem como sua imagem de herói, o esquema de cores na seção do meio é como música para os olhos (? apenas vá junto).
• Personalização: Tudo tem uma sensação escolhida a dedo neste site, dando a você a sensação de que você é tipo, ali mesmo com Chinelle saindo.
• Design da galeria: sua galeria “My Black Self” segue um formato de grade simples à esquerda com a visualização maior à direita – uma maneira fácil e intuitiva de navegar em seu trabalho.

Exemplo de site de portfólio de desenvolvedor Web: Brittany Chiang

Este é um exemplo de site de portfólio no estilo currículo de uma desenvolvedora da Web chamada Brittany Chiang.

O que o torna ótimo

• Esquema de cores: O fundo escuro e as cores um tanto neutras fazem com que os elementos verdes realmente se destaquem, chamando a atenção para o nome da empresa e o botão CTA.
• Grande título: O grande título na página inicial também se destaca aqui. Para sites de negócios, geralmente é o nome da empresa ou a proposta de valor, mas a simples declaração aqui parece estar na marca deste site de portfólio.
• Sensação 3-D: A página "Experiência" usa elementos de sobreposição e sobreposições transparentes para criar o efeito de várias dimensões.
• Apresentação da informação: Mostrar projetos de desenvolvimento web não é tão fácil quanto design ou fotografia onde você pode ter uma galeria, mas a página “Work” da Brittany é super organizada e fácil de ver, apesar de ser toda em texto.

Exemplo de site de portfólio de designer de interiores: Karim Rashid

Nosso último site de portfólio é do prolífico designer Karim Rashid. É uma espécie de híbrido de site de portfólio e site de negócios.

O que o torna ótimo

• Fonte grande: O retrato exclusivo, o tema preto/branco/cinza, cópia mínima e imagens do trabalho de Karim têm uma sensação tranquila para eles, enquanto a fonte grande e as cores fortes que aparecem ao passar o mouse são altas e claras - uma justaposição única que equilibra fora bem.
• Parallax: A mistura de velocidades de rolagem dá o efeito do site ter várias dimensões/camadas - outra maneira de se divertir com movimento, mas sem animação.
• A barra lateral sorrateira: aquela seção à direita que parece que talvez você tenha diminuído o zoom ou esteja vendo alguns problemas de responsividade? Isso é o que faz você se envolver. Curioso, você passa o mouse sobre ela e ela se expande apenas o suficiente para mostrar uma seta com “ver pr—”, então ela é cortada. Você clica nessa seta e boom, você é levado a uma nova visão de uma de suas coleções. Ou talvez seu olho seja atraído para o botão de menu branco que se destaca no fundo esmaecido. Clique nele e boom, massivos elementos de menu implorando para você clicar.

Exemplos de sites sem fins lucrativos

Nosso último grupo de exemplos de sites são organizações sem fins lucrativos. Você notará que, embora sejam sem fins lucrativos, ainda são focados na conversão, onde a ação de conversão é doar.

Operação Ferrovia Subterrânea

Quando você chega ao site da Operation Underground Railroad, você pode entender imediatamente sua mentalidade alta e clara, tolerância zero e ir a qualquer distância.

O que o torna ótimo

• Vídeo poderoso: o plano de fundo do vídeo na página inicial leva você a uma série de emoções. De crianças dançando a policiais algemando a uma missão a cavalo, você sente inocência, inspiração e indignação ao mesmo tempo.
• Acentos amarelos: Não só os gráficos amarelos se destacam contra o fundo cinza escuro, mas porque as imagens usadas no site são muito reais e nas trincheiras, elas não são da mais alta qualidade. Os contornos amarelos nas imagens ajudam a mascarar isso e dão um toque adicional de ação e emoção.
• Menu estilo botão: Com um visual de fundo tão cheio, o uso de blocos sólidos como elementos de menu os torna fáceis de ler e clicáveis.

Fundo Internacional de Mídia Feminina

O International Women's Media Fund é outro exemplo foda (em suas próprias palavras) de site sem fins lucrativos com imagens poderosas e cópia prática.

O que o torna ótimo

• Imagens como botões: Abaixo do carrossel de imagens grande, há uma pequena versão em miniatura dessa imagem abaixo com texto sobre ela, criando o efeito de um botão de imagem.
• Botão de doação proeminente: este é o CTA que você verá na maioria dos sites sem fins lucrativos, e a caixa vermelha brilhante no canto superior direito facilita a localização.
• Missão no rodapé: em vez da típica lista de tintas no rodapé, vemos botões sociais, informações de contato e sua missão. Isso não é comum, mas a ideia de aparecer independentemente da página do site em que você está dá a ele uma camada adicional de integridade.
• Palavras poderosas : em todo o site, vemos escolhas de palavras poderosas, como “ Liberamos o potencial das mulheres jornalistas como defensoras da liberdade de imprensa” e “Conheça os jornalistas durões que apoiamos”.

Use estes exemplos de sites para ideias e inspo

Sites são obras de arte. Embora a maioria das indústrias tenha seu próprio padrão básico de como um site nesse nicho deve parecer e funcionar, você tem a liberdade de obter essa aparência e funcionar de maneiras diferentes. E você também é livre para adotar ideias de outros setores. Portanto, use os exemplos de sites neste post para pensar e testar as várias maneiras de receber visitantes, mostrar do que você é capaz, dar o melhor de si e atingir suas metas de negócios.