Em 2014, fundei a agência MOTE com o Rembrant Van der Mijnsbrugge. Especializamo-nos em e-commerce, trabalhamos com clientes em todas as fases da sua jornada de marca (desde a estratégia inicial de mercado e identidade de marca até ao design, desenvolvimento e marketing) sempre com foco no crescimento sustentável. Nestes meus 15 anos de experiência em web design para e-commerce, moldei as estratégias de marcas independentes e empresas da Fortune 500. Estou entusiasmado por partilhar as dicas e conselhos de web design que aprendi ao longo da minha carreira.
Editar um tema de site pré-criado é fácil — se quiser ver como fica o seu site com quatro produtos por linha versus dois produtos por linha, pode fazer a pré-visualização em segundos. Mas com um site totalmente personalizado, fazer alterações ao código pode ser demorado e dispendioso. É por isso que os designers criam maquetas de sites antes de avançar para a fase de desenvolvimento.
Neste artigo, aprenda mais sobre maquetas de sites, bem como as melhores ferramentas e práticas para criar a sua.
O que é uma maqueta de site?
É uma pré-visualização visual estática de como irá ficar um site. Oferece uma noção do design final e layout do site, mas ainda não funciona com o código de back-end, pois tal iria tornar o site interativo e pronto para publicação. Os web designers usam maquetas de sites para explorar as várias opções de design antes de entregar um web design ao desenvolvimento para codificação. Uma vez que um site tenha sido criado em código, é mais difícil de ajustar, por isso uma maqueta de site de alta fidelidade (que seja o mais próximo possível do produto final) pode poupar tempo e dinheiro.
Maquetas de sites vs. wireframes vs. protótipos
Wireframes, mockups e protótipos são formas diferentes de visualizar uma ideia de design. Eis quando usar cada uma:
Wireframes
Os wireframes são diagramas que mostram o layout e estrutura de um site sem elementos de design. Pode pensar num wireframe como uma planta do seu design de site.
Um wireframe pode ser um simples esboço a caneta e papel, por isso, é uma ferramenta útil para não-designers que querem comunicar a sua visão. Os wireframes também podem ajudar os designers que trabalham em sites a mostrar um elemento novo ou profundamente interativo. Isto porque os wireframes permitem tomar decisões sobre o esboço básico e funcionalidade do site antes de se começar a preocupar com o design e código.
Mesmo que esteja a criar um site de e-commerce mais simples, um wireframe pode ajudar a solidificar o funil de vendas geral e a experiência do cliente que quer criar. Dada a simplicidade dos wireframes, são uma excelente forma de colocar todos na mesma página antes de começar o design.
Maquetas
As maquetas são representações estáticas de elevado detalhe que ilustram o layout de site pretendido com decisões de marca aplicadas. Ao contrário dos wireframes, as maquetas incluem uma direção artística, tipografia e o uso de cor.
As maquetas dão uma pré-visualização realista de qual será a aparência final do site, mas não são interativas. São essenciais quando se cria um site personalizado porque permitem fazer alterações ao seu design antes de começar a codificação.
Protótipos
Os protótipos são a opção de maior fidelidade para pré-visualizar um site. São modelos interativos que usam links de pré-visualização para simular a experiência do utilizador e aproximar o design do site à vida real.
Para projetos que têm de testar vários elementos interativos antes do desenvolvimento, um protótipo pode ser realmente benéfico. Para os projetos mais simples, pode avançar diretamente de uma maqueta para o desenvolvimento.
Como criar uma maqueta de site
- Decidir como apresentar a marca
- Criar uma narrativa linear
- Reunir elementos da marca
- Desenhar modelos para cada tipo de página
- Adicionar marcadores de posição significativos
- Obter feedback
Quer esteja a desenhar algo ou a trabalhar com um designer, os elementos fundamentais a considerar ao avançar através do processo de design são os mesmos.
1. Decidir como apresentar a marca
O primeiro passo no design de um site é recuar e refletir sobre a melhor forma de apresentar a marca. Se estiver a trabalhar com um designer, pode começar por um briefing criativo. Isto ajuda quem trabalha consigo a saber mais sobre a sua marca, audiência e inspiração.
É natural querer focar-se em funcionalidades específicas, mas antes de se deixar levar por detalhes técnicos, tente fazer zoom out primeiro: pense na história geral que quer contar com o layout do seu site.
Por exemplo, pode começar com o objetivo de encorajar os utilizadores a passar mais tempo na sua página inicial.
A página inicial costuma ser o primeiro ponto de contacto de uma marca. Também tende a ter as taxas de rejeição mais altas. Mas em vez de começar numa perspetiva de funcionalidades ou otimização de conversão, pergunte-se: "Como estabelecemos uma ligação mais profunda com os visitantes da página inicial?".
A solução pode ser tão simples como escrever uma introdução (uma frase para a sua marca) acima da dobra. Se os seus valores de marca estão no coração do seu negócio, esta é uma excelente oportunidade para mostrar esses valores logo na página inicial. Por exemplo, demonstrar valores como sustentabilidade ou inclusividade pode ressoar com o seu público-alvo, e tal faz com que fiquem mais tempo no seu site.
2. Criar uma narrativa linear
O seu site deve seguir uma narrativa linear, onde cada secção e página flui logicamente e abre caminho para a seguinte. Uma narrativa bem-sucedida garante que quando alguém aterra na sua página inicial, tem uma noção clara da sua marca e das suas ofertas de produtos. À medida que as pessoas percorrem o site, deve oferecer mais detalhes e funcionalidades para que encontrem os produtos certos.
Num site de e-commerce tradicional, a sua narrativa linear é o funil de vendas: um utilizador aterra na página inicial, que apresenta a sua marca. A partir daí, encontram as suas páginas de coleção de produtos, que entram em detalhe sobre o que é abordado na página inicial — primeiro é apresentada a informação mais importante, com a informação secundária e terciária ao alcance de um clique. Num fluxo narrativo bem-sucedido, o utilizador seleciona produtos, vai à página do carrinho e, em última instância, completa o processo de check-out.
3. Reunir elementos da marca
Uma vez que saiba como irá trabalhar a narrativa do site, reúna os elementos da marca que serão usados no design.
Se tem diretrizes de marca, pode partilhá-las com o seu designer (ou referenciá-las). Caso contrário terá de definir elementos da marca como a tipografia, as imagens e cores antes de criar uma maqueta. O layout de grelha do site será baseado nas alturas de linha e espaçamento de letras das suas fontes de marca, por isso é importante decidir sobre esses elementos da marca antes de desenhar a sua maqueta de site. Uma vez que tenha um layout de grelha, pode criar maquetas com os seus recursos de design e briefing criativo.
4. Desenhar modelos para cada tipo de página
Quando desenha uma maqueta de site, não cria uma maqueta individual para cada página web. Em vez disso, cria modelos para diferentes tipos de páginas, como um modelo de página de coleção e um modelo de página de produto.
À medida que desenha cada um destes modelos, dê um passo atrás e pergunte: "O que vai melhorar a experiência?". Por exemplo, se tem um sortido curado de seis produtos ou menos, a sua página de coleção deve mostrar cada um desses produtos e adicionar um pouco de contexto antes de ir para as páginas detalhadas dos produtos em si.
Por outro lado, se tem um inventário de dezenas, centenas ou até mesmo de milhares de produtos, deve desenhar um site com filtragem de produtos mais avançada. Isto ajuda a garantir que quem aterra numa página de coleção pode filtrar e reduzir os resultados aos produtos que são mais relevantes.
5. Adicionar marcadores de posição significativos
Como uma maqueta é uma pré-visualização do seu site, é possível que ainda esteja a gerar conteúdo para o site enquanto o mockup está a ser criado. Se esse for o caso, pode usar um marcador de posição significativo.
Mesmo que as imagens e texto usados na maqueta sejam temporários, devem estar o mais próximo possível do objetivo final. Desta forma, quando pré-visualiza os mockups, obtém uma noção da direção pretendida para o site. Por exemplo, em vez de usar texto de marcador de posição "lorem ipsum", pode usar algum texto de exemplo que esteja alinhado com a marca.
6. Obter feedback
Uma vez que a maqueta esteja pronta, é hora de a apresentar aos stakeholders e obter feedback. A principal vantagem de criar uma maqueta de site é que pode fazer revisões sem alterar código, por isso use esta oportunidade para garantir que todos os stakeholders estão confiantes na maqueta antes de a colocar em funcionamento.
Ferramentas para maquetas de sites
Há muitas ferramentas de design que pode usar para criar uma maqueta de site, mas algumas das mais populares incluem:
Sketch
O Sketch é uma aplicação de web design que permite iteração rápida. Criado em 2010 para o design de UI, o Sketch pode criar maquetas e protótipos interativos. Uma subscrição padrão começa nos 11 € por mês.
Figma
O Figma é uma ferramenta de design que permite uma colaboração em tempo real. Se tem várias pessoas a trabalhar numa maqueta ao mesmo tempo, o Figma pode ser uma boa opção. Pode inscrever-se no Figma gratuitamente, mas se quiser usar todas as suas funcionalidades, os planos começam nos 16 € por mês.
Adobe XD
Os designers que trabalham com a suite total de design da Adobe (aplicações como o Photoshop, o Illustrator, o InDesign e o Lightroom) adoram o Adobe XD dada a sua integração perfeita com outras aplicações da Adobe. A Adobe já não vende o XD como produto independente, mas pode aceder ao mesmo através de uma subscrição da Adobe Creative Cloud por 80,61 € por mês.
Perguntas frequentes sobre maquetas de sites
Como fazer uma maqueta de site gratuitamente?
Para fazer uma maqueta de site, precisa de uma ferramenta de design, que custa dinheiro. Felizmente, há muitas ferramentas de design, como o Figma, que oferecem um período de teste gratuito ou versão gratuita com menos funcionalidades que pode usar como ponto de partida. O Canva é outra ferramenta gratuita que pode usar para fazer um mockup de site gratuito.
Quando deve criar uma maqueta de site?
Uma maqueta de site é útil quando se cria um site totalmente personalizado, dá-lhe uma noção do resultado final antes de avançar para o desenvolvimento. Fica com algo que pode partilhar, referenciar e iterar à medida que desenha um site. Dependendo do projeto, pode criar uma maqueta de site após esboçar um wireframe, ou pode saltar o wireframe e ir diretamente para a maqueta, assim que determinar os requisitos do projeto.
As maquetas de sites são obrigatórias?
Dependendo do projeto, pode ou não precisar de criar maquetas de sites. Por exemplo, se criar o seu site com um tema da Shopify, pode saltar a maqueta e usar o modelo como protótipo interativo. Dito isto, muitos dos princípios de criar uma boa maqueta aplicam-se a esta abordagem.
