Ebook Ui Design v2 PDF
Ebook Ui Design v2 PDF
Ebook Ui Design v2 PDF
Começar nesse mundo do Design de Interfaces não é algo que precisa ser complicado,
durante a minha trajetória de aprendizado eu cometi muitos erros e perdi muito
tempo. O mais bacana disso tudo é que você poderá aprender através dos meus erros
e começar do jeito mais eficiente. :)
• Técnicas de criatividade
• Cores em Interfaces
• Tipografia em Interfaces
• Componentes em Interfaces
Gabriel Silvestri
Autor do eBook
gabrielsilvestri.com.br 2
Indice
gabrielsilvestri.com.br 3
Por que eu escrevi esse eBook? Um
pouco da minha trajetória…
Aquele trabalho não era ruim mas a verdade é que eu não estava gostando muito
daquilo. Tecnologia, aplicativos e website sempre foram coisas que chamavam muito
atenção.
Eu queria muito aprender a criar a parte visual das interfaces que eu via no dribbble e
ter uma noção melhor de como escolher cores, posicionar componentes em uma tela
e todas as outras habilidades de UX e UI.
Nessa época eu era um pouco como você hoje. Eu queria muito aprender sobre
Design de interfaces, mas eu não fazia nem ideia por onde começar. Sempre que
eu tentava criar uma interface acontecia a mesma coisa: A página em branco me
assustava e eu desistia.
No Brasil eu não conseguia encontrar nada muito específico sobre esse assunto.
Mas eu fui atrás… Procurei ler os melhores livros, participei de cursos, workshops e
pratiquei muito.
gabrielsilvestri.com.br 4
Grande parte dos cursos de UI Design que estudei focam somente na parte de
aprendizado do Software de UI Design.
Dominar software não te faz ser um UI Designer melhor, mais criativo e muito menos
te ajuda a criar interfaces mais bonitas.
Eu descobri que o que realmente fazia a diferença era entender e aplicar os princípios
básicos da criação de interfaces digitais.
Depois que eu entendi as coisas ficaram muito mais fáceis, eu tinha um caminho
muito mais claro a seguir e uma base SÓLIDA de conhecimento.
Dai eu pensava, poxa a área de UI Design nunca vai conseguir prosperar e crescer
enquanto as pessoas continuarem achando que só aprender software é o suficiente.
Foi então que eu tomei a decisão de começar a escrever conteúdos sobre UX e UI para
ajudar pessoas como você que estão perdidas e não sabem por onde começar nessa
área.
E resolvi criar um treinamento online para poucas pessoas com o meu método
de aprendizado de UI Design. Eu queria descobrir se o meu método aprendizado
funcionava pra outras pessoas também, pra minha surpresa os resultados foram
incríveis, o método realmente funciona e trouxe resultado para os meus alunos.
E isso me motivou a criar mais conteúdos simplificados para as redes sociais, youtube,
instagram, facebook e linkedin, as pessoas finalmente estavam conseguindo vencer o
bloqueio de como começar do zero nesse mundo do design de interfaces e criar algo
novo.
gabrielsilvestri.com.br 5
Dúvidas frequentes sobre UI Design
Resolvi iniciar o eBook já solucionando as principais dúvidas sobre essa área que eu
tenho recebido por email e redes sociais nos últimos tempos.
De acordo com as vagas que são postadas no trampos.co e the bridge, a média salarial
de um designer de interfaces é a seguinte:
Sênior (Tem muita experiência teórica, mais de 4 anos de prática e também tem
outras skills mais avançadas de liderança e gestão): R$ 6.500,00 à R$ 9.800,00
O tamanho que você achar melhor de trabalhar. Na web não existe um tamanho
certo ou errado, a resolução mais utilizada é de 1366x768, eu costumo trabalhar com
1600x900.
gabrielsilvestri.com.br 6
Utilize o tamanho que for mais confortável pra você. No momento que um
desenvolvedor for implementar a sua tela é que você vai descobrir se serão
necessários ajustes de tamanho.
De todas essas a minha preferida é o Figma, ela faz tudo que eu preciso e é de graça.
Você não vai gastar mais de 40 minutos aprendendo a usar essa ferramenta.
gabrielsilvestri.com.br 7
Todas as ferramentas de UI Design citadas acima possuem 8 indispensáveis funções,
ao invés de focar em aprender todas as ferramentas eu recomendo que você aprenda
sobre as 8 funções que qualquer ferramenta de design possui:
03- Modelo de cores em HSB: Muito útil pra criar variações e paletas
E adivinha só o que você consegue fazer com essas 8 tools… Criar interfaces. E sim,
claro. Cada uma das ferramentas tem sim suas exclusividades, mas no final das contas
o que importa é o básico e os princípios de UI Design. A simplicidade é o último grau
de sofisticação.
gabrielsilvestri.com.br 8
É necessário saber programar para trabalhar com UI Design?
Não. Você não precisa saber programar nenhum tipo de linguagem de programação
para trabalhar como UI Designer. Todos os assuntos que você precisa dominar para
trabalhar como UI Designer estão aqui nesse eBook.
Talvez você já tenha visto postagens e/ou vagas que pedem que o UI Designer tenha
conhecimentos de HTML, CSS ou Javascript. E sim, existem vagas como essas, porém
ai é outra história nesse caso essa vaga é para um Desenvolvedor Frontend com
habilidades de UI Design (ou vise e versa).
A grande maioria das vagas de UI Designer não vão solicitar que você saiba
programação, fique tranquilo.
Eu acredito que sim, vale a pena. Se você dominar HTML, CSS e Javascript você
conseguirá desenvolver e criar telas mais tecnicamente viáveis.
Mas não é algo que você deseja aprender por agora, espere você pelo menos dominar
e ter segurança de todas as técnicas, princípios básicos e ferramentas de UI Design.
Eu conheço UI Designers que sabem programar. Porém… Eles já tem mais de 8 anos
de experiência.
gabrielsilvestri.com.br 9
4 Erros que iniciantes cometem
começar em UI Design
A parte visual e BONITA de uma interface é a ÚLTIMA coisa que você precisa se
preocupar, existem muitas etapas antes que você precisa executar.
A grande maioria das pessoas tenta criar interfaces já usando cores, tipografias,
efeitos e etc e acaba sempre do mesmo jeito: Com bloqueio criativo e sem ideias
Por que isso acontece? Você está ignorando grande parte de um processo criativo e de
geração de ideias que é extremamente necessário pra criar interfaces e também ao
pensar em várias coisas ao mesmo tempo você aumenta a dificuldade das coisas
gabrielsilvestri.com.br 10
Erro #2: Aprender somente sobre como usar softwares de UI Design
Como assim Gabriel? Então quer dizer que é errado aprender sobre software de UI
Design?
Ficar fazendo curso atrás de curso sobre Adobe XD, Figma, Sketch NÃO vai te fazer ser
um UI Designer melhor que vai criar telas mais criativas e funcionais
Claro que existem alguns que tem certos aspectos e funcionalidades melhores que os
outros, e etc. Mas as ferramentas BÁSICAS são todas iguais.
Tanto faz porque no momento que domina os princípios básicos as ferramentas viram
só ferramentas e os métodos são somente métodos. Ou seja…
O que é eterno e nunca mudará são os princípios básicos de UI Design dos quais eu
vou falar em breve.
gabrielsilvestri.com.br 11
Erro #3: Não coletar e analisar boas referências de interfaces
Não adianta você só ter uma ideia genial e já sair criando sem nem ao menos buscar
por referências ou inspirações.
Se você não parar por pelo menos 15 minutos pra analisar um pouco de referências as
chances são que você vai acabar tendo um bloqueio criativo.
Então eu recomendo fortemente que sempre antes de você sair criando algo do zero,
você consulte referências e inspirações.
Isso não é muito dificil de fazer, basta você criar uma conta no Dribbble ou Behance
conforme eu falei anteriormente.
gabrielsilvestri.com.br 12
Erro #4 Não entender qual a diferença entre UX e UI Design
Vejo muita gente que só cria interfaces se proclamando “UX/UI Designer”. UX Design é
algo relacionado à pesquisa com usuários, usabilidade, validação e estratégia.
Se você só cria a parte estética de uma interface você não é um UX/UI Designer e sim
um UI Designer.
A diferença de UX e UI:
Uma das principais confusões que ocorrem nessa área é achar que UI (User Interface,
interface do usuário) é a mesma coisa que UX (User experience, experiência do
usuário). É diferente, UI tá inserido dentro de UX, mas não é a mesma coisa.
gabrielsilvestri.com.br 13
Como aprender e por onde começar
no mundo do UI Design?
Eu sei muito bem como é a sensação de querer muito aprender a criar interfaces e
não fazer ideia por onde começar, afinal de contas, eu comecei do zero também.
Também sei o quão péssimo é ficar horas e horas no Google tentando achar
conteúdos de maneira mais organizada e aprofundada… É por isso que eu escrevi esse
eBook, esse é um guia que vai ajudar você a começar do ZERO no mundo do Design
de Interfaces.
Dizem por aí que algumas pessoas nascem com o Dom da criatividade e do Design. Se
isso é verdade eu não sei, mas definitivamente não foi o meu caso.
Essa história de dom também é o maior besteira que eu já vi por ai, esses tempos
falaram um negocio pra mim:
Eu respondi assim:
“- O meu dom apareceu magicamente depois de eu ter passado mais de 2000 horas
na frente do Photoshop e depois de ter lido dezenas de livros sobre Design.”
gabrielsilvestri.com.br 14
Se tem uma coisa que eu aprendi durante a minha trajetória como Designer (e
principalmente ao consumir os conteúdos do Murilo Gun) é que criatividade e dom
são habilidades da qual você desenvolve através de trabalho duro.
Não existe essa de nascer com o dom da criatividade. Mozart sabia tocar uma
cacetada de músicas com 11 anos de idade e era considero “gênio”. Mas o que muita
gente não sabia é que ele começou a tocar com 3 ou 4 anos de idade.
Não julgue os resultados de palco de uma pessoa que passou anos e anos
aprimorando suas habilidades no backstage.
Vou explicar como desenvolver suas habilidades latentes de criatividade nos próximos
capítulos, continue lendo.
Em qualquer área vão existir princípios básicos que guiam você na direção correta, no
mundo das interfaces é a mesma coisa.
Já imaginou tentar esculpir uma estátua de mármore sem saber nada sobre
modelagem e esculturas? Não rola. Você precisa primeiro aprender o básico, a
manusear as ferramentas e criar as formas mais rudimentares e básicas.
Não adianta nada você querer criar interfaces elegantes e perfeitas se você nem ao
menos sabe quais são as boas práticas ao criar elas.
Uma das maiores causas de bloqueios criativos e falta de confiança ao criar interfaces
é porque o designer não domina com maestria todos os princípios básicos de UI
Design.
gabrielsilvestri.com.br 15
No momento que você não ter certeza do que você está criando pensamentos como
esses surgem: “Será que isso vai funcionar? Será que isso tá certo? Será que essas
cores combinam?”
Uma das coisas mais difíceis que eu tive que aceitar é que os meus projetos, métodos
e habilidades nunca vão estar perfeitas.
Enquanto você não aceitar que os obstáculos de aprendizado SÃO o caminho você
nunca conseguirá atingir a maestria.
Não adianta você fazer 1 ou 2 cursos e aceitar que já aprendeu o suficiente. Você
precisa continuar buscando por conhecimento, aprendendo e praticando cada vez e
cada vez mais.
gabrielsilvestri.com.br 16
6 Princípios fundamentais de UI
Design
Em UI Design existem certas regras e boas práticas que devem ser seguidas. Não
adianta nada você querer construir uma interface se você não entende como alinhar e
hierarquizar os elementos de uma maneira que faça sentido e fique agradável.
Imagina se você quer construir uma ponte sem nem ao menos saber fazer os cálculos
de estrutura ou os princípios mais básicos sobre engenharia, simplesmente não tem
como.
Em UI Design isso é igual, não adianta você querer criar uma interface sem antes
dominar os fundamentos de como fazer isso.
Se você não faz nem ideia de como funcionam grids, responsividade, hierarquia visual
e todos esses outros termos do mundo de UI Design, é nesse capítulo que você vai
desvendar esses assuntos de uma vez por todas.
gabrielsilvestri.com.br 17
1- Espaço
Também conhecido como espaço negativo ou espaço em branco. Esse princípio diz a
respeito do espaço que você define entre os demais elementos de uma interface.
Uma interface com uma boa legibilidade, usabilidade e elegância possui muito espaço.
É através da aplicação de espaço que você consegue definir com maestria, Ordem,
Organização e Ênfase nos elementos de uma interface.
Deixar muito espaço em branco em uma interface não é desperdício de espaço, muito
pelo contrário, é justo isso que faz com uma interface seja boa.
Veja o exemplo do Google Analytics, é uma interface que possui muitos dados a serem
lidos, a aplicação de espaço micro e macro facilita muito a legibilidade da interface.
gabrielsilvestri.com.br 18
Existem dois principais tipos de espaço: O espaço micro e o espaço macro.
Espaço micro diz a respeito do espaço interno dos elementos de uma interface assim
como esse componente do exemplo abaixo:
Já o espaço macro diz a respeito do espaço entre grupos de elementos conforme você
pode ver no exemplo abaixo.
gabrielsilvestri.com.br 19
2- Grids e alinhamento
Grids de interfaces digitais não possuem linhas horizontais (rows). Isso se deve ao fato
de que não existe um controle 100% exato da altura e largura de uma tela.
Todas as interfaces que você criar vão precisar se adaptar conforme o tamanho da tela
do usuário, ou seja, é praticamente impossível você definir uma regra clara quanto à
altura e largura de todas interfaces do mundo.
Grids em interfaces digitais é um assunto que pode chegar à níveis mais complexos de
cálculos, breakpoints e responsividade adaptativa.
Se você está iniciando agora não se preocupe, você não precisa quebrar a cabeça
tentando dominar todos esses cálculos e mínimos detalhes, o que você realmente
precisa saber é só alinhamento.
gabrielsilvestri.com.br 20
A estrutura de 3 linhas
Essa estrutura consiste em você criar 3 linhas guia na sua interface. Uma no canto
direito com uma pequena margem de 30px, uma no centro e outra no canto esquerdo
também com 30px.
Essa estrutura serve tanto para mobile quanto desktop, veja como funciona no
exemplo abaixo:
gabrielsilvestri.com.br 21
gabrielsilvestri.com.br 22
A estrutura de 12 colunas
12 Colunas
70 Width
30 Gutter
Alinhado ao centro
Essa é uma estrutura bastante versátil e fácil de utilizar. Grande parte dos
desenvolvedores front-end já estão acostumados a trabalhar com essa estrutura o
que facilita ainda mais o fluxo de trabalho.
gabrielsilvestri.com.br 23
3- Consistência
Consistência é algo que diz a respeito de alguma coisa que segue um determinado
padrão ou ordem pré estabelecida. Interfaces com muitas inconsistências visuais
passam a impressão de algo que foi feito as pressas e mal revisado.
Maneira consistente: Definir uma hierarquia de escala e tamanhos para cada elemento
da interface
gabrielsilvestri.com.br 24
B) Cores
C) Tipografia
gabrielsilvestri.com.br 25
4- Hierarquia Visual
É através de uma hierarquia visual que você vai definir o que é mais importante em
uma interface. Essa hierarquização é aplicada da mesma maneira que o princípio da
consistência. Ou seja, você vai dar menos e mais destaque aos seguintes elementos:
• Tipografia (peso)
• Cores (contraste)
• Escala de tamanhos
• Espaço
• Agrupamento
Veja um exemplo:
gabrielsilvestri.com.br 26
5- Usabilidade
Usabilidade não se trata somente do quão intuitivo e fácil de usar algo é. De nada
adianta uma interface ser bonita ou fácil de utilizar se ela não tem a capacidade de
possibilitar que você consiga fazer o que você quer fazer.
E é por isso que você precisa dominar os seguintes assuntos caso você queira criar
interfaces que sejam úteis, usáveis e agradáveis:
Affordances
É uma pista da função ou forma de como alguma coisa deve funcionar. É basicamente
um empurrãozinho gentil que você precisar dar no seu usuário, assim mostrando o
que pode ser feito com algum elemento.
Uma das maneiras mais utilizadas de dar pistas visuais é através de sombras e cores
(conforme falei no principio anterior). Veja o exemplo abaixo, quanto mais pequenos
detalhes e pistas são adicionados ao botão e formulário mais “usável” ele fica.
gabrielsilvestri.com.br 27
Signifiers
gabrielsilvestri.com.br 28
Efetividade de usabilidade
É algo que diz a respeito sobre se o usuário consegue atingir seus objetivos com
precisão. A efetividade pode ser alcançada através da linguagem que é utilizada em
uma interface.
Se você utilizar uma linguagem muito técnica com jargões as chances são que o seu
usuário não conseguirá utilizar a sua interface. O mesmo serve para complexidade de
funções, botões e elementos da sua interface. Quanto mais complexo, menos efetivo.
Veja por exemplo o app da Nuconta. A linguagem e funções do app são extremamente
simples e descomplicadas. Isso é algo que não é muito comum em aplicativos de
bancos mais tradicionais
gabrielsilvestri.com.br 29
Eficiência
Ou seja, quanto menos etapas, passos e atividades o usuário precisar fazer para
atingir os seus objetivos, melhor.
Engajamento
Quantas vezes você já não se perdeu no vórtex infinito de vídeos do YouTube? Tudo
isso graças aos videos relacionados, recomendados e autoplay.
gabrielsilvestri.com.br 30
Tolerância de erros
Todo produto vai possibilitar que o usuário cometa erros, isso é comum. É
praticamente impossível você evitar que um ser humano cometa um erro ao utilizar
uma interface.
O Gmail tem uma função da qual você pode cancelar o envio de um email logo após
pressionar em enviar. Ou também o Dropbox, quando você deleta alguma coisa ele
pergunta se você deseja desfazer a sua última ação.
Facilidade de aprendizado
O quão fácil uma interface é de aprender a usar? É aqui que as convenções são tão
poderosas, se você cria algo que as pessoas já estão acostumadas a utilizar a sua
interface tende a ser fácil de utilizar.
gabrielsilvestri.com.br 31
6- Design Visual em Interfaces
• Cores
• Tipografia
• Componentes
Ou seja, toda vez que você for criar uma nova paleta de cores, um botão ou até
mesmo selecionar uma família de fontes você deverá levar em consideração os
gabrielsilvestri.com.br 32
Cores em Interfaces: Um guia prático
A primeira coisa que você precisa saber sobre cores digitais é o modelo de cores HSB.
Esqueça o modelo RGB e HEX. Em UI Design vamos usar somente o modelo HSB.
gabrielsilvestri.com.br 33
Primeiro vamos entender melhor sobre o modelo HSB:
HUE (Matiz): É um atributo que define qual cor você vai trabalhar. Também é a posição
de uma cor na roda de cores e é mensurado em graus, onde 0º é vermelho, 120º é
verde e 240º é azul.
BRIGHTNESS (Brilho): É o quão acessa uma cor é. 0% equivale a preto e 100% equivale
ao nível máximo de brilho de uma cor.
gabrielsilvestri.com.br 34
Ao manipular esses 3 valores você consegue criar inúmeras variações de cores.
E por que é tão importante criar tantas variações de cores? Uma interface precisa de
muito mais do que 5 cores.
Provavelmente você já deve ter visto por aí aqueles geradores de paletas de cores, até
que parece ser algo bem interessante pra ter uma base.
Mas na prática se você usar uma paleta dessas a sua interface vai ficar com essa
aparência:
gabrielsilvestri.com.br 35
Uma boa interface é composta por vários tipos e variações de cores que são
separadas nas seguintes categorias:
Cores Primárias:
São as cores principais de uma interface é ela que vai definir a identidade visual dos
elementos da interface.
Por exemplo, o Facebook é conhecido pelo Azul, a Netflix pelo vermelho e o Nubank
pelo roxo.
gabrielsilvestri.com.br 36
Cores de Acentuação:
gabrielsilvestri.com.br 37
Tons de cinza: Quase todos elementos de uma interface são compostos de tons de
cinza. Textos, formulários, controladores, etc.
Ah, uma dica importante: Nunca use 100% preto, é uma cor que quase nunca fica
muito harmoniosa ou natural com as demais cores de uma interface, utilize sempre
tons acinzentados.
gabrielsilvestri.com.br 38
Criando uma paleta de cores usando variações claras e escuras
É agora que vem o pulo do gato. Vamos começar pela cor primária, selecione uma cor
para servir como base.
Não existe uma regra certa ou errada sobre qual cor base escolher, porém o que é
interessante fazer é testar essa cor aplicando como se fosse um botão, conforme esse
exemplo:
Outro detalhe, eu costumo sempre escolher uma cor que não é nem muito clara nem
muito escura, um meio termo.
gabrielsilvestri.com.br 39
Feito isso vamos criar as variações escuras dessa cor manipulando os valores de
SATURATION e BRIGHTNESS.
Pegue a cor principal e crie uma cópia, aumente o valor de saturação e diminua o valor
de brilho. Crie uma nova cópia dessa cor e repita o processo até chegar em uma cor
escura o suficiente.
gabrielsilvestri.com.br 40
Para as variações de cinza a cor base não importa muito. Selecione um tom de cinza
quase preto e vá alterando os níveis de brilho até que você crie uma grande variações
de tons de cinza.
Pronto! Agora você tem uma paleta de cores funcional e pronta para ser utilizada,
tudo isso sem nenhuma teoria maluca de cores e sim através de um método
funcional.
gabrielsilvestri.com.br 41
Tipografia em Interfaces
1- Escala de tamanhos
3- Legibilidade
1- Escala:
Existem mil e uma maneiras de criar uma escala tipográfica, todas estão corretas
e são ótimas, porém… É mais fácil você usar uma escala pronta do que criar a sua
própria e tentar ficar reinventando a roda.
12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px
Essa escala é extremamente versátil e funciona porque os tamanhos tem uma boa
diferença entre eles. Ou seja, posso utilizar 12px para legendas e detalhes e 18px para
botões e 48px para títulos.
gabrielsilvestri.com.br 42
2- Use boas fontes
Todas as fontes que eu utilizo eu costumo buscar no site TypeWolf e Google Fonts.
São ótimos repositórios com fontes dos mais variados tipos e eu recomendo que você
comece a buscar fontes lá também.
Em caso de dúvidas utilize uma Sans Serif como a Roboto, Helvetica ou Open Sans.
Fontes Sans Serif é o tipo de fonte com a melhor legibilidade em interfaces, sempre
quando possível utilize esse estilo de fonte.
Separei uma lista de fontes que eu costumo utilizar nos meus projetos, você consegue
encontrar elas para download no Google Fonts ou Typekit, algumas são pagas e a
grande maioria de graça.
gabrielsilvestri.com.br 43
Fontes para títulos e subtítulos:
gabrielsilvestri.com.br 44
3- Legibilidade
Altura de linha: Quando a altura de linha é curta demais o leitor pode acabar se
confundindo e lendo a mesma frase duas vezes. Para evitar isso dê um espaço maior
entre cada linha, principalmente quando você está trabalhando com textos longos.
gabrielsilvestri.com.br 45
Componentes
Existem vários tipos de componentes, se você está começando agora é interessante
você prestar atenção nesses tipos:
Botões de ação:
Responsáveis por permitir ações como salvar, continuar, excluir, etc. É através de
botões que fazemos as principais interações dentro de uma interface seja ela digital
ou analógica.
Checkboxes:
É um botão que permite que você marque ou desmarque quantas opções e elementos
achar necessário, sem muitos mistérios.
Rádios:
Diferente de um botão checkbox, somente um botão rádio pode ser ativado por vez. É
como se fosse um interruptor de luz, só pode ficar ligado ou desligado.
São chamados assim porque os botões de aparelhos de rádio antigos só podiam estar
gabrielsilvestri.com.br 46
ativos apenas um por vez, quando você apertava outro botão que estava “ligado”
abaixava.
Hoje esse é um conceito que veio para o mundo digital e é amplamente utilizado em
praticamente qualquer interface.
Menus:
Formulários:
gabrielsilvestri.com.br 47
Seletores:
Dropdowns:
É como se fosse um seletor, porém cada opção é um botão que executa uma
determinada ação diferente, ex: salvar, excluir, enviar, etc.
gabrielsilvestri.com.br 48
Cards:
São componentes muito úteis para agrupar e organizar informações, são amplamente
utilizados em qualquer aplicativo da Google. Além disso você também pode utilizar
eles como botões mais destacados.
gabrielsilvestri.com.br 49
Existem 3 características que você precisa dar muita atenção ao criar e trabalhar com
componentes: Legibilidade, Ênfase e Usabilidade.
Legibilidade:
Ênfase:
Por exemplo, um botão “esqueci a senha” não precisa ter muito destaque, ele pode
ser somente um texto em fonte pequena próximo ao formulário de login. Já o botão
de login/entrar precisa estar mais destacado porque é a ação principal.
Usabilidade:
Existem duas características que fazem um botão ser mais usável: uma ação clara e
fácil de entender (seja ela um ícone ou texto) e um tamanho facilmente clicável.
Você não deve nomear aleatoriamente a ação de um botão com coisas como:
Prosseguir, Saiba Mais, Confirmar. Antes de dar nome à ação de um botão você
precisa prestar atenção no seguinte aspecto: Quando o usuário pressionar esse botão,
o que vai acontecer?
gabrielsilvestri.com.br 50
muito o usuário a concluir a sua compra, o correto deveria ser “Confirmar compra” ou
“Realizar pagamento”.
Já sobre tamanhos, um botão não pode nem ser grande ou pequeno demais. Se o
botão for pequeno demais o usuário vai ter dificuldades ao pressionar. E se for grande
demais talvez ele chame mais atenção do que o necessário.
gabrielsilvestri.com.br 51
O processo de criação de uma
interface
Antes de tudo, é importante que você saiba que não existe um método ou passo-a-
passo exato e definitivo. O que existe é uma média aproximada do que acontece nos
projetos de interface.
Depois das reuniões de briefing é indispensável que você ou sua equipe definam quais
são os objetivos desse projeto.
Esses objetivos podem ser simples ou complexos, depende muito do projeto que
você vai executar. Às vezes é algo simples como: A interface precisa apresentar uma
solução viável em apenas 1 tela. Ou algo como, a interface precisa ter um foco maior
na versão mobile.
gabrielsilvestri.com.br 52
Passo 03: Análise de concorrentes
Ao analisar todas informações e definir objetivos você vai começar a pesquisar por
referências e similares.
Nessa etapa você vai buscar quais são os outros produtos e empresas que tem uma
solução similar. A ideia aqui é analisar o que é bom, o que é ruim e o que poderia ser
feito de diferente para se destacar dos demais.
Aqui você começa a montar um moodboard com inspirações visuais para o seu
projeto. Eu gosto de montar o meu moodboard no figma e coletar as minhas
referências no pinterest, dribbble e behance.
A moral de fazer um moodboard é você alimentar o seu cérebro com boas referências
para então criar algo com base nisso tudo. Você não deve copiar as suas referências e
sim analisar pequenos elementos e criar algo novo.
gabrielsilvestri.com.br 53
Passo 05: Esboço inicial no papel
Eu gosto muito de fazer a primeira versão do wireframe das minhas interfaces direto
no papel. Primeiro eu executo todos os passos anteriores, e então para começar a
pensar em possíveis ideias eu faço alguns rabiscos com lápis e papel.
gabrielsilvestri.com.br 54
Passo 06: Arquitetura da informação e flow
Depois de já ter mais ou menos uma ideia crua de como será a interface eu começo a
trabalhar na possível arquitetura de seções e páginas que a interface vai possuir.
Só depois de ter experimentado e reunido várias informações que eu vou de fato pra
frente do Figma e começo a criar a minha interface de baixa fidelidade.
Primeiro eu defino o tamanho da tela e a estrutura de grids e então crio uma versão
em tons de cinza focando somente na estrutura e hierarquia dos elementos da
interface.
Em algumas situações essa etapa não pode ser realizada por falta de tempo ou
recursos do projeto. Durante os meus anos de experiência eu percebi que essa etapa
gabrielsilvestri.com.br 55
faz muita diferença, mas nem sempre é possível.
Eu costumo usar no máximo 2 fontes por interface. Tem pessoas que gostam de usar
mais, outras pessoas gostam de usar somente uma.
Em alguns casos o produto ou serviço em questão já possui uma paleta de cores a ser
utilizada. Mas em outras situações você terá que criar uma do zero.
gabrielsilvestri.com.br 56
Passo 10: Detalhes finais
Nessa etapa eu costumo colocar adornos, sombras, luzes, efeitos e etc. É basicamente
a etapa de ajustar tudo e deixar pixel perfect.
Depois que a interface foi criada e revisada é só criar um protótipo online e navegável
no InVision ou Zepelin para que o desenvolvedor consiga inspecionar cada elemento
da interface e desenvolver ela.
gabrielsilvestri.com.br 57
4 Técnicas para desenvolver sua
criatividade, senso estético e
repertorio visual como UI Designer
Você nunca conseguirá ter mais criatividade se você não alimentar o seu cérebro com
novas referências pelo menos uma vez por dia.
Faça agora: Crie conta no Dribbble e Pinterest e comece a salvar todas as referências
que você achar interessante.
Observar e coletar referências é o pilar número UM pra ser uma pessoa mais criativa.
E essa regra se repete pra qualquer outra área.
Quer aprender a fazer umas rimas sinistras? Escute mais rap underground
gabrielsilvestri.com.br 58
Técnica #2 de criatividade: Coleta e análise
Alguma vez você já foi tomar banho e teve uma ideia genial da qual você hoje em dia
não faz nem ideia mais do que seja?
Talvez você tenha esquecido essa ideia genial porque simplesmente não anotou ela.
Existem certos momentos dos quais você está relaxado e não pensando em nada e de
repente… BOOM. Ideias surgem.
É por isso que você precisa sempre carregar com você um caderninho de anotações
(ou usar o evernote). Anote toda e qualquer ideia que você tiver, por mais idiota ou
impossível que ela seja.
Fazendo isso você vai criar algo que eu chamo de banco de ideias. Esse banco pode
ser acesso à qualquer momento para inspiração ou para simplesmente colocar algo
em prática.
Faça agora: Crie uma conta no evernote e baixe o app no seu celular. Ou coloque um
caderno na sua mochila/bolsa.
Essa técnica consiste em você pegar vários elementos de ideias diferentes e juntar em
uma coisa só. Você vai unir o útil ao agradável e criar algo completamente novo. É tipo
criar um novo Pokemon.
Por mais simples e idiota que seja essa técnica funciona absurdamente bem. As
maiores invenções do mundo foram feitas através de combinações inteligentes, veja
por exemplo o iPhone. É uma mistura de um computador pessoal com palmtop e
celular.
gabrielsilvestri.com.br 59
No contexto de design de interfaces você pode colocar isso em prática observando e
combinando pequenos elementos estéticos, componentes, usabilidade e até mesmo
textos criativos.
Ele também descobriu que após 2 semanas de ter estudado algo você tende a lembrar
somente de:
Então imagine que você apenas observou uma referência de interface no Dribbble e
Behance. As chances são que você só vai lembrar de 30% do que viu.
Se você colocar em prática a técnica de análise ativa em 3 etapas você tende a lembrar
de pelo menos 90% do que você analisou.
gabrielsilvestri.com.br 60
Aqui está o passo-a-passo de como fazer:
Passo 01: Escolha uma interface, tire prints dela e faça uma
observação geral nela e preste atenção nos seguintes elementos:
Passo 02: Faça anotações sobre as principais características e aspectos sobre cada um
dos elementos anteriores.
A ideia é você fazer uma análise do que você achou sobre a interface, é literalmente
você escrever o que você está pensando. Aqui está um exemplo de uma análise que
eu fiz do aplicativo Headspace:
gabrielsilvestri.com.br 61
O objetivo dessas anotações é você entrar em um modo de análise minuciosa e ATIVA,
assim você vai lembrar muito mais da referência estudada
Eu chamo essa etapa de DISSECAR. Você vai pegar os prints que você tirou da
interface e colocá-los no seu software favorito de UI Design, eu uso o figma para isso.
gabrielsilvestri.com.br 62
Essa é outra maneira de transformar a sua análise passiva em ATIVA. Você vai analisar
em detalhes cada espaçamento e organizando dos demais elementos da interface.
Feito isso, agora você deve coletar cada cor utilizada na interface e procurar entender
como funciona a paleta de cores dessa interface. Pra fazer isso basta criar vários
retângulos e usar a ferramenta conta gotas para copiar as cores.
Depois disso vem a minha parte favorita: Copiar elementos que você achou
interessantes. Depois de ter analisado em detalhes cada elemento e parte da interface
você provavelmente deve ter achado algum componente, botão ou formulário no
mínimo interessante.
Mas por que cargas d’gua isso vai fazer você ser mais criativo?
Sua criatividade é como um músculo. O quão mais você exercitar mais o músculo
cresce e fica forte, ou seja, o quão mais forte o seu músculo da criatividade é, mais
fácil fica pra você gerar novas ideias e pensar em soluções inovadoras.
O seu músculo da criatividade tende a crescer mais quando você EXECUTA tarefas e
análises ativas. Se você seguir exercitando o seu músculo da criatividade e alimentar
seu cérebro com novas referências todos os dias você irá notar uma grande diferença
no longo prazo.
gabrielsilvestri.com.br 63
Bônus: O que é e como funciona
Design Thinking
É um processo iterativo de criação que faz com que você busque entender o usuário
e quais são os seus desafios e problemas para então identificar estratégias e soluções
alternativas das quais podem não aparecer em um nível mais raso de entendimento.
Funciona muito bem em problemas que não estão definidos muito bem ou para re-
pensar no problema de uma maneira mais centrada no ser humano assim criando
várias ideias e soluções através de sessões de brainstorm, prototipação, teste e
entrevista.
• Definir: O que o seu usuário precisa, qual seu problema e quais são as suas ideias.
É importante saber que esses 5 passos nem sempre são necessariamente uma
sequência. Eles não precisam seguir nenhuma ordem exata, as vezes eles acontecem
em paralelo e repetem iterativamente.
gabrielsilvestri.com.br 64
Design thinking é a intenção de melhorar algo através da análise e entendimento de
como o usuário interage e investir as condições nas quais ele faz. Também existe o
interesse e habilidade de perguntar as perguntas certa e desafiar qualquer premissa.
Além disso oferece meios de cavar mais a fundo no problema e criar maneiras
inovadoras de resolver um problema, tudo isso focando em usuários e tendo muita
empatia.
O próprio Tim Brown CEO da IDEO mostra no seu livro Change by Design que o Design
Thinking é fortemente baseado em gerar um entendimento holístico e empático sobre
o problema que uma pessoa possivelmente enfrenta. E isso envolve conceitos como
emoções, necessidades, motivações e comportamentos.
Ele conclui e diz que Design Thinking é essencialmente uma maneira de solucionar
problemas que combina uma perspectiva holística centrada no usuário com análise
racional e analítica de pesquisa com o objetivo de criar soluções inovativas.
gabrielsilvestri.com.br 65
O seu próximo passo...
Eu compartilhei com você nesse eBook os assuntos que eu considero os mais básicos
para você começar de uma vez por todas nesse mundo do Design de interfaces. Mas e
agora o que fazer? Entre em ação e comece a criar interfaces agora mesmo.
Eu criei esse checklist para todos que estão começando nessa área e se sentem
travados ou sem ideias ao começar a construir uma interface.
Você não precisa de nenhum conhecimento avançado para colocar esse checklist de
12 passos para funcionar. E o preço também não será nenhum obstáculo para você
nesse momento.
gabrielsilvestri.com.br 66
Gabriel Silvestri
gabrielsilvestri.com.br 67