E-Book - Método Boost

V1 - 2024
E-book Digital
Método Boost
Gilberto Prado Júnior

Método Boost Índice
Índice
1. Introdução 03
2. Inspirar 06
Quadro de inspirações funcionais e visuais 08
3. Rascunhar 10
Rascunho de conteúdo 12
Rabiscoframe 13
Wireframe 14
4. Layout 16
Key visual 19
Guia de estilos 20
UI Desktop e UI Mobile 21
5. Repassar 23
Handoff 24
6. Bônus: Escalar 25
Design System 26
designboost.com.br 02
Método Boost Introdução
PArte 1
Introdução
Introdução
Neste e-book eu, Gilberto Prado Júnior, faço uma apresentação do
Método Boost e de como ele pode auxiliar na criação de interfaces.
Mas antes de começar, é preciso que você me conheça melhor!
• D
DE E
O
SI
IO • C
GN • DI
UD
G
T IT
AL • S
Gilberto
Minha Família Prado
Sou CEO da Insany Design, criador do curso UI Boost, pelo qual já

passaram mais de 3 mil pessoas, e me juntei a outros dois grandes
nomes do Design brasileiro, Rafael Coronel, do Pixel Cast, e Leandro
Rezende, do UX Unicórnio, para construir a primeira plataforma de
ensino voltada a Design de Interfaces do Brasil, a Design Boost. Nela,
você encontra diversos conteúdos relacionados a UI Design e Design
System, além de cursos, workshops e outros materiais que podem
embasar seus estudos.
Agora que você já me conhece, vou começar a contar sobre o

processo que utilizo em meu trabalho e como você, que atua na área
de Design ou se interessa por ela, pode aplicar em suas criações.
Antes de iniciar um projeto, eu busco entender bem o briefing e faço

uma imersão no negócio. Essa imersão serve para entender mais
sobre o projeto e o que realmente preciso construir. Em paralelo a
isso, já dou início a algumas anotações e pesquisa por inspirações.
O que tenho percebido é que muitos designers não têm um processo

claro ou metodologia. Como resultado disso, os trabalhos não ficam
tão bons ou, de fato, não conseguem resolver o problema do cliente.
É isso que o Método Boost busca evitar.
Esse e-book vai mostrar parte do trabalho de designer de interface: é

preciso entender o produto, a marca e definir padrões.
Independentemente do projeto, o processo que vou aplicar será o
mesmo. A minha ideia, aqui, é que vocês conheçam um pouco da
minha metodologia para colocar na prática.
Vamos nessa?!
Método Boost Inspirar
PArte 2
Inspirar
Inspirar
Quando somos iniciantes na área e estamos trabalhando em um
projeto, é comum olharmos um pouco de inspirações, testarmos um
pouco, e decidirmos fazer direto a nossa interface. E aí sai um
resultado não tão legal. Quando a gente decide usar um processo
mais estruturado, se dedica a rascunhar, a testar, o resultado vai ser
melhor. Essa é a forma que eu trabalho e que fui treinado a fazer
desde o começo. E é o que recomendo para vocês. Mas antes de
mais nada: cuidado! Inspirar não é copiar. Fique atento a isso.
Para buscar inspiração, comece pesquisando projetos relacionados

ao tema com o qual você vai trabalhar: podem ser games, aplicativos
ou sites. Eu gosto de buscar inspirações em sites que eu gosto de
navegar, que tragam uma boa experiência. E então, depois de coletar
essas inspirações, uma coisa que eu tenho feito é pontuar o que é
interessante em cada uma delas: inspirações para cards, para
banners, etc. A ideia é não ter preguiça, é buscar essas referências
porque, no caso de travar, você pode voltar para elas e se inspirar.
A maior parte do meu trabalho nesse método é feita no Figma. Nele,

você pode organizar essas inspirações de acordo com a
aplicabilidade de cada uma. Por exemplo: pode listar ideias de menu
de determinados sites, recursos de navegação de outros, enfim, tirar
diversos insights para testar no seu projeto. Não quer dizer que
apenas aplicar essas ideias vá funcionar de primeira: é importante
testar. As inspirações, também, não devem ser copiadas: elas
existem para auxiliar a explorar a sua criatividade.
Quadro de inspirações funcionais

e visuais
Exemplo de quadro de referênciais visuais.
Eu costumo dividir as inspirações em dois tipos. As primeiras são as

funcionais, que vão me dar vários insights sobre navegação e
comportamento. Eu gosto de tirar alguns prints, salvar as inspirações
só de banner, só de footer, só de menu, por exemplo. É importante
sentir a navegação, a experiência, e assim vou criando meu quadro
de inspirações.
E também monto meu quadro de inspirações visuais, com referências

de como vou combinar cores, imagens, etc. Nesse quadro, eu posso
sinalizar o que achei interessante, o que eu não gostei. Existe um
processo para buscar inspirações, e isso faz parte do processo
criativo.
As inspirações podem vir do Behance, Dribbble ou qualquer outro site

que contenha imagens de sites e aplicativos.
Para ajudar, vou compartilhar alguns sites para busca de inspiração:
Web:
https://lapa.ninja/
https://www.csswinner.com/
https://godly.website/
https://landings.dev/
https://www.seesaw.website/
https://www.curated.design/
https://www.saasframe.io/saas
Mobile:
https://mobbin.com/browse/ios/apps
E-commerce:
https://ecomm.design/
Dashboards:
https://wrapbootstrap.com/
Método Boost Rascunhar
PArte 3
Rascunhar
Rascunhar
Com as inspirações coletadas e organizadas, podemos começar a
rascunhar a interface na qual vamos trabalhar. Além dos elementos
visuais e funcionais, precisamos pensar na arquitetura do conteúdo,
ou seja, como ele será distribuído na página.
Para buscar inspiração, comece pesquisando projetos relacionados

ao tema com o qual você vai trabalhar: podem ser games, aplicativos
ou sites. Eu gosto de buscar inspirações em sites que eu gosto de
navegar, que tragam uma boa experiência. E então, depois de coletar
essas inspirações, uma coisa que eu tenho feito é pontuar o que é
interessante em cada uma delas: inspirações para cards, para
banners, etc. A ideia é não ter preguiça, é buscar essas referências
porque, no caso de travar, você pode voltar para elas e se inspirar.
A maior parte do meu trabalho nesse método é feita no Figma. Nele,

você pode organizar essas inspirações de acordo com a
aplicabilidade de cada uma. Por exemplo: pode listar ideias de menu
de determinados sites, recursos de navegação de outros, enfim, tirar
diversos insights para testar no seu projeto. Não quer dizer que
apenas aplicar essas ideias vá funcionar de primeira: é importante
testar. As inspirações, também, não devem ser copiadas: elas
existem para auxiliar a explorar a sua criatividade.
Rascunho de conteúdo
No caso de um projeto real em fase inicial, temos uma etapa de
criação de conteúdo. Na Insany, tem uma pessoa responsável por
criar o conteúdo e, quando está com isso pronto, a gente vai para a
etapa de criar o wireframe, para que o cliente tenha a visão de como
vai ficar a interface.
Modelo de copywriting do Starter File.
Designers muitas vezes reclamam que o conteúdo está muito

extenso, e eu sempre ressalto que uma das responsabilidades do
design é fazer a diagramação. Algumas pessoas vêm da área editorial
e já sabem como trabalhar o texto, destacar alguns pontos, colocar
em uma caixa, por exemplo.
Se o cliente aprovou o conteúdo e o wireframe, chegamos a um

ponto avançado do projeto. Se ele quiser alterar depois disso, é
preciso fazer um aditivo.
Rabiscoframe
Com todas essas ideias levantadas, é interessante colocar primeiro o
projeto no papel, antes de partir para o Figma e criar o wireframe. No
papel, você já pode descrever e desenhar a hierarquia de informação:
onde estão o menu, banner, outras imagens, textos, etc.
Rabiscoframe da página, Desafio Design Boost 2023.
Eu uso dois tipos de material para isso. Um deles é uma folha A3. Em
um lado, faço anotações, e do outro vou rabiscando e refinando. Isso
vai facilitar o processo na hora de ir para o wireframe. Uso também
esses cadernos com folhas pontilhadas, porque me ajudam a
desenhar, ligar os pontos, sinalizar. Para cada tela que vou criar eu já
sigo esse método, independentemente se é um aplicativo, um site,
uma landing page. Isso faz parte do meu processo criativo.
Você não precisa saber desenhar para isso: é uma forma de tirar as
ideias da cabeça e colocar no papel, de esquecer um pouco da tela e
extrair o máximo de sua criatividade.
Wireframe
Quando partir para o wireframe que, em geral, é aquilo que você vai
apresentar a quem contratou o projeto, você vai trabalhar a
arquitetura da informação, organizando e estruturando a maneira que
o conteúdo e os elementos visuais serão dispostos ao longo da
página. Ele vai auxiliar no teste de usabilidade.
Wireframe da página, Octogatos.
Existem níveis diferentes de wireframe. Ele pode ser um pouco mais

detalhado, para deixar bem claro para os clientes como a página será
construída. Mas também pode ser mais simples, dependendo do
cenário. Por exemplo, se for apenas para discutir entre o time a
estrutura básica do projeto, definir fluxos de navegação, é melhor
criar um wireframe simplificado.
De toda forma, nesta etapa, são previstos os principais

comportamentos da interface. Aqui, em geral, ainda não há definição
de cores e criação de recursos visuais. Isso virá no próximo passo: o
design.
No wireframe, eu gosto de criar pensando no grid, no texto, na

composição da tipografia, mas isso não pode me bloquear na hora do
design. O grid protege o site para que o conteúdo esteja seguro em
diferentes telas, mas dependendo do projeto, a gente vai utilizar
diferentes opções de grid. Nesse processo, vamos pensar nas
colunas, no espaçamento, etc. O grid mantém os elementos do
projeto alinhados, criando uma boa estética e equilíbrio da interface.
Nesta etapa, é importante usar o máximo que a ferramenta Figma

pode oferecer, como o autolayout. Ele vai criar um padrão de
espaçamentos, por exemplo, que você pode controlar. É uma
ferramenta muito boa e que deixa o projeto mais inteligente. Você já
pode definir o espaçamento, as cores, o banner, a altura.
O lance é não ter preguiça de fazer as coisas. Faça as marcações dos

espaços para imagens em destaque, as secundárias, os textos e
ícones. Eu sou fã de comprar uma família boa de ícones, que você
consegue usar em muitos projetos e manter a consistência. Assim a
gente já passa um nível de profissionalismo que é importante ter no
projeto.
Mesmo na etapa de wireframe, eu já trabalho com um certo nível de

detalhes, porque já vai diminuir muito as idas e vindas. Para isso
busco o máximo de clareza possível de como o projeto vai ser
estruturado.
Assim, a gente valida uma estrutura antes de pensar na parte visual.

É o momento para isso. Porque quando formos para a parte visual, a
estrutura já estará resolvida. Por isso, não pule essa etapa!
Método Boost Layout
PArte 4
Layout
Layout
Na etapa de design, vamos desenvolver o layout do projeto. As
formas e funções serão trabalhadas nos mínimos detalhes e faremos
a construção da identidade visual, com a definição do uso de cores,
composições e padrões. Ao desenvolver o layout, bases teóricas são
utilizadas para estabelecer consistência na comunicação e no
impacto visual. Aqui também são estabelecidas as micro-interações,
se houver.
Website da página, Croct.
Para começar, você precisa conhecer a marca com a qual vai

trabalhar. Com base nela, sugiro sempre usar assets em vetor, como
logo, por exemplo. Vetor é quando a gente consegue manipular
aquele conteúdo, diferente de uma imagem fechada. Além disso,
também é possível exportar o vetor em SVG, e isso dá muita
diferença de peso se comparado a PNG. Quando a gente fala de
peso, fala de performance, por isso a importância de se preocupar
com o assunto.
Depois de ter os assets em vetor, é preciso buscar uma cor primária

que tenha vínculo com a marca, que seja a cor principal do projeto.
Eu gosto de buscar uma versão mais clara e uma mais escura, para
que consiga criar interações. E também costumo criar uma escala de
cinza e mesclar tons primários. Uma forma interessante de mexer na
cor é alterar a saturação e o brilho.
Com isso, você cria uma paleta para que o projeto tenha consistência
visual. Você pode também dar nomes para as cores que serão
utilizadas nos projetos, como por exemplo “primária” e “secundárias”.
É importante ter essa organização porque alguns projetos vão ter
muitas cores, que podem ser aplicadas em diferentes funções.
Depois das cores, é preciso definir a tipografia que faça sentido para
o projeto. Com base nisso, você pode criar os modelos de título,
subtítulo e estilos que serão usados na interface. Além do tamanho
de fontes, é possível criar uma hierarquia com base em cores.
Nesta etapa, criamos novos componentes, utilizamos as imagens que

de fato serão aplicadas. É possível, no Figma, criar uma interação
entre os componentes, como botões, por exemplo. É importante
também conhecer um pouco de programação para deixar o seu
projeto mais completo. Por exemplo: pensar em uma favicon e uma
imagem de compartilhamento.
Key visual
Com todas as definições sobre cores, imagens e tipografia, você
pode criar a key visual do seu projeto: são peças únicas que
carregam a identidade visual da marca e a essência da interface.
Nelas, você pode usar os elementos da marca que já foram definidos
para criar as seções iniciais do site e validar com o contratante.
Assim, testamos e aprovamos a linha visual que será desenvolvida.
Landing page da página, Octogatos.
Guia de estilos
Uma das formas de garantir que seu projeto será repassado da forma
adequada é criando o guia de estilos. Com as peças que compõem a
key visual validadas, você pode começar a criar esse manual. Ele vai
conter as cores, tipografia, banco de imagens, enfim, tudo que será
utilizado como padrão na interface. Esse guia é importante para os
desenvolvedores e para que o projeto não perca a consistência no
decorrer do tempo, se for necessário atualizar, por exemplo.
Modelo de documentação do Starter File.
UI Desktop e UI Mobile
UI, ou User Interface, é a Interface do Usuário, ou seja, a parte visual
e interativa de aplicativos, sites e dispositivos. Para um UI bem feito,
é preciso ir no detalhe. Não é encher a tela de elementos, é saber
como usá-los.
Nesta etapa, é preciso criar um layout para cada dispositivo -

computador e smartphone -, garantindo uma boa experiência
independentemente de como o usuário utilizar a interface. O layout
será elaborado de acordo com o wireframe e o key visual, e é preciso
testar várias possibilidades para chegar ao melhor resultado.
Plataforma Design Boost.
Ao criar a interface, eu busco o impacto de você acessar o site e ter

vontade de dar o scroll. Nesse processo, mais uma vez eu volto para
o papel para rabiscar as formas de navegar pelo conteúdo, as
interações. E também volto para as inspirações que coletei
anteriormente.
O trabalho do designer é ganhar a atenção do usuário através do

visual. Para isso, eu crio um background do zero, por exemplo. Eu não
parto de coisas que estão prontas. Foco muito no processo criativo.
Nem só de telas bonitas vive um designer: a gente tem que saber

projetar muito bem os fluxos. A preocupação não é só com criar telas,
é com a navegabilidade. Criar um protótipo de alta fidelidade vai
facilitar a vida dos desenvolvedores e deixar mais claro aos clientes o
que a gente vai fazer. No Figma, é possível criar as funcionalidades,
adicionar vídeos, imagens e outros componentes, tanto para projetos
para desktop quanto para mobile.
Método Boost Repassar
PArte 5
Repassar
Método Boost Repassar
Handoff
Mas como essa organização e esse guia vão chegar ao time de
desenvolvimento e outras pessoas da empresa? Por meio do handoff:
a documentação criada a partir do guia de estilo do projeto, que vai
prescrever as cores, tipografia, assets visuais e componentes
utilizados. Esse arquivo é preparado para que os desenvolvedores
possam iniciar o front-end e dar sequência ao projeto.
Handoff do projeto da plataforma Design Boost.
Método Boost Bônus: Escalar
PArte 6
Bonus: Escalar
Bônus: Escalar
As informações sobre o projeto precisam chegar de maneira clara
não apenas ao time de desenvolvimento: você precisa levar em conta
que a equipe pode crescer ou mudar, mas o projeto não pode perder
a consistência ao longo do tempo. Além disso, pode ser que aquilo
que começou como uma página única precise de novas abas, que um
aplicativo demande outros serviços. Como o projeto pode escalar
sem que a essência se perca? É isso que o design manager Rafael
Coronel explica a seguir.
Design System
“Como manter as decisões sobre o projeto em um time inteiro e no
decorrer do tempo? É para isso que serve o Design System. É preciso
limitar as decisões e as descrever para que sejam aplicáveis por
todas as pessoas que possam estar envolvidas em um projeto. O
Design System existe para que se tenha consistência na hora de
criar.”
Rafael Coronel
Design Manager @Digix, Creator @Pixelcast
Uma etapa para isso é por meio da documentação, citada

anteriormente. Ela é muito importante porque quando falamos disso,
desse manual de como utilizar cada componente, conseguimos fazer
uma escala de conhecimento.
A partir de uma interface já está criada e componetizada, utilizar esse

sistema acelera muito as decisões e o tempo que leva para que os
produtos cheguem ao mercado. Essa dinâmica é aplicada para tudo:
cores, tipografia, ícones, assets. Serve para acelerar o processo e
manter consistência. Lembre que é preciso não só citar qual é a fonte
de um título ou a cor: cada uma delas precisa ter um objetivo no
projeto.
Componentes do Nitro Design System.
No Design System, temos a parte de foundations, que são a base de

um trabalho; a parte de base components, que são os componentes
mínimos a serem utilizados e servem de base a outros componentes
que são maiores; e os componentes complexos.
Tudo isso serve para que as decisões tomadas não sejam

pulverizadas no projeto. Por exemplo: um designer faz um botão
arredondado e o designer do lado faz um botão quadrado na mesma
interface. São detalhes que mudam o estilo da marca.
Cada forma diz uma coisa, e é preciso ter consistência para que não
ocorra diferença na navegação.
Isso quer dizer que eu não posso criar um botão diferente? Não! É
possível ter vários tipos de botões, desde que sejam utilizados de
forma correta, conforme o objetivo descrito na documentação.
O Design System é um trabalho vivo e não vai limitar a criatividade.

Você usa o guia para manter os padrões, mas pode e deve criar
ramificações e novidades. Às vezes é necessário criar algo que seja
diferente para chamar atenção, mas o usuário precisa entender que
aquilo faz parte do mesmo ecossistema.
Se você não tem uma boa estrutura de Design System e sua empresa
for crescendo, novos designers forem contratados, você vai ter um
enorme problema no futuro. Por isso é preciso entender que Design
System é mais do que seguir padrões e definir estilos: é gestão e
governança.
Método Boost Agradecimentos
Agradecimentos
Obrigado as pessoas que dedicaram tanto tempo e esforço para
garantir que nosso e-book não seja apenas informativo, mas também
inspirador e visualmente bonito. Seus trabalho realmente fizeram
diferença para o sucesso desse e-book.
Essa é Stefani Ceolla

(@stefani_ceolla), ela foi
responsável pela revisão
do conteúdo textual.
Stefani Ceolla
E esse é o Kennedy Barros

(@k3nnedybarros), ele foi
responsável pela diagramação
do e-book.
Kennedy Barros
Método Boost Design Boost
Conheça o Design Boost

Desenvolvemos uma plataforma do zero para entregar o melhor
conteúdo de UI e Design System. Você aprenderá os fundamentos,
participará de workshops mão na massa e terá acesso a recursos
exclusivos como UI KITs, Figma de Landing Pages e Apps Mobile,
checklists e muito mais...
Pagina inicial do Design Boost.
Tenha acesso a muitos recursos como checklists, projetos em Figma,

e-books e muito mais...
Além de aprender com aulas gravadas você terá oportunidade de

participar de lives exclusivas.
Nas lives mensais você poderá interagir com os professores, tirar

dúvidas técnicas ou sobre carreira e se preparar para desafios reais
do mercado.
Método Boost Design Boost
Design Boost é muito mais

que um curso de design!
designboost.com.br

E-Book - Método Boost

Enviado por

Direitos autorais:

Formatos disponíveis

E-Book - Método Boost

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

E-Book - Método Boost

Enviado por

Direitos autorais:

Formatos disponíveis

V1 - 2024

Gilberto Prado Júnior

Quadro de inspirações funcionais e visuais 08

Sou CEO da Insany Design, criador do curso UI Boost, pelo qual já

Agora que você já me conhece, vou começar a contar sobre o

Antes de iniciar um projeto, eu busco entender bem o briefing e faço

O que tenho percebido é que muitos designers não têm um processo

Esse e-book vai mostrar parte do trabalho de designer de interface: é

Para buscar inspiração, comece pesquisando projetos relacionados

A maior parte do meu trabalho nesse método é feita no Figma. Nele,

Quadro de inspirações funcionais

Exemplo de quadro de referênciais visuais.

Eu costumo dividir as inspirações em dois tipos. As primeiras são as

E também monto meu quadro de inspirações visuais, com referências

As inspirações podem vir do Behance, Dribbble ou qualquer outro site

Para ajudar, vou compartilhar alguns sites para busca de inspiração:

Para buscar inspiração, comece pesquisando projetos relacionados

A maior parte do meu trabalho nesse método é feita no Figma. Nele,

Modelo de copywriting do Starter File.

Designers muitas vezes reclamam que o conteúdo está muito

Se o cliente aprovou o conteúdo e o wireframe, chegamos a um

Rabiscoframe da página, Desafio Design Boost 2023.

Wireframe da página, Octogatos.

Existem níveis diferentes de wireframe. Ele pode ser um pouco mais

De toda forma, nesta etapa, são previstos os principais

No wireframe, eu gosto de criar pensando no grid, no texto, na

Nesta etapa, é importante usar o máximo que a ferramenta Figma

O lance é não ter preguiça de fazer as coisas. Faça as marcações dos

Mesmo na etapa de wireframe, eu já trabalho com um certo nível de

Assim, a gente valida uma estrutura antes de pensar na parte visual.

Website da página, Croct.

Para começar, você precisa conhecer a marca com a qual vai

Depois de ter os assets em vetor, é preciso buscar uma cor primária

Nesta etapa, criamos novos componentes, utilizamos as imagens que

Landing page da página, Octogatos.

Modelo de documentação do Starter File.

Nesta etapa, é preciso criar um layout para cada dispositivo -

Plataforma Design Boost.

Ao criar a interface, eu busco o impacto de você acessar o site e ter

O trabalho do designer é ganhar a atenção do usuário através do

Nem só de telas bonitas vive um designer: a gente tem que saber

Handoff do projeto da plataforma Design Boost.

Uma etapa para isso é por meio da documentação, citada

A partir de uma interface já está criada e componetizada, utilizar esse

Componentes do Nitro Design System.

No Design System, temos a parte de foundations, que são a base de

Tudo isso serve para que as decisões tomadas não sejam

O Design System é um trabalho vivo e não vai limitar a criatividade.

Essa é Stefani Ceolla

E esse é o Kennedy Barros

Conheça o Design Boost

Pagina inicial do Design Boost.

Tenha acesso a muitos recursos como checklists, projetos em Figma,

Além de aprender com aulas gravadas você terá oportunidade de

Nas lives mensais você poderá interagir com os professores, tirar

Design Boost é muito mais

Você também pode gostar