SlideShare a Scribd company logo
1 of 60
Download to read offline
Injecting a brand personality!
UX & UI
JAYAN
NARAYANAN
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!
UX
Myths
SEO
UXD
Fight
Brand
&
Branding
Injecting
attitude
UX Design
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
Content
UI Design
Usability
User Interaction Design
in a broad way...
User
Experience
Design (UX)
Busting UX Myths
MYTH #1
UX=UIUser InterfaceUser Experiance
MYTH #2
You = Your user
MYTH #3
User always know what they want
MYTH #4
UXendswhenuserleavewebsite/screen
MYTH #5
UX best practices always works!
MYTH #6
UX Guru knows all!
MYTH #7
Knowbody know it!!!!!
World is changing...
User too...
Human computer interaction: surface and
gesture interfaces
2D SENSING โ€“ SURFACES
3D Depth sensing, Face and body tracking solutions
3D SENSING โ€“ GESTURES
home is changed...
SELF LEARNING APPLIANCES
life style is changing...
WEARABLE COMPUTING
Elements of UX
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 ...
Behind the scene
ask... until you know it all
BRIEFING
create hierarchy and flow...
CONTENT ARCHITECTURE
make a plan...
WIREFRAMING
it shows all the interaction flaws
PROTOTYPING
look & feel - front-end design
USER INTERFACE DESIGN
user centered testing over gut feel
USER TESTING & FINE TUNING
finding patterns in facts & figures
ANALYTICS REPORTS
Winning a
SEO & UX fight!!
optimization
engine
search
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
UI Design
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
merging similar functions instead of
fragmenting the UI
Over the course of time, itโ€™s easy to unintentionally create multiple sections, elements
and features which all perform the same function. Itโ€™s basic entropy - things start falling
apart over time. Duplicate functionality labelled in various ways, as it puts a strain on your
customers. Often, the more UI fragmentation there is, the higher the learning curve which
your customers will have to deal with.
UI IDEAS #1
UI IDEAS #2
distinct clickable/selected styles
instead of blurring them
Visual styling such as color, depth, and contrast may be used as a reliable cue to help people
understand the fundamental language of navigating your interface: where am I, and where
can I go. In order to communicate this clearly to your users, the styles of your clickable
actions (links, buttons), selected elements (chosen items), and plain text should be clearly
distinct from one another and then applied consistently across an interface.
UI IDEAS #3
fewer form fields instead of
asking for too many
Human beings are inherently resistant to labor intensive tasks and this same idea also applies
to filling out form fields. Each field you ask for runs the risk of making your visitors turn
around and give up. Question if each field is really necessary and remove as many fields as
possible. If you really have numerous optional fields, then also consider moving them after
form submission on a separate page or state.
UI IDEAS #4
keeping focus instead of
drowning with links
Itโ€™s easy to create a page with lots of links going left and right in the hope of meeting as many
customer needs as possible. Be aware that any link above the primary CTA runs the risk of
taking your customers away from what youโ€™ve been hoping them to do. Keep an eye out on the
number of links on your pages as too much links affects SEO badly. Removing extraneous links
can be a sure way to increase someoneโ€™s chances of reaching that important button.
UI IDEAS #5
benefit buttons instead of just task
based ones.
The hypothesis set here is that buttons which reinforce a benefit might lead to higher
conversions. Alternatively, the benefit can also be placed closely to where the action button
is in order to remind people why they are about to take that action. Surely, there is still room
for task based actions buttons, but those can be reserved for interface areas that require less
convincing and are more recurring in use.
UI IDEAS #6
gradual engagement instead of a
hasty sign up.
Instead of asking visitors to sign up immediately, ask them to first perform a task through which
something of value is demonstrated. Once users begin to see your productโ€™s value and see how they
can make it their own, they will then be more open to sharing with you additional information. Gradual
engagement is really a way to postpone the sign up process as much as possible and still allow users
to use and customize your application or product.
UI IDEAS #7
consistency instead of making
people relearn.
Striving for consistency in user interface design is probably one of the most well known
principles. Having a more consistent UI or interaction is simply a great way to decrease the
amount of learning someone has to go through as they use an interface or product.
Busting UI Myths
MYTH #1
UI=Decoration
MYTH #2
everything has to be above the fold -
put maximum above 600 pixels!
MYTH #3
three clicks from the homepage -
shortcuts always works!
MYTH #4
homepage is the most important page -
users come to home directly!
MYTH #5
on a web page what ever not moving is
dead - auto movements are good!
New age design
Trends & Disciplines
MOBILE FIRST APPROACH
start the design from small screen
METRO DESIGN
revolution @ Microsoft interface
MATERIAL DESIGN
Google making own interaction standards
MINIMALISM & FLAT VS SKEUOMORPHIC
fashion circles... may be :)
NEW VISUAL TRENDS
big on typo...
CONTINUES...
big on visuals...
CONTINUES...
big on social icons...
RESPONSIVE DESIGN
design for every device - HTML 5
INTERACTIVE VIDEOS
loading techs, story telling, annotations...
RESPONSIVE INFOGRAPHICS
1 pic = 1000 words. interactive pic = much more
STORYTELLING PARALLAX
fun of discovering and exploring
UX & UI: 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
Thank you!
Jayan Narayanan
jayan.narayanan@gmail.com

More Related Content

What's hot

UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini CourseDigital Snack
ย 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
ย 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
ย 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
ย 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
ย 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
ย 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
ย 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI IntroductionShrutee Aneja
ย 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX designMaksym Babych
ย 
What is UX design?
What is UX design? What is UX design?
What is UX design? Kristen Hardy
ย 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
ย 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
ย 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
ย 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
ย 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
ย 

What's hot (20)

UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
ย 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
ย 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
ย 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
ย 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
ย 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
ย 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
ย 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
ย 
What is UX?
What is UX?What is UX?
What is UX?
ย 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
ย 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
ย 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
ย 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
ย 
What is UX design?
What is UX design? What is UX design?
What is UX design?
ย 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
ย 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
ย 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
ย 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
ย 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
ย 
UX and UI
UX and UIUX and UI
UX and UI
ย 

Viewers also liked

UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths Evan Samek
ย 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
ย 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Patrick McNeil
ย 
The Future of UX: Designing Data Experiences
The Future of UX: Designing Data ExperiencesThe Future of UX: Designing Data Experiences
The Future of UX: Designing Data ExperiencesEva Willis
ย 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX DesignChristina Wodtke
ย 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
ย 
Making UX Matter to Your Company
Making UX Matter to Your CompanyMaking UX Matter to Your Company
Making UX Matter to Your CompanyWendy Johansson
ย 
A (Brief) History of User Experience
A (Brief) History of User ExperienceA (Brief) History of User Experience
A (Brief) History of User ExperienceChris Pallรฉ
ย 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The WorldBuiltByHQ
ย 
Mastering Google Adwords In 30 Minutes
Mastering Google Adwords In 30 MinutesMastering Google Adwords In 30 Minutes
Mastering Google Adwords In 30 MinutesNik Cree
ย 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overviewJenni Leder
ย 
Using Your Growth Model to Drive Smarter High Tempo Testing
Using Your Growth Model to Drive Smarter High Tempo TestingUsing Your Growth Model to Drive Smarter High Tempo Testing
Using Your Growth Model to Drive Smarter High Tempo TestingSean Ellis
ย 
Lean Community Building: Getting the Most Bang for Your Time & Money
Lean Community Building: Getting the Most Bang for  Your Time & MoneyLean Community Building: Getting the Most Bang for  Your Time & Money
Lean Community Building: Getting the Most Bang for Your Time & MoneyJennifer Lopez
ย 
Stop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Stop Leaving Money on the Table! Optimizing your Site for Users and RevenueStop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Stop Leaving Money on the Table! Optimizing your Site for Users and RevenueJosh Patrice
ย 
User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.John Whalen
ย 
10 Ways You're Using AdWords Wrong and How to Correct Those Practices
10 Ways You're Using AdWords Wrong and How to Correct Those Practices 10 Ways You're Using AdWords Wrong and How to Correct Those Practices
10 Ways You're Using AdWords Wrong and How to Correct Those Practices Kissmetrics on SlideShare
ย 
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...GeekWire
ย 
How to: Viral Marketing + Brand Storytelling
How to: Viral Marketing + Brand Storytelling How to: Viral Marketing + Brand Storytelling
How to: Viral Marketing + Brand Storytelling Elle Shelley
ย 
LinkedIn Ads Platform Master Class
LinkedIn Ads Platform Master ClassLinkedIn Ads Platform Master Class
LinkedIn Ads Platform Master ClassLinkedIn
ย 
The Beginners Guide to Startup PR #startuppr
The Beginners Guide to Startup PR #startupprThe Beginners Guide to Startup PR #startuppr
The Beginners Guide to Startup PR #startupprOnboardly
ย 

Viewers also liked (20)

UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
ย 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
ย 
Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014Practical UX Methods - as presented at FOWD 2014
Practical UX Methods - as presented at FOWD 2014
ย 
The Future of UX: Designing Data Experiences
The Future of UX: Designing Data ExperiencesThe Future of UX: Designing Data Experiences
The Future of UX: Designing Data Experiences
ย 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
ย 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
ย 
Making UX Matter to Your Company
Making UX Matter to Your CompanyMaking UX Matter to Your Company
Making UX Matter to Your Company
ย 
A (Brief) History of User Experience
A (Brief) History of User ExperienceA (Brief) History of User Experience
A (Brief) History of User Experience
ย 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
ย 
Mastering Google Adwords In 30 Minutes
Mastering Google Adwords In 30 MinutesMastering Google Adwords In 30 Minutes
Mastering Google Adwords In 30 Minutes
ย 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
ย 
Using Your Growth Model to Drive Smarter High Tempo Testing
Using Your Growth Model to Drive Smarter High Tempo TestingUsing Your Growth Model to Drive Smarter High Tempo Testing
Using Your Growth Model to Drive Smarter High Tempo Testing
ย 
Lean Community Building: Getting the Most Bang for Your Time & Money
Lean Community Building: Getting the Most Bang for  Your Time & MoneyLean Community Building: Getting the Most Bang for  Your Time & Money
Lean Community Building: Getting the Most Bang for Your Time & Money
ย 
Stop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Stop Leaving Money on the Table! Optimizing your Site for Users and RevenueStop Leaving Money on the Table! Optimizing your Site for Users and Revenue
Stop Leaving Money on the Table! Optimizing your Site for Users and Revenue
ย 
User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.User experience doesn't happen on a screen: It happens in the mind.
User experience doesn't happen on a screen: It happens in the mind.
ย 
10 Ways You're Using AdWords Wrong and How to Correct Those Practices
10 Ways You're Using AdWords Wrong and How to Correct Those Practices 10 Ways You're Using AdWords Wrong and How to Correct Those Practices
10 Ways You're Using AdWords Wrong and How to Correct Those Practices
ย 
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...
Brenda Spoonemore - A biz dev playbook for startups: Why, when and how to do ...
ย 
How to: Viral Marketing + Brand Storytelling
How to: Viral Marketing + Brand Storytelling How to: Viral Marketing + Brand Storytelling
How to: Viral Marketing + Brand Storytelling
ย 
LinkedIn Ads Platform Master Class
LinkedIn Ads Platform Master ClassLinkedIn Ads Platform Master Class
LinkedIn Ads Platform Master Class
ย 
The Beginners Guide to Startup PR #startuppr
The Beginners Guide to Startup PR #startupprThe Beginners Guide to Startup PR #startuppr
The Beginners Guide to Startup PR #startuppr
ย 

Similar to UX Design + UI Design: Injecting a brand persona!

The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...Inexture Solutions
ย 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdfAyesha Siddika
ย 
UI vs. UX: Whatโ€™s the difference?
UI vs. UX: Whatโ€™s the difference?UI vs. UX: Whatโ€™s the difference?
UI vs. UX: Whatโ€™s the difference?DariaPersell
ย 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designerstopseowebmaster
ย 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate DemandWorxwideConsulting1
ย 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdftopseowebmaster
ย 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
ย 
The Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformThe Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformCuneiform Consulting Pvt Ltd.
ย 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWilliamJames717223
ย 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & uiShishir Gupta
ย 
Design Best Practices - TechAhead Corp
Design Best Practices  -  TechAhead CorpDesign Best Practices  -  TechAhead Corp
Design Best Practices - TechAhead CorpTechAhead Corp
ย 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Kelly Ston
ย 
UI Development Content
UI Development ContentUI Development Content
UI Development ContentMUDDUKRISHNA14
ย 
UI Development Content
UI Development ContentUI Development Content
UI Development ContentMUDDUKRISHNA14
ย 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016Halil Eren ร‡elik
ย 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?NotifyVisitors
ย 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusAshu Pal
ย 

Similar to UX Design + UI Design: Injecting a brand persona! (20)

UI.docx
UI.docxUI.docx
UI.docx
ย 
UI.docx
UI.docxUI.docx
UI.docx
ย 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
ย 
Web UI Design Examples.pdf
Web UI Design Examples.pdfWeb UI Design Examples.pdf
Web UI Design Examples.pdf
ย 
UI vs. UX: Whatโ€™s the difference?
UI vs. UX: Whatโ€™s the difference?UI vs. UX: Whatโ€™s the difference?
UI vs. UX: Whatโ€™s the difference?
ย 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
ย 
How Can UX Design Generate Demand
How Can UX Design Generate DemandHow Can UX Design Generate Demand
How Can UX Design Generate Demand
ย 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
ย 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
ย 
The Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformThe Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - Cuneiform
ย 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docx
ย 
Xovex e book, ux & ui
Xovex e book, ux & uiXovex e book, ux & ui
Xovex e book, ux & ui
ย 
Design Best Practices - TechAhead Corp
Design Best Practices  -  TechAhead CorpDesign Best Practices  -  TechAhead Corp
Design Best Practices - TechAhead Corp
ย 
Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021Ui ux design trends that will dominate in 2021
Ui ux design trends that will dominate in 2021
ย 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
ย 
UI Development Content
UI Development ContentUI Development Content
UI Development Content
ย 
interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016interaction design trends 2015 _ 2016
interaction design trends 2015 _ 2016
ย 
Why Does a UI Matters?
Why Does a UI Matters?Why Does a UI Matters?
Why Does a UI Matters?
ย 
UI content
UI contentUI content
UI content
ย 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma Campus
ย 

Recently uploaded

Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
ย 
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun service
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun serviceCALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun service
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun serviceanilsa9823
ย 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
ย 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
ย 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
ย 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
ย 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756dollysharma2066
ย 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile
ย 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Delhi Call girls
ย 
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...Delhi Call girls
ย 
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)amitlee9823
ย 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
ย 
Top Rated Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...Call Girls in Nagpur High Profile
ย 
call girls in Dakshinpuri (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ
call girls in Dakshinpuri  (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธcall girls in Dakshinpuri  (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ
call girls in Dakshinpuri (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ9953056974 Low Rate Call Girls In Saket, Delhi NCR
ย 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
ย 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxsuhanimunjal27
ย 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
ย 
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptxsuhanimunjal27
ย 

Recently uploaded (20)

Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
ย 
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun service
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun serviceCALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun service
CALL ON โžฅ8923113531 ๐Ÿ”Call Girls Aminabad Lucknow best Night Fun service
ย 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
ย 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
ย 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
ย 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
ย 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
ย 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
ย 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
ย 
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...
call girls in Vasundhra (Ghaziabad) ๐Ÿ” >เผ’8448380779 ๐Ÿ” genuine Escort Service ๐Ÿ”...
ย 
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)
Escorts Service Basapura โ˜Ž 7737669865โ˜Ž Book Your One night Stand (Bangalore)
ย 
young call girls in Pandav nagar ๐Ÿ” 9953056974 ๐Ÿ” Delhi escort Service
young call girls in Pandav nagar ๐Ÿ” 9953056974 ๐Ÿ” Delhi escort Serviceyoung call girls in Pandav nagar ๐Ÿ” 9953056974 ๐Ÿ” Delhi escort Service
young call girls in Pandav nagar ๐Ÿ” 9953056974 ๐Ÿ” Delhi escort Service
ย 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
ย 
Top Rated Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park โŸŸ 6297143586 โŸŸ Call Me For Genuine S...
ย 
call girls in Dakshinpuri (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ
call girls in Dakshinpuri  (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธcall girls in Dakshinpuri  (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ
call girls in Dakshinpuri (DELHI) ๐Ÿ” >เผ’9953056974 ๐Ÿ” genuine Escort Service ๐Ÿ”โœ”๏ธโœ”๏ธ
ย 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
ย 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
ย 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
ย 
2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx2-tool presenthdbdbdbdbddhdhddation.pptx
2-tool presenthdbdbdbdbddhdhddation.pptx
ย 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
ย 

UX Design + UI Design: Injecting a brand persona!

  • 1. Injecting a brand personality! UX & UI JAYAN NARAYANAN
  • 2. 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! UX Myths SEO UXD Fight Brand & Branding Injecting attitude
  • 4. 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
  • 5. Content UI Design Usability User Interaction Design in a broad way... User Experience Design (UX)
  • 8. MYTH #2 You = Your user
  • 9. MYTH #3 User always know what they want
  • 11. MYTH #5 UX best practices always works!
  • 12. MYTH #6 UX Guru knows all!
  • 15. Human computer interaction: surface and gesture interfaces 2D SENSING โ€“ SURFACES
  • 16. 3D Depth sensing, Face and body tracking solutions 3D SENSING โ€“ GESTURES
  • 17. home is changed... SELF LEARNING APPLIANCES
  • 18. life style is changing... WEARABLE COMPUTING
  • 20. 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 ...
  • 22. ask... until you know it all BRIEFING
  • 23. create hierarchy and flow... CONTENT ARCHITECTURE
  • 25. it shows all the interaction flaws PROTOTYPING
  • 26. look & feel - front-end design USER INTERFACE DESIGN
  • 27. user centered testing over gut feel USER TESTING & FINE TUNING
  • 28. finding patterns in facts & figures ANALYTICS REPORTS
  • 29. Winning a SEO & UX fight!! optimization engine search
  • 30. 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
  • 32. 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
  • 33. merging similar functions instead of fragmenting the UI Over the course of time, itโ€™s easy to unintentionally create multiple sections, elements and features which all perform the same function. Itโ€™s basic entropy - things start falling apart over time. Duplicate functionality labelled in various ways, as it puts a strain on your customers. Often, the more UI fragmentation there is, the higher the learning curve which your customers will have to deal with. UI IDEAS #1
  • 34. UI IDEAS #2 distinct clickable/selected styles instead of blurring them Visual styling such as color, depth, and contrast may be used as a reliable cue to help people understand the fundamental language of navigating your interface: where am I, and where can I go. In order to communicate this clearly to your users, the styles of your clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another and then applied consistently across an interface.
  • 35. UI IDEAS #3 fewer form fields instead of asking for too many Human beings are inherently resistant to labor intensive tasks and this same idea also applies to filling out form fields. Each field you ask for runs the risk of making your visitors turn around and give up. Question if each field is really necessary and remove as many fields as possible. If you really have numerous optional fields, then also consider moving them after form submission on a separate page or state.
  • 36. UI IDEAS #4 keeping focus instead of drowning with links Itโ€™s easy to create a page with lots of links going left and right in the hope of meeting as many customer needs as possible. Be aware that any link above the primary CTA runs the risk of taking your customers away from what youโ€™ve been hoping them to do. Keep an eye out on the number of links on your pages as too much links affects SEO badly. Removing extraneous links can be a sure way to increase someoneโ€™s chances of reaching that important button.
  • 37. UI IDEAS #5 benefit buttons instead of just task based ones. The hypothesis set here is that buttons which reinforce a benefit might lead to higher conversions. Alternatively, the benefit can also be placed closely to where the action button is in order to remind people why they are about to take that action. Surely, there is still room for task based actions buttons, but those can be reserved for interface areas that require less convincing and are more recurring in use.
  • 38. UI IDEAS #6 gradual engagement instead of a hasty sign up. Instead of asking visitors to sign up immediately, ask them to first perform a task through which something of value is demonstrated. Once users begin to see your productโ€™s value and see how they can make it their own, they will then be more open to sharing with you additional information. Gradual engagement is really a way to postpone the sign up process as much as possible and still allow users to use and customize your application or product.
  • 39. UI IDEAS #7 consistency instead of making people relearn. Striving for consistency in user interface design is probably one of the most well known principles. Having a more consistent UI or interaction is simply a great way to decrease the amount of learning someone has to go through as they use an interface or product.
  • 42. MYTH #2 everything has to be above the fold - put maximum above 600 pixels!
  • 43. MYTH #3 three clicks from the homepage - shortcuts always works!
  • 44. MYTH #4 homepage is the most important page - users come to home directly!
  • 45. MYTH #5 on a web page what ever not moving is dead - auto movements are good!
  • 46. New age design Trends & Disciplines
  • 47. MOBILE FIRST APPROACH start the design from small screen
  • 48. METRO DESIGN revolution @ Microsoft interface
  • 49. MATERIAL DESIGN Google making own interaction standards
  • 50. MINIMALISM & FLAT VS SKEUOMORPHIC fashion circles... may be :)
  • 51. NEW VISUAL TRENDS big on typo...
  • 54. RESPONSIVE DESIGN design for every device - HTML 5
  • 55. INTERACTIVE VIDEOS loading techs, story telling, annotations...
  • 56. RESPONSIVE INFOGRAPHICS 1 pic = 1000 words. interactive pic = much more
  • 57. STORYTELLING PARALLAX fun of discovering and exploring
  • 58. UX & UI: Injecting a Brand Persona!
  • 59. 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