1.
design de interfaces mobile
Por onde começar?
por Felipe Perobeli

2.
primeiramente
Oi, eu sou um designer
e darei algumas dicas de como criar interfaces mobile com o intuito
de facilitar a vida de quem quer ingressar nessa área. Espere por
algo bem “direto ao ponto”.

3.
introdução ao iOS
Conhecendo o device
Oi, eu sou um
iPhone 5 E eu sou um
iPhone 4

4.
1136
128100
Navigation
Bar
Tab Bar
iOS
Dimensões em px
640
960
128100
Navigation
Bar
Tab Bar
640
iPhone e iPod 5 iPhone e iPod 4

5.
layout iOS
Preciso fazer layouts
diferentes para os dois?
Não necessariamente, você pode fazer apenas em 640 x 1136 e
testar na resolução do iPhone 4 para ter certeza que o layout cai
bem em ambas resoluções. Dessa forma você ganhará um bom
tempo e poderá usa-lo em telas mais complexas
(ou jogando video-game).

6.
splash screen
O ínicio do aplicativo
A splash screen é uma tela onde vemos uma breve
introdução do app ao abri-lo pela primeira vez.
Hi!

7.
Título
navigation bar
E o que colocar nela
Geralmente coloca-se o título da tela, um botão de
voltar (caso necessário) e um ícone à direta, caso
necessário também. E não se esqueça de reservar 40px
para a status bar (a barra do relógio).
4088

8.
navigation bar
Menu lateral
Em alguns apps ainda é comum encontrar o menu
lateral que pode ser feito da seguinte forma:
Título
Home
Friends
News
My Name

9.
Tab bar
ícones e tamanhos
A tab bar é útil para substituir o menu lateral quando o
app possui 5 funções ou menos. Mas também pode ser
usada para dar fácil acesso às funções principais do
app.
100
>56
>24

10.
ícones
Grid system
Para criar um ícone padrão iOS 7 existe um grid criado
pela apple para te auxiliar nessa tarefa.

11.
ícones
So many sizes!
Pois é, apesar de ser fácil redimensionar ícones, você
terá de fazê-lo 10 vezes.
1024
512
128
80
75
60
58
29
16120
tamanhos apenas ilustrativos, considere os números na unidade de pixels.

12.
Mulheres não se vestem para os homens, mas para outras mulheres.
Embora nós, designers, projetamos para pessoas, outros designers estão de olho!
Agora: Dicas para o seu layout não passar vergonha e para você não perder tempo.

13.
referências
Sites que te salvam
Não reinvente a roda, use referências para ver como
outros designers resolveram o mesmo problema.
Abaixo, uma lista de sites com ótimos exemplos de
aplicativos mobile:
dribbble.com
pttrns.com inspired-ui.com
cdn.ustwo.com/PPP/
PP3.pdf

14.
illustrator
Artboards
Com o illustrator você pode criar vários artboards e
fazer uma tela em cada um. Isso ajudará a criar um bom
fluxo e a localizar as coisas facilmente.
Existem outros vários softwares bons para criação de interfaces, no
geral, isso depende mais do gosto e da experiência de cada um.
A B C

15.
illustrator
Redimensionamento
Você pode redimensionar tudo e não perder qualidade,
pois são vetores. A grande vantagem é que você
também pode exportar em diversos tamanhos apenas
alterando o ppi.
Referência:
72 ppi - 1x
Então se você quer
exportar algo com
duas vezes o tamanho,
altere para 144. Se
quiser metade do
tamanho, altere para
36.

16.
Obrigado!
Caso tenham alguma dúvida, sugestão ou crítica
enviem um e-mail para fperobeli@gmail.com
facebook.com/felipe.perobeli.1
linkedin.com/in/perobeli