ux design + ui design: injecting a brand persona!

56
Injecting a brand personality! UX & UI JAYAN NARAYANAN

Upload: jayan-narayanan

Post on 06-Apr-2016

241 views

Category:

Documents


5 download

DESCRIPTION

Presentation is designed to address a group of entrepreneurs who have little knowledge in design and it's jargons. "UX & UI: Injecting Personality Into Brand” is my try to shed light on two often heard but little understood or confused acronyms and its impact on overall brand experience.

TRANSCRIPT

Page 1: UX Design + UI Design: Injecting a brand persona!

Injecting a brand personality!UX & UI

JAYAN NARAYANAN

Page 2: UX Design + UI Design: Injecting a brand persona!

UX

Brand

UI

Personality is the platform for

emotion

UI & UX facets which

define the Brand

UI design trends &

disciplines

Understanding the Platform &

Tools

What is UI design

Design for all

devices

Busting UI Myths

Multi Device Experience

Understanding UX Design &

Process & Workflow

What is UX design really

means!

UXMyths

SEOUXDFight

Brand&

BrandingInjecting attitude

Page 3: UX Design + UI Design: Injecting a brand persona!

UX Design

Page 4: UX Design + UI Design: Injecting a brand persona!

User experience design (UXD) is the process of enhancing

customer satisfaction and loyalty by improving the usability,

ease of use, and pleasure provided in the interaction

between the customer and the product

Page 5: UX Design + UI Design: Injecting a brand persona!

Content

UI Design

Usability

User Interaction

in a broad way...

UserExperiance

Design

Page 6: UX Design + UI Design: Injecting a brand persona!

Busting UX Myths

Page 7: UX Design + UI Design: Injecting a brand persona!

MYTH #1

UX = UIUser InterfaceUser Experiance

Page 8: UX Design + UI Design: Injecting a brand persona!

MYTH #2

You = Your user

Page 9: UX Design + UI Design: Injecting a brand persona!

MYTH #3

User always know what they want

Page 10: UX Design + UI Design: Injecting a brand persona!

MYTH #4

UX ends when user leave page

Page 11: UX Design + UI Design: Injecting a brand persona!

MYTH #5

Best practices always works!

Page 12: UX Design + UI Design: Injecting a brand persona!

MYTH #6

UX Guru knows all!

Page 13: UX Design + UI Design: Injecting a brand persona!

MYTH #7

Knowbody know it!!!!!

Page 14: UX Design + UI Design: Injecting a brand persona!

World is changing...User too...

Page 15: UX Design + UI Design: Injecting a brand persona!

Human computer interaction: surface and gesture interfaces

2D SENSING – SURFACES

Page 16: UX Design + UI Design: Injecting a brand persona!

3D Depth Sensing, Face and Body Tracking Solutions

3D SENSING – GESTURES

Page 17: UX Design + UI Design: Injecting a brand persona!

life style is changing...

WEARABLE COMPUTING

Page 18: UX Design + UI Design: Injecting a brand persona!

home is changing... it is already here...

SELF LEARNING APPLIANCES

Page 19: UX Design + UI Design: Injecting a brand persona!

Elements of UX

Page 20: UX Design + UI Design: Injecting a brand persona!

http://experoinc.com/user-experience-is-not-graphic-design/

THE SURFACE - Visual Design / UI

THE SKELETON - Wire-frame, Interaction patterns, Global navigation ...

THE STRUCTURE - Information architecture, Defining content ...

THE SCOPE - Functionality, Usefulness, Requirements ...

THE STRATEGY - Business requirements, Defining user Needs, Goals and Aspirations ...

Page 21: UX Design + UI Design: Injecting a brand persona!

Behind the scene

Page 22: UX Design + UI Design: Injecting a brand persona!

ask... until you know it allBRIEFING

Page 23: UX Design + UI Design: Injecting a brand persona!

create hierarchy and flow...CONTENT ARCHITECTURE

Page 24: UX Design + UI Design: Injecting a brand persona!

make a plan...WIREFRAMING

Page 25: UX Design + UI Design: Injecting a brand persona!

it is fun and show the flawsPROTOTYPING

Page 26: UX Design + UI Design: Injecting a brand persona!

final packaging...USER INTERFACE DESIGN

Page 27: UX Design + UI Design: Injecting a brand persona!

test... test... test..USER TESTING & FINE TUNING

Page 28: UX Design + UI Design: Injecting a brand persona!

know the facts...ANALYTICS REPORTS

Page 29: UX Design + UI Design: Injecting a brand persona!

WinningSEO & UX fight!!

optimization

engine

search

Page 30: UX Design + UI Design: Injecting a brand persona!

Having a website that lacks customer is like having

no website, design and behavior of website are need

must if you want sale more, SEO is way to bring visitor

on website but they leave it if your website

not hold them

Page 31: UX Design + UI Design: Injecting a brand persona!

UI Design

Page 32: UX Design + UI Design: Injecting a brand persona!

User Interface Design (UID) is a process of visually

guiding the user through a product’s interface via

interactive elements and across all sizes/platforms.

UID is responsible for the transference of a brand’s

strengths and visual assets to a product’s interface as

to best enhance the user’s experience

Page 33: UX Design + UI Design: Injecting a brand persona!

good UX & bad UIGOOD & BAD #1

Page 34: UX Design + UI Design: Injecting a brand persona!

good UX & bad UIGOOD & BAD #2

Page 35: UX Design + UI Design: Injecting a brand persona!

good UI & bad UXGOOD & BAD #3

Page 36: UX Design + UI Design: Injecting a brand persona!

good UI & bad UXGOOD & BAD #4

Page 37: UX Design + UI Design: Injecting a brand persona!

Busting UI Myths

Page 38: UX Design + UI Design: Injecting a brand persona!

MYTH #1

UI = Decoration

Page 39: UX Design + UI Design: Injecting a brand persona!

MYTH #2

everything has to be above the fold

Page 40: UX Design + UI Design: Injecting a brand persona!

MYTH #3

three clicks from the homepage

Page 41: UX Design + UI Design: Injecting a brand persona!

MYTH #4

homepage is the most important page

Page 42: UX Design + UI Design: Injecting a brand persona!

MYTH #5

what ever not moving is dead.

Page 43: UX Design + UI Design: Injecting a brand persona!

New age design Trends & Disciplines

Page 44: UX Design + UI Design: Injecting a brand persona!

MOBILE FIRST APPROACH

where people consume content

Page 45: UX Design + UI Design: Injecting a brand persona!

METRO DESIGN

revolution starts @ Microsoft interface

Page 46: UX Design + UI Design: Injecting a brand persona!

MATERIAL DESIGN

google is every where

Page 47: UX Design + UI Design: Injecting a brand persona!

MINIMALISM & FLAT VS SKEUOMORPHIC

fashion circles... may be :)

Page 48: UX Design + UI Design: Injecting a brand persona!

NEW VISUAL TRENDS

big Typo - big Visuals - big on social sharing

Page 49: UX Design + UI Design: Injecting a brand persona!

CONTINUES...

1 right visual can say it all!

Page 50: UX Design + UI Design: Injecting a brand persona!

RESPONSIVE DESIGN

design for every device - HTML 5

Page 51: UX Design + UI Design: Injecting a brand persona!

INTERACTIVE VIDEOS

loading techs, story telling, annotations...

Page 52: UX Design + UI Design: Injecting a brand persona!

RESPONSIVE INFOGRAPHICS

1 pic = 1000 words. interactive pic = much more

Page 53: UX Design + UI Design: Injecting a brand persona!

STORYTELLING PARALLAX

fun of discovering and exploring

Page 54: UX Design + UI Design: Injecting a brand persona!

UX & UI: Injecting a Brand Persona!

Page 55: UX Design + UI Design: Injecting a brand persona!

The micro interactions, or moments of delight - Micro copies

Usage of colours - Create a mood board

Typography - Making a character

Interactive animations & Transitions - Intuitive & make it alive

Visual elements - Communicate the idea

The usability - Focused

The content strategy touchpoints - Notifications, social media presence

Page 56: UX Design + UI Design: Injecting a brand persona!

Thank you!Jayan Narayanan

[email protected]