the power of guidelines. or: how important is to know guidelines of platform you design/develop for
TRANSCRIPT
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
AGENDA
What we fight for2
3 Key points
4 Pain
Intro1
INTRO
IBM Design Language
iOS Human Interface Google Material Design
Universal Windows Platform Design
WHAT WE FIGHT FOR
Performance
Understanding
Collaboration
Reputation
Maturity
KEY POINTSA familiar, flowing experience keeps users engaged
OS
Philosophy
Components & Patterns
Structure Environment
Motion Visuals
key pointsENVIRONMENT
Hardware
Screen size
Screen resolution
Physical controls
Software
System Features
Extensions
Technologies
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
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
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.
1x 2x 3x
1x 1.5x 2x
3x 4x
key pointsVISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines
key pointsVISUAL STYLE
iOS Human Interface Material Design
1. Metrics & Keylines
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
Key pointsVISUAL STYLE
“Color should be unexpected and vibrant” - Google
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
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
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.
Key pointsMOTION
Key pointsMOTION
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.
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
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
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
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Segmented controls
Tabs
Option A Option B Option С
Title Title
OPTION A OPTION B OPTION С
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
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.
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
Default Email
URL Numbers
Default Email
Numbers
Key pointsCOMPONENTS & PATTERNS
iOS Human Interface Material Design
PAIN
Multiple Sclerosis @Point of Care™
PAIN
Unknown app
PAIN
GSM Spy Finder
PAIN
Docs To Go - Free Office Suite
PAIN
KredoMobile
PAIN
OTP Smart
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.
QUESTIONS?
THANKS FOR ATTENTION!
Andriy Larchenko (UI/UX designer @ Perfectial)
andrewlarchenko
Larchenko.Andrew
andrew_larchenko
DESIGN TEAM