Download - THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for
![Page 1: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/1.jpg)
Andriy Larchenko (UI/UX designer @ Perfectial)
THE POWER OF GUIDELINESOr: How important is to know design guidelines of platform you design/develop for
DESIGN TEAM
![Page 2: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/2.jpg)
AGENDA
What we fight for2
3 Key points
4 Pain
Intro1
![Page 3: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/3.jpg)
INTRO
IBM Design Language
iOS Human Interface Google Material Design
Universal Windows Platform Design
![Page 4: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/4.jpg)
WHAT WE FIGHT FOR
Performance
Understanding
Collaboration
Reputation
Maturity
![Page 5: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/5.jpg)
![Page 6: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/6.jpg)
KEY POINTSA familiar, flowing experience keeps users engaged
OS
Philosophy
Components & Patterns
Structure Environment
Motion Visuals
![Page 7: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/7.jpg)
key pointsENVIRONMENT
Hardware
Screen size
Screen resolution
Physical controls
Software
System Features
Extensions
Technologies
![Page 8: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/8.jpg)
key pointsPHILOSOPHY
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
![Page 9: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/9.jpg)
key pointsSTRUCTURE
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
![Page 10: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/10.jpg)
key pointsVISUAL 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.
![Page 11: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/11.jpg)
1x 2x 3x
1x 1.5x 2x
3x 4x
key pointsVISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines
![Page 12: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/12.jpg)
key pointsVISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines
![Page 13: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/13.jpg)
key pointsVISUAL 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 255G 59B 48
R 255G 149B 0
R 255G 204B 0
R 76G 217B 100
R 90G 200B 250
R 0G 122B 255
R 88G 86B 214
R 255G 44B 85
![Page 14: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/14.jpg)
Key pointsVISUAL STYLE
“Color should be unexpected and vibrant” - Google
![Page 15: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/15.jpg)
![Page 16: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/16.jpg)
key pointsVISUAL STYLE
iOS Human Interface Material Design
3. Product icons
App icon
AppStore icon
Spotlight
Settings
Play Store icon
App icon
* 8 sizes * 5 sizes
![Page 17: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/17.jpg)
key pointsVISUAL 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
![Page 18: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/18.jpg)
key pointsVISUAL 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.
![Page 19: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/19.jpg)
![Page 20: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/20.jpg)
Key pointsMOTION
![Page 21: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/21.jpg)
Key pointsMOTION
![Page 22: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/22.jpg)
Key pointsGESTURES
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.
![Page 23: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/23.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Title TitleNav bar App bar
ActivityHome ProfileMessages Settings
Tab bar
Activity
Home
Profile
Messages
Settings
Drawer menu
![Page 24: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/24.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Button Button BUTTON BUTTON
Dolor Sit AmetConsectetur adipiscing elit.
BUTTON
Dolor Sit AmetConsectetur adipiscing elit.
Button
Floating action buttons
Button BUTTON
![Page 25: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/25.jpg)
Key pointsCOMPONENTS & 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
![Page 26: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/26.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Segmented controls
Tabs
Option A Option B Option С
Title Title
OPTION A OPTION B OPTION С
![Page 27: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/27.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
“This app” Would Like to UseYour 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
![Page 28: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/28.jpg)
Key pointsCOMPONENTS & 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.
![Page 29: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/29.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Default Email
URL Numbers
Default Email
Numbers
![Page 30: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/30.jpg)
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
![Page 31: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/31.jpg)
PAIN
Multiple Sclerosis @Point of Care™
![Page 32: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/32.jpg)
PAIN
Unknown app
![Page 33: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/33.jpg)
PAIN
GSM Spy Finder
![Page 34: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/34.jpg)
PAIN
Docs To Go - Free Office Suite
![Page 35: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/35.jpg)
PAIN
KredoMobile
![Page 36: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/36.jpg)
PAIN
OTP Smart
![Page 37: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/37.jpg)
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.
![Page 38: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/38.jpg)
QUESTIONS?
![Page 39: THE POWER OF GUIDELINES. Or: how important is to know guidelines of platform you design/develop for](https://reader034.vdocument.in/reader034/viewer/2022051707/58edcb281a28ab406c8b456d/html5/thumbnails/39.jpg)
THANKS FOR ATTENTION!
Andriy Larchenko (UI/UX designer @ Perfectial)
andrewlarchenko
Larchenko.Andrew
andrew_larchenko
DESIGN TEAM