SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
TRANSITIONING YOUR
APP TO iOS 7
by ANDREW RUDMANN
@arudmann
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.
THIS IS
NOT
FLAT DESIGN
Flat styling is independent of interaction.
Depth exists in the concepts of planes.
UI exists on flat layers and the gaps
between them are created by motion,
animation, and color.
RETHINK THE
PHILOSOPHY OF
YOUR APP
Content used to be chunky,
compartmentalized into pieces, and
unfocused
Now it’s spread out and hyperfocused
across “drilled in” screens.
This occurs everywhere in iOS7.
This occurs everywhere in iOS7.
HOW WE
INTERPRETED
iOS7
DEFERENCE
CLARITY
DEPTH
DEFERENCE
The UI helps users understand and
interact with the content, but never
competes with it.
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.
The difference is quite stark.
The background and experience of the
app adapts to your photo.
The photo is ALWAYS in front of the user
and is the focal point of the experience.
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.
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.
Avoiding Confusion.
Conveying abstract ideas with clarity.
Simplify. Repeat.
Always improve.
DEPTH
Visual layers and realistic motion
impart vitality and heighten users’
delight and understanding.
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.
QUESTIONS?

Más contenido relacionado

La actualidad más candente

Infinite monkeys how to make your own mobile app
Infinite monkeys   how to make your own mobile appInfinite monkeys   how to make your own mobile app
Infinite monkeys how to make your own mobile app
Jay Shapiro
 

La actualidad más candente (20)

Infinite monkeys how to make your own mobile app
Infinite monkeys   how to make your own mobile appInfinite monkeys   how to make your own mobile app
Infinite monkeys how to make your own mobile app
 
Project Dressup App
Project Dressup AppProject Dressup App
Project Dressup App
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Parking app
Parking appParking app
Parking app
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions
 
Top Qualities of Successful Mobile Apps In Startup Tech Company
Top Qualities of Successful Mobile Apps  In Startup Tech CompanyTop Qualities of Successful Mobile Apps  In Startup Tech Company
Top Qualities of Successful Mobile Apps In Startup Tech Company
 
Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?Web App VS. Hybrid App VS. Native App?
Web App VS. Hybrid App VS. Native App?
 
Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!Hybrid vs Native Mobile App. Decide in 5 minutes!
Hybrid vs Native Mobile App. Decide in 5 minutes!
 
Mobile app design tips
Mobile app design tipsMobile app design tips
Mobile app design tips
 
3 Ways to Simplify your Mobile Apps
3 Ways to Simplify your Mobile Apps3 Ways to Simplify your Mobile Apps
3 Ways to Simplify your Mobile Apps
 
Ios mobile developers
Ios mobile developersIos mobile developers
Ios mobile developers
 
iOS Human Interface Guideline
iOS Human Interface GuidelineiOS Human Interface Guideline
iOS Human Interface Guideline
 
Native vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application DevelopmentNative vs Web vs Hybrid Mobile Application Development
Native vs Web vs Hybrid Mobile Application Development
 
Evaluation tech
Evaluation techEvaluation tech
Evaluation tech
 
Edius 7
Edius 7Edius 7
Edius 7
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Secrets of apps in digital marketing
Secrets of apps in digital marketingSecrets of apps in digital marketing
Secrets of apps in digital marketing
 
Porting Hybrid Apps to Native Apps
Porting Hybrid Apps to Native AppsPorting Hybrid Apps to Native Apps
Porting Hybrid Apps to Native Apps
 
Types of mobile apps
Types of mobile appsTypes of mobile apps
Types of mobile apps
 
Ux Ui Design for Mobile Apps
Ux Ui Design  for  Mobile AppsUx Ui Design  for  Mobile Apps
Ux Ui Design for Mobile Apps
 

Destacado (6)

Ppt pictures & animoto 2
Ppt pictures & animoto 2Ppt pictures & animoto 2
Ppt pictures & animoto 2
 
Where can i find educational videos
Where can i find educational videosWhere can i find educational videos
Where can i find educational videos
 
DR2010:0008:038-061
DR2010:0008:038-061DR2010:0008:038-061
DR2010:0008:038-061
 
Internet safety for parents
Internet safety for parentsInternet safety for parents
Internet safety for parents
 
Beginner training smartboard 010511
Beginner training smartboard 010511Beginner training smartboard 010511
Beginner training smartboard 010511
 
Delicious vs diigo
Delicious vs diigoDelicious vs diigo
Delicious vs diigo
 

Similar a Transitioning Your App for iOS7

Major Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactiveMajor Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactive
Nikki Clark
 
What Brands Need to Know About iOS 7
What Brands Need to Know About iOS 7What Brands Need to Know About iOS 7
What Brands Need to Know About iOS 7
Mutual Mobile
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suck
Frédéric Harper
 

Similar a Transitioning Your App for iOS7 (20)

Designing iOS apps that rock!
Designing iOS apps that rock!Designing iOS apps that rock!
Designing iOS apps that rock!
 
Unboxing iOS 7
Unboxing iOS 7Unboxing iOS 7
Unboxing iOS 7
 
Major Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactiveMajor Work_FunkItUp editor_interactive
Major Work_FunkItUp editor_interactive
 
What Brands Need to Know About iOS 7
What Brands Need to Know About iOS 7What Brands Need to Know About iOS 7
What Brands Need to Know About iOS 7
 
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdfTop iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Beginning iOS UI
Beginning iOS UIBeginning iOS UI
Beginning iOS UI
 
Developing a Unique Wallpaper App for Android with Flutter
Developing a Unique Wallpaper App for Android with FlutterDeveloping a Unique Wallpaper App for Android with Flutter
Developing a Unique Wallpaper App for Android with Flutter
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
Confoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suckConfoo 2012-03-01 - Building mobile experiences that don't suck
Confoo 2012-03-01 - Building mobile experiences that don't suck
 
Android
AndroidAndroid
Android
 
UI/UX: Distinction and Trends
UI/UX: Distinction and TrendsUI/UX: Distinction and Trends
UI/UX: Distinction and Trends
 
UI/UX-Distinction and Trend
UI/UX-Distinction and TrendUI/UX-Distinction and Trend
UI/UX-Distinction and Trend
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Design of the Kontakios iOS app
Design of the Kontakios iOS appDesign of the Kontakios iOS app
Design of the Kontakios iOS app
 
Swift Paris - Dealing The Cards
Swift Paris - Dealing The CardsSwift Paris - Dealing The Cards
Swift Paris - Dealing The Cards
 
Step-by-Step Guide On iOS App Wireframing
Step-by-Step Guide On iOS App WireframingStep-by-Step Guide On iOS App Wireframing
Step-by-Step Guide On iOS App Wireframing
 
iOS HIG
iOS HIGiOS HIG
iOS HIG
 
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfMobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
 
Creating a Facebook Clone - Part I - Transcript.pdf
Creating a Facebook Clone - Part I - Transcript.pdfCreating a Facebook Clone - Part I - Transcript.pdf
Creating a Facebook Clone - Part I - Transcript.pdf
 

Último

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Último (20)

10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 

Transitioning Your App for iOS7