Presentation is loading. Please wait.

Presentation is loading. Please wait.

A GUIDE TO COMMUNICATING YOUR DESIGN VISION Megan Ellinger Version 1.0, January 14, 2011 This work is licensed under the Creative Commons Attribution-NonCommercial-

Similar presentations


Presentation on theme: "A GUIDE TO COMMUNICATING YOUR DESIGN VISION Megan Ellinger Version 1.0, January 14, 2011 This work is licensed under the Creative Commons Attribution-NonCommercial-"— Presentation transcript:

1 A GUIDE TO COMMUNICATING YOUR DESIGN VISION Megan Ellinger Version 1.0, January 14, 2011 This work is licensed under the Creative Commons Attribution-NonCommercial- ShareAlike 3.0 United States License. To view a copy of this license, visit or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

2 USING THIS GUIDE Design is complex. Color is personal. Images and texture convey meaning. Even typeface contributes to the overall “feeling” you are trying to convey. Designers are visual. Before you meet with your designer, create an inspiration gallery. Use it as a conversation starter. (Instructions included) Trust your designer. Use the examples here along with your inspiration gallery to help articulate your vision to the designer. This guide explores: – Photography and Illustration – Texture and Pattern – Typography – Color Schemes – Sample Sites

3 PHOTOGRAPHY & ILLUSTRATION Are there styles of photography or illustration that support the meaning you’d like to convey?

4 Clip ArtLine Drawing Aerial PhotographyWatercolor

5 Pop ArtAbstract MicroscopyPhotojournalism

6 TEXTURE & PATTERN Are there textures or patterns that support the meaning you’d like to convey?

7 Natural, OrderlyDurable, Rugged Strong, ConcreteDelicate, Detailed

8 Antique, EstablishedWhimsical, Fun Cutting Edge, AdvancedLuxury, Elite

9 TYPOGRAPHY What style of typography do you prefer?

10 Sans-serif fonts Arial Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Verdana Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Trebuchet Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Calibri Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Tahoma Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Comic Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design.

11 Serif fonts (left column) Combining Fonts (right column) Georgia Heading Using two different fonts can add visual interest to a design. This paragraph uses Cambria. Cambria Heading Using two different fonts can add visual interest to a design. This paragraph uses Calibri. Trebuchet Heading Using two different fonts can add visual interest to a design. This paragraph uses Arial. Cambria Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Times Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design. Georgia Heading Seeing how a font looks in a paragraph can help you decide whether it’s a good fit with the rest of your design.

12 COLOR SCHEMES Are there color schemes that reflect the meaning you are trying to convey?

13 Bold and Bright Muted Earth Tones Monochromatic Grayscale

14 SAMPLE SITES Putting these concepts together

15 I Was Wondering Photography & IllustrationCartoon Texture & PatternHorizontal lines (background) TypographySans-serif Color SchemeBold, bright What does the design evoke?Friendly, fun, child-like

16 What You Need To Know About Energy Photography & IllustrationClipart Texture & PatternNone TypographySerif Color SchemeMuted earth tones What does the design evoke?Academic, Informative

17 Carsonified Photography & IllustrationLine Drawing Texture & PatternNone TypographyCombination – Serif for headings, Sans serif for body Color SchemeMonochromatic What does the design evoke?Fun, youthful, creative

18 One in 8 Million Photography & IllustrationPhotojournalism Texture & PatternNone TypographyCombination – Serif for headings, Sans serif for body Color SchemeGrayscale What does the design evoke?Gritty, movie-like, still feels like the newspaper

19 YOUR INSPIRATION GALLERY A Way to Share your Vision with Your Designer

20 CREATE YOUR INSPIRATION GALLERY Visit a lot of websites. Visit sites with similar goals, features and topics. Visit sites that are the opposite of your goals, features and topics. – Pick 2-3 you enjoy and take a screen shot. – Pick 2-3 you dislike and take a screen shot. For each picture you took, answer these questions: – What adjectives would you use to describe the picture? – What do you enjoy about the picture and why? – What concerns you about the picture and why? How to take a screen shot (a.k.a. screen capture) – Press the “Print Screen” button on your keyboard. This takes a picture of the visible area on your screen and copies it to your clipboard. Click ‘Paste’ or ‘Control + V’ to add the picture to this page. – If you use the Firefox browser, you can install a plugin called “Screengrab!” It allows you to take a picture of a portion of the page. – Buy low cost software like SnagIt, or download the free trial.

21 What adjectives would you use to describe the picture? calm, charming, confident, credible, delightful, encouraging, energetic, entertaining, friendly, mature, modern, peaceful, romantic, trustworthy, upbeat What do you enjoy about the picture? Areas to Review Page Layout Navigation Location of features Photography & Illustration Texture & Pattern Typography Color Scheme Add Your Screen Shot Name of Website

22 What adjectives would you use to describe the picture? What concerns you about the picture? Areas to Review Page Layout Navigation Location of features Photography & Illustration Texture & Pattern Typography Color Scheme Add Your Screen Shot aggressive, average, boring, childish, crowded, dated, depressing, drab, dull, intimidating, old-fashioned, plain, shady, ugly, unbelievable Name of Website

23 ACKNOWLEDGEMENTS Leah Buley. “Things to do at the beginning of each project.” Originally published April Accessed January 14, gs-to-do-at-the-beginning-of-each-project/ David Sherwin. “Better Ideas Faster.” Originally published July 1, Accessed January 14, faster.html Jared Spool. “What Goes into a Well-Done Critique.” Originally published September 23, Accessed January, 14,

24 PHOTO CREDITS “The War Machine” “Wind-up Birds Illustration” “Batgirl Photobooth” “Abstract Drum Top 2” “Lago di Como – Lake Como, Italy” “Microscopy” “D-For Duck as Painted by Alma!” “Basket Weave Texture” “Webtreats Brown Leather Pattern” “Heart Mesh Scan” “White Silk 5” “Daisy red polka dots” “Rust Metals” “The Bean, Day of 365” “Free concrete texture”


Download ppt "A GUIDE TO COMMUNICATING YOUR DESIGN VISION Megan Ellinger Version 1.0, January 14, 2011 This work is licensed under the Creative Commons Attribution-NonCommercial-"

Similar presentations


Ads by Google