Relationship & Integration between Brand Identity & UI/UX Design

1. in UI/UX Design
Brand
Identity
Adryan Putra
21 October 2015

2. 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

3. Sample Works

4. Sample Works

5. 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

6. Branding & UI/UX Relationship
User-centered focus

7. Branding & UI/UX Relationship
They need to be explored & iterated

8. Brand Identity Elements in UI/UX
1. Color 2. Typeface
Abc
3. Graphic Element
4. Imagery 5. Copywriting 6. Animation

9. Color

10. Typeface

11. Graphic Element

12. Imagery

13. Copywriting

14. Animation

15. Brand Designer’s Perspective
I’m going to see if they
implement the Identity
the right way, not like
the last horrible one.

16. Web/App Designer’s Perspective
Wait, a hundred rules
just to use their logo &
color... they must be
joking to me...

17. Problems at Hand
1. The Brand Guidelines:
- Confusing
- Complicated
- Restrictive
- Outdated
2. Web/App Designer:
- Too occupied
- Not paying attention
- Have their ‘own’ judgement

18. If We Look Closer
Accuracy Flexibility
Consistency
BrandOw
ner
Designer
Developer
1. Brand Visibility
2. Product Usability

19. 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

20. 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

21. Good Brand Guidelines

22. Good Brand Guidelines

23. Good Brand Guidelines

24. Avoid Dated Design Trends

25. Wait, what is this?

26. Seriously?

27. This Looks Better

28. Consistency Across Products

29. Consistency Across Platforms

30. 1 Color Brand?

31. Zoning / Brand Architecture Partition

32. Recommended Books

33. Find Related Books: www.yasiv.com

34. Thank you!
Now let’s discuss