Design para Dispositivos Móveis apostila1

Prévia do material em texto

Ariel da Silva Dias
E-book 1E-book 1
DESIGN PARA 
DISPOSITIVOS 
MÓVEIS
Neste E-Book:
INTRODUÇÃO ����������������������������������������������������������� 3
MOBILE FIRST �����������������������������������������������������������4
Definindo mobile first ���������������������������������������������������������� 6
Design responsivo, adaptativo e mobile first ����������������������13
Criação de protótipos funcionais �������������������������������������������17
Orientation landscape or portait �����������������������������������������22
Material design ������������������������������������������������������������������31
CONSIDERAÇÕES FINAIS ����������������������������������� 33
REFERÊNCIAS BIBLIOGRÁFICAS & 
CONSULTADAS ������������������������������������������������������� 35
2
INTRODUÇÃO
O número de pessoas utilizando dispositivos móveis 
tem aumentado aceleradamente ano após ano� De 
acordo com a GSM Association (2020), existem mais 
de 8,8 bilhões de dispositivos móveis no mundo todo� 
Ainda nessa análise, são mais de 5 bilhões de usuá-
rios únicos de dispositivos móveis� Se analisarmos 
apenas o Brasil, o número de dispositivos móveis é 
de 225 milhões de aparelhos, sendo que, destes, 198 
milhões estão conectados à rede de banda larga, 
segundo a Anatel (2020)�
Mas qual a relação desses números com o desen-
volvimento mobile first? A resposta é simples: com 
o crescimento do número de dispositivos móveis, os 
usuários estão consumindo informação, lendo notí-
cias, interagindo com aplicativos e jogos, na maior 
parte do tempo, pela tela dos dispositivos móveis� 
E é aí que vem o desenvolvimento de interface e 
conteúdo para este tipo de usuário�
Desse modo, você compreenderá o conceito de mo-
bile first, relacionando-o com os conceitos de design 
responsivo e adaptativo� Também conhecerá como 
é feita a criação de protótipos funcionais, bem como 
os desafios encontrados durante o desenvolvimento 
de aplicações mobile�
3
MOBILE FIRST
Não é somente o número de dispositivos que tem 
aumentado consideravelmente no mundo� Outra taxa 
que vem crescendo é o tempo do usuário em fren-
te ao dispositivo móvel� De acordo com estudo da 
WEARE Social (2020), o brasileiro passa em média 9 
horas e 17 minutos consumindo conteúdo da internet 
pelo celular� O país está atrás apenas da Filipinas 
(que gasta 9 horas e 45 minutos) e África do Sul 
(que gasta 9 horas e 22 minutos)� Desse modo, é 
necessário voltarmos o olhar para esse público (que 
também consome conteúdo no computador)� Com 
isso temos o conceito de mobile first�
O mobile first é um conceito de design que visa a 
criar melhores experiências para os usuários, ini-
ciando o processo de desenvolvimento a partir das 
telas pequenas como o celular� Projetar e prototipar 
seus sites para dispositivos móveis primeiro ajuda 
a garantir que a experiência de seus usuários seja 
perfeita em qualquer dispositivo�
Segundo um relatório da Smart Insights (2020), 48% 
dos consumidores usam o dispositivo móvel para 
pesquisar sobre empresas no Google� Outros 33% 
acessam diretamente o site de empresas�
Pense no cotidiano de uma pessoa X: ao acordar, 
ela acessa seus e-mails no celular, abre o navega-
dor web para consultar as principais notícias do dia 
e, em seguida, acessa o site de meteorologia para 
4
saber como ficará o clima durante o dia� Mais tar-
de, um colega comenta sobre um novo restaurante 
que abriu próximo ao trabalho� Então, a pessoa X 
pega o celular e pesquisa sobre esse restaurante, 
obtendo informações de localização, comentários 
dos frequentadores e, em seguida, acessa o site do 
restaurante para conhecer o cardápio�
Além desse exemplo simples, existem muitos outros 
que você pode se lembrar do dia a dia e trazer à 
mente� Agora, considere que você abre a página de 
um restaurante no seu celular e, ao abrir o cardápio, 
o mesmo não aparece completo na tela, a coluna 
de preços não está disponível pois “faltou espaço” 
no visor do seu aparelho� Outra possibilidade (muito 
comum) é o cardápio ter uma animação em flash, 
com uma transição que remete ao “virar a página”� Só 
que o seu smartphone não tem suporte ao flash ou, 
porventura, não tem capacidade de processamento 
suficiente para realizar esta animação�
FIQUE ATENTO
O design para dispositivos móveis é mais limitado� 
Isso ocorre pois você está projetando para uma 
tela menor e só pode caber alguns elementos nela� 
Deste modo, você escolhe apenas o que é mais 
importante – o que seus usuários mais precisam 
– enquanto ignora todo o resto�
A experiência no site não foi agradável, será que no 
restaurante também será? Segundo uma pesquisa 
5
da SocPub (2020), 57% dos usuários afirmam não 
recomendar ou consumir produtos de uma empresa 
com um site mobile mal projetado�
Definindo mobile first
O mobile first não só leva esses momentos móveis 
em consideração, mas os coloca acima de todas as 
outras estratégias� Mais especificamente, mobile first 
é uma abordagem de design e marketing que coloca 
a experiência de navegabilidade móvel do usuário 
como o centro de todo o desenvolvimento�
Embora os usuários não consumam necessariamen-
te todo o conteúdo no celular, isso permite que você 
crie uma experiência com o celular como ponto de 
partida� A partir daí, você pode aprimorar progres-
sivamente para telas maiores� É essencialmente o 
oposto de uma abordagem responsiva, em que você 
começa com o desktop e depois otimiza para disposi-
tivos móveis ou o que é conhecido como degradação 
elegante (graceful degradation)�
Degradação elegante vs aprimoramento 
progressivo
Degradação elegante e aprimoramento progressivo 
(progressive enhancement) são algumas das prin-
cipais palavras da moda de alguns anos atrás que 
ainda podem fornecer muitos insights sobre a noção 
de design da web que prioriza o desenvolvimento 
mobile e por que é algo importante a ser considerado�
6
O conceito de degradação elegante surgiu da ne-
cessidade de se ter um design funcional no maior 
número possível de navegadores e plataformas� 
Designers e desenvolvedores queriam tirar proveito 
das novas tecnologias sem excluir usuários com 
configurações que não tinham suporte� Em outras 
palavras, é como diz o velho ditado: “agrada a gregos 
e troianos”� Nesse conceito, o objetivo é criar e ofere-
cer a melhor experiência possível e, em seguida, levar 
em conta cada degradação e garantir que, apesar de 
quaisquer deficiências, o site permaneceria funcional�
No exemplo citado anteriormente, o do restaurante, 
o fato de não aparecerem os valores dos pratos no 
cardápio não geraria impacto negativo, uma vez que 
o site, apesar da degradação, permanece funcional�
Do conceito de degradação elegante surgiu uma nova 
ideia poderosa: o aprimoramento progressivo� Nesse 
novo conceito, o desenvolvedor e o designer dão o 
melhor de si na plataforma móvel, utilizando todos 
os espaços possíveis da tela e maior poder de pro-
cessamento� Com isso, é fornecido aos usuários 
uma experiência incrível que parece ótima e funciona 
perfeitamente� Conforme a necessidade, o site pode 
ser gradualmente “aprimorado” e até mesmo com-
pletamente repensado para plataformas maiores, 
com menos restrições�
Em termos de design móvel, isso significa que um 
site completo e padrão seria reduzido e gradualmente 
removeria conteúdo e recursos conforme a janela de 
7
visualização se tornasse menor e o sistema mais 
simples (sem suporte a Flash, por exemplo)�
No exemplo do restaurante, podemos desenvolver o 
cardápio sem considerar o uso do flash e animação, 
deixando na página web apenas o nome do prato e 
o valor, atendendo então aos dispositivos móveis�
Ao analisarmos superficialmente, podemos concluir 
que tanto a degradação elegante quanto o aprimora-
mento progressivo parecem equivalentes� Em outras 
palavras, para ambas, pouco importa por onde se 
começa o desenvolvimento, o importante é que se 
desenvolva!
Mas, ao nos aprofundarmos na análise, vamos des-
cobrir que a realidade é um pouco mais complexa�Quando você começa com a plataforma de desktop 
(degradação elegante), tende a querer aproveitar 
tudo o que a plataforma tem a oferecer� Você cons-
trói um produto incrível, que aproveita a tecnologia 
disponível da plataforma� Por outro lado, vai perceber 
que o produto desenvolvido não se adapta bem aos 
dispositivos móveis� A ação é: “corrigir” aquilo que 
não é corretamente apresentado, ou que possui baixo 
desempenho em um dispositivo móvel�
Essa ação pode levar a produtos móveis bastante 
diluídos, o que parece mais uma reflexão tardia do 
que um produto acabado e devidamente polido� Isso 
não acontece com a maioria dos projetos, mas a 
história é provavelmente muito mais comum do que 
podemos acreditar�
8
Agora, vamos analisar o fluxo de trabalho do aprimo-
ramento progressivo� O resultado tende a ser uma 
história diferente� Nesse conceito, começaremos 
com um projeto que é muito enxuto e possui apenas 
aquilo que é essencial� Você pegou toda essa energia 
inicial e a colocou na criação de um produto que te-
nha uma boa aparência e funcione bem, apesar das 
muitas restrições que enfrentou�
Desse modo, você já passou pelo problema de reduzir 
o conteúdo aos seus elementos mais vitais� Agora, 
quando é hora de trazer esse design para o computa-
dor (desktop), em vez de enfrentar a decisão do que 
cortar e como diluir seu produto, você decide como 
torná-lo ainda mais robusto (o inverso do conceito 
anterior)�
Ponto de vista do conceito mobile first
Partindo-se do conceito da degradação elegante, 
todo o conteúdo (texto, imagens, vídeo, áudio, entre 
outros) é servido ao mesmo tempo, o que se su-
põe um desenvolvimento para plataformas maiores, 
como os desktops� A partir disso, as versões móveis 
são contabilizadas para simplesmente se ignorar ou 
remover muito desse conteúdo da página�
O problema, porém, é que o conteúdo já estava car-
regado, independentemente de a plataforma precisar 
dele ou não� Ou seja, estamos servindo mais con-
teúdo do que o necessário na plataforma mobile, a 
qual geralmente está associada às velocidades de 
download mais lentas� Existe algo de errado nisso e 
haverá um impacto negativo na usabilidade�
9
Com um ponto de vista mobile first, começamos 
carregando o essencial absoluto nas plataformas 
mobile� Isso leva a uma experiência mais rápida que 
evita atrasos desnecessários� Os recursos adicionais 
são carregados estritamente conforme a necessida-
de para plataformas que podem lidar bem com eles�
No conceito mobile first, três atributos são essen-
ciais: primeiro o conteúdo, facilidade na navegação 
e simplicidade� Vejamos cada um destes atributos�
O atributo primeiro o conteúdo é a palavra-chave 
quando utilizamos o conceito de mobile first� Você 
precisa fornecer a seus usuários todo o conteúdo 
que eles procuram – somente isso� Qualquer outra 
coisa pode atrapalhar e distrair a experiência dos 
usuários� Isso significa que você precisa dar uma 
olhada em todo o seu conteúdo e apresentá-lo em 
uma hierarquia visual, dependendo de quão impor-
tante é para o seu usuário�
A facilidade na navegação pode ser resumida em: 
condense seus elementos secundários em botões 
de navegação fáceis de alcançar� Um método testa-
do e comprovado de fazer isso é usar um menu de 
hambúrguer (Figura 1)� Os menus de hambúrguer são 
maneiras reconhecíveis de seus usuários obterem 
acesso a elementos secundários� Se o usuário não 
encontrar informações diretamente em sua página, 
é provável que eles utilizem o menu de hambúrguer 
para encontrar o que procuram� Porém, existe um 
ponto negativo: baixo engajamento� O menu de ham-
búrguer diminui a descoberta de conteúdo da página� 
10
Mas, por outro lado, é inviável oferecer todos os links 
de sua página de uma vez�
Figura 1: Menu hambúrguer� Fonte: Print screen da aplica-
ção no sistema operacional Android do site da Microsoft
11
Para sairmos desse duelo de conceitos, existe a na-
vegação combinada� Nesse estilo de navegação, as 
informações que você acredita serem mais impor-
tantes para o usuário ficam em primeiro plano� Por 
outro lado, as demais opções ficam em um menu de 
hambúrguer (Figura 2)�
Figura 2: Menu de hambúrguer e conteúdo importante em 
uma primeira tela� Fonte: Print screen da aplicação no sis-
tema operacional Android do site da Microsoft�
12
Observe na Figura 2 que o conteúdo importante do 
site aparece logo na primeira página (comprar um 
determinado produto, propaganda de outro produto)� 
Agora, se quisermos informações sobre suporte, 
certamente não encontraremos nesta página, então 
vamos recorrer ao menu de hambúrguer, lá nós tere-
mos o link para o suporte (veja na Figura 1)�
Por fim, um bom design móvel é simples� Você nunca 
quer sobrecarregar seus usuários com elementos 
estranhos, como anúncios, pop-ups e outros con-
teúdos que eles não querem ver – ainda mais em 
dispositivos móveis onde existe um limite no espaço 
visual� Desse modo, utilize esse limite de espaço 
visual limitado para incluir apenas as coisas para as 
quais eles estão na página�
Design responsivo, 
adaptativo e mobile first
Agora que você teve o seu primeiro contato com as 
definições em volta do conceito de design mobile 
first, vamos compará-lo com outros dois conceitos 
muito utilizados e que, ora ou outra, causam alguma 
confusão de interpretação e relação: são os concei-
tos de design responsivo e design adaptativo�
Design responsivo
O conceito de web design responsivo foi citado pela 
primeira vez no ano de 2010� Esse termo é usado 
para descrever uma técnica na qual o design de um 
site é ajustado automaticamente com base no ta-
13
manho das telas dos usuários� Graças ao design 
responsivo, os usuários podem navegar facilmente 
em um site, independentemente do dispositivo que 
usam� A execução é simples e aparentemente fun-
cional: o layout do site é modificado com base na 
largura da tela do dispositivo�
No design responsivo, o design, o conteúdo e a in-
terface do usuário do seu site são adaptados para 
que os visitantes possam visitá-lo perfeitamente em 
qualquer dispositivo e navegador� A palavra-chave 
aqui é flexibilidade�
Outra característica do design responsivo é que se 
torna possível ocultar determinados elementos que 
trariam dificuldades na navegação ou que são des-
necessários em dispositivos móveis�
De modo resumido, o design responsivo significa 
que você só precisa de um site� Ou seja, você não 
precisa mais criar duas versões de um site – uma 
para computadores desktop e outra para dispositivos 
móveis� Uma dica para saber se o site foi projetado 
para dispositivos móveis é verificar a primeira letra do 
endereço, se começar com a letra “m” significa que 
foi desenvolvido para dispositivos móveis (exemplos: 
m�facebook�com, m�globo�com, entre outros)�
Design adaptativo
Quando um site apresenta um design responsivo, 
significa que ele se adaptará à largura das telas dos 
usuários, permitindo a máxima versatilidade� Se um 
site for adaptável, ele se adaptará a larguras de tela 
14
de acordo com a especificação de computadores 
desktop, tablets ou smartphones�
Todos os dispositivos têm larguras de navegador de-
finidas, que são amplamente conhecidas e permitem 
que os desenvolvedores criem sites que irão aderir 
a essas especificações�
Em outras palavras, o design adaptável, diferente-
mente do design responsivo, utiliza alguns layouts 
fixos para determinados tamanhos de telas� Em geral, 
são conhecidas seis larguras de tela: 320, 480, 760, 
960, 1200 e 1600 pixels� Logo, ao desenvolver uma 
aplicação web, o desenvolvedor se preocupa com 
estes seis tamanhos, desenvolvendo especificações 
para cada uma dessas larguras�
Por exemplo, se um navegador tiver 380 pixels de 
largura:
 ● No design responsivo o conteúdo apresentado 
ocupará os 380 pixels de largura� O layout e o conte-
údo ocuparão todo o espaço da tela dinamicamente 
ao detectar a largura�
 ● No design adaptativo o conteúdo apresentado 
ocupará 320 pixels de largura, pois não existe uma 
especificaçãode como organizar o conteúdo e o 
layout na tela para a largura de 380 pixels, somente 
para larguras como 320 ou 480�
Então, no design ADAPTATIVO o layout é fixo, ou seja, 
requer que o designer crie até seis interfaces indivi-
duais – ou, em outras palavras, o equivalente a seis 
15
versões de uma única página da web, enquanto no 
design RESPONSIVO o design é flexível pois se move 
dinamicamente�
Mobile first
Até aqui vimos o conceito de design responsivo e 
adaptativo� Mas onde entra o conceito de mobile 
first? Aqui temos uma resposta que fará muita dife-
rença no seu dia a dia como desenvolvedor: ao criar 
seu site, ou recriá-lo, você não precisa escolher entre 
um design mobile first ou responsivo� Isso ocorre pois 
o primeiro é na verdade uma estratégia de design 
(mobile first), enquanto o último é o resultado de uma 
abordagem técnica (responsivo)�
Considere uma empresa que desenvolveu o seu site 
se baseando no pressuposto de que os visitantes o 
navegarão em um computador desktop� Em segui-
da, o site é modificado para se adaptar a diferentes 
dispositivos, incluindo smartphones e tablets� Esse 
é o conceito que você já leu aqui, nós o chamamos 
de degradação elegante e, agora, terá o nome de 
desktop first�
Lembra-se do conceito de aprimoramento progressi-
vo? É quando os designers inicialmente projetam um 
site para os menores dispositivos móveis possíveis 
e, em seguida, aumentam a escala para se adaptar 
aos computadores desktop� Agora, chamaremos 
esse conceito de mobile first�
Desse modo, podemos utilizar o design responsivo 
quando desenvolvermos utilizando o conceito de 
16
mobile first� Mas não nos limitaremos somente a 
isso� O conceito de mobile first, além de considerar 
o design responsivo (talvez também o adaptativo), 
levará em consideração também que tipo de conte-
údo vai fornecer ao usuário�
SAIBA MAIS
Uma dica importante se você está de olho no trá-
fego de seu aplicativo web: o algoritmo do Google 
favorece sites compatíveis com dispositivos mó-
veis� Para saber mais, inclusive se seu aplicativo 
web é compatível com dispositivos móveis, acesse 
o site oficial de desenvolvedores web da Google�
A abordagem mobile first leva a um design que é 
mais focado no conteúdo e, portanto, no usuário� O 
coração do site é o conteúdo – é para isso que os 
usuários existem�
Criação de protótipos funcionais
Chegamos então na parte da criação e protótipos, 
pensando sempre no conceito mobile first� Afinal, se o 
seu site é bom em um dispositivo móvel, ele se traduz 
melhor para todos os dispositivos� Recordando que 
a abordagem mobile first também é uma abordagem 
content first (conteúdo primeiro)� Os dispositivos 
móveis têm mais limitações, tamanho de tela e lar-
gura de banda são algumas delas� Portanto, o design 
dentro desses parâmetros força você a priorizar o 
conteúdo�
17
https://search.google.com/test/mobile-friendly
Wireframe
Assim como um projeto arquitetônico, um wireframe 
é um esboço da estrutura de uma página ou aplica-
tivo web� Os wireframes fornecem uma visão geral 
da estrutura da página, layout, arquitetura de infor-
mações e funcionalidades, permite acompanhar o 
fluxo do usuário pela página e os comportamentos 
pretendidos�
O wireframe (Figura 3) representa, na maioria das ve-
zes, o conceito inicial do produto� Nele, o estilo, a cor 
e os gráficos são reduzidos ao mínimo� Wireframes 
podem ser desenhados à mão ou criados digitalmen-
te, dependendo de quantos detalhes são necessários�
Figura 3: Fonte: Wireframe.
18
https://media.istockphoto.com/photos/designing-interface-for-mobile-digital-experience-desk-with-and-picture-id681993624
Existem três principais motivos para utilizarmos wi-
reframe quando o objetivo é desenvolver seguindo 
o conceito mobile first, são eles:
 ● Motivo 1 – Os wireframes mantêm o conceito 
focado no usuário: lembra quando foi dito anterior-
mente que uma das características do mobile first é 
o foco no usuário? O wireframe é a maneira perfeita 
para os designers avaliarem como o usuário inte-
rage com a interface� Por exemplo: ao desenvolver 
uma página web, o designer pode deixar espaços 
em branco com um enorme X ou usar dispositivos 
como o Lorem Ipsum (texto pseudo-latino que atua 
como um espaço reservado para conteúdo futuro)� 
Desse modo, o designer pode perguntar aos usuários 
envolvidos no teste: “o que você espera que esteja 
escrito aqui?”� Esses insights ajudam o designer a 
entender o que é intuitivo para o usuário, permitindo 
criar produtos fáceis de usar�
 ● Motivo 2 – Os wireframes esclarecem e definem 
os recursos do site: o wireframe permite que todos 
os interessados (chamados stakeholders) avaliem 
quanto espaço precisará ser alocado para que cada 
recurso na página web conecte a arquitetura de in-
formações do site ao seu design visual e esclareça 
a funcionalidade da página� Ver os recursos em um 
wireframe também permitirá que você visualize como 
todos eles funcionam juntos� Isso é muito bom, pois 
em alguns casos somente quando os recursos es-
tão juntos é possível perceber se a funcionalidade 
está de acordo com o esperado ou se é necessário 
remover determinado recurso�
19
 ● Motivo 3 – Wireframes são rápidos e baratos: o 
wireframe pode sair de graça, basta que você tenha 
um papel e uma caneta! Desse modo, é possível es-
boçar um wireframe sem gastar nenhum centavo� 
Porém, nada impede que você utilize ferramentas di-
gitais que existem em abundância na internet� Quanto 
mais cedo no projeto você construir seu wireframe, 
melhor será o resultado� Isso pois, ao expor o próprio 
núcleo do layout da página, as falhas e os pontos 
problemáticos podem ser facilmente identificados e 
retificados sem qualquer gasto significativo de tempo 
ou dinheiro�
Existem três principais tipos de wireframes:
 ● Baixa fidelidade: são wireframes que omitem qual-
quer detalhe que possa gerar distração ao usuário 
durante o teste� Geralmente é criado de modo ru-
dimentar, sem qualquer senso de escala, grade ou 
precisão (Figura 4a)� Servem então como ponto de 
partida de um projeto, para mapear a navegação e 
o fluxo do usuário pela página�
 ● Média fidelidade: são wireframes que possuem um 
pouco mais de detalhes, porém seu objetivo também 
é diminuir as distrações� Geralmente são criados 
utilizando-se ferramentas digitais (Figura 4b) e, di-
ferentemente dos wireframes de baixa fidelidade, 
apresenta recursos que são claramente separados 
uns dos outros, já se considerando algum tipo de 
escala e marcações�
 ● Alta fidelidade: se o wireframe de baixa fidelidade 
não apresenta imagens e textos reais, este já insere 
20
o conteúdo real esperado (conteúdo relevante)� Os 
wireframes de alta fidelidade são ideais para expres-
sar e documentar conceitos mais complexos como 
menus ou mapas interativos (Figura 4c)� Por assim 
ser, são utilizados nas fases finais do projeto de de-
senvolvimento de uma aplicação
Figura 4: Exemplos de wireframe� Fonte: Elaboração própria�
A Figura 4 apresenta três exemplos dos tipos de wire-
frames possíveis� Observe que o wireframe de baixa 
fidelidade é mais rudimentar, porém nos possibilita 
ter uma ideia da versão final do componente, o qual 
foi detalhado com maior fidelidade na Figura 4c�
REFLITA
Após criar o wireframe do seu aplicativo web, qual 
o seu próximo passo? O próximo passo será a con-
tratação de um designer profissional, que trans-
formará seu wireframe em um design que possua 
usabilidade de acordo com as necessidades que 
atendem o seu público alvo�
21
Orientation landscape or portait
O acelerômetro embutido nos dispositivos móveis, 
além de outras funcionalidades, é usado para alinhar 
a tela dependendo da orientação do dispositivo, ou 
seja, ao alternar entre os modos retrato (portrait) e 
paisagem (landscape)� Esse recurso oferece grandes 
oportunidades para se criar melhores experiências 
de usuário, pois oferece um layout adicional com 
um simples giro de um dispositivo e sem pressionar 
nenhum botão�
No entanto, projetar ainterface da aplicação web de 
acordo com a orientação do dispositivo traz vários 
desafios e requer pensamento cuidadoso� A experi-
ência deve ser a mais discreta e transparente o pos-
sível, e devemos entender o contexto de uso dessa 
funcionalidade�
O aplicativo móvel do YouTube (Figura 5) é um ótimo 
exemplo de design de orientação de dispositivo� O 
modo retrato oferece uma interface rica em recursos 
para descoberta de vídeo e a conta do usuário� O 
modo paisagem oferece uma experiência envolvente 
com um player de vídeo em tela inteira e controles 
de reprodução� Quando o vídeo termina, a tela volta 
ao modo retrato, solicitando aos usuários que incli-
nem rapidamente o dispositivo para trás e procurem 
vídeos adicionais�
22
Figura 5: Exemplo de orientação do YouTube� Fonte: Print 
screen da aplicação YouTube no sistema operacional 
Android� Disponível em: Youtube.
Observe na Figura 5 que, ao modificar a orientação do 
celular, a aplicação identificou e modificou a visuali-
zação para o usuário� Desse modo, torna-se intuitivo 
para o usuário que, caso ele queira visualizar o vídeo 
em modo de tela inteira, basta girar a tela do celular, 
sem precisar pressionar nenhum botão�
A orientação é reconhecida pelas versões mais recen-
tes da maioria dos navegadores móveis, incluindo: 
Opera, Safari, Firefox, Dolphin e o navegador Android 
nativo� Veja que é uma cobertura móvel muito ampla� 
O código da Figura 6 é um CSS que você precisará 
para iniciar as consultas de mídia de orientação�
23
https://www.youtube.com/watch?v=9SnMsS5_NOY
Figura 6: Exemplo de código CSS� Fonte: Autor, 2020�
Observe na Figura 6 que, de acordo com a orientação 
(se portrait ou landscape), um conjunto diferente de 
classes será executado�
Navegação
A rolagem vertical parece ser natural no modo retra-
to, mas não é tão natural no modo paisagem� Você 
pode querer considerar o uso de um layout de con-
teúdo vertical, adicionando um controle deslizante 
de conteúdo ou implementando a funcionalidade de 
rolagem automática� Veja o exemplo de um site de 
notícias na Figura 7�
24
Figura 7: Exemplo de navegabilidade� Fonte: Print screen da 
aplicação no sistema operacional Android do site da CNN� 
Disponível em: CNN online�
Ao modificar-se a orientação em um celular, a na-
vegabilidade se modificou� Se na orientação retrato 
tínhamos uma notícia embaixo da outra, ao modifi-
carmos a orientação para paisagem, para essa re-
solução de tela de celular (640 x 360 pixels), temos 
duas notícias uma ao lado da outra� Mas não será 
sempre assim� Veja na Figura 8 um exemplo de con-
figuração do layout do mesmo site, porém agora para 
um tablet com resolução de 1024 x 768 pixels no 
modo paisagem�
25
https://edition.cnn.com/
Figura 8: Exemplo de navegabilidade Fonte: Print screen da 
aplicação no sistema operacional Android do site da CNN� 
Disponível� em: CNN online�
Observe pela Figura 8 que, nessa nova resolução, a 
disposição dos elementos do layout se modificou 
mais uma vez� Compare com a disposição dos ele-
mentos na Figura 7 (considerando a orientação pai-
sagem)� Temos mais elementos na tela� Se na Figura 
7 tínhamos 2 colunas, agora, na Figura 8, temos 3 
colunas�
Pelas Figuras 7 e 8 nós temos mais uma caracterís-
tica: a fluidez� A interface do site de notícias sim-
plesmente se ajusta ao tamanho da nova orientação, 
permitindo uma melhor experiência ao usuário�
Outra característica que podemos notar ao compa-
rarmos as Figuras 7 e 8 é o design estendido� Essa 
interface se ajusta ao tamanho da tela, adicionando 
26
 https://edition.cnn.com/
ou subtraindo componentes de layout de acordo com 
as dimensões da orientação escolhida� Por exemplo, 
na Figura 8, que é um tablet e possui tela mais ampla 
no modo paisagem, são adicionados mais recursos� 
Observe o quadrado vermelho do conteúdo novo, 
algo que não havia anteriormente na Figura 7� Outro 
recurso adicionado na Figura 8 é a barra de menu� 
Até então, em resoluções menores, era apresentado 
apenas o menu em hambúrguer (que permanece fixo 
na tela, mesmo após realizar a rolagem)� Na Figura 
8, a barra de menu traz o que é considerado de mais 
importante e também um menu de hambúrguer�
Você pode querer repensar o layout do seu menu para 
ambas as orientações� Os itens do menu são mais 
acessíveis em um layout horizontal quando se trata 
do modo paisagem� O modo de exibição retrato pode 
fornecer um pouco menos de largura de tela, então 
vá em frente e coloque os itens de menu um embai-
xo do outro� Talvez até em duas colunas, desde que 
seus dedos possam apontá-las confortavelmente�
Fornecer elementos visuais e funcionalidade em 
qualquer orientação, em última análise, dá conveni-
ência ao usuário� No entanto, não forçar o usuário a 
segurar o dispositivo de uma determinada maneira é 
crucial, especialmente se a funcionalidade desejada 
não aparecer na orientação padrão�
Para finalizarmos este tópico sobre a navegação, 
outro conceito importante a ser considerado é a po-
sição das mãos� O usuário poderá navegar com um 
27
polegar ou dois polegares, de acordo com a orienta-
ção do dispositivo móvel�
Enquanto segura um dispositivo na posição retrato, 
o visitante provavelmente usará apenas um polegar 
para navegar� A orientação paisagem é mais indica-
da para duas mãos ao mesmo tempo� Você pode 
tirar vantagem dessa orientação adicionando uma 
navegação e funcionalidades que antecipem o po-
sicionamento da mão� Se o seu site funciona como 
um aplicativo da web, uma melhoria muito atraente 
é adicionar o multitoque�
Guiando o usuário
Se você tem certeza de que determinado conteúdo é 
mais agradável na orientação paisagem em relação a 
uma orientação retrato (como um vídeo widescreen), 
você pode indicar ao usuário a posição ideal� Desse 
modo, é aconselhável que você envie ao usuário uma 
mensagem aconselhando-o a girar o dispositivo para 
a posição correta� Pode ser uma vantagem tanto para 
você quanto para o usuário, pois dessa forma ele 
aproveitará ao máximo os recursos desenvolvidos 
por você�
Isso é necessário pois, ao desenvolver uma funcio-
nalidade adicional que depende da orientação, isso 
às vezes pode não ser intuitivo� Sem nenhuma pista 
visual em uma orientação específica, o usuário pode 
perder completamente a funcionalidade adicionada� 
Como exemplo, considere a calculadora de alguns 
smartphones� Em alguns modelos, ao deixar o celular 
na orientação retrato, é apresentada a calculadora 
28
clássica� Por outro lado, se mudarmos a orientação 
para paisagem a calculadora que será apresentada 
é a científica, muito mais completa�
Alguns outros modelos de celulares não indicam 
essa funcionalidade, entretanto, para sanar essa falta 
de informação, versões mais atuais do Android, por 
exemplo, trazem um botão indicativo que sugere ao 
usuário modificar a orientação do smartphone (Figura 
9) para que lhe seja apresentado recursos extras (no 
caso, a calculadora científica)�
Figura 9: Calculadora smartphone� Fonte: Elaboração 
própria�
29
Observe a Figura 9, canto inferior esquerdo� Nela 
temos um símbolo indicando que é possível mudar 
a orientação do celular� Logo, se o usuário mudar a 
orientação, ele verá a calculadora científica�
Aqui cabe uma consideração muito importante: se 
você estiver criando pensando no usuário de dispo-
sitivo móvel, considere os seguintes pontos:
 ● Amplie os pontos de toque – Os dedos são muito 
mais largos do que os cursores do mouse, com pre-
cisão de pixel, e, portanto, precisam de elementos 
maiores para tocar� Dê bastante espaço aos hiper-
links, aumente um pouco os botões e certifique-se 
de que haja espaço suficiente em torno de todos os 
elementos interativos�
 ● Não conte com hovers – Os designers geralmente 
contam com os efeitos de hover e mouseover em 
seu trabalho interativo� Ferramentas como essas 
são úteis para transmitir informações quando um 
usuário passa o mouse sobre um elemento� Se você 
está pensando em compatibilidade com dispositivos 
móveis, não faça isso� Nãohá controle de foco para 
as pontas dos dedos ainda�
 ● Componentes tooltips – Você pode controlar pro-
gramaticamente a exibição de dicas por meio de 
componentes tooltips que fornecem dicas� Quando 
ativadas, as dicas exibem um rótulo de texto identi-
ficando um elemento, como uma descrição de sua 
função�
30
Lembre-se de que, desde o início, os visitantes não 
farão distinção entre um site responsivo, adaptável 
ou que prioriza o celular� O que é importante para os 
visitantes é a capacidade de encontrar rápida e facil-
mente as informações de que precisam – e realizar 
as ações que se propuseram a fazer�
Material design
As diretrizes de material design do Google se tor-
naram a marca registrada de seus sites e serviços 
baseados em aplicativos� Eles são imediatamente 
reconhecidos como afiliados ao Google, um benefício 
para a marca da empresa�
O material design foi criado para oferecer uma expe-
riência de usuário unificada em vários dispositivos, 
plataformas e métodos de entrada� Semelhante à 
maneira como a Apple implementou os princípios 
de design plano como padrão, o Google usou o ma-
terial design para garantir que, independentemente 
de como os usuários acessassem seus produtos, 
eles teriam uma experiência consistente�
O design de material tem três princípios básicos:
 ● Metáfora: nosso design na tela deve ser uma metá-
fora para coisas fora da tela, especialmente caneta e 
papel� Isso significa que os botões na tela devem ser 
semelhantes aos da vida real, os elementos devem 
ter sombras e os fundamentos de luz, superfície e 
movimento devem ser respeitados�
31
 ● Cores e gráficos: no passado, a web foi criada para 
se compartilhar arquivos� Com o passar do tempo, foi 
evoluindo, foram surgindo imagens, fontes e layouts 
mais avançados� Agora, não há mais espaço apenas 
para sites com letras pretas e fundo branco� É hora 
de ousar (com cuidado)� A lição aqui é que o mate-
rial design visa a orientar designers sobre o que faz 
sentido, por exemplo, o uso de cores fortes e títulos 
em destaque, além de criar uma experiência clara e 
organizada�
 ● Movimento: um exemplo desse conceito podemos 
ver no Android� Quando você mantém pressionado 
um ícone, ele abre uma informação indicando que 
está pronto para ser movido� Esse pequeno movi-
mento é uma ótima maneira de se comunicar com 
o usuário� É esse o objetivo do material design: dar 
feedback ao usuário�
32
CONSIDERAÇÕES FINAIS
Neste e-book você teve o primeiro contato com o 
conceito de mobile first� Você ficou sabendo que o 
número de dispositivos móveis no mundo tem au-
mentado muito rapidamente e que, na maioria das 
vezes, as pessoas preferem utilizar o celular para 
consultar a web ao invés do computador� Daí surge 
a importância de começarmos a desenvolver sites 
a partir dos dispositivos móveis�
Antigamente, uma solução usada pelas empresas 
era construir um site para desktop e, posteriormente, 
retirar recursos para que o aplicativo se adequasse 
ao dispositivo móvel� Esse é o conceito de degrada-
ção elegante� Estudamos que não é a melhor opção, 
pois haveria deficiências no site, mesmo ele sendo 
funcional�
Em seguida, comentamos que a técnica de mobile 
first visa a começar a se construir o site implemen-
tando-o para dispositivos móveis e, de modo gradual, 
vamos adicionando recursos� Esse é o conceito do 
aprimoramento progressivo, que faz mais sentido 
quando pensamos em desenvolver primeiro para 
dispositivos móveis�
Você estudou também que a construção de protó-
tipos possibilita concluir se um sistema web é fun-
cional ou não� Em outras palavras, se o site será fun-
cional ou não em um dispositivo móvel� A solução 
é criar wireframes, seja em papel ou em softwares 
33
específicos� Com wireframes, você compreende as 
necessidades do usuário de dispositivos móveis e 
lhe possibilita, no início do projeto, definir o que será 
o seu projeto web e o que não será inserido em seu 
projeto�
34
Referências Bibliográficas 
& Consultadas
CHAFFEY, D� Mobile marketing statistics compilation� 
Smart insights, 01 set� 2020� Disponível em: https://
www.smartinsights.com/mobile-marketing/mobile-
-marketing-analytics/mobile-marketing-statistics/� 
Acesso em: 08 set� 2020�
CHAK, A� Como criar sites persuasivos: clique 
aqui� São Paulo: Pearson Education do Brasil, 2004� 
[Biblioteca Virtual]�
CSS Tutorial� W3Schools� Disponível em: http://www.
w3schools.com/css/default.asp� Acesso em: 16 fev� 
2020�
FLANAGAN, D� JavaScript: o guia definitivo� 6� ed� 
Porto Alegre: Bookman, 2013� [Minha Biblioteca]�
JavaScript Tutorial� W3Schools� Disponível em: http://
w3schools.com/js/default.asp� Acesso em: 16 fev� 
2020
KEMP, S� Digital 2020: 3�8 billion people use social 
media� We are social� Disponível em: https://wea-
resocial.com/blog/2020/01/digital-2020-3-8-billion-
-people-use-social-media� Acesso em: 08 set� 2020�
MACDONALD, M�; DORIA, A� Criação de sites: o ma-
nual que faltava� São Paulo: Digerati Comunicação 
e Tecnologia, 2010�
RUBY, B� The 5 mobile marketing mistakes infogra-
phic� SocPub, 2015� Disponível em: https://www.so-
cpub.com/articles/the-5-mobile-marketing-mistakes-
-infographic-14849� Acesso em: 08 set� 2020�
SILVA, D� Desenvolvimento para dispositivos mó-
veis� São Paulo: Pearson Education do Brasil, 2016� 
[Biblioteca Virtual]�
SIMAS, V� L� et al� Desenvolvimento para dispositi-
vos móveis� v� 2� Porto Alegre: SAGAH, 2019� [Minha 
Biblioteca]�
Te l e f o n i a m ó v e l � A g ê n c i a N a c i o n a l d e 
Telecomunicações – ANATEL, Painéis de dados� 
Disponível em: https://www.anatel.gov.br/paineis/
acessos/telefonia-movel� Acesso em: 08 set� 2020�
TERUEL, E� C� HTML5: guia prático� 2� ed� São Paulo: 
Érica, 2014� [Minha Biblioteca]�
The Mobile Economy Latin America� GSM 
ASSOCIATION� Disponível em: https://www.gsma.
com/mobileeconomy/latam/� Acesso em: 08 set� 
2020�
	Introdução
	Mobile first
	Definindo mobile first
	Design responsivo, adaptativo e mobile first
	Criação de protótipos funcionais
	Orientation landscape or portait
	Material design
	Considerações finais
	Referências Bibliográficas & Consultadas