Design for
Non Designers
INTRODUCTION TO DESIGN PRINCIPALS AND PRODUCT DESIGN
Believe me—I’m
only kind of a hack
BEFORE WE START
My hope is that you
learn enough to know
what to google.
BEFORE WE START
Why Design
What Design
How Design
Where Design
AGENDA
Why Design
Consumers Demand it
How did we get here
IT DOES WHAT?!
Feature Era
Value is created by the number of features
THE DEMOCRATIZATION OF INFORMATION
Information Age
The internet changed the availability
and access to information
EXPERIENCE ERA
Information Saturation
Information is ubiquitous to the point of
distracting—how content is segmented and
s...
CONTENT AGGREGATORS
ON DEMAND SERVICES
CEO’S USE IPADS
CONNECTED DEVICES
WEARABLE TECH
MAKERS MOVEMENT
Context Matters
Design Creates Context
What Design
“Good design is useful,
usable and desirable”
HIERARCHY AND AFFORDANCE
Organization
Design is a process of organizing
information and intent.
IMPORTANT
interesting but less important
Push me
CREATES MEANING
Emotional
Design communicates intangible
ideas and creates attachment.
fancy
OldSchool
JUST WHAT’S NEED
Intentional
Design includes elements that are absolutely
needed to understand the underlying
message—desi...
EMPATHETIC
User Centered
Design stands alone, in that a user should have
everything they need to understand the design
art...
TRIAL & ERROR
Iterative
The process of design is 90% failure—there is
not one right answer, just lots of wrong ones.
More specifically visual design
is composed of typography,
composition and color
Typography
OPTICAL OPTIMIZATION
Use Your Eyes
Letterforms are optimized for reading on a
flat surface—they are adjusted optically. Mo...
SERIF & SANS SERIFS
Classification
Typefaces are generally classified into
two categories: serif and sans serif. Other
cla...
Stern Serifs
Serifs are among the first typefaces to be
created. They are based off of the early
carvings of roman columns...
Going Sans
They were popularized during the
Industrial Revolution by printers looking
to add emphasize to headlines.
Slab Me
Although it is technically a subset of
serifs, It is often considered to be in its
own category—also called Egypti...
Scriptaculous
Script is the proper name
for cursive fonts.
TYPE CLASSIFICATION
Weight & Variant
Typefaces typically come in 4 styles: REGUL AR,
ITALIC, BOLD AND BOLD ITALIC; however...
ImTungstenLightim mercury semibold roman sc & I’m Mercury Book sequam
harchitaquis es nestio dolorporem vellestiOta coreri...
Oblique
Italics
Swashes
CHOOSING TYPE
Making Type Talk
Typefaces should be chosen for their
semiotic association and/or use.
Playful
serious
Agnostic
EMOTION
Mid Century
Modern
HISTORICAL ALLUSION
Im good for books
I was made
for screeens
USE
LETTERSPACING
Tracking
Tracking is the overall space between characters. It
can be tightened or loosened to achieve differ...
L O O S E Y
GOOSEY
TRACKING
LETTERSPACING
Kerning
Kerning is the manual process of adjusting space
between two characters in order to compensate for
a...
unkerned
kerning
KERNING
TYPOGRAPHY
When in doubt
typography.com
Composition
COMPOSITION
Symmetry
Symmetry is good. Asymmetry is better
BORING
MORE INTERSETING
COMPOSITION
Balance
Odd numbers look better than even.
BORING
MORE INTERSETING
COMPOSITION
Don’t Get Close
If objects are near each other its best to
have them overlap. If an object nears
the edge, its...
AWKWARD TENSION
MUCH BETTER
COMPOSITION
Rule of Thirds
Objects placed on the axis of thirds are
the most visualizing pleasing to the eye.
COMPOSITION
Optical Center
Things placed in the center of the page
are not as visually interesting but if you
have to cent...
MATHEMATICALLY CENTERED
OPTICALLY CENTERED
COMPOSITION
Scale
Vary scale to create visual interest
and develop hierarchy.
COMPOSITION
White Space
Negative space is as important as the forms
on the page—helps create visual tension.
COMPOSITION
Use a Grid
This is the most important rule of
composition. A grid helps you organize
content and provides a fr...
COMPOSITION
When in doubt
siteinspire.com
Color
COLOR
Components of Color
1. Hue - Red
2. Saturation - How red?
3. Luminosity - How dark or light?
HUE
SATURATION
LUMINOSITY
COLOR
Semiotic Value
Culturally we accept that certain colors are
indexical of attitudes, for example, blue instill
trusts...
COLOR
Complementary Colors
Colors with opposite hues, e.g red and green
COLOR
Analogous Colors
Colors with adjacent hues, e.g. red and orange
COLOR
Monochromatic
Same hue with varying saturation and luminosity
COLOR
When in doubt
dribbble.com
How Design
“Good design is useful,
usable and desirable”
1. Hierarchy and Affordance
2. Meaning and Attachement
DESIGN CREATES
How does it do this?
Relying on patterns,
cultural associations
and shared assumptions
Designers understand
and leverage these
connections
How can you?
Short of going to
design school do this...
AN APPLIED APPROACH
Design Manifesto
Three or four lines that encapsulates
the intended messaging. This gives the
designer...
AN APPLIED APPROACH
Pull Tearsheets
A collection of photography, typography,
illustration, editorial design, etc...that sh...
AN APPLIED APPROACH
Use
•	designspiration.net
•	fffffound.com
•	dribbble.com
•	behance.com
•	siteinspire.com
AN APPLIED APPROACH
Define the Zeitgeist
A reservoir of visuals associated with pertinent ideas,
e.g. if I’m designing a w...
AN APPLIED APPROACH
Use
•	Google
•	Shutterstock
•	iStock
•	nounproject.com
Lets look at specific
applications
Interface Design
PROCESS
Circle not line
The process outlined in the next slides feels
like a linear process, but when enacted its
more lik...
PROCESS
Mobile First
This forces the experience to be lean—its a
good way to understand priority and must-
haves vs nice-t...
PRODUCT DEFINITION
Product Value Statement
What is the value to the customer? Treat
like a thesis, the value proposition s...
PRODUCT DEFINITION
Functional Spec
Outlines the functionality and scope of the product.
INFORMATION ARCHITECTURE
Process Flow
Take different users through the experience:
a hybrid between a sitemap and storyboa...
INFORMATION ARCHITECTURE
Low Fidelity Wireframes
Rough sketches of the entire experience.
I prefer to sketch with pencil o...
USER EXPERIENCE
High Fidelity Wireframes
Computer comps that define specific interaction
patterns. Some high fidelity wire...
VISUAL DESIGN
Conceptual Design
The designer explorers several different
looking design solutions of the same
interaction ...
VISUAL DESIGN
Applied Design
Once a general design direction is set,
it is blown out the remaining pages.
VISUAL DESIGN
Production Design
All the states and support graphics are
created. For example what does a button
look like ...
VISUAL DESIGN
Interface design is not content design. Most apps
incorporate both, marketing websites are content
design in...
IN ACTION
Profill.it: Case Study
The following is an applied look at the aforementioned
design process for a fictional pro...
PROFILL.IT: CASE STUDY
•	My profile picture is the same from college
•	I want my profile picture to be consistent
across a...
PROFILL.IT: CASE STUDY
Profill.it allows you to update your profile
picture, across many of your social media
accounts, in...
PROFILL.IT: CASE STUDY
•	Upload image from device
•	Crop and scale image
•	Push new image to Google+, Facebook, Twitter,
T...
PROFILL.IT: CASE STUDY
Upload Picture iOS Photo Album
Crop Img Choose Accounts
Push ImgAuthenticate
PROFILL.IT: CASE STUDY
Low Fi Wires
PROFILL.IT: CASE STUDY
Profill.it is a no fuss utility, targeted at the
internet savvy user. It is all about streamlining
...
PROFILL.IT: CASE STUDY
Flat Tear Sheets
PROFILL.IT: CASE STUDY
Layered Tear Sheets
FLAT LAYERED
UPLOAD SCREEN OTHER STATESUPLOAD SCREEN OTHER STATES
Design by Numbers
Interface design relies almost
exclusively on patterns and
existing paradigms.
Available Variables
1. Color
2. Tone
3. Amount of Chrome
4. Typography
5. Artwork
COLOR BY DESIGN
COLOR BY DESIGN
Color
•	Dark
•	Light
•	Muted
•	Vibrant
•	Brand Specific
DARK LIGHT
MUTED VIBRANT
COLOR BY DESIGN
Tone
•	Playful
•	Utilitarian
•	Fancy
•	Vintage
•	Editorial
•	Textured
PLAYFUL UTILITARIAN
EDITORIAL VINTAGE
FANCY TEXTURED
COLOR BY DESIGN
Chrome
•	No chrome
•	Flat
•	Pure App
•	Tactile
•	Dimensional
•	Skeuomorphic
NO CHROME FLAT
TACTILE DIMENSIONAL
SKEUMORPHIC
COLOR BY DESIGN
Type
•	Free
•	Paid
COLOR BY DESIGN
Artwork
•	Icon Style
•	Photography or Illustration
•	User generated?
WIRED FILLED
ILLUSTRATION PHOTOGRAPHY
UGC IS NORMALLY UGLY
Available Variables
1. Color
2. Tone
3. Amount of Chrome
4. Typography
5. Artwork
COLOR BY DESIGN
Logo Design
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 ...
LOGOOTYPE
LOGOTYPE + MARK
LOGO DESIGN
Logo Mark
There are four broad types of logo marks:
•	Representative - Dodge Ram
•	Monogram - Volkswagen
•	Vis...
LOGO MARKS
ABSTRACTEDREPRESENTATIVE MONOGRAM VISUAL PUN
LOGO DESIGN
Considerations
Logos are abstractions—include only what is
absolutely needed to communicate the stated
message...
LOGO DESIGN
Remember
Logos are but one small component of
Brand. A consumer’s understanding of a
brand comes from interact...
Where Design
WHERE DESIGN IS HEADED
Design Experiences
Not artifacts
Design is more than pushing pixels—design is
fundamentally about c...
This has a name.
WHERE DESIGN IS HEADED
Design Thinking
Design Thinking is a problem solving methodology
that utilizes design processes to ...
DESIGN THINKING
Efficiency vs Efficacy
An idea can be efficient but highly ineffective.
Ford is famously quoted as saying,...
DESIGN THINKING
Solution as Problem
Ford’s quote underlines another common
problem, presenting solutions as
problems—rathe...
What does this mean?
DESIGN THINKING
Design First
Companies like Ford, Square, AirBnb, Apple have
adopted a design first mindset, which has all...
Thanks!FEEL FREE TO EMAIL ME AT DEVGUPTA@ME.COM
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
The DEC Education: Product Design
Upcoming SlideShare
Loading in...5
×

The DEC Education: Product Design

482

Published on

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.

Published in: Design, Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

The DEC Education: Product Design

  1. 1. Design for Non Designers INTRODUCTION TO DESIGN PRINCIPALS AND PRODUCT DESIGN
  2. 2. Believe me—I’m only kind of a hack BEFORE WE START
  3. 3. My hope is that you learn enough to know what to google. BEFORE WE START
  4. 4. Why Design What Design How Design Where Design AGENDA
  5. 5. Why Design
  6. 6. Consumers Demand it
  7. 7. How did we get here
  8. 8. IT DOES WHAT?! Feature Era Value is created by the number of features
  9. 9. THE DEMOCRATIZATION OF INFORMATION Information Age The internet changed the availability and access to information
  10. 10. 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.
  11. 11. CONTENT AGGREGATORS
  12. 12. ON DEMAND SERVICES
  13. 13. CEO’S USE IPADS
  14. 14. CONNECTED DEVICES
  15. 15. WEARABLE TECH
  16. 16. MAKERS MOVEMENT
  17. 17. Context Matters
  18. 18. Design Creates Context
  19. 19. What Design
  20. 20. “Good design is useful, usable and desirable”
  21. 21. HIERARCHY AND AFFORDANCE Organization Design is a process of organizing information and intent.
  22. 22. IMPORTANT interesting but less important
  23. 23. Push me
  24. 24. CREATES MEANING Emotional Design communicates intangible ideas and creates attachment.
  25. 25. fancy
  26. 26. OldSchool
  27. 27. JUST WHAT’S NEED Intentional Design includes elements that are absolutely needed to understand the underlying message—design is a process of abstraction.
  28. 28. 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.
  29. 29. TRIAL & ERROR Iterative The process of design is 90% failure—there is not one right answer, just lots of wrong ones.
  30. 30. More specifically visual design is composed of typography, composition and color
  31. 31. Typography
  32. 32. 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.
  33. 33. SERIF & SANS SERIFS Classification Typefaces are generally classified into two categories: serif and sans serif. Other classifications include slab serif and script.
  34. 34. 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.
  35. 35. Going Sans They were popularized during the Industrial Revolution by printers looking to add emphasize to headlines.
  36. 36. Slab Me Although it is technically a subset of serifs, It is often considered to be in its own category—also called Egyptian.
  37. 37. Scriptaculous Script is the proper name for cursive fonts.
  38. 38. 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.
  39. 39. 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
  40. 40. Oblique Italics Swashes
  41. 41. CHOOSING TYPE Making Type Talk Typefaces should be chosen for their semiotic association and/or use.
  42. 42. Playful serious Agnostic EMOTION
  43. 43. Mid Century Modern HISTORICAL ALLUSION
  44. 44. Im good for books I was made for screeens USE
  45. 45. 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.
  46. 46. L O O S E Y GOOSEY TRACKING
  47. 47. 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.
  48. 48. unkerned kerning KERNING
  49. 49. TYPOGRAPHY When in doubt typography.com
  50. 50. Composition
  51. 51. COMPOSITION Symmetry Symmetry is good. Asymmetry is better
  52. 52. BORING
  53. 53. MORE INTERSETING
  54. 54. COMPOSITION Balance Odd numbers look better than even.
  55. 55. BORING
  56. 56. MORE INTERSETING
  57. 57. 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.
  58. 58. AWKWARD TENSION
  59. 59. MUCH BETTER
  60. 60. COMPOSITION Rule of Thirds Objects placed on the axis of thirds are the most visualizing pleasing to the eye.
  61. 61. 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 .
  62. 62. MATHEMATICALLY CENTERED
  63. 63. OPTICALLY CENTERED
  64. 64. COMPOSITION Scale Vary scale to create visual interest and develop hierarchy.
  65. 65. COMPOSITION White Space Negative space is as important as the forms on the page—helps create visual tension.
  66. 66. 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.
  67. 67. COMPOSITION When in doubt siteinspire.com
  68. 68. Color
  69. 69. COLOR Components of Color 1. Hue - Red 2. Saturation - How red? 3. Luminosity - How dark or light?
  70. 70. HUE SATURATION LUMINOSITY
  71. 71. COLOR Semiotic Value Culturally we accept that certain colors are indexical of attitudes, for example, blue instill trusts, or red and green represent Christmas.
  72. 72. COLOR Complementary Colors Colors with opposite hues, e.g red and green
  73. 73. COLOR Analogous Colors Colors with adjacent hues, e.g. red and orange
  74. 74. COLOR Monochromatic Same hue with varying saturation and luminosity
  75. 75. COLOR When in doubt dribbble.com
  76. 76. How Design
  77. 77. “Good design is useful, usable and desirable”
  78. 78. 1. Hierarchy and Affordance 2. Meaning and Attachement DESIGN CREATES
  79. 79. How does it do this?
  80. 80. Relying on patterns, cultural associations and shared assumptions
  81. 81. Designers understand and leverage these connections
  82. 82. How can you?
  83. 83. Short of going to design school do this...
  84. 84. AN APPLIED APPROACH Design Manifesto Three or four lines that encapsulates the intended messaging. This gives the designer key words to design against.
  85. 85. 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.
  86. 86. AN APPLIED APPROACH Use • designspiration.net • fffffound.com • dribbble.com • behance.com • siteinspire.com
  87. 87. 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.
  88. 88. AN APPLIED APPROACH Use • Google • Shutterstock • iStock • nounproject.com
  89. 89. Lets look at specific applications
  90. 90. Interface Design
  91. 91. 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.
  92. 92. PROCESS Mobile First This forces the experience to be lean—its a good way to understand priority and must- haves vs nice-to-haves.
  93. 93. 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.
  94. 94. PRODUCT DEFINITION Functional Spec Outlines the functionality and scope of the product.
  95. 95. INFORMATION ARCHITECTURE Process Flow Take different users through the experience: a hybrid between a sitemap and storyboards.
  96. 96. INFORMATION ARCHITECTURE Low Fidelity Wireframes Rough sketches of the entire experience. I prefer to sketch with pencil on paper.
  97. 97. 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.
  98. 98. VISUAL DESIGN Conceptual Design The designer explorers several different looking design solutions of the same interaction or set of screens
  99. 99. VISUAL DESIGN Applied Design Once a general design direction is set, it is blown out the remaining pages.
  100. 100. 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.
  101. 101. 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
  102. 102. IN ACTION Profill.it: Case Study The following is an applied look at the aforementioned design process for a fictional product, called profill.it
  103. 103. 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
  104. 104. 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
  105. 105. PROFILL.IT: CASE STUDY • Upload image from device • Crop and scale image • Push new image to Google+, Facebook, Twitter, Tumblr, Flickr, and Instagram Functionality
  106. 106. PROFILL.IT: CASE STUDY Upload Picture iOS Photo Album Crop Img Choose Accounts Push ImgAuthenticate
  107. 107. PROFILL.IT: CASE STUDY Low Fi Wires
  108. 108. 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
  109. 109. PROFILL.IT: CASE STUDY Flat Tear Sheets
  110. 110. PROFILL.IT: CASE STUDY Layered Tear Sheets
  111. 111. FLAT LAYERED
  112. 112. UPLOAD SCREEN OTHER STATESUPLOAD SCREEN OTHER STATES
  113. 113. Design by Numbers
  114. 114. Interface design relies almost exclusively on patterns and existing paradigms.
  115. 115. Available Variables 1. Color 2. Tone 3. Amount of Chrome 4. Typography 5. Artwork COLOR BY DESIGN
  116. 116. COLOR BY DESIGN Color • Dark • Light • Muted • Vibrant • Brand Specific
  117. 117. DARK LIGHT
  118. 118. MUTED VIBRANT
  119. 119. COLOR BY DESIGN Tone • Playful • Utilitarian • Fancy • Vintage • Editorial • Textured
  120. 120. PLAYFUL UTILITARIAN
  121. 121. EDITORIAL VINTAGE
  122. 122. FANCY TEXTURED
  123. 123. COLOR BY DESIGN Chrome • No chrome • Flat • Pure App • Tactile • Dimensional • Skeuomorphic
  124. 124. NO CHROME FLAT
  125. 125. TACTILE DIMENSIONAL
  126. 126. SKEUMORPHIC
  127. 127. COLOR BY DESIGN Type • Free • Paid
  128. 128. COLOR BY DESIGN Artwork • Icon Style • Photography or Illustration • User generated?
  129. 129. WIRED FILLED
  130. 130. ILLUSTRATION PHOTOGRAPHY
  131. 131. UGC IS NORMALLY UGLY
  132. 132. Available Variables 1. Color 2. Tone 3. Amount of Chrome 4. Typography 5. Artwork COLOR BY DESIGN
  133. 133. Logo Design
  134. 134. 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.
  135. 135. LOGOOTYPE
  136. 136. LOGOTYPE + MARK
  137. 137. LOGO DESIGN Logo Mark There are four broad types of logo marks: • Representative - Dodge Ram • Monogram - Volkswagen • Visual Pun - Evernote • Abstracted - Nike
  138. 138. LOGO MARKS ABSTRACTEDREPRESENTATIVE MONOGRAM VISUAL PUN
  139. 139. 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.
  140. 140. 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.
  141. 141. Where Design
  142. 142. 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.
  143. 143. This has a name.
  144. 144. 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.
  145. 145. 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.
  146. 146. 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.
  147. 147. What does this mean?
  148. 148. 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.
  149. 149. Thanks!FEEL FREE TO EMAIL ME AT DEVGUPTA@ME.COM
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×