Many of us don’t have the luxury of working with a designer while developing our apps. Just because we don’t have a designer at our disposal, doesn’t mean we can’t learn from the fundamentals of color theory and best practices of page design to influence the behavior of those using our apps. Bob Kadrie, Red Pill Now’s Creative and UX Director will provide a crash course in the use of color – designed specifically for programmers and project managers with little or no design experience. He will share the basics in a language we can all understand, and will explore fantastical color tools and where to find them.Then, we’ll take a closer look at the page design, breaking down its layout, to better understand how color, navigation and content design can make, or break the experience others have using the application.By the time we’re through, you will leave with a greater understanding of the importance of color and page design, and how both make a transformative affect on the satisfaction and adoption of the applications you build.

1. INFLUENCING BEHAVIOR THROUGH
COLOR AND PAGE DESIGN
UX AND DESIGN FOR PROGRAMMERS

2. MWLUG 2017
Moving Collaboration Forward
Our Amazing Sponsors

3. INFLUENCING BEHAVIOR THROUGH
COLOR AND PAGE DESIGN
UX AND DESIGN FOR PROGRAMMERS

4. BOB KADRIECREATIVE/UX DIRECTOR RED PILL NOW
BOBKADRIEBOB@REDPILLNOW.COM

5. ORDER OF
PERCEPTION
FORM AND SPACE
WORDS AND NUMBERS
COLOR AND VALUE

6. ORDER OF
PERCEPTION
FORM AND SPACE
WORDS AND NUMBERS
COLOR AND VALUE

7. ORDER OF
PERCEPTION
FORM AND SPACE
WORDS AND NUMBERS
COLOR AND VALUE

8. ORDER OF
PERCEPTION
FORM AND SPACE
WORDS AND NUMBERS
COLOR AND VALUE

9. ORDER OF
PERCEPTION
FORM AND SPACE
WORDS AND NUMBERS
COLOR AND VALUE

10. ORDER OF PERCEPTION
OUR BRAINS GENERALLY
PROCESS FAMILIARITY IN FORM,
SHAPE AND PATTERNS BEFORE
DE-CODING THE ABSTRACT

11. he handed me an apple
HUMAN ORDER OF PERCEPTION

12. PERCEPTION
he handed me an apple

13. PERCEPTION
he handed me an apple

14. PERCEPTION
he handed me an apple

15. PAGE DESIGN : LEGACY NOTES APPLICATION

16. PAGE DESIGN : REVISED NOTES APPLICATION

17. PAGE DESIGN : RESPONSIVE WEB APPLICATION

18. PAGE DESIGN
PAGE DESIGN

19. PAGE DESIGN BASICS
3 IMPORTANT RULES:
BE CONSISTENT*
7 2 RULE (KEEP IT SIMPLE)
GROUP LIKE ELEMENTS
*THE HOLY GRAIL
+/-

20. “GOOD ARTISTS BORROW,
GREAT ARTISTS STEAL”
JAMES JOYCE OR PABLO PICASSO
PAGE DESIGN

21. PAGE DESIGN - A CANONICAL PAGE LAYOUT
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT

22. PAGE DESIGN - A CANONICAL PAGE LAYOUT
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT

23. PAGE DESIGN - A CANONICAL PAGE LAYOUT
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT

24. PAGE DESIGN - A CANONICAL PAGE LAYOUT
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT

25. PAGE DESIGN - A CANONICAL PAGE LAYOUT
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT

26. PAGE DESIGN - REAL ESTATE VALUE
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT
1

27. PAGE DESIGN - REAL ESTATE VALUE
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT
1
2

28. PAGE DESIGN - REAL ESTATE VALUE
LOGO
LOGIN AND SEARCH
PRIMARY NAVIGATION
SECONDARY NAVIGATION
LOCAL
NAVIGATION
PRIMARY CONTENT
BREADCRUMB NAVIGATION
COPYRIGHT | FOOTER | CONTACT
1
2
3

29. TRACKING THE CUSTOMER’S ATTENTION

30. COLOR
COLOR

31. COLOR
#1 QUESTION
HOW DO I PICK COLORS?

32. COLOR
IMPORTANT
YOUR APPLICATION
DESIGN SHOULD NEVER
RELY ON COLOR FOR
SUCCESS

33. COLOR

34. COLOR
FIRST, LOOK AT THE
CUSTOMER’S GUIDELINES

35. COLOR
PURPOSE
PERSONALITY
DESIRED AFFECT

36. COLOR

37. 25% - 60% +
COLOR
CALMING, PERSONALSTIMULATING, EMOTIONAL

38. ACTIVE
BOLD
POWER
CONFIDENCE

39. SENSITIVE
NURTURING
ASSERTIVE
WARM

40. CREATIVE
SPIRITUAL
ROYAL
STIMULATING

41. STABILITY
LOYALTY
AUTHORITATIVE
SUCCESSFUL
PEACEFUL

42. BALANCE
GROWTH
CLARITY
PROGRESS
PROSPERITY
SAFETY

43. CONTENT
OPEN
AMBITION
GOAL-ORIENTED
PERSONAL
SAFETY

44. WARMTH
OPTIMISM
FREEDOM
MOTIVATING
INSTINCTIVE
EXTROVERTED

45. COLOR
A SAFE BET:

46. COLOR PALETTE TOOLS
https://coolors.co
TEXT PRIMARY SECONDARY BACKGROUND ACCENT

47. COLOR PALETTE TOOLS
https://coolors.co

48. COLOR
AN EVEN SAFER BET:

49. WHAT IS THE THE WORLD’S
FAVORITE COLOR?