Até agora, nesta semana, mostramos a você como configurar um site. Agora, vamos ver como fazer a curadoria do design perfeito para seu cantinho da internet. Ao final deste artigo, você saberá como fazer o seguinte:
- Crie uma página web do zero
- Design de página da web
- Como testar um quadro de site
- Como criar um protótipo de site
- Como aplicar sua marca ao seu site
Antes de começar – considere seu tempo e objetivos
Nesta seção, vamos nos aprofundar no design de um site em detalhes, desde os primeiros esboços de layout até a produção final. É muito importante perceber que criar sites grandes e de qualidade é um processo iterativo e demorado.
Esse processo começa agora, mas continuará... para sempre. A web é uma arena em constante mudança e espera-se que continue se movendo. Você sempre estará trabalhando em seu site à medida que melhora seu desempenho ao longo do tempo ou muda as metas do seu site para reagir às mudanças no mercado.
Para fazer algo funcionar rapidamente, você precisa ser muito estratégico sobre o que escolher fazer primeiro. Você não precisa lançar TUDO imediatamente. Reveja seus objetivos e descreva como seria o menor site possível para atingir esses objetivos – um produto com minima viabilidade.
Agora concentre toda a sua atenção em alcançar isso. Se você for muito grande, muito cedo, você vai acabar atolado por semanas. Seja inteligente sobre o trabalho que você escolher assumir.
Talvez tudo o que você consiga fazer esta semana seja criar um site de uma página com seu logotipo protótipo e o texto "em breve"! Isso é definitivamente melhor do que nada e deixa você preparado para expandir mais tarde.
Construir seu site pode parecer uma tarefa assustadora, mas conforme você planeja seu site, você perceberá quais páginas são absolutamente essenciais para o lançamento e quais páginas podem ser adicionadas posteriormente. É melhor criar um site menor e de alta qualidade do que criar um site amplo com muitas páginas contendo conteúdo ruim ou ausente. Você não perderá nada cortando essas páginas extras para começar. Espera-se que os sites evoluam e mudem ao longo do tempo e você pode facilmente expandir seu site após o lançamento.
Planejando uma página de site
Ao começar a criar seu site, a primeira coisa que você precisa considerar é em quais páginas ele será lançado e como você vai vinculá-las para que os usuários possam encontrar facilmente o conteúdo que você criou.
A navegação é incrivelmente importante para acertar. Se os visitantes não conseguirem encontrar o que estão procurando rapidamente, eles sairão tão rápido quanto chegaram!
Isso geralmente é resolvido com uma barra de navegação que fica bloqueada no topo da página quando o usuário rola para baixo. A navegação para 95% dos sites vem na forma de uma barra no topo que se reduz a um ícone quando em sites para dispositivos móveis. Portanto, é essencial escolher as páginas de nível superior certas para ficar nessa barra de navegação. Você não quer necessariamente que cada página seja vinculada no topo, pois isso fará com que a barra fique desorganizada muito rapidamente, dificultando a navegação.
Se o seu site realmente requer muitas páginas, mesmo desde o lançamento, você precisará agrupá-las em categorias e aninhá-las em menus suspensos na sua barra de navegação. Você já viu isso muitas vezes em sites de moda onde eles têm uma grande variedade de produtos divididos em várias categorias. Eles geralmente usam painéis suspensos grandes e espaçosos para acomodar isso. Os melhores exemplos conseguem exibir uma grande variedade de opções claramente sem que isso se transforme em uma pilha confusa de menus dentro de menus. Se você está planejando um negócio de moda ou qualquer negócio com uma gama diversificada de produtos, vale a pena gastar muito tempo aqui para acertar a navegação. Se as pessoas não conseguem encontrar seus produtos, elas também não podem comprá-los.
Consulte sua pesquisa de mercado para entender o que seus visitantes podem querer alcançar ao visitar seu site e leve-os a esse ponto o mais rápido possível e com o mínimo de confusão possível.
Sua pesquisa de mercado também deve ajudar a informar o design geral do seu site.
Design de página da web
Uma das coisas que você precisa pensar ao projetar uma página web do zero é o design.
Na semana passada, passamos pela criação de um mood board para ajudar a estabelecer a aparência e a sensação da sua marca e reunir inspiração. Você deve recorrer a isso novamente para seu site. Você pode até mesmo criar um mood board inteiro dedicado à inspiração para sites. Mais uma vez, há muitos recursos exibindo designs de sites incríveis.
Abaixo estão alguns recursos que você pode usar para ajudar nesse processo:
- Artigos do site Abduzeedo
- Exemplos de sites Dribbble
- Exemplos de sites Behance
- Exemplos de sites do Pinterest
Wireframing de site
O wireframing é uma etapa comum e extremamente útil no design, não importa se você está criando um site de destino de uma página ou uma grande loja de comércio eletrônico.
Ele permite que você brinque rapidamente com layouts sem ter que trabalhar em designs de alta qualidade. O wireframing pode ser feito com caneta e papel e o processo envolve simular cada página da web usando linhas e caixas para indicar onde o conteúdo pode ser colocado. Isso permite que você gere layouts rapidamente e imagine o fluxo da página sem gastar muito tempo com isso. Use isso para considerar o posicionamento de suas chamadas para ação (CTAs), imagens, blocos de texto e navegação.
Protótipo de site
Este é um passo extra que você pode tomar ao construir seu site. Isso é muito mais fácil do que parece, pois envolve zero codificação, já que há muitos aplicativos por aí projetados para tornar esse processo rápido e fácil.
A ideia é digitalizar seus wireframes (você ainda pode usar marcadores de posição para texto e imagem) e usar o software de prototipagem para vinculá-los, para que você possa ter uma noção ainda mais clara do fluxo e da navegação do site.
Você pode criar imagens estáticas em tons de cinza dos seus layouts de wireframe em softwares de imagem como o Photoshop e então carregá-las para esses sites de prototipagem. Os sites então permitirão que você vincule vários protótipos para criar um mockup do seu site que você pode visualizar e testar.
Muitos desses aplicativos permitirão que você crie designs diretamente dentro do software:
Você pode começar a usar seus protótipos para descobrir onde você vai colocar suas mensagens para ser mais eficaz. Conforme você substitui o conteúdo de espaço reservado por conteúdo real, garanta que ele esteja funcionando para atingir sua estratégia. Quando alguém chega à sua landing page, ele saberá exatamente o que sua empresa faz em poucos segundos? O site está rapidamente direcionando-os para as ações que você quer que os usuários concluam?
Claro, isso tem tanto a ver com as mensagens em si quanto com o local onde elas são colocadas e apresentadas na página.
Design de site de marca
Depois de estabelecer seus layouts ideais, o design será naturalmente cumprido por sua marca. Você precisa aplicar o trabalho que concluiu na semana passada ao seu site, pois a consistência é a chave para construir sua marca. Seu site precisa ter a aparência adequada e se encaixar no restante de suas atividades de marketing e comunicação.
A imagem da marca que você escolheu será essencial para criar um site atraente e envolvente. Imagens de alta qualidade são essenciais para garantir que seu site tenha uma aparência nítida em vários tamanhos diferentes. Uma imagem borrada cria uma primeira impressão ruim.
O logotipo que você projetou na semana de branding deve ser seu primeiro porto de escala. Certifique-se de que ele esteja visível no topo do seu site em todas as páginas. Muitos sites o incorporarão no menu de navegação superior, que provavelmente estará em todas as páginas. Você também pode usar o logotipo para navegação, clicando pode retornar à página inicial do site.
Locais de cores da marca
Aplicar a paleta de cores da sua marca ao seu site garante que sua marca seja transmitida claramente, isso por si só pode ser o suficiente para tornar seu site instantaneamente reconhecível. A cor principal da sua marca deve aparecer consistentemente em todo o seu site.
Aqui estão alguns lugares comuns para você usar a cor principal da sua marca:
- Cabeçalhos de navegação
- Cores de fundo do banner superior (tenha cuidado se você tiver uma cor dominante)
- Títulos e subtítulos de páginas
- Hiperlinks de texto
- Cores dos botões – (embora você possa escolher uma cor contrastante para fazer seus CTAs se destacarem)
- Ícones de cores
- Sobreposições sobre suas fotos de estoque
Você pode usar suas cores secundárias de maneiras semelhantes para criar interesse, variação e contraste. Apenas seja consistente com seu método de aplicação. Lembre-se, você pode usar seu software de prototipagem para experimentar o quanto quiser. Testar variações e iterar em seus designs é a chave para chegar rapidamente a um design final com o qual você esteja satisfeito.
Escolhendo as imagens certas
Escolher bons gráficos para seu site deve utilizar os ativos de marca que descrevemos como criar na semana 8. Aqui estão algumas dicas adicionais para aplicá-los ao seu site:
- Certifique-se de que as imagens que você escolher complementem o texto que você escreve para acompanhá-lo. Elas devem apoiar a mensagem clara que você está tentando transmitir.
- Tenha cuidado ao colocar texto em cima de imagens. Isso pode prejudicar a legibilidade. Aplicar uma cor de destaque por cima pode ajudar a reduzir o ruído no fundo.
- Imagens grandes podem afetar os tempos de carregamento. Você sempre pode salvá-las como jpegs para compactar o tamanho do arquivo se esse for o caso.
- Evite ações que pareçam muito genéricas ou falsas. É muito óbvio e prejudicará a confiança e a autenticidade do seu site (mais sobre isso depois).
- Não exagere nas imagens. As imagens são muito poderosas e podem distrair se usadas em excesso. Lembre-se dos objetivos do seu site e certifique-se de que cada imagem tenha um papel e não os esteja atrapalhando.
Foco no site
Outro elemento crítico para o web design é como você escreve e apresenta seu conteúdo de uma forma que as pessoas realmente reservem um tempo para lê-lo. Escrever ensaios sobre produtos na sua homepage simplesmente não funciona e não é envolvente o suficiente.
Parte disso é resolvido usando uma fonte web clara, com bom contraste, tamanho e espaçamento. Se você estiver usando temas incorporados em uma plataforma de site, então há muitos temas por aí que naturalmente têm ótima legibilidade incorporada. No entanto, isso é apenas metade da batalha. A fadiga de leitura, especialmente em telas, é muito real e você precisa ser inteligente para garantir que você escreva e posicione seu texto de uma forma que realmente seja lido.
Siga estas diretrizes:
- Certifique-se de que seu texto seja claro e evite ambiguidades.
- Mantenha a estrutura da frase simples. Evite palavras e combinações complexas.
- Vá direto ao ponto rapidamente.
- Divida grandes quantidades de texto em blocos menores e separados, com seu próprio título.
- Não tente transmitir muita coisa de uma vez. Decida o ponto que cada bloco de texto está tentando transmitir e atenha-se a ele.
- Use imagens junto com o texto para incentivar as pessoas a ler.
- Use espaço em branco! Forneça espaço generoso (preenchimento) ao redor do seu conteúdo para que ele não fique abarrotado.
Como ter certeza de que você está construindo um site otimizado para dispositivos móveis
É incrivelmente importante que seu site funcione perfeitamente em celulares e tablets, já que muitas pessoas consomem conteúdo por meio desses dispositivos agora. O Google vai realmente penalizar sites em suas pesquisas se você não cumprir isso!
Felizmente, isso é bem fácil hoje em dia. A maioria dos temas padrão que vêm com uma plataforma de site deve usar design 'responsivo'. Isso significa que, conforme a largura da tela diminui, o conteúdo se ajustará automaticamente para caber neste novo tamanho, perfeito!
Ainda assim, vale a pena verificar se as imagens e vídeos que você está usando permanecem visíveis quando reduzidos e se o texto ainda é legível. Se você não possui vários tipos diferentes de tablets e celulares, pode estar se perguntando como verificar isso. Bem, a maneira mais rápida é agarrar a borda esquerda ou direita do seu navegador (certifique-se de que não esteja em tela cheia) e arrastá-la para a esquerda ou direita para tornar a janela maior ou menor. Você verá o conteúdo do seu site se ajustar conforme você faz isso e, assim, poderá analisar seus layouts em tamanhos diferentes. Há também um método mais preciso que envolve o uso de uma ferramenta incorporada ao navegador Chrome:
- Clique com o botão direito na sua página da web
- Clique em 'Inspecionar' (isso abre um painel)
- No canto inferior esquerdo deste novo painel há um ícone de uma tela e um telefone (alternar barra de ferramentas do dispositivo)
- Clique neste ícone
Agora, na parte superior, você tem várias barras cinzas que permitem simular a aparência do seu navegador em resoluções específicas. Há até um menu suspenso para escolher telefones/tablets populares e as resoluções que eles usam. Legal!
Não importa se você escolhe construir o site da sua empresa sozinho ou contratar uma agência para fazer isso por você, há muitos custos associados ao design de um site. Você não só terá que pagar pelo seu nome de domínio, custos de hospedagem e qualquer plataforma web que escolher, como também haverá taxas contínuas de manutenção do site.
Se você contratar uma agência de design para fazer isso por você, isso será um grande custo para sua startup. Você deve considerar se seus fundos cobrirão esse custo ou se será mais barato fazer você mesmo. Como mostramos nos últimos artigos, configurar um site é muito mais fácil do que você pensa. Embora haja custos associados a ambas as abordagens para projetar seu site, você precisa determinar qual é mais viável para você.
Resumo
Ao projetar um site, pense em como você quer que sua marca seja representada. Provavelmente, seu site será uma das primeiras impressões que os clientes terão de sua marca. Isso significa que é crucial que você acerte a mensagem. Você também precisa garantir que seu site seja amigável ao usuário e que ele possa ser usado em uma ampla variedade de dispositivos. Um site que não tenha uma ótima aparência no celular pode fazer com que o usuário saia.
Reveja sua estratégia e pense em como você pode usar seu design para incentivar seus usuários a navegar pelo site da maneira que você deseja para atingir seu objetivo desejado.
Depois de projetar e lançar seu site, você vai querer verificar se ele realmente está cumprindo seu propósito.
