The presentation outlines the following items: 1. Collaboration between developers and designers, in other words – how to understand each other 2. Why hardware and technical constraints should be taken into account while creating an app 3. Key differences between iOS Human Interface and Material Design 4. How to follow simple rules and design interfaces for both platforms 5. Finally, a few examples of interfaces designed and developed with neglecting of guidelines.

1. Andriy Larchenko
(UI/UX designer @ Perfectial)
THE POWER OF GUIDELINES
Or: How important is to know design guidelines of platform you design/develop for
DESIGN TEAM

2. AGENDA
What we fight for2
3 Key points
4 Pain
Intro1

3. INTRO
IBM Design Language
iOS Human Interface Google Material Design
Universal Windows
Platform Design

4. WHAT WE FIGHT FOR
Performance
Understanding
Collaboration
Reputation
Maturity

6. KEY POINTS
A familiar, flowing experience keeps users engaged
OS
Philosophy
Components
& Patterns
Structure Environment
Motion Visuals

7. key points
ENVIRONMENT
Hardware
Screen size
Screen resolution
Physical controls
Software
System Features
Extensions
Technologies

8. key points
PHILOSOPHY
Three primary themes differentiate
iOS from other platforms:
Material design synthesizes the classic
principles of good design with the
innovation and possibility of technology
and science.
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
Clarity
Deference
Depth
iOS Human Interface Material Design

9. key points
STRUCTURE
Status bar
Side navs
App bar/toolbar
Content area
Bottom bar
Action button
Status bar
Nav bar
Search bar
Content area
Tab bar
Toolbar
iOS Human Interface Material Design

10. key points
VISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines
PT DP
SP
All components align to an 8dp square baseline
grid for mobile, tablet, and desktop.
Iconography in toolbars align to a 4dp square
baseline grid.
Points Density-Independent Pixels
Scalable Pixels
In looking closely at Apple's own UIs, they aren't
as strict to the grid and baseline as Google
Material Design is, instead opting for more of
a modular approach.

11. 1x 2x 3x
1x 1.5x 2x
3x 4x
key points
VISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines

12. key points
VISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines

13. key points
VISUAL STYLE
In iOS, color can indicate interactivity, impart vitality, and
provide visual continuity. Look to the system’s color
scheme for guidance when picking app tint colors that
look great individually and in combination, on both light
and dark backgrounds.
Color in material design is inspired by bold hues
juxtaposed with muted environments, deep shadows,
and bright highlights.
iOS Human Interface Material Design
2. Colors
R 255
G 59
B 48
R 255
G 149
B 0
R 255
G 204
B 0
R 76
G 217
B 100
R 90
G 200
B 250
R 0
G 122
B 255
R 88
G 86
B 214
R 255
G 44
B 85

14. Key points
VISUAL STYLE
“Color should be unexpected and vibrant” - Google

16. key points
VISUAL STYLE
iOS Human Interface Material Design
3. Product icons
App icon
AppStore icon
Spotlight
Settings
Play Store icon
App icon
* 8 sizes * 5 sizes

17. key points
VISUAL STYLE
iOS Human Interface Material Design
4. Interface icons
Outline icons with
almost no fill
Soft corners
Thin lines ~1 px
Mostly line style
Extremely simplified
shapes
Corner radius 2 px
2 px lines
Flat style
Filled

18. key points
VISUAL STYLE
iOS Human Interface Material Design
5. Typography
San Francisco
SF
Text Display
SF Compact
Text Display
Roboto is the standard typeface on
Android.
Noto is the standard typeface for all
languages on Chrome and Android for all
languages not covered by Roboto.

20. Key points
MOTION

21. Key points
MOTION

22. Key points
GESTURES
As a general rule, use standard gestures.
Don’t block systemwide gestures.
Avoid using standard gestures to perform nonstandard actions.
Offer shortcut gestures to supplement, not replace, interface-
based navigation and actions.
Use multifinger gestures to enhance the experience of some apps.

23. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Title TitleNav bar App bar
ActivityHome ProfileMessages Settings
Tab bar
Activity
Home
Profile
Messages
Settings
Drawer menu

24. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Button Button BUTTON BUTTON
Dolor Sit Amet
Consectetur adipiscing elit.
BUTTON
Dolor Sit Amet
Consectetur adipiscing elit.
Button
Floating action buttons
Button BUTTON

25. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Cancel
Flag
Mark as Unread
Move to Junk
Flag
Move to junk
Mark as unread
Android overlays have a solid colour with
a slight drop shadow to indicate that it is
a “paper” layer above.
iOS overlays have no drop shadow, but have
a slight transparency on the background.
Action sheets Bottom sheets

26. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Segmented
controls
Tabs
Option A Option B Option С
Title Title
OPTION A OPTION B OPTION С

27. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
“This app” Would Like to Use
Your Current Location
Don’t Allow OK
Allow this app to use
your location?
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua.
AGREEDISAGREE

28. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Radio buttons, check boxes, fields and switches are functional components that should be given a native feel.
As with alerts and dialogues, these controls and inputs are an area of trust and familiarity for the user.
Use the native components as much as possible for these, so that people (a) know how to use them,
and (b) trust your app with their sensitive data or payment details.

29. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design
Default Email
URL Numbers
Default Email
Numbers

30. Key points
COMPONENTS & PATTERNS
iOS Human Interface Material Design

31. PAIN
Multiple Sclerosis @Point of Care™

32. PAIN
Unknown app

33. PAIN
GSM Spy Finder

34. PAIN
Docs To Go - Free Office Suite

35. PAIN
KredoMobile

36. PAIN
OTP Smart

37. SUMMARY
It isn’t an impossible task to create a native feel for
your app on both iOS and Android with one design.
Try to keep on top of all these tweaks from the
beginning, keep an eye out for components that feel
out of sync on one platform, and always work as
closely as you can with your team.

38. QUESTIONS?

39. THANKS FOR ATTENTION!
Andriy Larchenko
(UI/UX designer @ Perfectial)
andrewlarchenko
Larchenko.Andrew
andrew_larchenko
DESIGN TEAM