ABOUT THE CLASS This class, taught by SMU Advertising Lecturer Dev Gupta, will walk you through the design process for building better products. This class is for the non-designer, to understand the importance of creating great user experiences. Learn how to lead a design team to stay focused on the greater vision of your company through clear communication, business goals and ease of use. THE TAKEAWAYS To establish a clear understanding of the product value proposition before diving in to the design process. To learn how to build a functional spec and business requirements through product roadmaps and wireframes. To establish strategies for building out content strategy - both internal and external. To discuss and demonstrate the importance of wireframing, user flow and prototyping before going into the actual visual design and development. To walk away with a better understanding as to why better designed products succeed, and learn how to set the bar higher for your own product design. ABOUT THE INSTRUCTOR, Dev Gupta Dev Gupta teaches creating advertising art direction and copywriting. Before joining SMU, he worked as an art director and freelance interactive designer at various New York and Dallas agencies. He holds a Masters in Advertising and Bachelors of Finance from The University of Texas. His work has been featured in and honored by Wired Magazine, GQ, The One Club, Mashables and TechCrunch. When he is not teaching he consults with agencies, tech start-ups and fortune 500 companies. PRESENTED BY, The Dallas Entrepreneur Center The Dallas Entrepreneur Center (DEC) is an entrepreneurial support system dedicated to bringing together the resources, support and opportunities that Dallas-area entrepreneurs need to start, build and grow their businesses. Launched in 2013, the DEC believes investment in entrepreneurs is investment in the community. Learn more at thedec.co.

1. Design for
Non Designers
INTRODUCTION TO DESIGN PRINCIPALS AND PRODUCT DESIGN

2. Believe me—I’m
only kind of a hack
BEFORE WE START

3. My hope is that you
learn enough to know
what to google.
BEFORE WE START

4. Why Design
What Design
How Design
Where Design
AGENDA

5. Why Design

6. Consumers Demand it

7. How did we get here

8. IT DOES WHAT?!
Feature Era
Value is created by the number of features

10. THE DEMOCRATIZATION OF INFORMATION
Information Age
The internet changed the availability
and access to information

13. EXPERIENCE ERA
Information Saturation
Information is ubiquitous to the point of
distracting—how content is segmented and
served is now as important as the content.

14. CONTENT AGGREGATORS

15. ON DEMAND SERVICES

16. CEO’S USE IPADS

17. CONNECTED DEVICES

18. WEARABLE TECH

19. MAKERS MOVEMENT

20. Context Matters

21. Design Creates Context

22. What Design

23. “Good design is useful,
usable and desirable”

24. HIERARCHY AND AFFORDANCE
Organization
Design is a process of organizing
information and intent.

25. IMPORTANT
interesting but less important

26. Push me

27. CREATES MEANING
Emotional
Design communicates intangible
ideas and creates attachment.

28. fancy

29. OldSchool

30. JUST WHAT’S NEED
Intentional
Design includes elements that are absolutely
needed to understand the underlying
message—design is a process of abstraction.

31. EMPATHETIC
User Centered
Design stands alone, in that a user should have
everything they need to understand the design
artifact. This is in contrast to fine art.

32. TRIAL & ERROR
Iterative
The process of design is 90% failure—there is
not one right answer, just lots of wrong ones.

33. More specifically visual design
is composed of typography,
composition and color

34. Typography

35. OPTICAL OPTIMIZATION
Use Your Eyes
Letterforms are optimized for reading on a
flat surface—they are adjusted optically. Most
letterforms are imperfect—several type designers
have failed to create a mathematically perfect
typeface. The closest we have is Grajon.

37. SERIF & SANS SERIFS
Classification
Typefaces are generally classified into
two categories: serif and sans serif. Other
classifications include slab serif and script.

38. Stern Serifs
Serifs are among the first typefaces to be
created. They are based off of the early
carvings of roman columns—the most
famous being Trajen’s Column.

39. Going Sans
They were popularized during the
Industrial Revolution by printers looking
to add emphasize to headlines.

40. Slab Me
Although it is technically a subset of
serifs, It is often considered to be in its
own category—also called Egyptian.

41. Scriptaculous
Script is the proper name
for cursive fonts.

42. TYPE CLASSIFICATION
Weight & Variant
Typefaces typically come in 4 styles: REGUL AR,
ITALIC, BOLD AND BOLD ITALIC; however several
professional fonts include extra weights and
variants, which extend range and application.

43. ImTungstenLightim mercury semibold roman sc & I’m Mercury Book sequam
harchitaquis es nestio dolorporem vellestiOta coreribus, sum cuptasp ictate
quaturestior sunt ex eliquodis debis ex essimusda que quidustem veliqua
eptatur am faccate mporest excernatem faccum resed maionem volorero
tem volesti beatibu sapicie ndistibea velenis reperunt iusdant

44. Oblique
Italics
Swashes

45. CHOOSING TYPE
Making Type Talk
Typefaces should be chosen for their
semiotic association and/or use.

46. Playful
serious
Agnostic
EMOTION

47. Mid Century
Modern
HISTORICAL ALLUSION

48. Im good for books
I was made
for screeens
USE

49. LETTERSPACING
Tracking
Tracking is the overall space between characters. It
can be tightened or loosened to achieve different
visual effects. When setting type at minute sizes
its customary to increase the tracking to ease
readability. This is also the case when setting
reversed type—white text on black background.

50. L O O S E Y
GOOSEY
TRACKING

51. LETTERSPACING
Kerning
Kerning is the manual process of adjusting space
between two characters in order to compensate for
awkward whitespace and is used to restore natural
spacing rhythm so that reading is uninhibited.

52. unkerned
kerning
KERNING

54. TYPOGRAPHY
When in doubt
typography.com

55. Composition

56. COMPOSITION
Symmetry
Symmetry is good. Asymmetry is better

57. BORING

58. MORE INTERSETING

59. COMPOSITION
Balance
Odd numbers look better than even.

60. BORING

61. MORE INTERSETING

62. COMPOSITION
Don’t Get Close
If objects are near each other its best to
have them overlap. If an object nears
the edge, its best to bleed it off the edge.

63. AWKWARD TENSION

64. MUCH BETTER

65. COMPOSITION
Rule of Thirds
Objects placed on the axis of thirds are
the most visualizing pleasing to the eye.

67. COMPOSITION
Optical Center
Things placed in the center of the page
are not as visually interesting but if you
have to center something: visually center
based on weight not mathematically .

68. MATHEMATICALLY CENTERED

69. OPTICALLY CENTERED

70. COMPOSITION
Scale
Vary scale to create visual interest
and develop hierarchy.

72. COMPOSITION
White Space
Negative space is as important as the forms
on the page—helps create visual tension.

73. COMPOSITION
Use a Grid
This is the most important rule of
composition. A grid helps you organize
content and provides a framework to
build multiple layouts.

74. COMPOSITION
When in doubt
siteinspire.com

75. Color

76. COLOR
Components of Color
1. Hue - Red
2. Saturation - How red?
3. Luminosity - How dark or light?

77. HUE
SATURATION
LUMINOSITY

78. COLOR
Semiotic Value
Culturally we accept that certain colors are
indexical of attitudes, for example, blue instill
trusts, or red and green represent Christmas.

80. COLOR
Complementary Colors
Colors with opposite hues, e.g red and green

81. COLOR
Analogous Colors
Colors with adjacent hues, e.g. red and orange

82. COLOR
Monochromatic
Same hue with varying saturation and luminosity

83. COLOR
When in doubt
dribbble.com

84. How Design

85. “Good design is useful,
usable and desirable”

86. 1. Hierarchy and Affordance
2. Meaning and Attachement
DESIGN CREATES

87. How does it do this?

88. Relying on patterns,
cultural associations
and shared assumptions

93. Designers understand
and leverage these
connections

94. How can you?

95. Short of going to
design school do this...

96. AN APPLIED APPROACH
Design Manifesto
Three or four lines that encapsulates
the intended messaging. This gives the
designer key words to design against.

97. AN APPLIED APPROACH
Pull Tearsheets
A collection of photography, typography,
illustration, editorial design, etc...that share
the same visual goals of the project at hand.
Serves to inspire and direct the design process.

98. AN APPLIED APPROACH
Use
• designspiration.net
• fffffound.com
• dribbble.com
• behance.com
• siteinspire.com

99. AN APPLIED APPROACH
Define the Zeitgeist
A reservoir of visuals associated with pertinent ideas,
e.g. if I’m designing a wedding invitation, I like to know
what visuals people associate with weddings.

100. AN APPLIED APPROACH
Use
• Google
• Shutterstock
• iStock
• nounproject.com

101. Lets look at specific
applications

102. Interface Design

103. PROCESS
Circle not line
The process outlined in the next slides feels
like a linear process, but when enacted its
more like a spiral and is integrated with
development efforts.

104. PROCESS
Mobile First
This forces the experience to be lean—its a
good way to understand priority and must-
haves vs nice-to-haves.

105. PRODUCT DEFINITION
Product Value Statement
What is the value to the customer? Treat
like a thesis, the value proposition should be
a single idea that solves a human problem.

106. PRODUCT DEFINITION
Functional Spec
Outlines the functionality and scope of the product.

107. INFORMATION ARCHITECTURE
Process Flow
Take different users through the experience:
a hybrid between a sitemap and storyboards.

108. INFORMATION ARCHITECTURE
Low Fidelity Wireframes
Rough sketches of the entire experience.
I prefer to sketch with pencil on paper.

109. USER EXPERIENCE
High Fidelity Wireframes
Computer comps that define specific interaction
patterns. Some high fidelity wireframes speak
to design. The most common creation tools are
Omnigraffle, Illustrator and Fireworks.

110. VISUAL DESIGN
Conceptual Design
The designer explorers several different
looking design solutions of the same
interaction or set of screens

111. VISUAL DESIGN
Applied Design
Once a general design direction is set,
it is blown out the remaining pages.

112. VISUAL DESIGN
Production Design
All the states and support graphics are
created. For example what does a button
look like on hover, and on click.

113. VISUAL DESIGN
Interface design is not content design. Most apps
incorporate both, marketing websites are content
design in that the design relies heavily on the
quality of existing visual assets.
Remember

114. IN ACTION
Profill.it: Case Study
The following is an applied look at the aforementioned
design process for a fictional product, called profill.it

115. PROFILL.IT: CASE STUDY
• My profile picture is the same from college
• I want my profile picture to be consistent
across all my profiles
• I hardly login to my accounts—I mostly use the
mobile or third party apps
Fodder

116. PROFILL.IT: CASE STUDY
Profill.it allows you to update your profile
picture, across many of your social media
accounts, in one place.
Product Value Statement

117. PROFILL.IT: CASE STUDY
• Upload image from device
• Crop and scale image
• Push new image to Google+, Facebook, Twitter,
Tumblr, Flickr, and Instagram
Functionality

118. PROFILL.IT: CASE STUDY
Upload Picture iOS Photo Album
Crop Img Choose Accounts
Push ImgAuthenticate

119. PROFILL.IT: CASE STUDY
Low Fi Wires

120. PROFILL.IT: CASE STUDY
Profill.it is a no fuss utility, targeted at the
internet savvy user. It is all about streamlining
and automating a manual process.
Design Manifesto

121. PROFILL.IT: CASE STUDY
Flat Tear Sheets

122. PROFILL.IT: CASE STUDY
Layered Tear Sheets

123. FLAT LAYERED

124. UPLOAD SCREEN OTHER STATESUPLOAD SCREEN OTHER STATES

125. Design by Numbers

126. Interface design relies almost
exclusively on patterns and
existing paradigms.

127. Available Variables
1. Color
2. Tone
3. Amount of Chrome
4. Typography
5. Artwork
COLOR BY DESIGN

128. COLOR BY DESIGN
Color
• Dark
• Light
• Muted
• Vibrant
• Brand Specific

129. DARK LIGHT

130. MUTED VIBRANT

131. COLOR BY DESIGN
Tone
• Playful
• Utilitarian
• Fancy
• Vintage
• Editorial
• Textured

132. PLAYFUL UTILITARIAN

133. EDITORIAL VINTAGE

134. FANCY TEXTURED

135. COLOR BY DESIGN
Chrome
• No chrome
• Flat
• Pure App
• Tactile
• Dimensional
• Skeuomorphic

136. NO CHROME FLAT

137. TACTILE DIMENSIONAL

138. SKEUMORPHIC

139. COLOR BY DESIGN
Type
• Free
• Paid

140. COLOR BY DESIGN
Artwork
• Icon Style
• Photography or Illustration
• User generated?

141. WIRED FILLED

142. ILLUSTRATION PHOTOGRAPHY

143. UGC IS NORMALLY UGLY

144. Available Variables
1. Color
2. Tone
3. Amount of Chrome
4. Typography
5. Artwork
COLOR BY DESIGN

145. Logo Design

146. LOGO DESIGN
Logo
A logo is a metaphor for the ideals of a
company. A logo can take the form of a
logotype or logotype and logo mark.

147. LOGOOTYPE

148. LOGOTYPE + MARK

149. LOGO DESIGN
Logo Mark
There are four broad types of logo marks:
• Representative - Dodge Ram
• Monogram - Volkswagen
• Visual Pun - Evernote
• Abstracted - Nike

150. LOGO MARKS
ABSTRACTEDREPRESENTATIVE MONOGRAM VISUAL PUN

151. LOGO DESIGN
Considerations
Logos are abstractions—include only what is
absolutely needed to communicate the stated
message; therefore logos should work well at
small sizes and in a single color.

152. LOGO DESIGN
Remember
Logos are but one small component of
Brand. A consumer’s understanding of a
brand comes from interacting with it in
various capacities. The best brands design all
consumer touch points.

153. Where Design

154. WHERE DESIGN IS HEADED
Design Experiences
Not artifacts
Design is more than pushing pixels—design is
fundamentally about creating the best experience
for the consumer, whether that be a website or the
approach to customer service.

155. This has a name.

156. WHERE DESIGN IS HEADED
Design Thinking
Design Thinking is a problem solving methodology
that utilizes design processes to help find the right
problem to solve. It does so by focusing on the end
user, understanding the end-to-end experience and
using iterative prototypes to fail early and often.

157. DESIGN THINKING
Efficiency vs Efficacy
An idea can be efficient but highly ineffective.
Ford is famously quoted as saying, “If I asked
people what they wanted, they would have said a
faster a horse.” Design Thinking helps frame the
problem in the right context.

158. DESIGN THINKING
Solution as Problem
Ford’s quote underlines another common
problem, presenting solutions as
problems—rather than asking for a faster
horse ask for a better way to travel.

159. What does this mean?

160. DESIGN THINKING
Design First
Companies like Ford, Square, AirBnb, Apple have
adopted a design first mindset, which has allowed
them to remain innovative so put your designer hat
on when evaluating all facets of your business.

161. Thanks!FEEL FREE TO EMAIL ME AT DEVGUPTA@ME.COM