Como construir um site para um novo produto (e como o fizemos)

Se você ainda não tiver um resumo criativo, comece por aqui. Um resumo criativo descreve exatamente como você planeja falar sobre seu produto ou empresa. Ele define o tom de voz da sua marca, sua paleta de cores, sua declaração de valor e muito mais. Seu resumo da peça criativa define como o seu site se comunicará com os clientes.

Você já pode ter criado um resumo da peça criativa se tiver passado pelo processo de desenvolvimento do logotipo. Se assim for, você pode apenas reutilizar isso para o seu site. Se você ainda não desenvolveu um resumo criativo, agora é a hora de construir um.

Felizmente, já escrevi um artigo detalhado que ensina como fazer isso, o que inclui exemplos do resumo do criativo Outpost, portanto você pode ver como nós construímos a nossa. Então, se você precisa trabalhar em seu briefing criativo, confira meu artigo sobre como desenvolvemos nosso logotipo e seu resumo criativo e, em seguida, volte aqui quando estiver pronto.

Crie um sitemap

Com seu breve criativo em Por outro lado, você começará a trabalhar no seu sitemap. Um mapa do site é simplesmente um esboço que lista todas as páginas (inclusive suas finalidades e objetivos) que você planeja incluir no seu site.

Este é o mapa do site que desenvolvemos para o Outpost:

1. 1. Início : Visão geral do produto e um "apelo à ação" para se inscrever em uma avaliação gratuita. Links secundários para outras páginas que descrevem recursos.
   2. Visão geral de recursos : uma visão geral de todos os recursos com links para páginas de recursos detalhados.
      1. Detalhes do recurso para o recurso A: Detalhes do recurso A.
      2. Recurso B: Detalhes do Recurso B.
      3. Repita para todos os recursos.

• Preços: Detalhes dos planos de preços e links para se inscrever em uma avaliação gratuita.
• Clientes: Perfis de clientes bem-sucedidos.
• Quem somos: Visão geral de quem somos, nossa declaração de missão e nossa história.
• Entre em contato: Informações de contato, horário, local.
• Trabalhos: Uma lista de nossas atuais vagas de emprego.
• Declaração de Privacidade: Política de privacidade do Outpost.
• Blog: Página inicial do blog que lista posts recentes.
• Postagem no blog: Haverá vários posts no blog. Esta página será o modelo para eles.
• Central de Ajuda: Nossa Central de Ajuda será desenvolvida pelo Zendesk.

É claro que seu site provavelmente será muito diferente do sitemap do Outpost. Se você é um restaurante, por exemplo, você provavelmente terá uma página ou duas para menus e uma página para reservas. Se você está construindo uma loja on-line, provavelmente terá várias páginas de produtos diferentes.

Seu sitemap documenta, da melhor maneira possível, o que você acha que seu site incluirá. Esse pequeno planejamento tornará o resto do planejamento e desenvolvimento do site muito mais fácil, então vale a pena investir nesta fase inicial.

Escreva sua cópia antes do desenho

Você vai pensar que eu não obter a ordem aqui. Você não deveria projetar seu site antes de pensar sobre quais palavras você vai colocar na página?

Na verdade, a melhor abordagem é fazer as coisas “para trás” e pensar sobre a cópia do seu site primeiro e então projetar essa cópia. Por quê? Porque o que você quer comunicar aos seus clientes é muito mais importante do que o design final do seu site. É claro, o design importa e você quer ter um site que pareça bom, mas se você não puder comunicar suas principais mensagens aos seus usuários, um bom design não fará a diferença.

Escrevendo sua cópia primeiro também ajuda você e possíveis designers a entender o que cada página está tentando comunicar. Isso resulta em um design de design melhor que reforça sua mensagem. Mesmo que você mesmo construa seu site com uma ferramenta como o Squarespace, saber o que cada página precisa dizer antes de escolher um design será uma grande economia de tempo.

Quando chega a hora do seu design, você pode precisa refinar sua cópia para garantir que as coisas se encaixem corretamente, mas isso será mais fácil do que tentar escrever uma cópia para um design que não foi criado para sua mensagem.

Para sua home page, você provavelmente desejará um título descreve exatamente o que você faz - sua principal proposta de valor para seus clientes. Isso será seguido por uma descrição curta e expandida do que sua empresa faz.

Aqui está o título e a descrição expandida do Outpost, o produto que estamos criando:

Simplifique seu e-mail compartilhado

Rastreie, colabore, e responda às mensagens enviadas para endereços de e-mail genéricos, como support @ ou info @.

A partir daí, a cópia que você incluirá na sua página inicial será realmente determinada pelo tipo de empresa que você é e por seus clientes.

Para o Outpost, precisamos comunicar os principais recursos e benefícios de nosso produto e incentivar os clientes em potencial a aprender mais. Também queremos falar sobre nossa equipe de atendimento ao cliente e como eles são excelentes.

Mas, isso pode não ser a configuração correta para sua home page. Se você é um restaurante, talvez queira ter links para seus menus ou informações sobre como obter uma reserva. Cada empresa é diferente, então descubra o que você precisa dizer e, em seguida, anote-a.

Não se preocupe em começar com uma página em branco. Em vez disso, crie uma lista dos seus sites favoritos em seu setor e pense no que você gosta e não gosta em cada site. Que tipo de navegação eles usam? Quais páginas eles incluem? Que tipo de imagens eles usam? Você não precisa reinventar a roda, e usar um site favorito como ponto de partida é uma ótima maneira de começar.

Uma dica final: Menos é geralmente mais. Não fique tentado a escrever parágrafos infinitos de cópia para o seu site (a menos que seja o que seus clientes esperam!). Se você prestar atenção em como você usa sites, descobrirá que você está sempre folheando texto, não lendo cada palavra. Porque é assim que a maioria das pessoas lê online-skimming em vez de ler cada palavra - mantenha sua cópia curta e direta ao ponto.

Desenvolva um wireframe

Um wireframe é um layout aproximado do seu site. Não é realmente um design, exatamente. É um documento que mostra aproximadamente onde as coisas vão na página, sem preocupação com cores ou outros elementos gráficos.

Se você está trabalhando com um designer para construir seu site, eles produzirão um wireframe para você como parte do processo de design. Se você está construindo seu site por conta própria, usando um serviço como Squarespace ou Shopify, você pode facilmente construir um wireframe sozinho.

Não se deixe intimidar por este passo. Você não precisa de nenhuma ferramenta especial para construir um wireframe. Um bloco de papel e uma caneta são suficientes para esboçar cada página do seu site. Lembre-se, você não está "projetando" e um wireframe não precisa ser bonito. Só precisa comunicar o que acontece em uma página.

Se precisar de inspiração, confira outros sites de que gosta e veja como eles estruturam as informações em cada página. É totalmente bom tomar emprestado layouts de outros sites e encontrar inspiração para o seu próprio site.

Se você não conseguir usar caneta e papel, pode usar o PowerPoint ou o Keynote para criar wireframes. Há também ferramentas de wireframes dedicadas como o Balsamiq que facilitam o processo.

Eu incluí o wireframe da homepage do Outpost abaixo para que você possa ter uma idéia de como é um wireframe. Você também pode dar uma olhada na cópia que criamos na etapa anterior e no esboço de uma ideia para um elemento gráfico que queremos que um designer crie.