Redesign de Interfaces: Como melhorar suas habilidades de UI Design através de uma simples técnica

Redesign de interfaces (UI) é uma prática que consiste em escolher uma interface já existente e propor uma ou várias soluções novas para esta interface.

Um dos maiores benefícios dessa prática é o aprimoramento da sua habilidade de propor novas e melhores soluções ao criar interfaces.

Essas soluções podem ser coisas como:

• Melhorar o espaço negativo de uma interface
• Deixar uma interface mais acessível
• Ajustar cores, tipografia e detalhes visuais

Você inclusive pode fazer um redesign só alterando o texto da interface (também conhecido como UX Copy).

As possibilidades são infinitas.

A ideia é bem simples: Escolha uma interface já existente e proponha uma melhoria.

Essa prática vai ajudar você a ser uma pessoa mais criativa, ter menos bloqueios criativos e aprimorar suas habilidades de UI Design.

Neste post você aprenderá…

• Por que fazer um redesign melhora suas habilidades?
• 3 vantagens da prática do Redesign de Interfaces
• Comece pequeno, baby steps…
• Como escolher uma interface para fazer redesign?
• Como fazer um Redesign de interfaces (UI): O passo-a-passo completo
• O seu próximo passo…

Por que fazer um redesign melhora suas habilidades?

Existe uma razão científica que faz com que essa técnica melhore suas habilidades.

Inclusive eu já expliquei em mais detalhes sobre isso no meu post sobre análise de interfaces.

Basicamente quando você analisa e executa ações práticas você tende a fixar melhor seus conhecimentos.

…e prestar mais atenção em detalhes minuciosos.

No mundo do UI Design isso é muito importante… Mas por que?

O que realmente diferencia uma interface boa de uma ruim são alguns detalhes bem específicos.

Eu chamo eles de Princípios de UI Design.

Você provavelmente conhece e aplica eles nas interfaces que você cria:

• Espaço negativo
• Hierarquia visual
• Consistência, etc…

É aqui que vem o pulo do gato.

Ao fazer um redesign você está condicionando o seu cérebro a prestar mais atenção nesses detalhes.

Isso porque a grande ideia de um redesign é melhorar algo já existente.

E como você faz pra melhorar uma interface já existente? Analisa os princípios básicos daquela interface e…

…Propõe melhorias com base nisso.

E como diabos eu sei disso tudo? Eu tenho feito redesigns toda a semana durante os últimos 10 meses e posso garantir que os resultados são positivos.

Foi exatamente isso que eu fiz neste vídeo de Redesign do aplicativo StackEdit, veja abaixo:

3 vantagens da prática do Redesign de Interfaces

Além de ajudar você a desenvolver suas habilidades de UI Design a prática do Redesign também possui 3 principais vantagens.

1. Eliminar o bloqueio criativo

Sem sombra de dúvidas a vantagem número UM é se livrar de bloqueios criativos.

Isso se torna possível porque você está condicionando o seu cérebro a ser mais criativo.

Repensar em uma nova solução para uma interface já existente é um processo que consiste em…

1. Analisar o que já existe
2. Questionar possíveis pontos de melhoria
3. Buscar por referências
4. Propor soluções

Sentiu alguma semelhança nesse processo de criação?

É basicamente o mesmo processo criativo de projetar uma interface do zero.

2. Agilidade

Quando eu comecei a criar interfaces eu me sentia basicamente uma lesma mexendo no Sketch.

A prática do Redesign vai ajudar você a desenvolver mais agilidade ao criar interfaces.

Coisas que antes pareciam complexas de fazer acabam ficando automáticas.

Aqui estão algumas coisas que eu praticamente faço de olhos fechados:

• Botões
• Formulários
• Espaçamentos

O quão mais você “clicar e fuçar” na ferramenta mais ágil você fica.

3. Criatividade

Eu estou sempre martelando por aí que criatividade não tem nada a ver com dom ou genialidade.

Ninguém nasce criativo.

As pessoas se tornam criativas.

Na minha vida toda eu sempre acreditei não ser uma pessoa criativa.

Até que chegou o dia que eu simplesmente decidi que ia ser criativo.

Foi então que eu descobri que a criatividade funciona como se fosse um músculo.

E que existem várias técnicas e habilidades que ajudam você a ser mais criativo e ter ideias novas.

Você quer ter novas ideias de interfaces? Faça redesigns
Você quer ter novas referências de fontes? Faça redesigns
Você quer ter novas ideias de combinações de cores? Faça redesigns

Comece pequeno, baby steps…

Recriar completamente uma interface é uma tarefa complexa.

É por isso que você deve começar pequeno.

Escolha somente um detalhe ou uma seção específica da qual você deseja propor uma nova solução.

Aqui estão alguns exemplos:

• Formulário de cadastro
• Etapa de onboarding
• Tela de login

Veja esse vídeo de exemplo do aplicativo Postgrain, eu recriei somente o formulário de cadastro e não demorei nem 10 minutos.

Inevitavelmente uma hora você se acostumará e poderá propor redesigns cada vez maiores e mais complexos.

Porém comece pequeno.

Como escolher uma interface para fazer redesign?

Comece com interfaces que você usa constantemente no seu dia-a-dia.

Os exemplos que eu mostrei (Postgrain e StackEdit) são dois aplicativos que eu uso todos os dias.

Ou seja, eu já meio que tenho uma noção do que poderia ser melhor.

E eu recomendo que você faça a mesma coisa.

Porém você também pode pesquisar por interfaces para fazer redesign nestes links:
Lapa.ninja
Pages.xyz
Product Hunt

Como fazer um Redesign de interfaces (UI): O passo-a-passo completo

O processo de criação de um redesign é algo bem simples.

Basta escolher uma interface, questionar pontos de melhorias e partir para a execução.

Vamos ver cada um desses passos em mais detalhes a seguir, continue lendo…

PS: No vídeo de redesign do app postgrain e stackedit eu mostro na prática como fazer um redesign.

1. Escolha uma interface

Selecione uma interface que você já conhece e usa constantemente.

Eu recomendo fortemente você começar com interfaces que você já conhece.

Ao escolher uma interface que é familiar para você será muito mais fácil pensar em pontos de melhoria.

Dica: utilize os links que eu passei anteriormente para encontrar interfaces caso você esteja sem ideias.

2. Questione

Faça uma analise geral da interface e comece a fazer perguntas do tipo:

• O que eu poderia fazer para melhorar essa seção?
• O que eu poderia fazer para deixar ainda melhor esse formulário?
• Como eu poderia melhorar o contraste das cores?

A ideia é essa: Questionar e buscar por possíveis melhorias.

Isso por si só já vai começar a te dar várias ideias do que fazer.

Eu costumo tirar um print da interface que eu escolhi e colar no app Figma.

E então começar a fazer as minhas anotações de possíveis melhorias por lá mesmo.

3. Busque referências

Agora que você já tem uma noção das melhorias que você deseja propor basta buscar por referências.

Observe e analise o que os grandes players do mercado estão fazendo para entregar soluções similares.

Busque por inspirações no Dribbble e nos sites que eu passei anteriormente.

Anote suas ideias e guarde suas inspirações.

Eu costumo tirar vários prints e escrever anotações no próprio arquivo de redesign do Figma.

PS: Eu mostrei isso na prática no redesign do postgrain.

4. Mão na massa

Agora resta começar a fazer o redesign.

Eu sempre começo criando uma cópia idêntica da interface original.

Após isso vou trabalhando nas possíveis melhorias que eu pensei na etapa 02 e 03.

Eu gosto de quebrar as melhorias em micro tarefas, por exemplo…

• Refazer os formulários de cadastro
• Melhorar o espaçamento dos elementos
• Pensar em um novo texto para o botão
• Remover elementos desnecessários

É interessante que você quebre o processo todo em micro tarefas.

Dessa maneira você conseguirá ter uma visão melhor do que deve ser feito para atingir o resultado que você deseja.

Uma dica bem interessante é você ir anotando todo o seu processo de decisão por trás do seu redesign.

Você poderá aproveitar essas anotações para montar um artigo no medium e ganhar visibilidade mostrando o seu trabalho.

5. Divulgue o seu trabalho

Após finalizar o seu redesign eu recomendo que você divulgue o seu trabalho como um shot no Dribbble ou escreva um artigo no Medium.

Caso você não tenha um convite no Dribbble você poderá divulgar no seu LinkedIn ou em grupos do Facebook.

Divulgar o seu trabalho de redesign é uma ótima maneira de começar a se inserir no mercado de UI Design.

Atenção: Não coloque os seus redesigns no seu portfólio.

Divulgar um pequeno pedaço em redes sociais é aceitável, porém no seu portfólio você deverá colocar somente projetos maiores e experimentos.

O que você achou dessa prática? Desça a página até o final e faça um comentário me contando qual será a sua primeira escolha de redesign.

O seu próximo passo…

Eu escrevi um eBook grátis completo com mais de 67 páginas sobre Design de Interfaces. Se você deseja aprimorar suas habilidades de UI Design esse eBook com certeza irá ajudá-lo.

Eu chamo esse eBook de Como Aprender Design de Interfaces, ele é 100% grátis e você pode baixá-lo clicando aqui.