Brand Identity in UI/UX Design

Adryan Putra
Adryan PutraDesigning Experience at Tanoto Foundation
in UI/UX Design
Brand
Identity
Adryan Putra
21 October 2015
Creative Associate
Tanoto Foundation
MY SPECIALTIES
// Brand Identity
// UX+UI Design
// Publication
// Wayfinding EGD
2015
2014
2012
2011
2010
Art Director
Growmint Digital Agency
UX+UI Designer
The Jakarta Post Digital
Branding Designer
a design kitchen (cocinero)
Branding Designer
ibrand
adryanputra88@gmail.com
Adryan Putra
@Ree_4n
adryanputra.blogspot.com
behance.net/adryanputra
About me
Sample Works
Sample Works
About
Brand Identity
About
UI/UX
Brand identity is tangible and
appeals to the senses. You can
see it, touch it, hold it, hear it,
watch it move. Brand Identity
takes disparate elements and
unifies them into whole systems.
Alina Wheeler
Consistency is one of the most
powerful usability principles:
when things always behave the
same, users don’t have to worry
about what will happen. Instead,
they know what will happen
based on earlier experience.
Jakob Nielsen
Branding & UI/UX Relationship
User-centered focus
Branding & UI/UX Relationship
They need to be explored & iterated
Brand Identity Elements in UI/UX
1. Color 2. Typeface
Abc
3. Graphic Element
4. Imagery 5. Copywriting 6. Animation
Color
Typeface
Graphic Element
Imagery
Copywriting
Animation
Brand Designer’s Perspective
I’m going to see if they
implement the Identity
the right way, not like
the last horrible one.
Web/App Designer’s Perspective
Wait, a hundred rules
just to use their logo &
color... they must be
joking to me...
Problems at Hand
1. The Brand Guidelines:
- Confusing
- Complicated
- Restrictive
- Outdated
2. Web/App Designer:
- Too occupied
- Not paying attention
- Have their ‘own’ judgement
If We Look Closer
Accuracy Flexibility
Consistency
BrandOw
ner
Designer
Developer
1. Brand Visibility
2. Product Usability
Viable Solutions
1. Brand Designer:
- Get to know UI/UX Principles or Best Practices
- Create usability-oriented Brand Guidelines
2. Web/App Designer:
- Learn Brand Identity Basic Principles
- Put more effort in learning Brand Guidelines
Brand Guidelines Principles
1. Keep It Simple:
- Focus on most important things
- Get rid of unnecessary elements
2. Good Navigation
- Chapters, page numbers
- Content grouping
3. Comprehensive
- Easy-to-digest content
- Clear instructions
Good Brand Guidelines
Good Brand Guidelines
Good Brand Guidelines
Avoid Dated Design Trends
Wait, what is this?
Seriously?
This Looks Better
Consistency Across Products
Consistency Across Platforms
1 Color Brand?
Zoning / Brand Architecture Partition
Recommended Books
Find Related Books: www.yasiv.com
Thank you!
Now let’s discuss
1 of 34

Recommended

UI & UX Design for Startups by
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
12.2K views49 slides
Ux is not UI by
Ux is not UIUx is not UI
Ux is not UIBruno Mendes
19.6K views23 slides
UI / UX Design Processes by
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
501 views50 slides
UI and UX Design for Startups - Matin Maleki by
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
2.3K views45 slides
What is UI/UX and the Difference by
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
2.4K views8 slides
UI vs UX workshop by
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
2.3K views16 slides

More Related Content

What's hot

UI UX in depth by
UI UX in depthUI UX in depth
UI UX in depthShrestha Raaz
1K views11 slides
UX & UI Design - Differentiate through design by
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
54.8K views33 slides
Ui vs UX design by
Ui vs UX designUi vs UX design
Ui vs UX designMaksym Babych
2.3K views27 slides
Ux & ui by
Ux & uiUx & ui
Ux & uiFisher Liao
473 views9 slides
Simple Steps to UX/UI Web Design by
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
441.3K views31 slides
i/o extended: Intro to <UX> Design by
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
1.6K views58 slides

What's hot(20)

UX & UI Design - Differentiate through design by DMI
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI54.8K views
Simple Steps to UX/UI Web Design by Koombea
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea441.3K views
UX Lesson 1: User Centered Design by Joan Lumanauw
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw23.1K views
UI vs UX ( User Interface vs User Experience) by Sonali Pawar
UI vs UX ( User Interface vs User Experience)UI vs UX ( User Interface vs User Experience)
UI vs UX ( User Interface vs User Experience)
Sonali Pawar264 views
A UI and UX training presentation by aayush_jain_87
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
aayush_jain_873.1K views
UX/UI design process - Studio CreativeMe by Madhuri Garg
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg2.3K views
What’s the difference between a UX and UI designer? (Part two) by iFactory Digital
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital864 views

Viewers also liked

Emotion Design - Brand & UI by
Emotion Design - Brand & UIEmotion Design - Brand & UI
Emotion Design - Brand & UIThomas Fogarasy
3.3K views33 slides
UX UI - Principles and Best Practices 2014-2015 by
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015Harsh Wardhan Dave
32.2K views109 slides
UX Design And The Mind (UX Design + Persuasion) by
UX  Design And The  Mind (UX Design + Persuasion)UX  Design And The  Mind (UX Design + Persuasion)
UX Design And The Mind (UX Design + Persuasion)Robert Neal
6.8K views50 slides
How To Design a Brand Identity by
How To Design a Brand IdentityHow To Design a Brand Identity
How To Design a Brand IdentityCreative Market
6.9K views25 slides
Branding & Brand Identity for Business: A Foundation for Success by
Branding & Brand Identity for Business: A Foundation for SuccessBranding & Brand Identity for Business: A Foundation for Success
Branding & Brand Identity for Business: A Foundation for SuccessValentino Sanna
1.3K views52 slides
Towards a positioning by
Towards a positioningTowards a positioning
Towards a positioningGreg Dillon
1.4K views1 slide

Viewers also liked(20)

UX UI - Principles and Best Practices 2014-2015 by Harsh Wardhan Dave
UX UI - Principles and Best Practices 2014-2015UX UI - Principles and Best Practices 2014-2015
UX UI - Principles and Best Practices 2014-2015
Harsh Wardhan Dave32.2K views
UX Design And The Mind (UX Design + Persuasion) by Robert Neal
UX  Design And The  Mind (UX Design + Persuasion)UX  Design And The  Mind (UX Design + Persuasion)
UX Design And The Mind (UX Design + Persuasion)
Robert Neal6.8K views
How To Design a Brand Identity by Creative Market
How To Design a Brand IdentityHow To Design a Brand Identity
How To Design a Brand Identity
Creative Market6.9K views
Branding & Brand Identity for Business: A Foundation for Success by Valentino Sanna
Branding & Brand Identity for Business: A Foundation for SuccessBranding & Brand Identity for Business: A Foundation for Success
Branding & Brand Identity for Business: A Foundation for Success
Valentino Sanna1.3K views
Towards a positioning by Greg Dillon
Towards a positioningTowards a positioning
Towards a positioning
Greg Dillon1.4K views
PHILIPS (Brand Identity Guide. v. 03/2008) by Paco Barranco
PHILIPS (Brand Identity Guide. v. 03/2008)PHILIPS (Brand Identity Guide. v. 03/2008)
PHILIPS (Brand Identity Guide. v. 03/2008)
Paco Barranco28.5K views
A (Brief) History of User Experience by Chris Pallé
A (Brief) History of User ExperienceA (Brief) History of User Experience
A (Brief) History of User Experience
Chris Pallé20.5K views
Ui ux designing principles by Dzung Nguyen
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
Dzung Nguyen23.6K views
What is UX? by David Carr
What is UX?What is UX?
What is UX?
David Carr165.2K views
UX Best Practices by Theresa Neil
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil25.7K views
UX Design + UI Design: Injecting a brand persona! by Jayan Narayanan
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan319.7K views
Business Guide to Branding (Is your brand identity working as hard as you are?) by Andy Fuller
Business Guide to Branding (Is your brand identity working as hard as you are?)Business Guide to Branding (Is your brand identity working as hard as you are?)
Business Guide to Branding (Is your brand identity working as hard as you are?)
Andy Fuller846 views
Understanding Design and Brand Communication Workshop Content - Design Camp I... by RIA RUI Society
Understanding Design and Brand Communication Workshop Content - Design Camp I...Understanding Design and Brand Communication Workshop Content - Design Camp I...
Understanding Design and Brand Communication Workshop Content - Design Camp I...
RIA RUI Society1K views
Newark Office of Film + Television Brand Manual & Guide by Igor Alves
Newark Office of Film + Television Brand Manual & GuideNewark Office of Film + Television Brand Manual & Guide
Newark Office of Film + Television Brand Manual & Guide
Igor Alves1.7K views
Brand talk ( your social evolution of brands ) - Peter Quinn by Peter Quinn
Brand talk ( your social evolution of brands ) - Peter QuinnBrand talk ( your social evolution of brands ) - Peter Quinn
Brand talk ( your social evolution of brands ) - Peter Quinn
Peter Quinn517 views

Similar to Brand Identity in UI/UX Design

Product Design Process at Sorabel by
Product Design Process at SorabelProduct Design Process at Sorabel
Product Design Process at SorabelRayi Christian Wicaksono
507 views32 slides
Design thinking to create user centered products by
Design thinking to create user centered productsDesign thinking to create user centered products
Design thinking to create user centered productsBrian Okinyi
51 views135 slides
Best Practices for a Great User Experience by
Best Practices for a Great User ExperienceBest Practices for a Great User Experience
Best Practices for a Great User ExperienceUser Experience Labs
401 views65 slides
User Experience Masterclass 101 with Mark Swaine by
User Experience Masterclass 101 with Mark SwaineUser Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark SwaineMark N Swaine
1K views32 slides
Online usability for conversion marketing by
Online usability for conversion marketingOnline usability for conversion marketing
Online usability for conversion marketingniklabrik
413 views25 slides
Collaborative Product Design by
Collaborative Product DesignCollaborative Product Design
Collaborative Product DesignAnh Doan Quoc
302 views23 slides

Similar to Brand Identity in UI/UX Design(20)

Design thinking to create user centered products by Brian Okinyi
Design thinking to create user centered productsDesign thinking to create user centered products
Design thinking to create user centered products
Brian Okinyi51 views
User Experience Masterclass 101 with Mark Swaine by Mark N Swaine
User Experience Masterclass 101 with Mark SwaineUser Experience Masterclass 101 with Mark Swaine
User Experience Masterclass 101 with Mark Swaine
Mark N Swaine1K views
Online usability for conversion marketing by niklabrik
Online usability for conversion marketingOnline usability for conversion marketing
Online usability for conversion marketing
niklabrik413 views
Collaborative Product Design by Anh Doan Quoc
Collaborative Product DesignCollaborative Product Design
Collaborative Product Design
Anh Doan Quoc302 views
1. Design - Intro UIUX Design.pdf by JejeCans
1. Design - Intro UIUX Design.pdf1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf
JejeCans809 views
Demystifying industry expectations job title-ui-ux designer by SV.CO
Demystifying industry expectations  job title-ui-ux designerDemystifying industry expectations  job title-ui-ux designer
Demystifying industry expectations job title-ui-ux designer
SV.CO694 views
Impact of Visual Design on UX by Mayank Ranjan
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
Mayank Ranjan187 views
Business Decisions Done Right: Through the Four Elements of User Experience by Frank Guo
Business Decisions Done Right: Through the Four Elements of User ExperienceBusiness Decisions Done Right: Through the Four Elements of User Experience
Business Decisions Done Right: Through the Four Elements of User Experience
Frank Guo1.3K views
Working better together designers &amp; developers by Vitali Pekelis
Working better together   designers &amp; developersWorking better together   designers &amp; developers
Working better together designers &amp; developers
Vitali Pekelis173 views
Why Content Professionals and Designers should be best buddies. And how to he... by claraguasch
Why Content Professionals and Designers should be best buddies. And how to he...Why Content Professionals and Designers should be best buddies. And how to he...
Why Content Professionals and Designers should be best buddies. And how to he...
claraguasch973 views
Class 2: Setting the foundation for a successful website design by Don Stanley
Class 2: Setting the foundation for a successful website designClass 2: Setting the foundation for a successful website design
Class 2: Setting the foundation for a successful website design
Don Stanley1.2K views
Ui is Communication: How to design intuitive, user-centered interfaces by foc... by Everett McKay
Ui is Communication: How to design intuitive, user-centered interfaces by foc...Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Ui is Communication: How to design intuitive, user-centered interfaces by foc...
Everett McKay18.1K views
Designing With Usability In Mind by CenergyDave
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
CenergyDave10.7K views
How to Build a Kickass UX For Your Product by Andy Milsom
How to Build a Kickass UX For Your ProductHow to Build a Kickass UX For Your Product
How to Build a Kickass UX For Your Product
Andy Milsom96 views
Selling UX (IXDA Shanghai 2009) by Daniel Szuc
Selling UX (IXDA Shanghai 2009)Selling UX (IXDA Shanghai 2009)
Selling UX (IXDA Shanghai 2009)
Daniel Szuc1K views
Difference Between Uxi And Ux by Connie Ripp
Difference Between Uxi And UxDifference Between Uxi And Ux
Difference Between Uxi And Ux
Connie Ripp3 views
UI/UX: Distinction and Trends by Ankur Sharma
UI/UX: Distinction and TrendsUI/UX: Distinction and Trends
UI/UX: Distinction and Trends
Ankur Sharma1.5K views

Recently uploaded

Sudden Deafness Design Document by
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Documentwyfangherman
54 views19 slides
Business X Design - People, Planet & Product by
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & ProductCyber-Duck
28 views42 slides
EL FODA.pdf by
EL FODA.pdfEL FODA.pdf
EL FODA.pdfestefanimilenca
22 views1 slide
Final (1).pdf by
Final (1).pdfFinal (1).pdf
Final (1).pdfkarmadjango
9 views188 slides
Oral presntation.pptx by
Oral presntation.pptxOral presntation.pptx
Oral presntation.pptxsaraalzarouni121
8 views11 slides
type book PDF to PPT.pptx by
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptxsamboggiano
6 views54 slides

Recently uploaded(20)

Sudden Deafness Design Document by wyfangherman
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Document
wyfangherman54 views
Business X Design - People, Planet & Product by Cyber-Duck
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
Cyber-Duck28 views
type book PDF to PPT.pptx by samboggiano
type book PDF to PPT.pptxtype book PDF to PPT.pptx
type book PDF to PPT.pptx
samboggiano6 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089825 views
500% Sales Growth with Amazon A+ Content by Fahima
500% Sales Growth with Amazon A+ Content500% Sales Growth with Amazon A+ Content
500% Sales Growth with Amazon A+ Content
Fahima11 views
Cocktail Merchandise by nyhapedraza
Cocktail MerchandiseCocktail Merchandise
Cocktail Merchandise
nyhapedraza35 views
boggiano_project 2.pptx by samboggiano
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptx
samboggiano24 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd225 views
Canned Cocktail Flat Labels by nyhapedraza
Canned Cocktail Flat LabelsCanned Cocktail Flat Labels
Canned Cocktail Flat Labels
nyhapedraza38 views
BeatsFest Brand Guidelines Final.pdf by EddiePena9
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdf
EddiePena98 views
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
Free International civil aviation day template from best presentation design ... by slideceotemplates
Free International civil aviation day template from best presentation design ...Free International civil aviation day template from best presentation design ...
Free International civil aviation day template from best presentation design ...

Brand Identity in UI/UX Design