Material Design is a design language set forth by Google for use across platforms. I am a fan of Material design, but I am also fan of platform and common use patterns. My attempt was to create a small section of Twitter for iOS with a Material Design flavor. I tried to think about common use, platform patterns and of course Material design and how can you combine those effectively. You can download the Sketch file from here: http://bit.ly/1qbyYqs

1. MANOS HATZIDAKIS
Manos.me.uk @f0r @f0r
MATERIAL DESIGNiOS +
TWITTER iOS CONCEPT

2. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
BRIEF
Material Design is a design language set forth by Google for use across
platforms.
I am a fan of Material design, but I am also fan of platform and common
use patterns. My attempt was to create a small section of Twitter for iOS
with a Material Design flavor.
I tried to think about common use, platform patterns and of course Material
design and how can you combine those effectively.
You can download the Sketch file from here: http://bit.ly/1qbyYqs

3. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
UNDERSTANDING OUR USERS
http://bgr.com/2015/05/27/iphone-vs-android-advertising-google-profits-money/
https://www.comscore.com/lat/Insights/Blog/Android-vs-iOS-User-Differences-Every-Developer-Should-Know#imageview/0/
Want control - more hard core techies who want to
customize and explore the limits of their phone's
capabilities. (Rooting Android).
Accept complexity
Are more comfortable with the more open but less
polished design
They are known as the Google power-user,
because they are well-integrated with Google
products.
Consider themselves as no nonsense phone users
who know what they want to do and don't spend a
lot of time wandering from app to app.
They want simplicity - they are tech enthusiasts,
addicted to new digital devices but not so much
for technical jobs.
Accept less control
Like sleek and polished designs
They are known as the App power-user
because they enjoy using apps. Will explore and
experiment with several.
Are more likely to purchase goods or services
Spend a lot more time using their phones
Sources
ANDROID USERSiOS USERS

4. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
iOSANDROID
CURRENT SCREENS
Main Action Bar Navigation Bar
Status Bar Status Bar
Content Display
Bottom Navigation
Tab Bar
Navigation Bar
Content Display

5. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
VERSION 01
This is the primary navigation and
must be present on every screen.
According to iOS guidelines there
are no more than 5 tabs displayed
at a time. (Familiarity).
Bottom Navigation (Material)
Tab BAR / Tool bar (iOS)
FAB (Material)
Status Bar
Keeping the iOS guidelines by not
implementing the translucent effect
of material design.
Main Action Bar(Material)
Navigation Bar (iOS)
Secondary source of
navigation.
Includes brand identity,
content display controls
(search), settings menu.
Contains the most promoted
action of the screen that the
user is focused.
Content Display
I chose the timeline to remain as
true as possible to the standard iOS
screen in order to maximize the
users familiarity.
INVISION LINK: https://invis.io/CU6QS0X7R
Speed Dial (Material)
The floating action button flings
out related actions upon press.
Take Photo, get image or Tweet.

6. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
Putting the Twitter light blue colour
on the navigation bar
More brand presence
Keeping the color of Fab as is
for branding consistency.
FAB
Speed Dial (Material)
The floating action button flings
out related actions upon press.
Take Photo, get image or Tweet.
Bottom navigation (Material)
Tab BAR / Tool bar (iOS)
This is the primary navigation and
must be present on every screen.
According to iOS guidelines there
are no more than 5 tabs displayed
at a time. (Familiarity).
INVISION LINK: https://invis.io/CU6QS0X7R
VERSION 02 - IMPLEMENTING MORE BRAND PRESENCE

7. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
VERSION 03 - MAKING THE INTERACTION EVEN SIMPLER
Making the interaction even
more simpler
FAB
LESS STEPS
Offering directly to the user in
one step all their options.
They can immediately tap on the
text field to tweet, upload an
existing photo or video or create
a new one.
Enchanting the brand identity
makes it more stronger.
More brand presence
INVISION LINK: https://invis.io/CU6QS0X7R

8. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
A FEW THINGS TO CONSIDER

9. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
A FEW THINGS TO CONSIDER
•Visual elements, interactions & motions can certainly be
incorporated into iOS apps from Material Design.

10. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
A FEW THINGS TO CONSIDER
•Visual elements, interactions & motions can certainly be
incorporated into iOS apps from Material Design.
•As long as they are intelligently incorporated without confusing or
undermining the user in the process.

11. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
A FEW THINGS TO CONSIDER
•Visual elements, interactions & motions can certainly be
incorporated into iOS apps from Material Design.
•As long as they are intelligently incorporated without confusing or
undermining the user in the process.
•It is important to stay true to the operating system's nature and
keep functionality the way it is.

12. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
A FEW THINGS TO CONSIDER
•Visual elements, interactions & motions can certainly be
incorporated into iOS apps from Material Design.
•As long as they are intelligently incorporated without confusing or
undermining the user in the process.
•It is important to stay true to the operating system's nature and
keep functionality the way it is.
•Forcing a user to adapt or take on new sets of habits within an app
could cause great confusion. (e.g iOS 7)

13. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
IN MY OPINION…
GOOD DESIGN IS ABOUT PICKING THE BEST
SOLUTION FOR THE INTENT.

14. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
IN MY OPINION…
GOOD DESIGN IS ABOUT PICKING THE BEST
SOLUTION FOR THE INTENT.
and as it may be possible to change and re-train user’s thinking,
introducing them to new ways…

15. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
IN MY OPINION…
GOOD DESIGN IS ABOUT PICKING THE BEST
SOLUTION FOR THE INTENT.
and as it may be possible to change and re-train user’s thinking,
introducing them to new ways…
IN THE END YOU CAN ONLY KNOW
IF IT HAS WORKED… BY TESTING IT.

16. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
ONE MORE THING
Even though Material Design offers a consistent design language that is
lighter, more colorful, backed by solid guidelines that are well-considered

17. MATERIAL DESIGN ON IOS - TWITTER CONCEPT
ONE MORE THING
Even though Material Design offers a consistent design language that is
lighter, more colorful, backed by solid guidelines that are well-considered
I HAVE TO WONDER…
WHY SEVERAL BIG BRANDS SUCH AS TWITTER OR
FACEBOOK HAVE YET NOT SUCCEEDED TO CREATE
ONE DESIGN THAT FITS BOTH OPERATING
SYSTEMS?

18. So go ahead,
Lets experiment and see what works in any case. Just don’t forget to consider the people and
devices that you’re designing for.
THANK YOU FOR YOUR TIME
MANOS HATZIDAKIS
Manos.me.uk @f0r @f0r
MATERIAL DESIGNiOS +
TWITTER iOS CONCEPT