Um guia prático de como preparar o layout de uma aplicação mobile para um mundo de vários devices e tecnologias aproveitando os assets, minimizando o trabalho e tempo de desenvolvimento.

1. UM GUIA PRÁTICO DE COMO PREPARAR O LAYOUT DE UMA APLICAÇÃO
MOBILE PARA UM MUNDO DE VÁRIOS DEVICES E TECNOLOGIAS
APROVEITANDO OS ASSETS, MINIMIZANDO O TRABALHO E TEMPO DE
DESENVOLVIMENTO.
Responsive Assets:
Flower Power use case

2. HOME GARDEN ASSISTANT

3. most plants will flourish with just a little help,
and you don’”⁹t need any special skills
Growing plants
is easy
when you know how

4. The
Challenge
Aid user on keeping
track of the Plants
needs, complementing
any lack of Knowledge
about Plants daily care

5. Léon: The Professional
Aglaonema plant

6. The problem

7. Scale Factors

8. Adaptive User Interface
According to Apple and iOS 8, use
adaptive user interface (UI).
___
Adaptive UI is meant to help
rationalize a world with
multiple devices, and let
developers use a single
storyboard in Interface builder
to target different aspect ratios,
screen sizes, orientations, and
display densities.

9. Density
dpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi

10. Details

11. Bigger canvas > bigger assets

12. Icons & other assets

13. Alerts

14. Process

15. Vector

16. Slice sheets

17. Content

18. Tools
http://bjango.com/articles/actions/
http://retinize.it/
http://www.paintcodeapp.com/news/ultimate-guide-to-
iphone-resolutions

19. PROS
• Create multiple image assets from a
single shape layer, saving yourself a lot
of time in the future.
• 1@x will be obsolete in the near future
• I’”⁹ts easier to manage layout on a bigger
canvas
• Reuse all assets in future development
CONS
• Assets are stored at 3x in the Photoshop
file
• Bigger file size
• Higher hardware requirements
Downscaling 3@x

20. Obrigada!
www.flowerpowerapp.com