Design de interfaces - iOS

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

description

Para muita gente que está começando é realmente difícil sair de um universo e entrar em outro. Por isso preparei essa apresentação que auxiliará os primeiros passos (e apenas os primeiros) de quem quer ser um Ui designer.

Transcript of Design de interfaces - iOS

Page 1: Design de interfaces - iOS

design de interfaces mobile

Por onde começar?por Felipe Perobeli

Page 2: Design de interfaces - iOS

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

Page 3: Design de interfaces - iOS

introdução ao iOS

Conhecendo o device

Oi, eu sou umiPhone 5 E eu sou um

iPhone 4

Page 4: Design de interfaces - iOS

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

Page 5: Design de interfaces - iOS

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

Page 6: Design de interfaces - iOS

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!

Page 7: Design de interfaces - iOS

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

Page 8: Design de interfaces - iOS

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

Page 9: Design de interfaces - iOS

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

Page 10: Design de interfaces - iOS

ícones

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

pela apple para te auxiliar nessa tarefa.

Page 11: Design de interfaces - iOS

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

Page 12: Design de interfaces - iOS

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.

Page 13: Design de interfaces - iOS

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

Page 14: Design de interfaces - iOS

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

Page 15: Design de interfaces - iOS

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.

Page 16: Design de interfaces - iOS

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

enviem um e-mail para [email protected]

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