the dec education: product design

Design for Non DesignersINTRODUCTION 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 DesignWhat DesignHow DesignWhere Design

AGENDA

Why Design

Consumers Demand it

How did we get here

IT DOES WHAT?!

Feature EraValue is created by the number of features

THE DEMOCRATIZATION OF INFORMATION

Information AgeThe internet changed the availability and access to information

EXPERIENCE ERA

Information SaturationInformation is ubiquitous to the point of distracting—how content is segmented and served is now as important as the content.

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

OrganizationDesign is a process of organizing information and intent.

IMPORTANTinteresting but less important

Push me

CREATES MEANING

EmotionalDesign communicates intangible ideas and creates attachment.

f a n c y

Old School

JUST WHAT’S NEED

IntentionalDesign includes elements that are absolutely needed to understand the underlying message—design is a process of abstraction.

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.

TRIAL & ERROR

IterativeThe 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 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.

SERIF & SANS SERIFS

ClassificationTypefaces are generally classified into two categories: serif and sans serif. Other classifications include slab serif and script.

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.

Going SansThey were popularized during the

Industrial Revolution by printers looking

to add emphasize to headlines.

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

ScriptaculousScript is the proper name for cursive fonts.

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.

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

Oblique

ItalicsSwashes

CHOOSING TYPE

Making Type TalkTypefaces 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

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.

L O O S E Y

GOOSEY

TRACKING

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.

unkerned

kerning

KERNING

TYPOGRAPHY

When in doubt typography.com

Composition

COMPOSITION

SymmetrySymmetry is good. Asymmetry is better

BORING

MORE INTERSETING

COMPOSITION

BalanceOdd numbers look better than even.

BORING

MORE INTERSETING

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.

AWKWARD TENSION

MUCH BETTER

COMPOSITION

Rule of ThirdsObjects placed on the axis of thirds are the most visualizing pleasing to the eye.

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 .

MATHEMATICALLY CENTERED

OPTICALLY CENTERED

COMPOSITION

ScaleVary scale to create visual interest and develop hierarchy.

COMPOSITION

White SpaceNegative space is as important as the forms on the page—helps create visual tension.

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.

COMPOSITION

When in doubt siteinspire.com

Color

COLOR

Components of Color1. Hue - Red 2. Saturation - How red? 3. Luminosity - How dark or light?

HUE

SATURATION

LUMINOSITY

COLOR

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

COLOR

Complementary ColorsColors with opposite hues, e.g red and green

COLOR

Analogous ColorsColors 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 Affordance2. 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 ManifestoThree or four lines that encapsulates the intended messaging. This gives the designer key words to design against.

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.

AN APPLIED APPROACH

Use• designspiration.net• fffffound.com• dribbble.com• behance.com• siteinspire.com

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.

AN APPLIED APPROACH

Use• Google• Shutterstock• iStock• nounproject.com

Lets look at specific applications

Interface Design

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.

PROCESS

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

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.

PRODUCT DEFINITION

Functional SpecOutlines the functionality and scope of the product.

INFORMATION ARCHITECTURE

Process FlowTake different users through the experience: a hybrid between a sitemap and storyboards.

INFORMATION ARCHITECTURE

Low Fidelity WireframesRough sketches of the entire experience. I prefer to sketch with pencil on paper.

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.

VISUAL DESIGN

Conceptual DesignThe designer explorers several different looking design solutions of the same interaction or set of screens

VISUAL DESIGN

Applied DesignOnce a general design direction is set, it is blown out the remaining pages.

VISUAL DESIGN

Production DesignAll the states and support graphics are created. For example what does a button look like on hover, and on click.

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

IN ACTION

Profill.it: Case StudyThe following is an applied look at the aforementioned design process for a fictional product, called profill.it

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

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

PROFILL.IT: CASE STUDY

• Upload image from device• Crop and scale image• Push new image to Google+, Facebook, Twitter,

Tumblr, Flickr, and Instagram

Functionality

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 and automating a manual process.

Design Manifesto

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 Variables1. Color2. Tone3. Amount of Chrome4. Typography5. 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 Variables1. Color2. Tone3. Amount of Chrome4. Typography5. Artwork

COLOR BY DESIGN

Logo Design

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.

LOGOOTYPE

LOGOTYPE + MARK

LOGO DESIGN

Logo MarkThere are four broad types of logo marks:• Representative - Dodge Ram• Monogram - Volkswagen• Visual Pun - Evernote• Abstracted - Nike

LOGO MARKS

ABSTRACTEDREPRESENTATIVE MONOGRAM VISUAL PUN

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.

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.

Where Design

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.

This has a name.

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.

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.

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.

What does this mean?

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.

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