design de interfaces mobile

Por onde começar?por Felipe Perobeli

primeiramente

Oi, eu sou um designere 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”.

introdução ao iOS

Conhecendo o device

Oi, eu sou umiPhone 5 E eu sou um

iPhone 4

113

612

810

0

Navigation

Bar

Tab Bar

iOS

Dimensões em px

640

96

012

810

0

Navigation

Bar

Tab Bar

640

iPhone e iPod 5 iPhone e iPod 4

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).

splash screen

O ínicio do aplicativoA splash screen é uma tela onde vemos uma breve

introdução do app ao abri-lo pela primeira vez.

Hi!

Título

navigation bar

E o que colocar nelaGeralmente 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).

408

8

navigation bar

Menu lateralEm alguns apps ainda é comum encontrar o menu

lateral que pode ser feito da seguinte forma:

TítuloHome

Friends

News

My Name

Tab bar

ícones e tamanhosA 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

ícones

Grid systemPara criar um ícone padrão iOS 7 existe um grid criado

pela apple para te auxiliar nessa tarefa.

ícones

So many sizes!Pois é, apesar de ser fácil redimensionar ícones, você

terá de fazê-lo 10 vezes.

1024512

128

80

75

60

58

29

16120

tamanhos apenas ilustrativos, considere os números na unidade de pixels.

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.

referências

Sites que te salvamNã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.comcdn.ustwo.com/PPP/PP3.pdf

illustrator

ArtboardsCom 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

illustrator

RedimensionamentoVocê 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 - 1xEntão se você quer exportar algo com duas vezes o tamanho, altere para 144. Se quiser metade do tamanho, altere para 36.

Obrigado!Caso tenham alguma dúvida, sugestão ou crítica

enviem um e-mail para fperobeli@gmail.com

facebook.com/felipe.perobeli.1linkedin.com/in/perobeli