iSDP 2014GUI & INTERACTION DESIGN

Version 1.0 – 18 Dec 2013By :

Mohd Syaheezam AsyraqMohd Akhmal Manaf

Ahmad Sahidi

CURRENT

ISDP

ICON

LIBRARY

EARLY DAYS WEB 2.0 MATURE UI

(1995 – 2003) (2003 – 2010) (2010 –

UI EVOLUTION

Menu all very clickable Menu all hyper clickable- shadow, bubbles, glares,- Drop shadow- skeumorphism

Design communicates

2014

- Flat design- interactivity

BIG PLAYER

2013- MICROSOFT- GOOGLE- APPLE

Microsoft: It ’s Hip To Be Square

Authentically digital Live tiles Horizontal scrolling

Google: Holding The Cards

Card-based design Overall layout very clean and easy to digest Textual information is organized per size and color and in order of importance

Google Embraces Flat Design

Apple: In With The Neue

Simpler icons, fresh type treatment and an overall flatter environment Overall layout very clean and easy to digest Lighter and breathable layout

In the guidelines published by Apple for iOS7, “the UI helps users understand and interact with the content, not compete with it”.

FLAT AND THIN

WHY?

INFORMATION OVERLOAD Information overload a reduction of clutter in a user interface (UI)

http://www.geckoboard.com/

SIMPLICITY IS GOLDEN Simpler apps mean simpler interfaces.

http://www.geckoboard.com/

Beautiful and minimal: The Blue weather app by Oak.

CONTENT IS KING, AGAIN

Beautiful and minimal: The Blue weather app by Oak.

a return to a focus on content. focus on what things do, rather than what they will look like

TECHNOLOGICAL LITERACY

Beautiful and minimal: The Blue weather app by Oak.

Windows 8 & Chrome for Android support touch commands that start off screen, without any visual indicator.

TECHNOLOGY’S INFLUENCE

Beautiful and minimal: The Blue weather app by Oak.

Less assets in general (e.g background images) Screen dimension & pixel density factor Resolution independence (svg + icon fonts)

RESPONSIVE DESIGN

Beautiful and minimal: The Blue weather app by Oak.

Fast control Easier theming of interfaces

FLAT DESIGN CONCEPT

SHOWCASE

http://www.snowbird.com/

Clyph Calendar

http://www.oweather.net/

What Apps Concept

Dashboard widgets

Dashboard widgets

Dashboard widgets

SAMPLE

IMPLEMENTATION

CONCEPT

OPTION

OPTION 1

OPTION 2

OPTION 3