design de interfaces mobile
Por onde começar?
por Felipe Perobeli
primeiramente
Oi, eu sou um designer
e darei algumas dicas de como criar interfaces mobile com o intuito
de facilitar a vi...
introdução ao iOS
Conhecendo o device
Oi, eu sou um
iPhone 5 E eu sou um
iPhone 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 ...
layout iOS
Preciso fazer layouts
diferentes para os dois?
Não necessariamente, você pode fazer apenas em 640 x 1136 e
test...
splash screen
O ínicio do aplicativo
A splash screen é uma tela onde vemos uma breve
introdução do app ao abri-lo pela pri...
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 u...
navigation bar
Menu lateral
Em alguns apps ainda é comum encontrar o menu
lateral que pode ser feito da seguinte forma:
Tí...
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...
ícones
Grid system
Para 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.
1024
512
128
80
75
...
Mulheres não se vestem para os homens, mas para outras mulheres.
Embora nós, designers, projetamos para pessoas, outros de...
referências
Sites que te salvam
Não reinvente a roda, use referências para ver como
outros designers resolveram o mesmo pr...
illustrator
Artboards
Com o illustrator você pode criar vários artboards e
fazer uma tela em cada um. Isso ajudará a criar...
illustrator
Redimensionamento
Você pode redimensionar tudo e não perder qualidade,
pois são vetores. A grande vantagem é q...
Obrigado!
Caso tenham alguma dúvida, sugestão ou crítica
enviem um e-mail para fperobeli@gmail.com
facebook.com/felipe.per...
Próximos SlideShares
Carregando em…5
×

Design de interfaces - iOS

984 visualizações

Publicada em

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.

Publicada em: Design
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
984
No SlideShare
0
A partir de incorporações
0
Número de incorporações
11
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design de interfaces - iOS

  1. 1. design de interfaces mobile Por onde começar? por Felipe Perobeli
  2. 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. 3. introdução ao iOS Conhecendo o device Oi, eu sou um iPhone 5 E eu sou um iPhone 4
  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. 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. 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. 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. 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. 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. 10. ícones Grid system Para criar um ícone padrão iOS 7 existe um grid criado pela apple para te auxiliar nessa tarefa.
  11. 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. 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. 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. 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. 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. 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

×