Unit 5 Designing Documents, Slides, and Screens
Design and Conventions We have certain expectations for how a brochure looks, or how a website looks Top to bottom, left to right reading, pages numbers, shopping cart These vary by geography, industry, company… Change over time so audience analysis is important and staying current
Levels of Design Intra: choices for letters and words (fonts, sizes, bold and italics, color) Inter: choices for blocks of texts (white space, indents, headings, lists, bullets) Extra: choices for graphics alongside texts (pictures, photos, data displays, graphs, charts) Supra: choices for entire documents (paper size, headers and footers, index, table of contents, color scheme, layout grid)
Agenda 8 Guidelines for Page Design Brochures Web Pages
1. Use White Space White space (the empty space on the page) makes material easier to read by emphasizing the material that it separates from the rest of the text.
Margins Normally, margins should be 1 inch. May use different ones to align text with letterhead or other visual elements Smaller margins may be acceptable for headers and footers. [Information at the top and bottom of a page] For example, a page number could be half an inch (0.5") from the top of the page as long as the actual text is surrounded by enough white space. In the body of your document, create white space by varying paragraph lengths and using lists.
Paragraphs Try for a good mix of medium-length, shorter, and very short paragraphs. A page looks easier to read when most of the paragraphs are short (six typed lines or less). First and last paragraphs:just typed lines. It's even OK to have a paragraph that's just one sentence. Middle paragraphs: max 7-8 lines.
Lists Use lists to emphasize material. You can use lists for phrases, sentences, or even paragraphs. Normally indented on the left. Since different numbers have different widths in proportional type, use tabs or indents. Use numbered lists when the number or sequence of items is exact. Use bullets (large dots or squares like those in this list) Remember to adhere to rules of parallelism Faulty: The following suggestions can help employers avoid bias [prejudgment] in job interviews: Base questions on the job description, Questioning techniques. Selection and training of interviewers.
2. Use Headings. words, short phrases, or short sentences that group points and divide your letter, memo, or report into sections Enable your reader to see at a glance how the document is organized to turn quickly to sections of special interest to compare and contrast points more easily Break up the page, making it look less formidable (difficult) and more interesting Headings should Be specific. "Part-Time Personnel in the Dallas Office" is better than "Personnel." Cover all the material until the next heading. Normally, you will spend at most two or three paragraphs on a subject before you switch your focus—and need a new heading. Headings can also be complete sentences or questions. The headings at any one level should be parallel: all noun phrases, for example, or all complete sentences.
3. Limit the Use of Words Set in All Capital Letters. Use full capitals sparingly. [Carefully and only where necessary] FULL CAPITALS HIDE THE SHAPE OF A WORD AND SLOW READING 19%. Full capitals hide the shape of a word and slow reading 19%.
4. Limit the Number of Typefaces (Fonts). Fonts are unified styles of type. Fixed vs proportional (oransal) Size, boldness, italics Serif and Sans Serif This sentence is set in 12-point Times Roman. This sentence is set in 12-point Arial. This sentence is set in 12-point New Courier. This sentence is set in 12-point Lucinda Calligraphy. This sentence is set in 12-pcint Broadway. This sentence is set in 12-point Technical.
Typefaces and Fonts Use black type on white paper. Most business documents use just one typeface usually Times Roman, Palatino, Helvetica, or Arial. Creating emphasis Bold is easier to read than italics, so use bolding if you only need one method to emphasize text Use bigger type for main headings and slightly smaller type for sub- headings and text. Avoid Shadow and Outline fonts, which are hard to read. If you combine two typefaces in one document, choose one serif and one sans serif typeface. Eleven-point Times Roman is ideal for letters, memos, and reports. Twelve-point type is acceptable, especially for readers older than 40. Use 9- or 10-point type to get the effect of a printed book or brochure
White letters on dark paper take longer to read.
5. Decide Whether to Justify Margins Based on the Situation and the Audience. Computers often allow you to justify margins, so that type on the right side of the page is evenly lined up. This paragraph justifies margins. Justified margins let you get up to 20% more text on the page; they create a finished look. However, use them only with a proportional typeface in a fairly long line (45 characters or so). Justification used with narrow columns or fixed type leaves wide spaces between words.
Margins and Justification Unjustified margins are sometimes called ragged right margins. Lines end in different places because words are of different lengths. If a change is made in a line of justified type, it affects the spacing for that line and perhaps for the whole page or document. Ragged right margins are uneven, you probably can change a word or two without affecting other pages.
Margins and Justification Use justified margins when you Can use proportional typefaces. Want the document to look typeset and professional. Want to use as few pages as possible. Write to skilled readers. Use ragged right margins when you Do not have proportional typefaces Want an informal look. Want to be able to revise an individual page without reprinting the whole document. Use very short line lengths. Write to poor readers.
6. Put important Elements in the Top Left and Lower Right Quadrants. Readers of English start in the upper left-hand corner of the page and read to the right and down. The eye moves in a Z pattern. Therefore the 4 quadrants of the page carry different visual weights. The top left quadrant where the eye starts is the most important; The bottom right quadrant where the eye ends is next most important. Titles should always start in the top left; and the other important element should be in the bottom right.
Eye movement
7. Use a Grid to Unify Graphic Elements For years, graphic designers have used a grid system to design pages. In its simplest form, a grid imposes two or three imaginary columns on the page. In more complex grids, these columns can be further subdivided. Then all the graphic elements—text indentations, headings, visuals, and so on—are lined up within the columns. The resulting symmetry creates a more pleasing page' and unifies long documents.
8. Use Highlighting, Decorative Devices, and Color in Moderation Many word-processing programs have arrows, pointing fingers, and a host of other gadgets that you can insert. Highlighting and decorative devices make pages more interesting. However, don't overdo them. Color works well to highlight points. Use color for overviews and main headings, not for small points. Blue, green, or violet type is most legible for younger readers, but perception of blue diminishes for readers over 50. Red is appropriate for warnings. The connotations vary among cultures.
Printing Use glossy paper to make colors more vivid. Be aware that colors on a computer screen always look brighter than the same colors on paper because the screen sends out light.
xzcvz 8 Guidelines for Page Design Brochures Web Pages
1. Consider the Audience and Purpose Creating awareness, giving instruction, persuading… Identify Central Selling Point: overarching benefit the audience will get 2. Draft the text Determine how much space is needed Interesting headlines, quiz, puzzle, coupon, story 3. Select appropriate visuals The best covers usually include a photo or some visual image Remember that the image needs to work for the audience. A photo of a campus landmark may not mean much to people thinking about coming to your campus for a summer program 4. Creating the design
3-Fold Brochure on 8.5 by 11” paper
To make the brochure worth keeping, provide useful information. Make the text candid [honest], believable, and human. Answer readers' questions. Overcome possible objections. Use you-attitude and positive emphasis. Be concise (clear). Edit carefully to make sure the text is free from typos or other errors.
When you design a newsletter, Put your strongest image in the top half of the page. Arrange small photos in one column of the grid or in the shape of a C, a U, or a T. Pull out interesting quotes or statements that summarize a section of a long story. Put these in larger type in the middle of columns to draw the eye to the story. Decide how much space to give a story before you write it.
In both kinds of documents, (brochures & newsletters) Keep pictures near the text they illustrate (tell, explain). Use small tab indentations when you have small type and narrow columns. Justify type and use rules (thin lines) between columns for a more formal look. Use bold or italics instead of extensive underlining. Provide an address or phone number for people who want more information. Don't put important information on the back of a page or panel that the reader will cut off to fax or mail to you.
Agenda 8 Guidelines for Page Design Brochures Web Pages
Good Web pages have both good content and an interesting design. 52% of visits: 10 seconds or less 25% of visits: 4 s or less Your opening screen is crucial (very important). Jakob Nielsen claims that only 10% of users scroll beyond the first screen. F-shaped reading pattern
Home Page Wont wait more than 10s for a page to load Provide an introductory statement or graphic orienting the surfing reader to the organization sponsoring the page. Offer an overview of the content of your page, with links to take readers to the parts that interest them. Put information that will be most interesting and useful to most readers on the first screen. Make completing a task as easy as possible
Navigation Biggest issue these days Difficulty going Back, or to Home page, disorganized or illogically organized content and toolbars
Conventions Use a white or light background for easy scanning. Keep graphics small and allow text to load first Provide visual variety in your text. Use indentations, bulleted or numbered lists, and headings. Unify multiple pages with a small banner, graphic, or label so surfers know who sponsors each page. On each page, provide a link to the home page. Keep animation to a minimum, and allow viewers to control its use. If your web pages include music or sound effects, put an Off button
Accessibility 1990 Americans with Disabilities Act Read software Alt tag Mobile
HW Find a good example of a business brochure or published material Identify the use or lack of use of the 8 guidelines