the dec education: product design
DESCRIPTION
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.TRANSCRIPT
![Page 1: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/1.jpg)
Design for Non DesignersINTRODUCTION TO DESIGN PRINCIPALS AND PRODUCT DESIGN
![Page 2: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/2.jpg)
Believe me—I’m only kind of a hack
BEFORE WE START
![Page 3: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/3.jpg)
My hope is that you learn enough to know what to google.
BEFORE WE START
![Page 4: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/4.jpg)
Why DesignWhat DesignHow DesignWhere Design
AGENDA
![Page 5: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/5.jpg)
Why Design
![Page 6: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/6.jpg)
Consumers Demand it
![Page 7: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/7.jpg)
How did we get here
![Page 8: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/8.jpg)
IT DOES WHAT?!
Feature EraValue is created by the number of features
![Page 9: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/9.jpg)
![Page 10: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/10.jpg)
THE DEMOCRATIZATION OF INFORMATION
Information AgeThe internet changed the availability and access to information
![Page 11: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/11.jpg)
![Page 12: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/12.jpg)
![Page 13: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/13.jpg)
EXPERIENCE ERA
Information SaturationInformation is ubiquitous to the point of distracting—how content is segmented and served is now as important as the content.
![Page 14: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/14.jpg)
CONTENT AGGREGATORS
![Page 15: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/15.jpg)
ON DEMAND SERVICES
![Page 16: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/16.jpg)
CEO’S USE IPADS
![Page 17: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/17.jpg)
CONNECTED DEVICES
![Page 18: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/18.jpg)
WEARABLE TECH
![Page 19: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/19.jpg)
MAKERS MOVEMENT
![Page 20: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/20.jpg)
Context Matters
![Page 21: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/21.jpg)
Design Creates Context
![Page 22: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/22.jpg)
What Design
![Page 23: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/23.jpg)
“Good design is useful, usable and desirable”
![Page 24: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/24.jpg)
HIERARCHY AND AFFORDANCE
OrganizationDesign is a process of organizing information and intent.
![Page 25: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/25.jpg)
IMPORTANTinteresting but less important
![Page 26: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/26.jpg)
Push me
![Page 27: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/27.jpg)
CREATES MEANING
EmotionalDesign communicates intangible ideas and creates attachment.
![Page 28: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/28.jpg)
f a n c y
![Page 29: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/29.jpg)
Old School
![Page 30: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/30.jpg)
JUST WHAT’S NEED
IntentionalDesign includes elements that are absolutely needed to understand the underlying message—design is a process of abstraction.
![Page 31: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/31.jpg)
EMPATHETIC
User CenteredDesign stands alone, in that a user should have everything they need to understand the design artifact. This is in contrast to fine art.
![Page 32: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/32.jpg)
TRIAL & ERROR
IterativeThe process of design is 90% failure—there is not one right answer, just lots of wrong ones.
![Page 33: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/33.jpg)
More specifically visual design is composed of typography, composition and color
![Page 34: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/34.jpg)
Typography
![Page 35: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/35.jpg)
OPTICAL OPTIMIZATION
Use Your EyesLetterforms 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.
![Page 36: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/36.jpg)
![Page 37: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/37.jpg)
SERIF & SANS SERIFS
ClassificationTypefaces are generally classified into two categories: serif and sans serif. Other classifications include slab serif and script.
![Page 38: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/38.jpg)
Stern SerifsSerifs 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.
![Page 39: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/39.jpg)
Going SansThey were popularized during the
Industrial Revolution by printers looking
to add emphasize to headlines.
![Page 40: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/40.jpg)
Slab MeAlthough it is technically a subset of serifs, It is often considered to be in its own category—also called Egyptian.
![Page 41: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/41.jpg)
ScriptaculousScript is the proper name for cursive fonts.
![Page 42: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/42.jpg)
TYPE CLASSIFICATION
Weight & VariantTypefaces typically come in 4 styles: R E G U L A R,
I TA L I C , B O L D A N D B O L D I TA L I C ; however several professional fonts include extra weights and variants, which extend range and application.
![Page 43: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/43.jpg)
Im Tungsten Lightim 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
![Page 44: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/44.jpg)
Oblique
ItalicsSwashes
![Page 45: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/45.jpg)
CHOOSING TYPE
Making Type TalkTypefaces should be chosen for their semiotic association and/or use.
![Page 46: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/46.jpg)
Playful
serious
Agnostic
EMOTION
![Page 47: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/47.jpg)
Mid Century Modern
HISTORICAL ALLUSION
![Page 48: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/48.jpg)
Im good for books
I was made for screeens
USE
![Page 49: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/49.jpg)
LETTERSPACING
TrackingTracking 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.
![Page 50: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/50.jpg)
L O O S E Y
GOOSEY
TRACKING
![Page 51: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/51.jpg)
LETTERSPACING
KerningKerning 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.
![Page 52: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/52.jpg)
unkerned
kerning
KERNING
![Page 53: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/53.jpg)
![Page 54: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/54.jpg)
TYPOGRAPHY
When in doubt typography.com
![Page 55: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/55.jpg)
Composition
![Page 56: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/56.jpg)
COMPOSITION
SymmetrySymmetry is good. Asymmetry is better
![Page 57: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/57.jpg)
BORING
![Page 58: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/58.jpg)
MORE INTERSETING
![Page 59: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/59.jpg)
COMPOSITION
BalanceOdd numbers look better than even.
![Page 60: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/60.jpg)
BORING
![Page 61: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/61.jpg)
MORE INTERSETING
![Page 62: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/62.jpg)
COMPOSITION
Don’t Get CloseIf 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.
![Page 63: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/63.jpg)
AWKWARD TENSION
![Page 64: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/64.jpg)
MUCH BETTER
![Page 65: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/65.jpg)
COMPOSITION
Rule of ThirdsObjects placed on the axis of thirds are the most visualizing pleasing to the eye.
![Page 66: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/66.jpg)
![Page 67: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/67.jpg)
COMPOSITION
Optical CenterThings 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 .
![Page 68: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/68.jpg)
MATHEMATICALLY CENTERED
![Page 69: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/69.jpg)
OPTICALLY CENTERED
![Page 70: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/70.jpg)
COMPOSITION
ScaleVary scale to create visual interest and develop hierarchy.
![Page 71: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/71.jpg)
![Page 72: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/72.jpg)
COMPOSITION
White SpaceNegative space is as important as the forms on the page—helps create visual tension.
![Page 73: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/73.jpg)
COMPOSITION
Use a GridThis is the most important rule of composition. A grid helps you organize content and provides a framework to build multiple layouts.
![Page 74: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/74.jpg)
COMPOSITION
When in doubt siteinspire.com
![Page 75: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/75.jpg)
Color
![Page 76: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/76.jpg)
COLOR
Components of Color1. Hue - Red 2. Saturation - How red? 3. Luminosity - How dark or light?
![Page 77: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/77.jpg)
HUE
SATURATION
LUMINOSITY
![Page 78: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/78.jpg)
COLOR
Semiotic ValueCulturally we accept that certain colors are indexical of attitudes, for example, blue instill trusts, or red and green represent Christmas.
![Page 79: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/79.jpg)
![Page 80: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/80.jpg)
COLOR
Complementary ColorsColors with opposite hues, e.g red and green
![Page 81: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/81.jpg)
COLOR
Analogous ColorsColors with adjacent hues, e.g. red and orange
![Page 82: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/82.jpg)
COLOR
Monochromatic Same hue with varying saturation and luminosity
![Page 83: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/83.jpg)
COLOR
When in doubt dribbble.com
![Page 84: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/84.jpg)
How Design
![Page 85: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/85.jpg)
“Good design is useful, usable and desirable”
![Page 86: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/86.jpg)
1. Hierarchy and Affordance2. Meaning and Attachement
DESIGN CREATES
![Page 87: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/87.jpg)
How does it do this?
![Page 88: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/88.jpg)
Relying on patterns, cultural associations and shared assumptions
![Page 89: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/89.jpg)
![Page 90: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/90.jpg)
![Page 91: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/91.jpg)
![Page 92: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/92.jpg)
![Page 93: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/93.jpg)
Designers understand and leverage these connections
![Page 94: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/94.jpg)
How can you?
![Page 95: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/95.jpg)
Short of going to design school do this...
![Page 96: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/96.jpg)
AN APPLIED APPROACH
Design ManifestoThree or four lines that encapsulates the intended messaging. This gives the designer key words to design against.
![Page 97: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/97.jpg)
AN APPLIED APPROACH
Pull Tear sheetsA 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.
![Page 98: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/98.jpg)
AN APPLIED APPROACH
Use• designspiration.net• fffffound.com• dribbble.com• behance.com• siteinspire.com
![Page 99: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/99.jpg)
AN APPLIED APPROACH
Define the ZeitgeistA 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.
![Page 100: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/100.jpg)
AN APPLIED APPROACH
Use• Google• Shutterstock• iStock• nounproject.com
![Page 101: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/101.jpg)
Lets look at specific applications
![Page 102: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/102.jpg)
Interface Design
![Page 103: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/103.jpg)
PROCESS
Circle not lineThe 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.
![Page 104: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/104.jpg)
PROCESS
Mobile FirstThis forces the experience to be lean—its a good way to understand priority and must-haves vs nice-to-haves.
![Page 105: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/105.jpg)
PRODUCT DEFINITION
Product Value StatementWhat is the value to the customer? Treat like a thesis, the value proposition should be a single idea that solves a human problem.
![Page 106: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/106.jpg)
PRODUCT DEFINITION
Functional SpecOutlines the functionality and scope of the product.
![Page 107: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/107.jpg)
INFORMATION ARCHITECTURE
Process FlowTake different users through the experience: a hybrid between a sitemap and storyboards.
![Page 108: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/108.jpg)
INFORMATION ARCHITECTURE
Low Fidelity WireframesRough sketches of the entire experience. I prefer to sketch with pencil on paper.
![Page 109: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/109.jpg)
USER EXPERIENCE
High Fidelity WireframesComputer comps that define specific interaction patterns. Some high fidelity wireframes speak to design. The most common creation tools are Omnigraffle, Illustrator and Fireworks.
![Page 110: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/110.jpg)
VISUAL DESIGN
Conceptual DesignThe designer explorers several different looking design solutions of the same interaction or set of screens
![Page 111: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/111.jpg)
VISUAL DESIGN
Applied DesignOnce a general design direction is set, it is blown out the remaining pages.
![Page 112: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/112.jpg)
VISUAL DESIGN
Production DesignAll the states and support graphics are created. For example what does a button look like on hover, and on click.
![Page 113: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/113.jpg)
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
![Page 114: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/114.jpg)
IN ACTION
Profill.it: Case StudyThe following is an applied look at the aforementioned design process for a fictional product, called profill.it
![Page 115: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/115.jpg)
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
![Page 116: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/116.jpg)
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
![Page 117: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/117.jpg)
PROFILL.IT: CASE STUDY
• Upload image from device• Crop and scale image• Push new image to Google+, Facebook, Twitter,
Tumblr, Flickr, and Instagram
Functionality
![Page 118: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/118.jpg)
PROFILL.IT: CASE STUDY
Upload Picture iOS Photo Album
Crop Img Choose Accounts
Push ImgAuthenticate
![Page 119: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/119.jpg)
PROFILL.IT: CASE STUDY
Low Fi Wires
![Page 120: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/120.jpg)
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
![Page 121: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/121.jpg)
PROFILL.IT: CASE STUDY
Flat Tear Sheets
![Page 122: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/122.jpg)
PROFILL.IT: CASE STUDY
Layered Tear Sheets
![Page 123: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/123.jpg)
FLAT LAYERED
![Page 124: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/124.jpg)
UPLOAD SCREEN OTHER STATESUPLOAD SCREEN OTHER STATES
![Page 125: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/125.jpg)
Design by Numbers
![Page 126: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/126.jpg)
Interface design relies almost exclusively on patterns and existing paradigms.
![Page 127: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/127.jpg)
Available Variables1. Color2. Tone3. Amount of Chrome4. Typography5. Artwork
COLOR BY DESIGN
![Page 128: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/128.jpg)
COLOR BY DESIGN
Color• Dark• Light• Muted • Vibrant• Brand Specific
![Page 129: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/129.jpg)
DARK LIGHT
![Page 130: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/130.jpg)
MUTED VIBRANT
![Page 131: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/131.jpg)
COLOR BY DESIGN
Tone• Playful• Utilitarian• Fancy• Vintage• Editorial• Textured
![Page 132: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/132.jpg)
PLAYFUL UTILITARIAN
![Page 133: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/133.jpg)
EDITORIAL VINTAGE
![Page 134: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/134.jpg)
FANCY TEXTURED
![Page 135: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/135.jpg)
COLOR BY DESIGN
Chrome• No chrome• Flat• Pure App• Tactile• Dimensional• Skeuomorphic
![Page 136: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/136.jpg)
NO CHROME FLAT
![Page 137: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/137.jpg)
TACTILE DIMENSIONAL
![Page 138: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/138.jpg)
SKEUMORPHIC
![Page 139: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/139.jpg)
COLOR BY DESIGN
Type• Free• Paid
![Page 140: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/140.jpg)
COLOR BY DESIGN
Artwork• Icon Style• Photography or Illustration• User generated?
![Page 141: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/141.jpg)
WIRED FILLED
![Page 142: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/142.jpg)
ILLUSTRATION PHOTOGRAPHY
![Page 143: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/143.jpg)
UGC IS NORMALLY UGLY
![Page 144: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/144.jpg)
Available Variables1. Color2. Tone3. Amount of Chrome4. Typography5. Artwork
COLOR BY DESIGN
![Page 145: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/145.jpg)
Logo Design
![Page 146: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/146.jpg)
LOGO DESIGN
LogoA logo is a metaphor for the ideals of a company. A logo can take the form of a logotype or logotype and logo mark.
![Page 147: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/147.jpg)
LOGOOTYPE
![Page 148: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/148.jpg)
LOGOTYPE + MARK
![Page 149: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/149.jpg)
LOGO DESIGN
Logo MarkThere are four broad types of logo marks:• Representative - Dodge Ram• Monogram - Volkswagen• Visual Pun - Evernote• Abstracted - Nike
![Page 150: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/150.jpg)
LOGO MARKS
ABSTRACTEDREPRESENTATIVE MONOGRAM VISUAL PUN
![Page 151: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/151.jpg)
LOGO DESIGN
ConsiderationsLogos 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.
![Page 152: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/152.jpg)
LOGO DESIGN
RememberLogos 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.
![Page 153: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/153.jpg)
Where Design
![Page 154: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/154.jpg)
WHERE DESIGN IS HEADED
Design Experiences Not artifactsDesign 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.
![Page 155: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/155.jpg)
This has a name.
![Page 156: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/156.jpg)
WHERE DESIGN IS HEADED
Design ThinkingDesign 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.
![Page 157: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/157.jpg)
DESIGN THINKING
Efficiency vs EfficacyAn 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.
![Page 158: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/158.jpg)
DESIGN THINKING
Solution as ProblemFord’s quote underlines another common problem, presenting solutions as problems—rather than asking for a faster horse ask for a better way to travel.
![Page 159: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/159.jpg)
What does this mean?
![Page 160: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/160.jpg)
DESIGN THINKING
Design FirstCompanies 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.
![Page 161: The DEC Education: Product Design](https://reader034.vdocument.in/reader034/viewer/2022051210/54c7364e4a7959f4208b45be/html5/thumbnails/161.jpg)
Thanks!FEEL FREE TO EMAIL ME AT [email protected]