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.
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:
- O que é o Adobe XD?
- O que é um Wireframe?
- Quais seções um bom Web Design deve incluir?
- Como iniciar o wireframe do zero
- Como criar wireframes no Adobe XD
- 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.
-
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.
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:
- pagina inicial
- portfólio
- página do projeto
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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:
Originally posted 2022-07-01 06:01:20.
