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