Obtenha acesso ilimitado a todo o Medium por menos de US$ 1 /semana.

Become a member

10 etapas do processo de design de UI/UX que todo

especialista faz!
Navid Semi · Seguir
Publicado em Bootcamp
9 minutos de leitura · 6 de maio de 2022

Listen Share More

B ntes de iniciar qualquer um dos processos de design, precisamos compreender o

objetivo do site. Também precisamos fazer nossa própria investigação. Certamente em
estreita colaboração com o cliente.

É necessário entender essas questões para iniciar o processo de design:

Para quem é o produto?

O que exatamente o público espera ou procura?

 O objetivo principal deste produto é informar, vender ou divertir?

Como você quer se destacar dos produtos dos concorrentes?

Qual é o problema que este produto está tentando resolver?

Open in app

Meio de pesquisa

1. pesquisa UX

2. Definir &Ideação

3. Arquitetura da Informação (IA)

4. Estrutura de arame

5. Protótipo

6. Inspiração

7. Sistema de design

8. Brincar

9. teste de usuário

10. Ir ao vivo

Aqui está uma boa amostra para ver como a execução adequada do processo de design torna
seu design épico:

Betlo - Navid Semi

Bahram é um jogador sério de jogos para PC, atualmente contratado em meio
período pela Electronic Arts para testar jogos. Ele está estudando áudio…
navidsemi.com

1. Pesquisa de experiência do usuário

Logo na primeira etapa, precisamos reunir muitas informações sobre nosso público-alvo,
concorrentes e o produto que queremos criar. Além disso, a pesquisa de UX normalmente
envolve 10 etapas distintas.
Aqui estão todas as etapas para estabelecer uma pesquisa de UX perfeita:

Linha do tempo
(para organizar e demonstrar todos os processos de design em detalhes específicos)

Entrevista com o usuário

(para obter informações sobre as necessidades, comportamentos e atitudes dos usuários
em relação a um produto ou serviço)
Mapa de empatia
(para entender e ter empatia com os usuários, organizando seus pensamentos e
observações em torno da experiência do usuário)
Identifique os pontos problemáticos do usuário
(para envolver a identificação e compreensão dos desafios e frustrações que os usuários
enfrentam ao interagir com um produto ou serviço)
Personas
(para ajudar os designers de UX a entender os objetivos, comportamentos e necessidades
dos usuários ao projetar um produto ou serviço)
User Journey Map
(ajudando os designers de UX a entender a experiência do usuário e identificar pontos
problemáticos e oportunidades de melhoria)
Declaração do problema
(fornecendo foco e direção ao processo de design)

Análise da concorrência
(para informar as decisões de design e identificar oportunidades de diferenciação e
melhoria)
Diagrama de afinidade
(para organizar e agrupar grandes quantidades de dados ou ideias em categorias
significativas)
Insights
(para informar e orientar o design de produtos ou serviços que melhor atendam às
necessidades e objetivos do usuário)
Depois de reunir todas as informações das etapas de “pesquisa de UX”, estamos prontos para
passar para a próxima fase do processo de design.

Baixe o modelo de pesquisa de UX:

Modelo de pesquisa de experiência do usuário

A pesquisa de experiência do usuário é o estudo dos desejos e necessidades
dos usuários, com o objetivo de aplicar esses insights para aprimorar o…
navidsemi.gumroad.com

2. Definição e Ideação
Nessa etapa, temos um entendimento claro do que o público está procurando, bem como o
que os concorrentes estão oferecendo. Portanto, precisamos definir e organizar o que
reunimos até agora. Usar um modelo pronto é uma maneira inteligente de fazer isso
Agora que definimos o problema, é hora de gerar algumas ideias por meio de técnicas de
ideação. Como precisamos de um espaço para implementar nosso brainstorming, vamos
encontrar um local ou plataforma adequado para nossa sessão de ideação. FIGJAM é a melhor
plataforma para expandir sua ideação mesmo com os membros do seu projeto.

3. Arquitetura da Informação
Depois de gerar ideias e identificar possíveis soluções, é importante organizá-las e estruturá-
las usando os princípios da Arquitetura da Informação. Quando falamos de IA, estamos nos
referindo a duas partes cruciais: o Sitemap e o User Flow , cada um dos quais desempenha um
papel importante no design de UX.

O kit Wireflow é uma ótima ferramenta para criar mapas de sites e fluxos de usuários : Kit
Wireflow

- Mapa do site
Um mapa do site é essencialmente um guia que descreve as páginas principais de um site e
sua relação entre si, mostrando como elas estão conectadas e onde cada página se encaixa
no quadro geral.
A maneira fácil de criar um mapa do site usando estas ferramentas:

1. Kit de Fluxo de Fio

2. Timblee

3. GlooMaps

4. Miró

5. FlowMap

- Fluxo do usuário
Um fluxo de usuário é um gráfico ou diagrama que mostra o caminho que um usuário seguirá
em um aplicativo para concluir uma tarefa. As equipes de produto criam fluxos de usuário
para produtos de design intuitivos, apresentam as informações corretas aos usuários no
momento certo e permitem que os usuários concluam as tarefas desejadas no menor número
de etapas possível.

Em um fluxo de usuário, o usuário segue um caminho através de um produto que inclui seus
pontos de decisão. Os fluxos do usuário diferem dos fluxogramas porque podem começar de
forma bastante simples para determinar as principais jornadas do usuário. mas podem levar
facilmente a fluxos mais complicados ao adicionar todas as diferentes decisões que um
usuário pode tomar.
Entenda seu usuário. Para projetar o melhor fluxo de usuário possível, você precisa entender o
usuário da melhor maneira possível. Ao decidir como fazer com que os usuários interajam
com seu produto em um estado de fluxo, entender as necessidades e motivações do usuário
permite que você faça uma escolha informada.

Kit Wireflow — ⚡️50% de desconto ⚡️

O kit Wireflow é projetado em versões escuras e claras que são compostas por
mais de 590 modelos pré-fabricados para desktop…
navidsemi.gumroad.com

Aqui está uma lista de ferramentas para criar o fluxo do usuário:

1. Kit de Fluxo de Fio

2. Kit de Fluxo do Usuário

3. Timblee

4. Miró

5. FlowMap

6. Transbordar

4. Estrutura de arame
Um wireframe é uma visualização 2D de um produto digital, variando de esboços a lápis muito
básicos a designs digitais totalmente interativos.

Wireframing pode ser classificado em três tipos: wireframes de baixa fidelidade, média
fidelidade e alta fidelidade.

“Wireframes de baixa fidelidade”

Os wireframes de baixa fidelidade são ideais se você tiver partes interessadas ou clientes
na sala e quiser esboçar algo com uma caneta no meio da reunião.
“Wireframes de fidelidade média”
‌Os wireframes de fidelidade média têm componentes de interface do usuário mais
abrangentes e realistas. Mas se você não tiver tempo suficiente para cada processo de
design, basta pular esta subetapa.

“Wireframes de alta fidelidade”

Finalmente, wireframes de alta fidelidade possuem layouts específicos de pixel. Onde um
wireframe de baixa fidelidade pode incluir preenchimentos de texto pseudo-latinos e
caixas cinzas preenchidas com um 'X' para indicar uma imagem. wireframes de alta
fidelidade podem incluir imagens reais e conteúdo escrito relevante.
Aqui está uma lista de ferramentas gratuitas para criar wireframes:

1. figma

2. InVision

3. Draw.io

4. Miró

5. Wireframe.CC

6. MockFlow

7. Jumpchart

8. Caixa de moldura

9. Mydraft.CC

10. Wirefy

5. Protótipo
No estágio de prototipagem, wireframes de alta fidelidade são transformados em
demonstrações interativas que simulam de perto a aparência e o comportamento de um
produto. Os designers utilizam protótipos para realizar testes com usuários e coletar feedback
valioso sobre a usabilidade do produto.

Existem muitas ferramentas disponíveis para ajudá-lo a criar o protótipo do seu site:

1. figma

2. Estúdio Invision

3. Origami

6. Inspiração
Obter inspiração no design da interface do usuário envolve explorar e analisar várias fontes de
design. por isso, sempre precisamos ser criativos e modernos, mas pode ser muito difícil ter
novas ideias para cada projeto sem nos inspirarmos nos designs de outros sites da moda.
Precisamos coletar uma lista organizada de sites relacionados que escolhemos. Isso nos
ajuda a acelerar o processo de obtenção de inspiração. Nesta etapa, precisamos ver muitas
amostras para ter noção do caminho que temos pela frente.

Apenas tente não pegar muito emprestado de amostras diretas, não devemos parecer uma
versão de segunda categoria de outra coisa.
Vejamos alguns sites de inspiração populares:

1. behance

2. Awwwards

3. Drible

4. Land-Book

5. SiteInspire

6. Cssdesignawards

7. Néctar CSS

8. Creme Comercial

9. Admire a Web

10. Melhor Galeria de Sites

11. pinterest

12. Webdesign-Inspiration
7. Sistema de projeto
Um sistema de design é uma coleção de elementos de design, como botões, formulários e
outros componentes de interface, que são pré-projetados e agrupados para ajudar designers
e desenvolvedores a criar interfaces de usuário com mais eficiência.

Você pode baixar um dos kits de interface do usuário mais populares no link abaixo:

Untitled UI — kit Figma UI e sistema de design

O melhor kit Figma UI e sistema de design Untitled UI é o maior kit Figma UI e
sistema de design do mundo.
gumroad.com

Sua linguagem de design visual é composta de quatro categorias principais e você deve
considerar o papel que cada um desses elementos de design desempenha em cada
componente da tela.

Cor
As cores comuns em um sistema de design incluem de 1 a 3 cores primárias que
representam sua marca. Você pode querer incluir uma variedade de tonalidades – uma cor
misturada com branco – e tons – uma cor misturada com preto – para dar aos seus
designers mais algumas opções.

Tipografia
A maioria dos sistemas de design inclui apenas 2 fontes: 1 fonte para cabeçalhos e texto
do corpo e uma fonte monoespaçada para o código. Mantenha-o simples para evitar
sobrecarregar e confundir o usuário. Mantenha o número de fontes baixo; não é apenas
uma prática recomendada de design tipográfico, mas também evita problemas de
desempenho causados ​pelo uso excessivo de fontes da web.

Dimensionamento e espaçamento
O sistema que você usa para espaçamento e dimensionamento fica melhor quando você
tem ritmo e equilíbrio. Uma escala baseada em 4 está crescendo em popularidade como a
escala recomendada devido ao seu uso nos padrões iOS e Android, formatos de tamanho
ICO e até mesmo o tamanho de fonte padrão do navegador.

Imagens
A chave para o sucesso com imagens em sua linguagem de design visual é ter um plano e
cumpri-lo. Defina diretrizes para ilustrações e ícones e use o melhor formato de imagem
para a situação.
Aqui estão os sistemas de design mais populares que ajudam você a criar o seu:

1. IU sem título

2. Design material

3. atlassiano

4. Mailchimp

8. Maquete
A mockup takes the fundamental layouts from the high-fidelity wireframe and adds content,
branding, and styling. It’s also here that designers will receive feedback from stakeholders and
iterate on their mockup designs before continuing to prototypes.

Here are some design tools we should consider for our mockup phase and beyond:

Five UI/UX tools you need to learn in 2022

User interface (UI) and user experience (UX) are two distinct yet inseparable
aspects of design. That is, while the UI…
medium.com

1. Figma

2. Adobe XD
 3. Invision Studio

4. Sketch

9. User Test
Now, it’s time to gather feedback from users. We need to test our high-fidelity prototype with
various user groups, conduct usability tests, and create user stories.

User testing is a process of verifying that a solution works for the user.

Also, we can take user tests among each process step to get better and ideal results.

Some of the user testing tools:

1. Invision Studio

2. Google Forms

3. Marvelapp
10. Go live
Now it’s time to launch. There may be still some elements that need fixing but don’t worry,
product design is an ongoing process that requires constant maintenance. The beauty of the
UX/UI design is that it’s never finished.

Navid Semi — UI/UX Designer — Freelance | LinkedIn

Design cases: behance.net/NAVIDSEMI My purpose it’s a bring clients' visions
to life and will find the best…
www.linkedin.com

Ui Design Process UX Ux Design Process Ui Ux Design Ui Ux

Follow

Written by Navid Semi

654 Followers · Writer for Bootcamp

UX/UI Product Designer

More from Navid Semi and Bootcamp

 Navid Semi in Bootcamp

UX research template for Figma

What is UX research?  User Experience research is the study of users' wants and needs, as well as
applying those insights to end users in…

4 min read · Apr 21

3.8K

Deep Adalja in Bootcamp

12 Designers’ Portfolios that will make you jealous
Shhh… I’m stealing their design ideas

11 min read · Jun 5

512 18

Christie C. in Bootcamp

20+ Incredible MidJourney Prompts That Will Blow Your Mind ( Part 1 )
Learn Midjourney Prompts to Generate Amazing AI Arts

· 8 min read · Mar 10

2.1K 18
 Navid Semi

5 Best illustration-kit plugins for Figma!

Absolutely we always need illustration characters in most of our designs, There are some illustration
plugins in the Figma community but…

3 min read · Feb 26, 2022

237

See all from Navid Semi

See all from Bootcamp

Recommended from Medium

 Christina Sa in UX Planet

The UX Design Case Study That Got Me Hired

Getting a job in UX design is tough, but one particular case study helped me stand out from the crowd. I
designed a non-traditional…

· 8 min read · Mar 16

8.3K 113

Vikalp Kaushik in UX Planet

How I use ChatGPT as a UI/UX Designer
Using ChatGPT Made Me A Better Designer

· 5 min read · Jan 27

4.1K 48

Lists

Interesting Design Topics

199 stories · 33 saves

Stories to Help You Grow as a Designer

11 stories · 130 saves

Figma 101
7 stories · 34 saves

Icon Design
29 stories · 23 saves

Madison Green

How to Stand Out as a Junior UX Designer

Getting a job without reinventing the wheel.

· 10 min read · Mar 1

 2.4K 25

Christine Vallaure in UX Planet

Ultimate Guide to Color in UX/UI Design

Tips, theory & best practices from beginner to advanced

· 11 min read · Jun 20, 2021

3.8K 27
 Michal Malewicz

There are FIVE levels of UI skill.

Apenas o nível 4+ permite que você seja contratado.

· 6 minutos de leitura · 25 de abril

4,5K 52

Melodia Koh 🤔 em Protótipo

Seus portfólios são chatos

Atenciosamente, todo gerente de contratação de design por aí

· 9 minutos de leitura · 29 de outubro de 2022

14,1K 16

Ver mais recomendações