The fundamentals of visual design, interface design, and UX design.

1. Pixl is a user experience design
shop creating user-centered
designs for the modern web.

2. JONATHAN SPEH
VISUAL DESIGN
FUNDAMENTALS

3. AGENDA
INTRODUCTION
VISUAL HIERARCHY
UI ELEMENTS
VISUAL ELEMENTS
Q&A

4. DESIGN IS NOT SIMPLY SHAPES AND COLORS,
IT’S ABOUT BUILDING A CONNECTION WITH
YOUR USERS. IT’S OFTEN THE FIRST AND ONLY
CHANCE TO LEAVE A LASTING IMPRESSION.

5. A BALANCE BETWEEN CAPTIVATING AESTHETICS
AND EFFORTLESS INTERACTIVITY

6. DESIGN IS HUMAN

7. “IT TAKES MONUMENTAL IMPROVEMENT FOR US
TO CHANGE HOW WE LIVE OUR LIVES. DESIGN IS
THE WAY WE ACCESS THAT IMPROVEMENT.”
THE IMPACT OF DESIGN
MIKE DAVIDSON, TWITTER — VICE PRESIDENT, DESIGN

9. CONSTRUCTING
YOUR DESIGN

10. INTERFACE DESIGN
A WEBSITE IS THE SCIENCE OF AESTHETICS
COMBINED WITH THE PRINCIPALS OF BUSINESS

11. SHAPING THE UX
Maintaining consistency from page-to-
page will lend to a more intuitive design.
CONSISTENCY
Backgrounds, text, icons, and graphic
elements should all be considered when
selecting a color palette.
COLOR
Ensure that your design contains
visuals that are not only aesthetically
pleasing, but are easily recognizable.
VISUAL CUES
Allowing users to customize certain
features, upload a profile photo, change
the settings, etc. lends to a personal
feel.
CUSTOMIZATION

12. VISUAL HIERARCHY
LAYOUT
COMMUNICATE
IMPACT

13. INFORM
A LOGICAL PROGRESSION THAT GUIDES
USERS FROM ONE ACTION TO THE NEXT

14. COMMUNICATION
CLEARLY COMMUNICATE CONTENT BY
PRIORITIZING IT WITHIN YOUR DESIGN

15. IMPACT
MEMORABLE DESIGNS INVOKE A
POSITIVE EMOTIONAL RESPONSE

16. VIRGIN AMERICA

18. SCANNING PATTERNS

19. Z-PATTERN

20. 1 2
3
4

21. F-PATTERN

22. SPACE

23. SPACE

24. EXPLOIT COLOR TO DRAW ATTENTION
TO SPECIFIC AREAS OF YOUR DESIGN
COLOR

25. COOLORS
ADOBE KULER
UIGRADIENTS
MATERIALPALETTE
FLATUICOLORS

26. TEXT SIZE, TYPOGRAPHY, AND
CONTRAST, USED FOR EMPHASIS
SIZE

27. SO WHERE ARE WE HEADED?

28. THE NEW PARADIGM OF DESIGN WILL BE WHEN WE THINK
BEYOND THE CONSTRAINTS OF A SCREEN. TURNING TO
HAPTIC, AUTOMATED, AND AMBIENT INTERFACES.
ZERO UI

29. 29

30. UI ELEMENTS
PRINCIPALS + PATTERNS

31. INTERFACE DESIGN
HOW THE USER INTERACTS WITH A SITE

32. AESTHETIC DESIGN
THE OVERALL LOOK AND
FEEL OF THE SITE

33. INFORMATION DESIGN
HOW INFORMATION IS PRESENTED
AND ORGANIZED ON THE SITE

34. AN INTERFACE IS A COLLECTION OF JOBS AND
EACH JOB HAS A BEGINNING, MIDDLE, AND END

35. POSTING A STATUS
UPDATE ON FACEBOOK
COMPONENTS

36. INPUT CONTROLS
PROVIDE INTERACTION AND FUNCTIONALITY
GIVING THE USER ADDITIONAL OPTIONS

37. INPUT TRANSITION

38. NAVIGATION
PROVIDES ORIENTATION FOR THE USER AND
STREAMLINES HOW MOVE ABOUT THE SITE

39. ANIMATIONS + TRANSITIONS

40. DRAW ATTENTION AND SIGNAL CHANGE IN
A MORE SEAMLESS MANNER

41. ESTABLISHING CONNECTIONS THROUGH
TRANSITIONS MAKE YOUR SITE COHERENT

42. TRANSITIONS

43. THE MAYA PRINCIPAL

44. DESIGNERS MUST PAVE THE WAY TOWARD THE FUTURE, BUT IN
GRADUAL STEPS—DELIVERING EXPERIENCES THAT BREAK NEW
GROUND, BUT STILL CONTAIN ENOUGH OF THE FAMILIAR TO BE
“ACCEPTABLE” TO THE PEOPLE FOR WHOM THEY’RE DESIGNED.
MAYA

45. 45

46. TAKAWAYS

47. Add an additional layer of interactivity to your design. An often overlooked element that
can enhance your interface and create a more seamless experience
INPUT CONTROLS
Add an additional layer of interactivity to your design. An often overlooked element that
can enhance your interface and create a more seamless experience
ANIMATIONS
Establish the overall look and feel of the site; consider how the user will interact with the
design, and how information and content is presented
OBJECTIVE
Provides orientation telling the user where they are within the site while streamlining how
they move about the site
NAVIGATION

48. VISUAL ELEMENTS
DESIGN + STYLE

49. CONTRAST, COLOR, AND TYPOGRAPHY ARE THE MOST
IMPORTANT VISUAL ELEMENTS WHEN IT COMES TO HOW
AN INTERFACE IS PERCEIVED AND UNDERSTOOD
VISUAL PRINCIPALS

50. CONTRAST SPECIFICALLY AS IT RELATES TO
COLOR HELPS CREATES DRAMA AND INTRIGUE

51. COLOR CONTRAST DETERMINES
YOUR ENTIRE COLOR PALETTE
COLOR CONTRAST

52. COLOR SCHEMES

53. TRIADIC
SIMPLE TO USE, BALANCED,
COMPLEMENTARY, AND VIBRANT

54. TRIADIC

55. COMPOUND
USES BOTH CONTRASTING AND
COMPLEMENTARY COLORS

56. COMPOUND

57. ANALOGOUS
FOCUSES ON COMPLEMENTARY
COLORS RATHER THAN CONTRASTING

58. ANALOGOUS

59. TYPOGRAPHY

60. Modern and dynamic, they are simple and easy to read on a screen, even at smaller sizes–
perfect for body text, or headlines
SANS-SERIF
Serif typefaces are characterized by tiny lines (serifs) trailing from the edges of the strokes
and stems
SERIF
Often used to display lines of code and plain text on webpages to enhance their
readability, monospace typefaces consist of characters with the same width
MONOSPACE

61. CREATIVE

62. CLEAN

63. FUN

64. BOLD

65. Q&A

66. THANK YOU!