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
![Page 1: Design de interfaces - iOS](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/1.jpg)
design de interfaces mobile
Por onde começar?por Felipe Perobeli
![Page 2: Design de interfaces - iOS](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/3.jpg)
introdução ao iOS
Conhecendo o device
Oi, eu sou umiPhone 5 E eu sou um
iPhone 4
![Page 4: Design de interfaces - iOS](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/10.jpg)
í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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/11.jpg)
í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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022061216/54b3052c4a7959f61c8b45e1/html5/thumbnails/16.jpg)
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