Twitter iOS concept using Material Design

Twitter iOS concept using Material Design

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.

For more details check out the case study on SlideShare or download the Sketch file from Sketch app Sources

This Project was showcased in MaterialUP. Check it out here and here  

CURRENT SCREENS

FIRST DESIGN

Screen 1

Status Bar: Keeping the iOS guidelines by not implementing the translucent effect of material design. 

Navigation Bar: Secondary source of navigation. Includes brand identity, content display controls (search), settings menu.

Timeline: I chose the timeline to remain as true as possible to the standard iOS screen in order to maximize the users familiarity. 

Tab BAR / Tool bar : 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).

FAB (Material): Contains the most promoted action of the screen that the user is focused.

Screen 2

FAB Speed dial (Material): The floating action button flings out related actions upon press. Take Photos or videos, get images or videos or Tweet.

 

SECOND DESIGN

Screen 1

Navigation Bar: Implementing more Brand Presence

FAB (Material): Keeping the color of Fab as is for branding consistency.

 

FINAL DESIGN

Screen 1

Navigation Bar: Keeping the brand identity makes it more stronger.

FAB (Material): Making the interaction even more simpler.

Screen 2

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.

For more details check out the case study on SlideShare or download the Sketch file from Sketch app Sources 

THANK YOU FOR YOUR TIME