Material design twitter iOS concept share

  • View
    1.854

  • Download
    0

Embed Size (px)

Transcript

  • MANOS HATZIDAKIS

    Manos.me.uk @f0r @f0r

    MATERIAL DESIGN iOS +TWITTER iOS CONCEPT

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    BRIEFMaterial 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

    http://bit.ly/1qbyYqs

  • 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

    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/

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    iOSANDROID

    CURRENT SCREENS

    Main Action Bar Navigation BarStatus Bar Status Bar

    Content Display

    Bottom Navigation

    Tab BarNavigation Bar

    Content Display

  • 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.

    https://invis.io/CU6QS0X7R

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    Putting the Twitter light blue colouron 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

    https://invis.io/CU6QS0X7R

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    VERSION 03 - MAKING THE INTERACTION EVEN SIMPLER

    Making the interaction even more simpler

    FAB

    LESS STEPSOffering 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

    https://invis.io/CU6QS0X7R

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    A FEW THINGS TO CONSIDER

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    A FEW THINGS TO CONSIDERVisual elements, interactions & motions can certainly be incorporated into iOS apps from Material Design.

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    A FEW THINGS TO CONSIDERVisual 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.

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    A FEW THINGS TO CONSIDERVisual 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.

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    A FEW THINGS TO CONSIDERVisual 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)

  • MATERIAL DESIGN ON IOS - TWITTER CONCEPT

    IN MY OPINION

    GOOD DESIGN IS ABOUT PICKING THE BEST SOLUTION FOR THE INTENT.

  • 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 users thinking, introducing them to new ways

  • 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 users thinking, introducing them to new ways

    IN THE END YOU CAN ONLY KNOW IF IT HAS WORKED BY TESTING IT.

  • 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

  • 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?

  • So go ahead,Lets experiment and see what works in any case. Just dont forget to consider the people and

    devices that youre designing for.

    THANK YOU FOR YOUR TIME

    MANOS HATZIDAKIS

    Manos.me.uk @f0r @f0r

    MATERIAL DESIGN iOS +TWITTER iOS CONCEPT