Como projetar uma grande Homepage com exemplos

a maioria das empresas e empresas estabelecidas nos dias de hoje reconhecem a importância de ter uma presença on-line para alcançar uma gama mais ampla de potenciais clientes. Colocar um monte de pensamento e esforço em um projeto da página inicial do site pode realmente fazer a diferença entre deixar potenciais clientes com uma boa ou má impressão de sua empresa ou produto. É por isso que é especialmente importante criar um design da página inicial do site criativo, com foco particular em sua página inicial.,

uma página inicial do site é o que um visitante aterra depois de clicar em um resultado de pesquisa. Uma vez que esta será provavelmente uma das primeiras impressões que o visitante tem de uma empresa ou produto, é incrivelmente útil fazer com que este projeto de página principal olhar o mais acolhedor e envolvente possível.

um design de página inicial forte pode atrair os visitantes para gastar mais tempo explorando o produto ou serviço em oferta, convidando-os a aprender mais e, espero, convencê-los a comprar., Antes de olhar para os 20 melhores projetos de página inicial, vamos primeiro rever alguns dos elementos básicos que uma página inicial moderna deve consistir.

introdução eficaz da sua empresa

o aspecto mais crítico de cada página inicial é a eficácia com que captura o olho do visitante e captura a sua atenção. É por isso que é crucial para a sua homepage responder a três perguntas-chave sobre a sua empresa e/ou produto em apenas alguns segundos. Tenha em mente estas questões ao desenhar a sua página inicial:

1. Quem são vocês? (Sobre o que é a sua empresa, produto ou serviço?)

2., Qual é o seu trabalho? (O que sua empresa, produto ou serviço realmente faz para seus usuários?)

3. Como é que és melhor que os teus concorrentes? (Como sua empresa, produto ou serviço resolve um problema ou atende uma necessidade de Usuários melhor do que as outras opções disponíveis?)

ao garantir que a sua homepage transmite rápida e claramente as respostas para estas três perguntas simples, você será capaz de ajudar os visitantes a entender o que o seu negócio é, ao mesmo tempo, dando-lhes rapidamente a confiança de que precisam para fazer uma compra.,

muitas empresas adotaram a estratégia de criar slogans curtos ou taglines que destacam suas proposições de valor único (UVPs). Estas marcas facilmente descrevem a oferta da empresa e estabelecem uma conexão quase instantânea e memorável com o visitante. Eles são frequentemente mostrados na página inicial e usados em grande parte das estratégias de branding e marketing da empresa.

design responsivo e limpo da página inicial

os visitantes do seu site irá passar em uma variedade de dispositivos, de PCs a tablets para smartphones., À medida que a penetração móvel continua a aumentar em todo o mundo, não é de admirar que quase 60% de todo o tráfego atual do site é feito através de um dispositivo móvel.

para garantir uma melhor experiência do usuário com o seu site, é importante ter em conta o design da página inicial responsiva. Design responsivo significa que a experiência do Usuário é a mesma ou muito semelhante, não importa que dispositivo eles estão usando para visitar o seu site., A navegação é facilitada para que os usuários possam percorrer páginas diferentes em seu site rapidamente, a funcionalidade é semelhante para que os usuários não tenham que mudar de dispositivos, a fim de acessar o site “Full-feature”, e o design é limpo, certificando-se de que a sua oferta é claramente exibida para os usuários em cada tamanho de tela.tornando a experiência do seu site consistente, independentemente do tamanho da tela ou do tipo de dispositivo que o visitante está usando, irá ajudá-lo a manter a sua marca reconhecível., Apresentar um design coeso e dar prioridade à sua capacidade de resposta ao construir o seu site irá ajudá-lo a conectar-se com os visitantes através das plataformas, garantindo que eles tenham uma experiência positiva com o seu negócio.

dinâmica, interativa e envolvente

as pessoas tendem a lembrar-se de eventos emocionalmente carregados melhor do que os neutros. Aplicar este conhecimento ao design da sua página inicial pode ajudá-lo a criar uma experiência positiva para os seus visitantes.,

uma página inicial dinâmica pode evocar emoções positivas nos visitantes, aumentando as chances de sua interação com o seu site se tornando memorável. Fazer uso da mudança de ilustrações, animações, vídeos ou mini-jogos pode ajudá-lo a se conectar com os usuários de uma forma positiva. Detalhes ainda menores, como mini-animações em cabeçalhos e rodapé, podem tornar a experiência de um visitante melhor.layouts dinâmicos também podem dar aos visitantes um vislumbre de todo o pacote., Implementar aspectos da realidade virtual ou 360 graus de passeios virtuais da Página, produto, ou empresa irá ajudar o usuário a sentir que eles têm uma boa compreensão do que o seu negócio é tudo sobre e também pode solidificar a conexão que eles fazem com a sua marca.

ocasionalmente atualizar conteúdo em uma homepage para refletir as necessidades atuais dos clientes ou compartilhar as últimas notícias da sua empresa é outra maneira de manter um site dinâmico e constantemente relevante para os visitantes. Um grande exemplo deste tipo de disposição dinâmica da página inicial pode ser encontrado em IBM.com.,

em outras palavras, a adoção de uma abordagem dinâmica quando se trata de design e layout de sua homepage irá ajudá-lo a manter os usuários engajados, ao mesmo tempo em que lhes fornece uma experiência positiva e única que os mantém voltando para o seu site para mais!

navegação simples e elegante

navegação através do seu site deve ser fácil de utilizar. Interagir com o seu site nunca deve resultar em visitantes frustrados como uma experiência negativa pode prejudicar significativamente o potencial relacionamento.,

uma página inicial inteligente e intuitiva prioriza a navegação simples com menus que são facilmente identificáveis e separados visualmente por cor e contraste. A rotulagem de várias páginas faz sentido lógico para que os usuários possam identificar rapidamente onde uma página de navegação ou botão irá levá-los. Garantir que um visitante do site sempre sabe onde eles estão dentro do seu site é importante, assim, tenha em mente que pequenos detalhes como a representação visual de uma página selecionada (através de realce, contraste ou mudança de cor) pode realmente fazer a diferença., Um grande projeto de página inicial permitirá que os visitantes se movam com facilidade entre páginas e telas, sempre se comunicando com o usuário onde eles estão, mantendo-os engajados para continuar explorando.

chamadas-para-acção apropriadas

visitantes à sua página inicial é um grande começo, mas o que você faz com eles uma vez que eles estão lá? As páginas web modernas fazem uso do seu tráfego, focando os visitantes com uma chamada-à-ação específica (CTA), como ” Inscreva-se agora!”, “Join today”,” Get started with a free trial”,” Subscribe now ” or one of these very clickable CTA examples.,

O principal objetivo de cada página web deve ser captar a atenção do público-alvo, a fim de orientar os visitantes mais para o site, incentivando-os a ir verificar um estudo de caso, deixar suas informações de contato, ou de outra forma se envolver com a empresa. Usando CTAs apropriados e refinando as mensagens do seu site para orientar os visitantes através de um caminho particular pode transformar qualquer página inicial de apenas um folheto para um poderoso motor de vendas.até recentemente, o mundo do design era bastante estático, fechado e simétrico., À medida que o design gráfico e a tecnologia amadureceram, os designers começaram a ser mais ousados, quebrando as regras e projetando com uma abordagem menos rígida e mais criativa.

Este ano, começamos a ver uma quantidade crescente de layouts assimétricos para sites como designers deixar para trás o mundo perfeitamente equilibrado de padrões monótonos, e às vezes aborrecidos. Usando uma abordagem minimalista para formar o esqueleto de um projeto e incorporando abordagens mais criativas ao posicionar elementos e escolher paletas coloridas, os designers são capazes de brincar e desenvolver novos padrões excitantes.,

no Entanto, a maioria dos sites modernos são geralmente os seguintes:

• layouts Criativos

• Relevante Cta

• o uso Adequado de espaços em branco

• Agradáveis cores

• Acessorios fontes e outros elementos de suporte

• Envolvente, experiências cinematográficas

• Agradável música de fundo

Desde a sua página inicial pode fazer ou quebrar um visitante de primeira impressão de seu negócio, é fundamental que ele tenha uma eficaz introdução, que explica que a sua empresa é e o que o seu produto é toda sobre., Você também precisa ter em conta a capacidade de resposta no seu design, ao mesmo tempo em que se certifica de que a página é dinâmica, envolvente, simples de navegar, e faz com que os usuários completem a sua chamada-para-ação. Faça atualizações para a sua página inicial e site conforme necessário para manter a sua apresentação online moderna e eficaz e você terá certeza de ter seus visitantes de volta para mais!

Agora que passamos das partes teóricas do que é preciso para fazer uma grande homepage, vamos dar uma olhada nos exemplos de design de 20 páginas de topo para ver como essas partes funcionam na prática., Mas antes de irmos mais longe, sugerimos que você leia os 10 erros para evitar ao criar uma Homepage.

exemplos da página inicial

1. Plex.tv

o que torna esta página importante?

• informativo, mas sucinto. Fazendo uso de aspectos interativos, como vídeos e depoimentos deslizantes do cliente mantém cópia de texto ao mínimo, enquanto ainda com sucesso explicar o que o produto é.

• uma abordagem orientada para o conteúdo permite aos utilizadores obter informações específicas sobre o produto, como onde e como ele funciona e quais as acções que os utilizadores precisam de fazer para começar.,todas as chamadas para acção são colocadas sabiamente. O design da página e layout funciona bem para novos usuários ou para usuários existentes que querem adicionar mais dispositivos à sua conta.

Visite o site abaixo: Plex.tv

2. Slack

What makes this homepage great?

• homepage simples com um slogan informativo.
• sem animações desnecessárias ou grandes decorações para distrair os utilizadores. A mensagem é clara e directa.
• O design geral é consistente com o aspecto da aplicação, por isso a marca é coesa.,
• a navegação é clara e simples, mesmo com um monte de conteúdo variável para acessar.

visite o site: Slack.com

3. Dropbox

o que faz esta página web grande?

• limpo, puro e simples desenho apresentado numa disposição que é actualizada com bastante frequência.ilustrações engraçadas desenhadas à mão com uma cópia informativa para explicar o produto de forma eficaz.

• uma tagline poderosa que explica completamente o produto: “chegue a todos os seus arquivos de qualquer lugar, em qualquer dispositivo, e compartilhá-los com qualquer um”.,

bónus: o Dropbox é um produto bem conhecido e a empresa está agora focada na promoção do papel, a sua nova ferramenta de criação de documentos. A homepage do papel é separada por três blocos coloridos que compõem as três partes diferentes do produto inteiro: solução de Negócio, ferramenta de documentos e aplicação clássica. O design limpo e claro está em sintonia com o resto da marca Dropbox, mas é poderoso o suficiente para ficar sozinho.

visite o site: Dropbox.com

4. Storytrail

o que faz esta página web grande?,

• design moderno de material e navegação de fácil utilização.

• a missão da empresa é claramente indicada na página inicial, ajudando os visitantes a entender o que a empresa é.

• uma animação principal discreta reflecte a essência do projecto.

• o conteúdo desaparece e aparece com animação suave, mantendo os visitantes envolvidos e encorajando-os a explorar mais.

Visite o site: Storytrail.co

5. Meetthegreek

o que faz esta página principal grande?,

• O vídeo de fundo, serve a dois propósitos – para capturar a atenção do visitante e criar engajamento, conteúdo interessante;

• O restaurante página inicial do entretém o usuário, permitindo-lhes obter uma visão interna do negócio que cria uma maior capacidade para ligações emocionais com a ajuda do personagem principal.

• cores subjugadas e tipo de letra simples mantêm o visitante ocupado com o personagem principal.

• design convivial e navegação simples equilibra-se bem com o vídeo de fundo.,

• o ecrã divide-se ao Seleccionar uma página na barra de menu que permite aos visitantes ler informações relevantes, preservando a natureza envolvente do conteúdo de vídeo.

• a sensação geral da página inicial deixa o visitante com energia positiva e uma perspectiva “insider” sobre o negócio.

Visite o site abaixo: Meetthegreek.com

6. Forhonor

o que torna esta página importante?

• a página inicial mergulha gradualmente o usuário no mundo do jogo.
• tem um excelente conjunto de soluções de tipos de letra.,
• os efeitos sonoros das espadas que colidem contribuem para a atmosfera geral.
• é fácil traçar micro-interações com o usuário, que segue a regra simples: disparar->regras>feedback> loops e modelos. As microinteracções são um ciclo interminável.

visite o site: Forhonor.com

7. Enjoy-aiia

o que faz esta página web grande?

• um design minimalista, brilhante e cativante.

• uma combinação adequada de tipos de letra.,os botões de ação claros e visíveis revelam as características da marca e seus produtos, encorajando o usuário a interagir com o site.

• Uma Abordagem individual a cada página mostra algo novo para o usuário sem perder o estilo geral e manter o reconhecimento da marca.

Visite o site abaixo: Enjoy-aiia.com

8. Trello

o que torna esta homepage grande?

• O design claro da página inicial destaca como Trello difere de muitos gestores de tarefas da velha escola.,
• a página inicial contém um poderoso slogan:” Você pode organizar tudo com qualquer um ” e explica como fazer isso em apenas alguns blocos.elementos de imagem modernos (como um husky amigável) dão aos usuários sentimentos positivos em relação à marca.
• um logótipo devidamente estilizado indica o que é o serviço. Estes detalhes menores podem ter um grande impacto na impressão geral de um visitante da página.uma combinação de cores brilhantes comunica subtilmente que este serviço é simultaneamente divertido e profissional.

visite o site: Trello.,com

9. Soundcloud

o que faz esta página web grande?

• um design de página elegante, brilhante e ousado.
• os elementos mais importantes são realçados em cores contrastantes para atrair a atenção.
• É um exemplo brilhante de uma única página inicial que foi criada para atrair dois tipos de utilizadores: compositores e ouvintes.o objectivo do projecto reflecte-se num slogan curto, mas muito preciso.
• o visitante pode desfrutar de sucessos musicais de topo sem sair da página, prevendo o serviço instantaneamente.,

visite o site: Soundcloud.com

10. Igegroup

o que faz esta página principal grande?

• a página é composta por cores brilhantes mistas e formas simples.

• um layout minimalista e uma tipografia incrível torna fácil para os usuários se concentrar no que é importante.

• o vídeo de fundo na tela principal define o humor, mostrando as realizações da empresa e, ao mesmo tempo, imergindo o visitante no trabalho da empresa.,

• Um pequeno ícone do troféu com o número de prêmios recebidos é sutilmente colocado em um canto da página, adicionando valor e confiança, enquanto também atrai um visitante curiosidade para descobrir mais sobre estes empreendimentos.as animações são muito suaves e sensíveis.

• os efeitos de rolagem da paralaxe na moda são usados numa página de tela dividida moderna.

• O carregador é feito no estilo corporativo da empresa.

Visite o site abaixo: Igegroup.com

11. Sagmeisterwalsh

o que torna esta homepage grande?,

• um dos projetos mais criativos da página inicial que apresenta fotos online da web com páginas de navegação ativas. Você pode clicar em qualquer elemento no chão ou no banner.

• Você pode observar o que as pessoas estão fazendo no escritório no momento.

• fontes e guias de navegação também são colocados no rodapé.

• esta é uma página de deslocamento longo moderna.

a empresa apresenta um logótipo memorável a negrito que é composto por um símbolo Tipográfico-ampersand – que se encaixa com a sua marca e é relevante para a sua indústria.,

Visite o site abaixo: Sagmeisterwalsh.com

12. Pottermore

o que faz esta página principal grande?

• paralaxe com estilo de design de baixo poli é usado.
• Animation is present in the smallest elements / details: appearance of buttons, text, window pop-outs, etc.esta homepage interactiva é acompanhada por música fabulosa.concepção limpa sem elementos desnecessários.
• o cursor tem um aspecto invulgar e envolvente.
• a página inicial apresenta uma navegação compreensível/fácil de utilizar.,

visite o site: Pottermore.com

13. 2050.terra o que faz esta homepage grande?visualmente impressionante com um desenho interactivo de 360 graus.interface intuitiva e realista.muitos efeitos visuais incentivam os usuários a olhar, clicar e explorar mais.a música de fundo imerge os visitantes no mundo do futuro distante.o grande uso de vídeos e gráficos contemporâneos capta a atenção e faz com que os visitantes queiram voltar ao site vezes sem conta.,

visite o sítio web: 2050.Terra

14. Tipcow

o que faz esta página principal grande?

• Todas as principais características do serviço estão realçadas na página.
• conteúdo de vídeo relevante e elegante é mostrado.combinação de cores na moda.
• a barra desliza através de cabeçalhos cativantes com botões CTA apropriados.
• o botão “Inscrever-se” seleccionado no canto é fácil de encontrar. A ênfase é colocada nas redes sociais, ligando os fãs à sua banda favorita.

visite o site: Tipcow.,me

15. Matcha

o que torna esta página Grande?

• design elegante, leve e limpo.grandes combinações de cores e tipos de letra: Playfair Display e Montserrat.a missão da empresa e os seus pontos fortes estão claramente enumerados.

• realce simples e elegante na barra de menu.

Visite o site abaixo: Matcha.com

16. Subsign

o que faz esta homepage grande?,à primeira vista, um slogan incrivelmente simples que ainda descreve eloquentemente o que a empresa faz.todas as páginas de navegação têm uma animação fascinante.

o botão CTA Estático seleccionado é colocado no canto superior direito para dar aos utilizadores uma forma rápida de se envolverem, independentemente da página em que estejam.navegação simples e fácil de utilizar.

Visite o site: Subsign.co

17. Iliketofu

o que torna esta página Grande?,

• design brilhante com animação aparecendo gradualmente capta a atenção do Usuário.

• O produto e suas principais características são mostrados imediatamente.

• carga criativa de páginas.navegação simples e delicada.

Visite o site: Iliketofu.ue

18. Studiolovelock

o que faz esta página inicial grande?

• um exemplo vívido de design de cores planas na moda e assimétricas.,

• tipografia grande, negrito e fácil de ler torna o menu de navegação mais claro e mais eficaz, ajudando também a preencher espaço.

• animação simples e discreta.

• posição invulgar e única das páginas de navegação.é muito visível uma descrição clara da missão e dos pontos fortes da empresa.

Visite o site abaixo: Studiolovelock.com

19. Jacquico, o que faz esta homepage grande?

• os visitantes podem percorrer a página inicial por idades porque tem uma estrutura de design flexível.,

• uma grande quantidade de elementos de animação mantém os usuários envolvidos.

• design interativo na forma de um jogo.uma deliciosa combinação de tons pastel é usada.

Visite o site abaixo: Jacquico.com

20. Valaire

o que torna esta página Grande?

• Este site da banda tem uma navegação incomum.apresenta uma combinação lúdica de cores.,

• o botão que apresenta o novo álbum é colocado no canto superior direito e tem um Pergaminho de texto para atrair a atenção – esta solução merece elogios.

• o formulário de assinatura na parte inferior da página tem uma animação divertida e fascinante.

• o site tem uma grade notável que o torna muito envolvente com toda a sua animação. A informação é apresentada de tal forma que os visitantes querem ler e aprender mais sobre a banda.

visite o sítio Web: Valaire.,mu