design de interfaces - ios
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
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 [email protected]
facebook.com/felipe.perobeli.1linkedin.com/in/perobeli