Transcript Document
Learning to See Visual Communication Techniques for Web and Print Developed by: Seeta Nyary, OISE/UT, 2003. Revised edition of The Low-Down on Layout for Your Visual Communications, 2001, 2002. F A Focal Points Alignments Consistency C Tie-Ins T S Space Visual Principles Focal Points F ocal Points Always have a “prime” focal point Focals: are a way of including emphasis get noticed first and are different from the rest highlight the main message, idea, title, theme allow the reader to quickly understand the main idea allow you (the designer) to choose where the eye will be drawn first (by the reader) Do not emphasize everything Use the principle of contrast for focals contrast = high impact F ocal Points Contrast includes: DARKLIGHT THICKTHIN images, shapes, lines, words, numbers... Think in combinations of opposites – small Use any element – Large bright/dull, sharp/soft, open/enclosed, front/back, solid/subdued, smooth/rough, direct/impression When you do it - DO IT, don’t be a wimp! F ocal Points Catch the readers eye: pointers Interruption of the rhythm CC Against the grid at an angle Intersection Direct Impression CC Background Foreground Intensity Colour Brightness C Thickness Texture Enclosed or open ? F ocal Points Yale Style Guide, 2001 F ocal Points F ocal Points Tricks: sub-messages = sub-focals – – they should be smaller elements of contrast remember: if it’s bigger it’s more important If you don’t have a strong theme or image? – – – pull out key words from text, make a word LARGE, fill it with a light tone, place it as your page focal, or integrate it with your heading(s) Light & Large enlarge words, letters, numbers… enhance with lines, filled shapes, symbols… Alignments A lignments Everything should line up with something on the page – Alignments create relationships: – – square things off (Plot) with other visual elements on the page with content on the page (even if it is further away) Alignments work with tie-ins – – they tie the page together with implied proximity the reader can pick up even subtle differences A lignments Find or create one strong alignment and use it – Can it relate to the theme? – Can it relate to the image, graphic element, or the title? – Can it relate to a graphic treatment of a title? – Can it be integrated into the title? Find one sub-alignment – Can it highlight a secondary message or subheading on the page? Create “a grid” to aid with layout, and stick with it, unless contrast is purposefully used A lignments A lignments A lignments A lignments A lignments Yale Style Guide, 2001 A lignments Yale Style Guide, 2001 A lignments A lignments Left-aligned or ragged right is still easier to read – Force justified text is harder to read – – the space between the words are irregular better used with wider columns Centering is over-used by lay persons – use this for any long excerpts of narrative avoid this alignment initially Right-aligned in under-used – try this alignment beside imagery or graphic elements used within the design (ties-ins). A lignments Consistency C onsistency Repetition is key - less is more – – it’s the overall framework that organizes information it’s the carpet, the ground cover, the matrix Repeat headline fonts and editorial typefaces Repeat characteristics for any element used – lines, shapes, sizes, fonts, spacing, columns, colour Use one to three variations of graphic treatment – – – – two to four colours (and their shades) placement of graphic elements beside sub-titles spacing - words, graphics and page elements used as emphasis C onsistency Elements that establish hierarchy should be consistent Alignments (prime) that establish relationships should be consistent Grids that establish the basic layout of design should be consistent Don’t change half way through unless you are creating emphasis through contrast C onsistency C onsistency C onsistency Repetition can create rhythm or pattern – can this help your design? Regular rhythm = repeated elements at regular intervals, which are smooth and calming Is this rhythm, pattern or texture? Irregular rhythm = repeated elements with abrupt change, which are lively or exciting C onsistency Robin Williams, 1994 Tie-Ins T ie-Ins Think and Divide THINK and DIVIDE: Group content that is similar – place it close together on the page – group by function, message, content, task... Cluster visual elements that relate – place them close to the related content/headings Separate things that are not similar – – – use extra paragraph spacing or extra white space use lines, boxes (enclosures) to divide use contrast principles if you want to draw the eye T ie-Ins Think and Divide T ie-Ins Think and Divide Example: Typical front page information includes a title, sub-title, author, date and an image – Cluster the title and sub-title (one group of similar info - more related) – Cluster the author and date (one group of similar info - more related) – Cluster the image with the title (the image should relate to the title or theme in this case) – Place related items close together!!! Aside: Even if a component of sub-grouped related information is at the top of the page and the remainder is at the bottom, they can be connected by alignment! T ie-Ins Think and Divide Deliberately break the content and visuals into related chunks Group and place related elements and words close together What does this do? – the reader can associate the messages of those separate elements easier – the reader can see the prime messages easier – the reader can have the messages reinforced You get… – more innovative ideas for layout with the rest of the FACTS principles T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide T ie-Ins Think and Divide If you have a catchy phrase, be careful how you break it up, group it: – The flavour will turn you upside down with joy, and you don’t have to clean up. – (The flavour) (will turn you) (upside down) (with joy), and (you don’t have to clean up). When you break up headings and by-lines, think about each phrase as a chunk – – because, here we read line by line so, what does each chunk mean? Space S pace Leave enough breathing space - no clutter – – More space forces a simplicity to the design and a certain degree of elegance – try for 30-40% breathing room on a page… unless your theme requires more “stuff”,i.e. a newsletter even pages that look noisier, which are well designed, have about 15-20% white space lots of space and wide margins imply luxury Space enhances the contrast which you create S pace Space makes it easier to read Don’t trap space - let it flow to the edges Edit the copy - don’t squeeze Use your line and paragraph spacing to adjust text spacing in the main copy Set wide margins and thinner columns – – web - set percent tables to 80%, not 100% web - set fixed tables at 535 pixels wide for 640x480 S pace Imagery Editorial Typeface Colour A Few Extra Tips Imagery Use appropriate imagery for the message/theme Don’t use imagery, if you don’t have the appropriate visuals, examples: – – – enlarged photographs out of resolution (pixilated) clipart that that everyone has INSTEAD, use a creative treatment of words, shapes and lines. Build a digital library – go to clipart sources, buy relevant stock art, create your own if you have the in-house skill If you don’t think it looks good, it doesn’t! Imagery Editorial Avoid long headings - max 3 lines Avoid centering more than 2 lines Avoid capital letters - it’s harder to read Avoid too much italic treatment Divide the text into: – – – editorial copy (main text) 3-4 heading hierarchies (and associated graphic treatment) graphic headline (part of the title/theme/message) Note: a large headline in a small space will look cramped and the effect is lost. Typeface No more than 3 fonts Don’t use a fancy font for the whole document – – – Serif (Times) and Sans Serif (Arial) – – use them for headings, headlines and graphics match the fancy font to your message and theme if you don’t have the right font, use a generic font web or monitor - sans for copy print - serif for copy Keep a copy of your fancy fonts, they are computer specific Typeface Typeface Colour Limit your colours (3, 5 max) One colour works fine if you use the entire spectrum of its shade – – – black and 256 shades of grays + white blue and the tints of blue + white reversed text is effective for emphasis. white text in solid background Pick colours to match emotions and theme – happy, sad, lively, earthy, childish Colours and symbolism vary with culture Red always stands out first (see next) Colour Colour CMYK - pigment model (print) – – RGB - light model (screen) – – Cyan, Magenta, Yellow and Black all mixed together = mud C M Y K R Red, Green, Blue all mixed together = white G B Colour Safe for the web = 216 colours – – these colours will not change or dither at the 256 colour monitor display for any system values are calculated in RGB or the hexadecimal system, which can be coordinated between apps MUD! WHITE Colour Review Don’t Do’s Some Sites Power Point in the Classroom http://www.actden.com/pp/ National Geographic http://www.nationalgeographic.com/xpeditions/ FLW http://www.pbs.org/flw/ http://www.pbs.org/flw/buildings/index.html Harley http://www.harley-davidson.com/en/home.asp?bmLocale=en_CA Clever Design http://www.cleverdesign.com/clever/html/indexh.htm TD http://www.tdcanadatrust.com/index.jsp Bridgeman Art Library http://www.bridgeman.co.uk/ Any Questions? It’s a wrap!