2014 Android & iOS Design Trend
Discussion, Brainstorming 
Flowchart 
Gray Scale Wire Framing 
Wireframe Prototype 
Main Template Skinning 
Prototype Link 
Usability Test 
UI Testing 
Under the hood: UI/UX Design
3 
© RapidValue Solutions 
•Micro UX 
•Multiplatform dependent design 
•Showcasing large images in website 
•SVG icons and animations 
•Representation of data through infographics 
•Video content background 
•Parallax Scrolling 
•Single Page Design 
•Responsive Web Design 
•Flat Web Design 
•Minimalistic Navigation 
•Mobile First Design Method
4 
© RapidValue Solutions 
Sass stands for syntactically awesome style sheets, and it's a language that adds functionality to CSS. Sass is the most mature, stable, and powerful professional grade CSS extension language. Sass is completely compatible with all versions of CSS. 
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. 
Yeomen workflow is a robust and opinionated client-side stack, comprising tools and frameworks 
that can help developers quickly build beautiful web applications. 
Modular architecture that can scale out of the box, success and lessons learned from several open-source communities. 
Compass helps Sass authors write smarter style sheets and empowers a community of designers and developers to create and share powerful frameworks. 
Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Compass is a collection of helpful tools and battle-tested best practices for Sass. 
Latest Technologies in Web Designing
5 
© RapidValue Solutions 
•Provide good user experience to users 
•Compactible with all device and browsers 
•Enhance user online and offline browsing experience 
•Increase visibility in search engines 
•Increase reach to tablet and mobile audience 
•Increment in the sales and conversion rates 
•Save time and cost in mobile development 
•Increase the number of site visits 
•SVG animation are scalable 
•Speed and scalability 
•Infographics remain the best way of representing data 
Benefits of using Latest Trends in Web Designing
6 
© RapidValue Solutions 
Old Adaptive Design 
New responsive Design 
Skeuomorphic designs 
Flat designs 
Endless pages and massive content 
Single page design 
Adaptive web design 
Responsive web design 
Predefined screen size 
Flexible and fluid UI grids 
Lack of usability 
Enhanced usability 
Huge page loading time 
Fast load times 
Comparison between Old and New Trends in Web Designing
7 
© RapidValue Solutions 
•Flatter UI elements 
•Deep Layered Interface design 
•More Images and less content 
•Focus given to active area 
•Simple and Minimal design pattern 
•Behavior-learning responses 
•Carefully choreographed motion design 
•Visual or haptic feedback for UI elements 
•Maximize internal consistency within an application 
•Video background for applications 
•Typography plays a big role in content 
•Introduction of material design
8 
© RapidValue Solutions 
•Minimizing complexity in design for better user experience 
•Subtle animations to aid the user's mental model for interface transformations 
•Flexible interface for convenient use of applications 
•Interactive feedback engage users more into the applications 
•Consistency throughout the application 
•Simple elements for user rapid accessibility 
•Focus more on content and usability 
Benefits of using Latest Trends in Android in Interface Design
9 
© RapidValue Solutions 
•Holo design 
•Flat design 
•Much more skeuormorphic designs 
•Minimalism, simplicity and speed are the major factors 
•Less interaction between user and system 
•Animated interactive design for better usability 
•Data driven design 
•User centered design, giving more focus to features 
Older Version 
Kitkat 
Comparison between Older version Android and Android Kitkat
10 
© RapidValue Solutions 
•Flat UI design 
•Fluid motion 
•Aesthetic integrity 
•User centered design strategy 
•Embrace simplicity 
•Parallax scrolling effect 
•Perceptible feedback to users input 
•Consistency throughout the application 
•improves the usability 
•Content is conveyed through great typography 
•Blurred background
11 
© RapidValue Solutions 
•Mature efficiency 
•Good interface invites users to action 
•Improved user experience 
•Focus and clarity on the content 
•Continuous flow in the user applications 
•Minimalistic design enhance the performance 
•Visual clarity and communication 
•Parallax effect brings in different viewing experience to the users 
Benefits of using Latest Trends iOS UI Design
12 
© RapidValue Solutions 
iOS 6 iOS 7 
•Followed skeuomorphic 3D designs 
•Following flat 2D designs 
•Cognitive load was bit more when compared to iOS 7 
•Less cognitive load 
•More textured backgrounds and realistic icons 
•Minimalism 
•Small typeface 
•Large typeface for better readabilty 
iOS 7 
iOS 6 
Comparison between iOS 6 and iOS 7
13 
© RapidValue Solutions 
Good Design Tools & Expertise 
Adobe Photoshop Adobe Illustrator Adobe Dreamweaver inVision Proto.io MockFlow CMS (Wordpress, Joomla) xhtml, html5 javascript jQuery css3. less sass Bootstrap Compass Eclipse XCode Android XML iOS XIB/ Storyboard
14 
© RapidValue Solutions 
About RapidValue 
RapidValue is a leading provider of end-to-end mobility solutions to enterprises worldwide. Armed with a team of 250+ experts in mobility consulting and application development, along with experience delivering over 400 mobility projects, we offer a range of mobility services across industry verticals. RapidValue delivers its services to the world’s top brands and Fortune 1000 companies, and has offices in the United States and India. 
www.rapidvaluesolutions.com 
www.rapidvaluesolutions.com/blog 
+1 877.690.4844 
contactus@rapidvaluesolutions.com 
This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful. 
Disclaimer: 
Presented by: Melvin Thambi Lead Architect – UX/UI

2014 Android and iOS Design Trends

  • 1.
    2014 Android &iOS Design Trend
  • 2.
    Discussion, Brainstorming Flowchart Gray Scale Wire Framing Wireframe Prototype Main Template Skinning Prototype Link Usability Test UI Testing Under the hood: UI/UX Design
  • 3.
    3 © RapidValueSolutions •Micro UX •Multiplatform dependent design •Showcasing large images in website •SVG icons and animations •Representation of data through infographics •Video content background •Parallax Scrolling •Single Page Design •Responsive Web Design •Flat Web Design •Minimalistic Navigation •Mobile First Design Method
  • 4.
    4 © RapidValueSolutions Sass stands for syntactically awesome style sheets, and it's a language that adds functionality to CSS. Sass is the most mature, stable, and powerful professional grade CSS extension language. Sass is completely compatible with all versions of CSS. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Yeomen workflow is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. Modular architecture that can scale out of the box, success and lessons learned from several open-source communities. Compass helps Sass authors write smarter style sheets and empowers a community of designers and developers to create and share powerful frameworks. Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Compass is a collection of helpful tools and battle-tested best practices for Sass. Latest Technologies in Web Designing
  • 5.
    5 © RapidValueSolutions •Provide good user experience to users •Compactible with all device and browsers •Enhance user online and offline browsing experience •Increase visibility in search engines •Increase reach to tablet and mobile audience •Increment in the sales and conversion rates •Save time and cost in mobile development •Increase the number of site visits •SVG animation are scalable •Speed and scalability •Infographics remain the best way of representing data Benefits of using Latest Trends in Web Designing
  • 6.
    6 © RapidValueSolutions Old Adaptive Design New responsive Design Skeuomorphic designs Flat designs Endless pages and massive content Single page design Adaptive web design Responsive web design Predefined screen size Flexible and fluid UI grids Lack of usability Enhanced usability Huge page loading time Fast load times Comparison between Old and New Trends in Web Designing
  • 7.
    7 © RapidValueSolutions •Flatter UI elements •Deep Layered Interface design •More Images and less content •Focus given to active area •Simple and Minimal design pattern •Behavior-learning responses •Carefully choreographed motion design •Visual or haptic feedback for UI elements •Maximize internal consistency within an application •Video background for applications •Typography plays a big role in content •Introduction of material design
  • 8.
    8 © RapidValueSolutions •Minimizing complexity in design for better user experience •Subtle animations to aid the user's mental model for interface transformations •Flexible interface for convenient use of applications •Interactive feedback engage users more into the applications •Consistency throughout the application •Simple elements for user rapid accessibility •Focus more on content and usability Benefits of using Latest Trends in Android in Interface Design
  • 9.
    9 © RapidValueSolutions •Holo design •Flat design •Much more skeuormorphic designs •Minimalism, simplicity and speed are the major factors •Less interaction between user and system •Animated interactive design for better usability •Data driven design •User centered design, giving more focus to features Older Version Kitkat Comparison between Older version Android and Android Kitkat
  • 10.
    10 © RapidValueSolutions •Flat UI design •Fluid motion •Aesthetic integrity •User centered design strategy •Embrace simplicity •Parallax scrolling effect •Perceptible feedback to users input •Consistency throughout the application •improves the usability •Content is conveyed through great typography •Blurred background
  • 11.
    11 © RapidValueSolutions •Mature efficiency •Good interface invites users to action •Improved user experience •Focus and clarity on the content •Continuous flow in the user applications •Minimalistic design enhance the performance •Visual clarity and communication •Parallax effect brings in different viewing experience to the users Benefits of using Latest Trends iOS UI Design
  • 12.
    12 © RapidValueSolutions iOS 6 iOS 7 •Followed skeuomorphic 3D designs •Following flat 2D designs •Cognitive load was bit more when compared to iOS 7 •Less cognitive load •More textured backgrounds and realistic icons •Minimalism •Small typeface •Large typeface for better readabilty iOS 7 iOS 6 Comparison between iOS 6 and iOS 7
  • 13.
    13 © RapidValueSolutions Good Design Tools & Expertise Adobe Photoshop Adobe Illustrator Adobe Dreamweaver inVision Proto.io MockFlow CMS (Wordpress, Joomla) xhtml, html5 javascript jQuery css3. less sass Bootstrap Compass Eclipse XCode Android XML iOS XIB/ Storyboard
  • 14.
    14 © RapidValueSolutions About RapidValue RapidValue is a leading provider of end-to-end mobility solutions to enterprises worldwide. Armed with a team of 250+ experts in mobility consulting and application development, along with experience delivering over 400 mobility projects, we offer a range of mobility services across industry verticals. RapidValue delivers its services to the world’s top brands and Fortune 1000 companies, and has offices in the United States and India. www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog +1 877.690.4844 contactus@rapidvaluesolutions.com This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful. Disclaimer: Presented by: Melvin Thambi Lead Architect – UX/UI