1. TRANSITIONING YOUR
APP TO iOS 7
by ANDREW RUDMANN
@arudmann

2. Easy to misinterpret iOS7 as flat
design. It is most CERTAINLY not.
It is a shift in the way we think about UI
and UX.
Rethink the philosophy of your app.
Hyperfocus it on the task at hand. Drill
into content.

3. THIS IS
NOT
FLAT DESIGN

4. Flat styling is independent of interaction.

5. Depth exists in the concepts of planes.

6. UI exists on flat layers and the gaps
between them are created by motion,
animation, and color.

7. RETHINK THE
PHILOSOPHY OF
YOUR APP

8. Content used to be chunky,
compartmentalized into pieces, and
unfocused

9. Now it’s spread out and hyperfocused
across “drilled in” screens.

10. This occurs everywhere in iOS7.

11. This occurs everywhere in iOS7.

12. HOW WE
INTERPRETED
iOS7

13. DEFERENCE
CLARITY
DEPTH

14. DEFERENCE
The UI helps users understand and
interact with the content, but never
competes with it.

15. Our previous app made heavy use of
chrome and forced a very specific style
on the user.
Photo Editing occurred in this very
defined space that was equal parts
content and equal parts our app.
Our goal was to remove ourselves from
the equation and make the experience
be entirely about you and your photo.

16. The difference is quite stark.

17. The background and experience of the
app adapts to your photo.

18. The photo is ALWAYS in front of the user
and is the focal point of the experience.

19. CLARITY
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate, and a
sharpened focus on functionality
motivates the design.

20. In examining the clarity of our previous
app we noticed a few spots of
confusion that we were sure to tackle
in the iOS7 refresh.
We updated the way our sharing works
to remove any and all points of
confusion for the user.
We continued our current practice of
updating and unifying our
iconography.

21. Avoiding Confusion.

22. Conveying abstract ideas with clarity.

23. Simplify. Repeat.

24. Always improve.

25. DEPTH
Visual layers and realistic motion
impart vitality and heighten users’
delight and understanding.

26. To create depth we focused primarily
on a foreground / background
concept.
The photo exists in a space that is very
sparse and undefined, allowing us to
move very freely within it.
We use animation to show depth as
well. As you advance through the app
the tools move in and out in a way that
simulates depth.

27. QUESTIONS?