Como fazer wireframes para Web Design no Adobe XD

O segredo para criar um ótimo web design está na estrutura. O wireframing é a primeira etapa do processo de design para definir a estrutura principal e o posicionamento do conteúdo do seu site.

Página inicial de wireframe de negóciosPágina inicial de wireframe de negóciosPágina inicial de wireframe de negócios
Um bom modelo de wireframe do Adobe XD é um bom lugar para começar.

Você está trabalhando em seu próximo projeto de web design? Este tutorial irá guiá-lo através das principais etapas para criar um Adobe XD wireframe.

Neste Tutorial de Wireframes para Web Design no Adobe XD, abordaremos:

  1. O que é o Adobe XD?
  2. O que é um Wireframe?
  3. Quais seções um bom Web Design deve incluir?
  4. Como iniciar o wireframe do zero
  5. Como criar wireframes no Adobe XD
  6. Como escolher o melhor modelo de wireframe do Adobe XD para o meu site

1. O que é o Adobe XD?

Primeiras coisas primeiro. Se você é novo no mundo e nas ferramentas de web design, é importante entender o que é o Adobe XD, bem como seus principais recursos. O Adobe XD é uma ferramenta de design de UI/UX baseada em vetor. Você pode usar o XD para criar aplicativos até sites.

Confira este vídeo rápido de Adi Purdila e tenha uma visão geral do Adobe XD:

2. O que é um Wireframe?

A definição mais simples dada pelo Google descreve um wireframe como um “contorno ou esboço de um produto de uma tela”. Em outras palavras, os wireframes são o esqueleto de um web design. Por meio de linhas, caixas e formas, os wireframes indicam a posição de diferentes tipos de conteúdo em seu layout de design.

Página de destino dos serviços de lavanderia Wireframe responsivoPágina de destino dos serviços de lavanderia Wireframe responsivoPágina de destino dos serviços de lavanderia Wireframe responsivo
Este modelo é um ótimo Akit de wireframe dobe XD para trabalhar em seu próximo web design.
  • O wireframe é um passo importante em qualquer processo de design de tela. Ele permite principalmente que você defina a hierarquia de informações do seu design, tornando mais fácil…

3. Quais seções um bom Web Design deve incluir?

Antes do wireframe, é uma boa ideia criar uma lista das seções e do conteúdo que seu site apresentará. As seções em um wireframe da Adobe variam de acordo com os diferentes tipos de site, mas estas são as principais a serem consideradas:

  • Cabeçalho: esta área geralmente inclui o logotipo, links de navegação e, às vezes, uma imagem de herói.
  • Acima da dobra: esta é a primeira coisa que seu usuário vê ao entrar em seu site. Esta deve ser a seção mais impactante do seu site.
  • Abaixo da dobra: isto é onde você coloca mais informações para o usuário continuar explorando.
  • Rodapé: esta é a parte inferior de um site. Geralmente apresenta créditos, links de mídia social, termos e condições, etc.
Estrutura de webdesignEstrutura de webdesignEstrutura de webdesign
Estas são as principais seções a serem consideradas antes de fazer um wireframe Adobe.

Tenha em mente seus principais usuários e o que eles estão procurando.

Para este tutorial, estarei criando wireframes para um site de portfólio criativo. Esse tipo de site geralmente é direcionado a clientes em potencial e colegas criativos. Estarei criando wireframes para quatro seções:

  1. pagina inicial
  2. portfólio
  3. página do projeto
  4. cerca de

4. Como iniciar o wireframe do zero

Antes mesmo de abrir o Adobe XD, sugiro que você esboce a estrutura geral do site que deseja criar. Eu sou uma pessoa do tipo caneta e papel, mas você também pode trabalhar com Procreate ou Photoshop.

Esboce seus wireframes à mão ou digitalmente para obter ideias sobre estrutura e conteúdo.

Meu site de portfólio criativo terá quatro seções, então esbocei ideias de layout e conteúdo para cada uma. Seu esboço deve incluir elementos como:

  • imagens e vídeo
  • navegação
  • chamada para ação (botões)
  • galerias de imagens
  • manchetes
  • corpo do texto
Esboce wireframes para tirar ideias da sua cabeça.Esboce wireframes para tirar ideias da sua cabeça.Esboce wireframes para tirar ideias da sua cabeça.
O wireframe à mão é uma ótima maneira de esboçar suas primeiras ideias de design.

Você notará que estou usando códigos visuais básicos para diferentes tipos de conteúdo, como caixas, linhas e círculos. Agora você tem uma ideia geral dos elementos necessários antes de entrar em detalhes com espaçamento, peso e outras coisas técnicas.

5. Como criar wireframes no Adobe XD

É hora de transformar nossos esboços em wireframes. Vamos em frente e criar alguns wireframes de baixa fidelidade no Adobe XD. Abra o Adobe XD e criar um novo Web 1920 x 1080 pixels prancheta.

Abra o Adobe XD e crie uma nova prancheta da Web 1920 x 1080 px. Abra o Adobe XD e crie uma nova prancheta da Web 1920 x 1080 px. Abra o Adobe XD e crie uma nova prancheta da Web 1920 x 1080 px.
Crie um novo arquivo selecionando o tamanho padrão de prancheta de 1920 x 1080 px para web.

Etapa 1: inserir um sistema de grade

Trabalhar com uma grade é fundamental para criar um layout responsivo.

Seguir o sistema de grade padrão que o Adobe XD usa é um bom ponto de partida.

Sistema de grade no Adobe XDSistema de grade no Adobe XDSistema de grade no Adobe XD
Vá para o menu no lado direito da tela e marque a caixa de seleção Grade.

Para ativar a grade em suas pranchetas, selecione uma prancheta, vá para o menu do lado direito da tela e marque o Rede caixa de seleção. Selecione os Esquema opção no menu suspenso. O único ajuste que vou fazer é definir o Largura da calha para 20 px para ter um pouco mais de espaço entre os elementos.

Ajustar a medianiz para 20 px no Adobe XDAjustar a medianiz para 20 px no Adobe XDAjustar a medianiz para 20 px no Adobe XD
Ajuste a largura da calha para 20 px para ter um pouco mais de espaço entre os elementos.

Etapa 2: criar pranchetas

Crie uma prancheta para cada seção do seu web design.

Para o site de portfólio criativo em que estou trabalhando, criarei quatro pranchetas para cada uma das minhas seções: Home page, Portfolio, Project page e About.

Crie uma prancheta para cada seçãoCrie uma prancheta para cada seçãoCrie uma prancheta para cada seção
Criei quatro pranchetas para cada seção que vou projetar.

Etapa 3: traduzir o esboço em formas

É hora de tirar as ideias da sua cabeça e colocá-las na tela. Comece a traduzir seus esboços em formas básicas, como retângulos, círculos e quadrados. Use a grade para colocar e espaçar seu conteúdo.

Códigos visuais de wireframesCódigos visuais de wireframesCódigos visuais de wireframes
Os códigos visuais ajudam a identificar os elementos de design em seus wireframes.

Use códigos visuais diferentes para diferentes tipos de conteúdo.

Por exemplo, use um retângulo preto na parte superior como espaço reservado para o logotipo, retângulos estreitos para o menu principal, retângulos mais largos para títulos, grandes caixas cinzas cruzadas com um “x” para indicar imagens e retângulos pretos com cantos arredondados para botões. Use cinza escuro para indicar fundos coloridos e cinza claro para imagens.

Estruturas de arame no Adobe XDEstruturas de arame no Adobe XDEstruturas de arame no Adobe XD
Use o sistema de grade em seu Awireframes dobe XD como um guia para colocar suas caixas.

Espera-se que algumas áreas e seções funcionem de forma diferente no formato digital, então não há problema em ajustar alguns de seus desenhos.

Etapa 4: especificar o conteúdo

Agora que você tem a estrutura geral, vale a pena entrar em um pouco mais de detalhes sobre seu conteúdo. Adicione texto a algumas de suas caixas para indicar que tipo de conteúdo estará lá, como logotipo, links de navegação, corpo de texto, destaques etc. Isso também é útil para identificar os elementos que você precisará considerar em seu design sistema.

Especifique o conteúdo de cada área e seção no Adobe XDEspecifique o conteúdo de cada área e seção no Adobe XDEspecifique o conteúdo de cada área e seção no Adobe XD
Adicione texto para especificar o conteúdo que será apresentado em cada caixa.

E lá vai! Você sabe como criar uma estrutura básica para Awireframes dobe XD.

6. Como escolher o melhor modelo de wireframes do Adobe XD para o meu site

Trabalhar com um modelo pode acelerar o processo de design. No entanto, é sempre útil saber como os wireframes são criados para ter mais truques de personalização na manga. A melhor parte de trabalhar com modelos de wireframe do Adobe XD é que eles já vêm com estilos de imagem e texto para você substituí-los pelo seu conteúdo.

Site do Curso Online de WireframeSite do Curso Online de WireframeSite do Curso Online de Wireframe
Este é um ótimo modelo do Adobe XD para um site educacional online.

Lembre-se, o design deve sempre seguir o conteúdo.

Ao escolher o modelo de wireframes certo, você deve pensar no propósito do seu site. Você está criando um e-commerce, uma loja de móveis ou um site de cursos online? Pesquise modelos específicos ou um kit de wireframes do Adobe XD que inclua os principais elementos que você gostaria de apresentar em seu site.

Mais inspiração e recursos do Adobe XD

O wireframing é uma etapa chave do processo de design. É preciso um pouco de prática e um monte de projetos de web design para levar suas habilidades de wireframing a um nível profissional. Também é super útil olhar para muitas referências e começar a perceber os elementos e a estrutura que torna cada design único.

Selecionamos alguns artigos e tutoriais para ajudá-lo com a inspiração e os recursos de design da Web do Adobe XD:

Deixe um comentário

O seu endereço de e-mail não será publicado.