Conceitos do Design e a Profissão UX/UI
23
Explore Mais
•Para saber mais sobre Design, veja o vídeo do canal DesignVerso,
que traz várias definições de autores consagrados no campo do
design. Acesse aqui:
https://www.youtube.com/watch?v=3LnXgbXVg7V
•Aqui você pode ver a definição do designer Daniel Furtado, sobre
Design de Interação, no vídeo O que é Design de Interação?, e
aproveitar para seguir o canal UXNOW. Acesse aqui:
https://www.youtube.com/watch?v=7TVP7oxjl1 U&t=191 s
•Para saber mais sobre Don Norman, sua famosa teoria dos piores
tipos de portas, e a relação entre experiência do usuário e nosso
dia a dia, assista ao vídeo aqui: https://www.youtube.com/watch?
v=nenRM2M30q0 . Ficou curioso com as Portas de Norman? Que
tal ler seu livro "O Design do Dia a Dia" e encontrar outros
exemplos como esses presentes em nosso cotidiano?
•Para você entender mais sobre a profissão UX/UI Designer, este
artigo .. Preciso De Background Em Design Para Migrar Para
UX?" aborda sobre a migração de profissionais de outras áreas
para o Design de Interação e no que isso agrega no dia a dia de
trabalho. Disponível em https://aelaschool.com/carreira/preciso­
de-background-para-migrar/. Acesso em 06/03/2023.
O Mercado de trabalho
•Existe um estudo realizado por Jakob Nielsen, do NN/Group,
mostrando o crescimento e a evolução da área de UX, e
também trazendo um panorama de como essa profissão
provavelmente chegará em 2050, com base nos dados
coletados. O vídeo, UX 2050, está em inglês, mas você pode
ativar a tradução da página em seu navegador, e ativar as
legendas em português no vídeo! Disponível em https://
www.nngroup.com/videos/ux-2050-keynote/. Acesso em
06/03/2023.
•Comentamos que a profissão Designer não é regulamentada.,
Ddê uma olhada nessa análise, "Regulamentação ou
Valorização: o que querem os designers? Uma abordagem
atualizada sobre a regulamentação da profissão de Designer",
feita pelo lslard Rocha, do site Design Culture, sobre o assunto!
Nele você encontrará todo histórico desse processo e pontos
positivos e negativos para análise e reflexão. Disponível em
https://d esign cu ltur e .com. b r/ regulam entacao-ou-va lo riza ca o­
o-que-querem-os-designers-uma-abordagem-atualizada-sobre­
a-regulamentacao-da-profissao-de-designer/. Acesso em
Acesso em 07/03/2023.
 Design Thinking Análise e Síntese: Como e o Porque fazer
18

O importante é redistribuir esses post its (os cartões) de acordo com

os espaços do diagrama, seguindo os critérios preestabelecidos e
que são relevantes ao projeto, para que pontos importantes sejam
identificados.

Agora que já explicamos sobre o diagrama de afinidades, vamos

falar sobre outra ferramenta muito utilizada nessa etapa: Personas.
� TICem
..... �-�·
trilhas Alicerces de uma Interface Estratégia e Escopo
07

Além disso, é importante considerar também uma arquitetura Netflix Perfis Seleciona Perfil

adaptável que possa acomodar possíveis mudanças e crescimento, j,

uma vez que produtos e sistemas são "organismos vivos", isto é, Home

mudam constantemente. ___ ___A _ _

{ )
Busca por conteúdo
Nessa etapa, os entregáveis são os diagramas que representam a específico

Arquitetura da Informação o Fluxo do Usuário ou o Mapa do Site t

Digita título ou

(Site Map). palavra-chave

Assiste trailer
Adiciona à
"Minha lista"
Navega por
Categorias
Navega por
Gênero
Acessa
Novidades Downloads
i
Navega por
No exemplo da Netflix, esta etapa é quando aquelas features e os resultados

conteúdos são distribuídos na navegação, ou seja, quando se define

qual o caminho que o usuário percorre para acessar as
funcionalidades e conteúdos que ele deseja acessar. Assiste
filme/série
Adiciona à
"Minha lista"

Neste caso, estas são algumas questões que tiveram que ser Figura 02. Simulação do Fluxo do aplicativo da Netflix para iOS.
respondidas no plano da Estrutura: Como o usuário acessa ou
encontra um determinado conteúdo? As séries e filmes ficam juntos
Vemos que o usuário entra no aplicativo e seleciona, primeiramente,
ou separados por categorias? Como os usuários identificam os
seu perfil. A partir daí, ele basicamente tem dois caminhos: navegar
gêneros dos filmes (terror, romance, suspense)? pela Home (tela de Início), onde ele acessa os conteúdos por
categorias ou gêneros, além de ver novidades e fazer downloads.
Observando o aplicativo móvel da Netflix para iOS, por exemplo,
podemos simular aqui como seria o fluxo do usuário neste caso.
O segundo caminho é buscar por um conteúdo específico,
realizando a busca por título ou qualquer palavra-chave.

Veja como ficou o Fluxo do Usuário do público-alvo primário, os
jovens da Geração Z:
Arquitetura da Informação: Estrutura
27
É importante relembrar que o Mapa do Site e o Fluxo do Usuário são
etapas fundamentais no processo de design de um produto ou
serviço. Eles ajudam a garantir que as necessidades e expectativas
dos usuários sejam atendidas, oferecendo uma experiência de uso
eficiente e satisfatória.
Agora que você já aprendeu sobre Mapa do site e Fluxo do usuário,
é importante dizer que também existem outras ferramentas usadas
no processo de Arquitetura de Informação. Que tal fazer uma uma
breve pesquisa e contar no fórum as outras ferramentas que
encontrou!
 Esqueleto de uma interface Boas práticas do Design de Interação
12

6.Reconhecer ao invés de lembrar

O ser humano tem uma memória de curto prazo bem limitada. Por
isso, o usuário não deve ter que se lembrar de informações ao
navegar de uma parte da interface para outra.

As informações necessárias para usar o produto (por exemplo,

rótulos de um determinado campo ou itens de menu) devem estar Comprua9or■

visíveis e permitirem que o usuário volte no fluxo sem esforços.

Compare a barra inferior de duas redes sociais: lnstagram (à r bCurhr O Como<ilU P Compartllh3r

esquerda) com a do Facebook (à direita), por exemplo. Q Radio Costa Verde tJ

U1d•I..�
#co�tn�r•dcon -,,:i

Você verá que no lnstagram não há etiquetas identificando os

pictogramas, enquanto no Facebook as funcionalidades vêm
identificadas pictogramas acompanhados de etiquetas (lables),
mostrando assim que a rede social Facebook está alinhada com o
que recomenda esta heurística. Figura 7a e 7b. Exemplos relacionados com a Heurística 6 -Reconhecer ao invés de lembrar.

Fonte da imagem: Aplicativos iOS lnstagram e Facebook.


Introdução aos conceitos
do Design Visual
Já sabemos que o designer, quando finalmente atinge o Plano
Superfície de Garrett, tem que lidar com os aspectos sensórios do
produto, ou seja, suas definições estéticas. Deverá então cuidar da
diagramação das telas, isto é, da disposição dos elementos como
imagens, cores, textos, incluindo a escolha de fontes tipográficas e
demais elementos visuais da composição, seguindo uma série de
princípios ou fundamentos.
Por isso, o designer de interface tem que ter uma base de
conhecimento sólida no que chamamos de "design visual".
A maioria das pessoas faz composições visuais o tempo todo,
quando escolhe a roupa que vai vestir e combina - ou não - a blusa
com a bermuda, ou quando faz uma apresentação de powerpoint
ou um post de rede social, dispondo as imagens e os textos,
selecionando as cores e a tipografia.
Isso é chamado pela Donis A. Dondis, autora do livroSintaxe da
linguagem visual, de ·alfabetismo visual'.
Fundamentos da UI Fundamentos do Design Visual
03
Para ela, ser alfabetizado visualmente não quer dizer que você vai
fazer ótimas composições visuais, da mesma maneira que ser
alfabetizado em uma língua não quer dizer que você vai fazer ótimas
poesias! Para isso, você precisa conhecer os elementos e dominar as
técnicas da linguagem visual, estudar e praticar.
Principalmente no contexto atual, no qual as pessoas são muito
estimuladas por um excesso de informações visuais, interagindo
com muitas telas conectadas simultaneamente, onde tudo disputa
sua atenção.
Assim, vamos introduzir os elementos e as técnicas do design visual,
começando pelos chamados elementos básicos da composição
visual: o ponto, a linha e a forma, que são a base de todas as figuras.
 Fundamentos da UI Fundamentos do Design Visual
07
O plano
Compare as ilustrações a seguir: a da direita faz parte do aplicativo
Um plano é uma superfície contínua, é a linha em movimento.
do iFood, e da esquerda pertence à campanha publicitária da marca
Um plano também pode apresentar diferentes atributos: ser sólido
Red Buli.
ou perfurado, opaco ou transparente, com textura ou liso.

��
��

( {
� PORFAVOR
1 7 (
RECICLE.

J ..
..
.•
. .
.. .
... . ,. '
•
'
... . ...,,.
a• � :.
... ◄ • Figura 8a e 8b. Exemplos de ilustrações do app do iFood e da comunicação da Red Bull.
. .. '
,.
Repare que a figura 8a é feita de planos preenchidos por cores
Figura 07. Atributos de um plano. sólidas, homogêneas, sem linhas de contorno. Já a figura 8b tem
linhas de contorno com aspecto de desenho feito à mão e bastante
Pensar nas imagens a partir de planos e linhas é uma atividade de personalidade; o preenchimento de cores tem textura de pintura
decomposição visual que nos ajuda a criá-las e organizá-las em aquarelada e irregular.
famílias, de modo a criar identidades visuais distintas.

Fonte da Imagem à esquerda: Produção autoralI Fonte da Imagem à direita: Aplicativo iFood e Site da Redbull
 Fundamentos da UI Fundamentos do Design Visual
12
Como pode se ver, o assunto "cores" é algo bem complexo e que A ausência de cor, que chamamos de 'negro', é a inexistência da
merece um aprofundamento por parte de quem quer se especializar luz refletida na superfície do objeto, que absorve toda a
no design visual, que é o caso de designers de interface. luminosidade (por isso superfícies pretas esquentam mais).
Lembre-se: o 'negro' é a ausência total de luz, então, se eu vejo um
Recapitulando: a cor natural, que chamamos de branca, é a união de objeto preto, é porque ele não é totalmente 'negro'.
todas as cores visíveis ao olho humano, compostas pelos espectros
de vermelho, laranja, amarelo, verde, azul, anil e violeta (as cores do
arco-íris). Quem descobriu isso foi Isaac Newton, quando ele fez um
feixe de luz do sol incidir em um prisma e viu aquele arco-íris
refletido na superfície.

Figura 13. Quando vemos objetos pretos é porque eles estão refletindo alguma luz.

Figura 12. Prisma de Newton e o feixe de luz.

� TICem
.. �-�·
... trilhas Fundamentos da UI Fundamentos do Design Visual
19

Padrão CMYK (subtrativo)

Já quem trabalha com cores impressas, designers gráficos por

exemplo, usam o sistema CMYK, que funciona pela subtração da luz
refletida, chamado de subtrativo.

Os designers gráficos precisam ter conhecimento sobre impressões

gráficas e mistura de tintas, portanto usam principalmente o sistema
CMYK.

As cores que formam a sigla CMYK, o cyan (ciano) o magenta

(magenta), o yellow (amarelo) e o black correspondem aos pigmentos
(tintas) adicionados no papel pelas nossas impressoras. No CMYK os
valores variam de O a 100% e para se obter uma impressão de
qualidade na cor preta, é necessário usarmos 100% de todos os
Figura 25. Padrão CMYK.
pigmentos.
 Fundamentos da UI Fundamentos do Design Visual
39

Título da página
Já uma relação contrastante ocorre quando combinamos fontes --➔
Fonte: Poum Boum

distintas e elementos nitidamente diferentes entre si. Composições

Tamanho:
35pt
Peso:Regular
Cor: Branco
visualmente interessantes que costumam atrair a atenção têm, em
geral, bastante contraste e esses são enfatizados também com o uso
Título
de tipografias. Essa relação exige maior cuidado e conhecimento Fonte: Catty Purry Subtítulo
Tamanho:
13pt Fonte: Rotunda
sobre o tema por parte dos designers, mas deve ser almejada para Peso:Regular Tamanho: 14pt
Cor: Amarelo Peso:Black
que tenhamos resultados mais ricos. Cor: Branco

Repare na imagem da tela do app Rebel Girls: os títulos da página e

dos cards usam duas tipografias display, chamadas Poum Boum e Botão
Catty Purry. As duas são tipos mais soltos, com linhas curvas, Tab bar
Fonte: Rotunda
Tamanho: 12pt

aspecto manuscrito e desenhado! Já os subtítulos, botões e os textos

Fonte: Rotunda Peso: Regular
Tamanho: 10pt Cor: Branco
Peso:Black
da Tab Bar usam a fonte Rotunda, uma fonte texto bem legível e Cor: Amarelo

neutra, mas variam no uso de caixa alta/baixa.

App: Rehei Girls

Figura 43. Composição contrastante em termos tipográficos no app Rebel Girls para iOS.

Fonte da imagem: Aplicativo iOS Rebel Girls

 Fundamentos da UI Fundamentos do Design Visual
43
Para terminar, algumas dicas:
Agora que já sabemos o que é um grid e como ele organiza os
•O principal elemento do grid são as colunas (que têm relação elementos da diagramação dentro de uma grade pré-definida,
direta com as margens laterais e os espaçamentos entre elas, precisamos conhecer quatro técnicas usadas por designers, citadas
chamado intercolúnio) pela autora Robin Williams no livro Design para quem não é
•O número de colunas de um site varia e sua estrutura pode ter
designer, como fundamentais na construção de layouts.
muitas configurações diferentes. Mas o grid mais comum de sites
é o de 12 colunas, por ser bem flexível e permitir modulações ou
'
agrupamentos de 2, 3, 4 ou 6 colunas! Contraste Repetição
A figura a seguir mostra um exemplo de grid aplicado no design do
Proximidade Alinhamento
site The Fortnightly.

- t:brjfortnigfJÚVIT.ct>O;i.,.n lfle1oim
Contraste
lo-LD tGlnllipdClln

The Qulet. Yet Powerful 1'0lfflCS

Healthcare Revotution
O Contraste é o elemento mais importante da composição visual. É
R IOr/M11l TM GtMn :.rmy
t,om •,•1thin

OJIA

por meio do contraste que é possível criar diferenciação entre coisas

MCO
p ZII
As Stoclls St�f\ólte, \1
Loo� ToCurl' cy
SP

parecidas, de modo que o leitor não faça confusão ou se canse. E

L

..
11(;H
POUlK-!l
� sU l K l l l o
Olvid d Am <lean l.t,,8$. Ovnns W r M.lío.e futunshc F..btic<i Nud.,q

WO'll.0 por meio do contraste que podemos identificar o que é título, ou que
�r... j!f tlf1 F�r,la,rld lnto "'' 1utl
s,a
é subtítulo, texto e demais informações, como neste material que
11ou 11\ \•.· l A f t • U li

. --
lUH

lhe future or G3soUne

&OCAL OJ TOl.tl

você está lendo agora!

fh. 8, ,1 NQ(SO-C.t'ltell,n 11'>02

O designer sempre precisa diferenciar elementos, seja no design de

uma interface ou de uma página de revista.

Figura 46. Estrutura de grid do site The Fortnightly.

Fonte da imagem: Produção autoral de aplicativo fictício.: Site The Fortnightly


Analisando os resultados do teste de primeiro clique,
conseguimos identificar que:
•o termo "Feiras Livres" não é tão comum no dia a dia do
público-alvo, o que gerou certa dificuldade na procura das
feiras de orgânicos nesta seção do menu.
•Na pergunta que esperava que o usuário clicasse no botão
de voltar na interface para alterar os filtros aplicados, foi
clicado no menu "Produtores", o que não era uma ação
grave, mas que gerou certa curiosidade na equipe para
entender se essa ação se repetiria nos demais testes, mas
não se repetiu.
•Também identificamos que apenas o termo "Sobre" não era
suficiente para remeter a informações sobre o projeto,
tendo então que complementar para "Sobre nós" ou "Sobre
o Projeto".
UI Design e Teste com Usuário Teste com Usuário
22
Com base nestes resultados, identificamos pontos de melhoria nos
termos utilizados na interface. Além disso, seguindo sugestões
dadas ao longo do teste de usabilidade, pudemos aprimorar a tela
de 'busca por produtores' para agilizar o processo de encontrá-los,
sem passar obrigatoriamente pelo processo de filtro.
E por meio dos testes que identificamos pontos a corrigir e novas
possibilidades para o produto ou serviço!
Esta é a última fase de uma etapa de desenvolvimento do produto,
ou melhor, de uma versão dele, que estará sempre em constante
melhoria. À medida em que é lançado no mercado e seus usuários
passam a interagir com frequência, novas demandas irão surgir;
aparecem outros produtos concorrentes, o cenário de uso muda e
ocorrem outros eventos que demandam dos designers a habilidade
de sempre rever seus processos e decisões em busca das boas
soluções.
Iniciamos novos ciclos de design, desde a Imersão, para identificar
essas novas demandas até a prototipação o teste das novas features.
E assim permanecemos continuamente evoluindo o design para
atender concretamente às necessidades humanas.