Em 2014, Sara Mote fundei a MOTE com Rembrant Van der Mijnsbrugge. Especializando-se em e-commerce, colaboram com clientes em todas as etapas da jornada da marca (desde a estratégia de mercado inicial e identidade da marca até design, desenvolvimento e marketing), sempre com foco no crescimento sustentável. Ao longo dos 15 anos de experiência dela em design de sites para e-commerce, moldou as estratégias de clientes que vão de marcas independentes a empresas da Fortune 500. Ela está animada em compartilhar as dicas e conselhos sobre design de sites que acumulou ao longo da carreira.
Editar um tema de site pré-montado é fácil. Se você quiser ver como seu site ficará com quatro produtos por linha em vez de dois, pode visualizar isso em questão de segundos. Mas com um site totalmente personalizado, fazer alterações no código pode ser demorado e caro. Por isso, os designers criam mockups de sites antes de avançar para a fase de desenvolvimento.
Neste artigo, aprenda mais sobre mockups de sites, além das ferramentas e melhores práticas para criar sua próprio mockup.
O que é um mockup de site?
Um mockup de site é uma prévia visual estática de como um site ficará. Ele oferece uma noção do design e layout finais do site, mas ainda não é funcional com o código de backend que tornaria o site interativo e pronto para publicação. Designers de sites usam mockups para explorar diferentes opções de design antes de passar o projeto para desenvolvimento para codificação. Quando um site for construído em código, é mais difícil fazer ajustes, então um mockup de site de alta fidelidade (um que seja o mais próximo possível do produto final) pode economizar tempo e dinheiro.
Mockups de sites vs. wireframes vs. protótipos
Wireframes, mockups e protótipos são diferentes maneiras de visualizar uma ideia de design.
Wireframes
Wireframes são diagramas que mostram o layout e a estrutura de um site sem elementos de design. Você pode pensar em um wireframe como um esboço para o seu design de site.
Um wireframe pode ser um simples esboço em papel, então é uma ferramenta útil para não designers que desejam comunicar a visão. Wireframes também podem ajudar designers que trabalham em sites com um elemento novo ou profundamente interativo. Isso porque os wireframes permitem decidir sobre o esboço básico e a funcionalidade do site antes de se perder em detalhes de design e código.
Mesmo que você esteja construindo um site de e-commerce mais simples, um wireframe pode ajudar a solidificar o funil de vendas e a experiência do cliente que você deseja criar. Como os wireframes são muito simples, são uma ótima maneira de alinhar tudo antes do início do design.
Mockups
Mockups são representações estáticas de alta detalhamento que ilustram o layout do site com decisões de branding aplicadas. Ao contrário dos wireframes, os mockups incluem direção de arte, tipografia e o uso de cores.
Os mockups oferecem uma prévia realista de como o site final parecerá para o usuário, mas ainda não são interativos. Eles são essenciais ao construir um site personalizado, pois permitem que você faça alterações no design antes que a codificação comece.
Protótipos
Protótipos são a opção de maior fidelidade para visualizar um site. Estes são modelos interativos que usam links de pré-visualização para simular a experiência do usuário e aproximar o design do site da realidade.
Para projetos que exigem testes de diferentes elementos interativos antes do desenvolvimento, um protótipo pode ser muito benéfico. Para projetos mais simples, você pode passar diretamente de um mockup para o desenvolvimento.
Como criar um mockup de site
- Decida como apresentar a marca
- Crie uma narrativa linear
- Reúna elementos da marca
- Desenhe templates para cada tipo de página
- Adicione espaços reservados significativos
- Obtenha feedback
Seja você desenhando algo por conta própria ou trabalhando com um designer, os elementos fundamentais a considerar durante o processo de design são os mesmos.
1. Decida como apresentar a marca
O primeiro passo ao projetar um site é dar um passo atrás e pensar em como apresentar a marca. Se você estiver trabalhando com um designer, pode iniciar o processo com um briefing criativo. Isso ajudará a entender mais sobre sua marca, público e inspiração.
É natural querer se concentrar em recursos específicos, mas antes de se deixar levar por detalhes técnicos, tente ampliar a visão: pense na história geral que você deseja contar com o layout do seu site.
Por exemplo, você pode começar com o objetivo de incentivar os usuários a passarem mais tempo em sua página inicial. A página inicial é frequentemente o primeiro ponto de contato com a marca. Ela também tende a ter as maiores taxas de rejeição. Mas, em vez de começar de uma perspectiva de recursos ou otimização de conversão, pergunte-se: “como estabelecer uma conexão mais profunda com os visitantes da página inicial?”
A solução pode ser tão simples quanto escrever uma introdução de uma frase sobre sua marca acima da dobra. Se os valores da sua marca estão no centro do seu negócio, esta é uma ótima oportunidade para destacá-los logo na página inicial. Por exemplo, demonstrar valores como sustentabilidade ou inclusão pode ressoar com seu público-alvo, mantendo-os em seu site por mais tempo.
2. Crie uma narrativa linear
Seu site deve seguir uma narrativa linear, o que significa que cada seção e página flui logicamente e se constrói sobre a próxima. Uma narrativa bem-sucedida garante que, quando alguém acessa sua página inicial, tenha uma noção clara de sua marca e de suas ofertas de produtos. À medida que eles percorrem o site, você deve oferecer mais detalhes e recursos que os ajudem a encontrar os produtos certos para eles.
Em um site de e-commerce tradicional, sua narrativa linear é o funil de vendas: Um usuário acessa a página inicial, que apresenta sua marca. Em seguida, encontra suas páginas de coleção de produtos, que oferecem mais detalhes do que sua página inicial (primeiro apresentando as informações mais importantes com informações secundárias e terciárias ao alcance). Em um fluxo narrativo bem-sucedido, o usuário seleciona produtos, vai para a página do carrinho e, por fim, completa o processo de checkout.
3. Reúna elementos da marca
Depois de pensar em como deseja moldar a narrativa para o site, reúna os elementos da marca que serão usados no design.
Se você tiver diretrizes de marca, pode compartilhá-las com seu designer (ou referenciá-las você mesmo). Se não, você precisará decidir sobre elementos da marca, como tipografia, gráficos e cores antes de criar um mockup. O layout em grade do site será baseado nas alturas de linha e espaçamento das letras das suas fontes de marca, então é importante decidir sobre esses elementos antes de elaborar seu mockup. Quando você tiver um layout em grade, pode criar mockups usando seus ativos de design e briefing criativo.
4. Desenhe templates para cada tipo de página
Ao criar um mockup de site, você não precisa criar um mockup para cada página individual. Em vez disso, você cria templates de mockup para diferentes tipos de páginas, como um template de página de coleção e um template de página de produto.
Ao projetar cada um desses templates, dê um passo atrás e pergunte-se: “o que tornará a experiência mais bem-sucedida?” Por exemplo, se você tiver uma seleção especial de seis produtos ou menos, sua página de coleção deve destacar cada um desses produtos e adicionar um pouco de contexto antes de ir para as páginas de produtos detalhadas.
Por outro lado, se você tiver um inventário de dezenas, centenas ou até milhares de produtos, deve projetar um site com filtragem de produtos mais avançada. Isso ajudará a garantir que alguém que acessa uma página de coleção possa restringir os resultados aos produtos mais relevantes para eles.
5. Adicione espaços reservados significativos
Como um mockup é uma prévia de como seu site parecerá, é possível que você ainda esteja gerando conteúdo para o site enquanto o mockup está em andamento. Se esse for o caso, você pode usar um espaço reservado significativo.
Mesmo que as imagens e o texto usados no mockup sejam temporários, eles devem ser o mais próximo possível do objetivo final. Assim, quando você visualizar os mockups, terá uma noção real da direção pretendida para o site. Por exemplo, em vez de usar texto de espaço reservado “lorem ipsum”, você pode elaborar um texto de exemplo que esteja alinhado com a marca.
6. Obtenha feedback
Quando seu mockup estiver pronto, é hora de apresentá-lo aos stakeholders e obter feedback. A principal vantagem de criar um mockup de site é que você pode fazer revisões sem alterar o código, então aproveite essa oportunidade para garantir que todos os stakeholders estejam confiantes no mockup antes de colocá-la em produção.
Ferramentas para mockups de sites
Existem muitas ferramentas de design que você pode usar para criar um mockup de site, mas algumas das mais populares incluem…
Sketch
Sketch é um aplicativo de design de sites que permite iterações rápidas. Criado em 2010 especificamente para design de interface de usuário (UI), o Sketch pode criar mockups, bem como protótipos interativos. Uma assinatura padrão começa em US$ 12 por mês.
Figma
Figma é uma ferramenta de design que permite colaboração em tempo real. Se você tem várias pessoas trabalhando em um mockup ao mesmo tempo, o Figma pode ser uma boa opção. Você pode se inscrever no Figma gratuitamente, mas se quiser usar todos os recursos, os planos começam em US$ 15 por mês.
Adobe XD
Designers que trabalham com toda a suíte de design da Adobe (aplicativos como Photoshop, Illustrator, InDesign e Lightroom) adoram o Adobe XD pela sua integração perfeita com outros aplicativos da Adobe. A Adobe não vende mais o XD como um produto independente, mas você pode acessá-lo através de uma assinatura do Adobe Creative Cloud por US$ 59,90 por mês.
Perguntas frequentes sobre mockups de sites
Como fazer um mockup de site gratuitamente?
Para fazer um mockup de site, você precisa de uma ferramenta de design, que pode ter custo. Felizmente, muitas ferramentas de design, como o Figma, oferecem um período de teste gratuito ou uma versão gratuita com menos recursos que você pode usar como ponto de partida. O Canva é outra ferramenta gratuita que você pode usar para criar um mockup de site.
Quando você deve criar um mockup de site?
Um mockup de site é útil ao construir um site totalmente personalizado, pois permite que você tenha uma noção de como o site vai parecer e funcionar antes de passar para o desenvolvimento. Ele oferece algo que você pode compartilhar, referenciar e iterar enquanto projeta o site. Dependendo do projeto, você pode criar um mockup de site após esboçar um wireframe, ou pode pular o wireframe e ir direto para o mockup após determinar os requisitos do projeto.
Os mockups de sites são necessários?
Dependendo do projeto específico, você pode não precisar criar mockups de sites. Por exemplo, se você criar seu site usando um tema da Shopify, pode pular o mockup e usar o template como um protótipo interativo. Dito isso, muitos dos princípios para criar um bom mockup ainda se aplicam a essa abordagem.
