SlideShare a Scribd company logo
1 of 12
UI Best practices in iOS
UI Styles for UI Elements with Designers
The best way to start a new project is to establish styles and components with UI Designers,
which would be the same on both platforms and Design. It means that UI Designer won't add a
new label with a slightly different grey shade into the new screen. All the components he can
use should be from UI Styles. If there is a necessity to add a new component, he will need to
notify the developers, so they will add this component into UI Styles in the project.
Advantages:
• This will save the developer from wasting time on UI details because he will use pre-created
UI Components
• All screens will be consistent. All buttons of one type will have the same corners, press states,
and title colors
• If the designer makes a decision to make a change in one of the components, it can be done
by simply changing a couple of lines in the code in one place
UI Styles example
UI Styles implementation
The best way to implement UI Styles is by creating UI Style Classes for each of
the components, which can then be set in .storyboard or created in code. Try to
avoid changing styles outside those subclasses, including .storyboards and
.xibs.
This approach will help keep all of the styles in one place and provide a quick
change of the same component all over the project.
Reuse UI components only if they are identical
If you have two components that look similar but have slight differences, for
example, text color or additional image, it’s better to create separated
components. This will help to ensure that if you change something in one
component, the same component with a slight difference won't be broken in
another place.
UIView1 UIView2
Don't use Run time attributes in interface builder
Run time attributes advantage is that you can set some properties in interface
builder rather than in code.
The problem with this approach is that if you change the name or the type of a
property you use as the Run time attribute, and you forget to change it in
interface builder, you will never know in a build time that something is wrong.
You will have a crash on a screen you use it.
The best place for UI attributes are Subclasses for UIComponents.
Auto Layout over Frame-based layout
Try to avoid the calculation of the frame in code. Even though Frame-based
layout works faster than Auto Layout, eventually, you will have problems with the
broken layout if you have frame calculation in code. It is a rule for table views as
well. Use UITableView automaticDimension for tableView(_ tableView:
UITableView, heightForRowAt indexPath: IndexPath) method over precalculates
size.
Use UIAppearance
Use UIAppearance for general styles, like brand colours for navigation bar and
UI controls.
UIAppearance allows the appearance of views and controls to be consistently
defined across the entire application.
IBOutlets and IBActions should be private
When you add a new UIView or UIViewController, all @IBActions and
@IBOutlets should be private, so you won't be able to change them from
outside. This approach will reduce the number of unexpected behaviors like
someone changed the style or the text of a Label from outside the view, and you
can't find where or who did it. Also, this approach will reduce build time for the
file in swift.
Use setup() or config() functions with all parameters you need for this UIView.
Avoid magic numbers
Try to avoid direct usage of a number in the code, because after some time you
could forget what this number means. The best solution is to set a private
constant in a class with nice name, which will explain what this constant will be
used for.
Use provided by Apple API only
to change Apple UI components
If you want to customize Apple's UI component, but you don't have API for that, you should create
a custom UI component. It is bad practice to iterate through Apple UI components' subviews to
make a change for one of them. The structure of UI elements provided by Apple can be different in
different iOS versions.
For example, if you have UISlider and you want to add dots to it to indicate exact values, you
shouldn't change UISlider, as Apple doesn't provide API for that. You should create a custom UI
component for that use.
The problem with changing UISlider is that hierarchy of a UISlider can be changed in future iOS
versions, and your component will work unexpectedly.
iOS 13 iOS 14
Don't use private Apple API for UI Changes
This is another way to making changes to Apple UI components without public
API for that. Using Apple private API can lead to rejecting the app from the store.
Also, the private API can be different in different iOS versions, so your
application may crash when a new iOS version is released.
As an example, on iOS 11 and earlier, if was a problem to change placeholder
color for UITextField, so developers used private Api using KVC for that.
setValue UIColor black “_placeholderLabel.textColor"

More Related Content

What's hot

Spa saloon Wordpress Test
Spa saloon Wordpress TestSpa saloon Wordpress Test
Spa saloon Wordpress Test
scubeuser31
 
Multiple Activity and Navigation Primer
Multiple Activity and Navigation PrimerMultiple Activity and Navigation Primer
Multiple Activity and Navigation Primer
Ahsanul Karim
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402
Hideo Kadowaki
 
"Discover windows phone" 05. Application Bar
"Discover windows phone" 05. Application Bar"Discover windows phone" 05. Application Bar
"Discover windows phone" 05. Application Bar
Yasmine Abdelhady
 
Day 3: Getting Active Through Activities
Day 3: Getting Active Through ActivitiesDay 3: Getting Active Through Activities
Day 3: Getting Active Through Activities
Ahsanul Karim
 

What's hot (19)

Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
 
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, TimerMobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
Mobile Programming - 8 Progress Bar, Draggable Music Knob, Timer
 
MDC - Material Design Components & Theming
MDC - Material Design Components & ThemingMDC - Material Design Components & Theming
MDC - Material Design Components & Theming
 
Android App Development 20150611
Android App Development 20150611Android App Development 20150611
Android App Development 20150611
 
Spa saloon Wordpress Test
Spa saloon Wordpress TestSpa saloon Wordpress Test
Spa saloon Wordpress Test
 
Multiple Activity and Navigation Primer
Multiple Activity and Navigation PrimerMultiple Activity and Navigation Primer
Multiple Activity and Navigation Primer
 
Ecommerce Mini Project / Group Project Design
Ecommerce Mini Project / Group Project DesignEcommerce Mini Project / Group Project Design
Ecommerce Mini Project / Group Project Design
 
Android UI Patterns
Android UI PatternsAndroid UI Patterns
Android UI Patterns
 
Awesome Plug-Ins for Sketch App
Awesome Plug-Ins for Sketch AppAwesome Plug-Ins for Sketch App
Awesome Plug-Ins for Sketch App
 
Welcome to android Apps
Welcome to android AppsWelcome to android Apps
Welcome to android Apps
 
Android development session 3 - layout
Android development   session 3 - layoutAndroid development   session 3 - layout
Android development session 3 - layout
 
Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI
 
Android App Development 20150409
Android App Development 20150409Android App Development 20150409
Android App Development 20150409
 
Android App Development 20150402
Android App Development 20150402Android App Development 20150402
Android App Development 20150402
 
Build Better Games with Unity and Microsoft Azure
Build Better Games with Unity and Microsoft AzureBuild Better Games with Unity and Microsoft Azure
Build Better Games with Unity and Microsoft Azure
 
Android app development guide for freshers by ace web academy
Android app development guide for freshers  by ace web academyAndroid app development guide for freshers  by ace web academy
Android app development guide for freshers by ace web academy
 
"Discover windows phone" 05. Application Bar
"Discover windows phone" 05. Application Bar"Discover windows phone" 05. Application Bar
"Discover windows phone" 05. Application Bar
 
How To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface BuilderHow To Build iOS Apps Without interface Builder
How To Build iOS Apps Without interface Builder
 
Day 3: Getting Active Through Activities
Day 3: Getting Active Through ActivitiesDay 3: Getting Active Through Activities
Day 3: Getting Active Through Activities
 

Similar to iOS UI best practices

A Better Interface Builder Experience
A Better Interface Builder ExperienceA Better Interface Builder Experience
A Better Interface Builder Experience
Justin Munger
 
Design submission template
Design submission templateDesign submission template
Design submission template
krudee
 
Android developers use the term layout to mean one of two things. Bo.pdf
Android developers use the term layout to mean one of two things. Bo.pdfAndroid developers use the term layout to mean one of two things. Bo.pdf
Android developers use the term layout to mean one of two things. Bo.pdf
himanshukausik409
 
Mobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdfMobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdf
AbdullahMunir32
 

Similar to iOS UI best practices (20)

How Android Architecture Components can Help You Improve Your App’s Design?
How Android Architecture Components can Help You Improve Your App’s Design?How Android Architecture Components can Help You Improve Your App’s Design?
How Android Architecture Components can Help You Improve Your App’s Design?
 
Casestudy
CasestudyCasestudy
Casestudy
 
Better User Experience with .NET
Better User Experience with .NETBetter User Experience with .NET
Better User Experience with .NET
 
Swift
SwiftSwift
Swift
 
Eclipse Day India 2010 - UI Patterns in Eclipse
Eclipse Day India 2010 - UI Patterns in EclipseEclipse Day India 2010 - UI Patterns in Eclipse
Eclipse Day India 2010 - UI Patterns in Eclipse
 
A Better Interface Builder Experience
A Better Interface Builder ExperienceA Better Interface Builder Experience
A Better Interface Builder Experience
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pdf
 
iOS 7 Transition guide
iOS 7 Transition guideiOS 7 Transition guide
iOS 7 Transition guide
 
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
9 Best Design Patterns in iOS to Develop Powerful iPhone Apps.pptx
 
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
 
Introduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
 
Design submission template
Design submission templateDesign submission template
Design submission template
 
Flutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and PerformanceFlutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and Performance
 
Angular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web ApplicationsAngular Best Practices To Build Clean and Performant Web Applications
Angular Best Practices To Build Clean and Performant Web Applications
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Technical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdfTechnical-design-for-Angular-apps.pdf
Technical-design-for-Angular-apps.pdf
 
Android developers use the term layout to mean one of two things. Bo.pdf
Android developers use the term layout to mean one of two things. Bo.pdfAndroid developers use the term layout to mean one of two things. Bo.pdf
Android developers use the term layout to mean one of two things. Bo.pdf
 
Flutter App Performance Optimization_ Tips and Techniques.pdf
Flutter App Performance Optimization_ Tips and Techniques.pdfFlutter App Performance Optimization_ Tips and Techniques.pdf
Flutter App Performance Optimization_ Tips and Techniques.pdf
 
Mobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdfMobile Application Development -Lecture 07 & 08.pdf
Mobile Application Development -Lecture 07 & 08.pdf
 
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
Unlock the Power of Mui Breakpoints and Make Great Projects.pdfUnlock the Power of Mui Breakpoints and Make Great Projects.pdf
Unlock the Power of Mui Breakpoints and Make Great Projects.pdf
 

Recently uploaded

Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Cara Menggugurkan Kandungan 087776558899
 

Recently uploaded (8)

Mobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsMobile Application Development-Components and Layouts
Mobile Application Development-Components and Layouts
 
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
 
Leading Mobile App Development Companies in India (2).pdf
Leading Mobile App Development Companies in India (2).pdfLeading Mobile App Development Companies in India (2).pdf
Leading Mobile App Development Companies in India (2).pdf
 
FULL ENJOY - 9999218229 Call Girls in {Mahipalpur}| Delhi NCR
FULL ENJOY - 9999218229 Call Girls in {Mahipalpur}| Delhi NCRFULL ENJOY - 9999218229 Call Girls in {Mahipalpur}| Delhi NCR
FULL ENJOY - 9999218229 Call Girls in {Mahipalpur}| Delhi NCR
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & Examples
 
9999266834 Call Girls In Noida Sector 52 (Delhi) Call Girl Service
9999266834 Call Girls In Noida Sector 52 (Delhi) Call Girl Service9999266834 Call Girls In Noida Sector 52 (Delhi) Call Girl Service
9999266834 Call Girls In Noida Sector 52 (Delhi) Call Girl Service
 
Mobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsMobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s Tools
 
Thane 💋 Call Girls 7738631006 💋 Call Girls in Thane Escort service book now. ...
Thane 💋 Call Girls 7738631006 💋 Call Girls in Thane Escort service book now. ...Thane 💋 Call Girls 7738631006 💋 Call Girls in Thane Escort service book now. ...
Thane 💋 Call Girls 7738631006 💋 Call Girls in Thane Escort service book now. ...
 

iOS UI best practices

  • 2. UI Styles for UI Elements with Designers The best way to start a new project is to establish styles and components with UI Designers, which would be the same on both platforms and Design. It means that UI Designer won't add a new label with a slightly different grey shade into the new screen. All the components he can use should be from UI Styles. If there is a necessity to add a new component, he will need to notify the developers, so they will add this component into UI Styles in the project. Advantages: • This will save the developer from wasting time on UI details because he will use pre-created UI Components • All screens will be consistent. All buttons of one type will have the same corners, press states, and title colors • If the designer makes a decision to make a change in one of the components, it can be done by simply changing a couple of lines in the code in one place
  • 4. UI Styles implementation The best way to implement UI Styles is by creating UI Style Classes for each of the components, which can then be set in .storyboard or created in code. Try to avoid changing styles outside those subclasses, including .storyboards and .xibs. This approach will help keep all of the styles in one place and provide a quick change of the same component all over the project.
  • 5. Reuse UI components only if they are identical If you have two components that look similar but have slight differences, for example, text color or additional image, it’s better to create separated components. This will help to ensure that if you change something in one component, the same component with a slight difference won't be broken in another place. UIView1 UIView2
  • 6. Don't use Run time attributes in interface builder Run time attributes advantage is that you can set some properties in interface builder rather than in code. The problem with this approach is that if you change the name or the type of a property you use as the Run time attribute, and you forget to change it in interface builder, you will never know in a build time that something is wrong. You will have a crash on a screen you use it. The best place for UI attributes are Subclasses for UIComponents.
  • 7. Auto Layout over Frame-based layout Try to avoid the calculation of the frame in code. Even though Frame-based layout works faster than Auto Layout, eventually, you will have problems with the broken layout if you have frame calculation in code. It is a rule for table views as well. Use UITableView automaticDimension for tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) method over precalculates size.
  • 8. Use UIAppearance Use UIAppearance for general styles, like brand colours for navigation bar and UI controls. UIAppearance allows the appearance of views and controls to be consistently defined across the entire application.
  • 9. IBOutlets and IBActions should be private When you add a new UIView or UIViewController, all @IBActions and @IBOutlets should be private, so you won't be able to change them from outside. This approach will reduce the number of unexpected behaviors like someone changed the style or the text of a Label from outside the view, and you can't find where or who did it. Also, this approach will reduce build time for the file in swift. Use setup() or config() functions with all parameters you need for this UIView.
  • 10. Avoid magic numbers Try to avoid direct usage of a number in the code, because after some time you could forget what this number means. The best solution is to set a private constant in a class with nice name, which will explain what this constant will be used for.
  • 11. Use provided by Apple API only to change Apple UI components If you want to customize Apple's UI component, but you don't have API for that, you should create a custom UI component. It is bad practice to iterate through Apple UI components' subviews to make a change for one of them. The structure of UI elements provided by Apple can be different in different iOS versions. For example, if you have UISlider and you want to add dots to it to indicate exact values, you shouldn't change UISlider, as Apple doesn't provide API for that. You should create a custom UI component for that use. The problem with changing UISlider is that hierarchy of a UISlider can be changed in future iOS versions, and your component will work unexpectedly. iOS 13 iOS 14
  • 12. Don't use private Apple API for UI Changes This is another way to making changes to Apple UI components without public API for that. Using Apple private API can lead to rejecting the app from the store. Also, the private API can be different in different iOS versions, so your application may crash when a new iOS version is released. As an example, on iOS 11 and earlier, if was a problem to change placeholder color for UITextField, so developers used private Api using KVC for that. setValue UIColor black “_placeholderLabel.textColor"