revise
Ashrestha1
Lesson3Slides-Design.pptxDESIGN
ENGL 2311 | Lesson 3
1
DEFINING DESIGN
Also known as information design or document design
Two Part Definition
Design as product - the presentation of information on page and screen
Design as process - what we do to develop a document “that works for its users” (Reddish).
UNDERSTANDING WHAT YOU ALREADY KNOW
MLA Formatting
Excerpt from Sample Essay (purdue.owl.edu)
The process of following MLA format guidelines presents a product that allows its users to find needed information quickly and complete related tasks
KEEPING IT SIMPLE
KISS Principle – Keep it Simple!
Effective information design follows user-centered guidelines and principles
Main Goals
Get users interested
Keep users interested
Make information easy for all users to find
Users searching for key terms
Users scanning to find specific information
Users reading every word
KEEPING IT SIMPLE – Don’t make it harder
Instead of presenting information in ways that make access and use difficult
Excerpt from Texas Estates Code(statutes.capitol.texas.gov)
KEEPING IT SIMPLE – Make it easier!
Good design presents information to users in a way that makes information
Easier to access
Excerpt from Texas Estates Code(statutes.capitol.texas.gov)
Easier to use
CONSIDERING THE ELEMENTS
When we design, we think about both what elements we use and how to place them to effectively craft a message.
These are the most common elements:
Color
Size
Weight
Shape
Type (text, graphic, photo, white space, etc.)
FOLLOWING THE BASIC PRINCIPLES (CRAP)
We know the elements. Now what?
Robin Williams answers in The Non-Designer’s Design Book by offering these four basic principles of design:
Contrast
Repetition
Alignment
Proximity
Using the CRAP principles effectively involves arranging different types of elements to create visual and typographic cues that help users to find and access information
FOLLOWING THE PRINCIPLES - CONTRAST
Avoid similarity
Make elements the same or very different
Makes a reader look at the page
We will review ways to apply contrast by varying color, size, weight, shape, and element type.
CONTRAST (Color)
Applying the contrast principle using color can ensure elements are easier for users to perceive.
For example, yellow text on a white background is hard to read because yellow and white are closer together, creating low contrast: hello
The same is true for light blue text on a blue background: hello
However, yellow text on a blue background is easier to perceive because blue and yellow are farther apart, creating higher contrast: hello
Because we all perceive color differently, color should never be the only element used in the application of any principle. Always use it in combination with other elements (size and weight are frequently combined with color, as they are on this slide)
CONTRAST (Size)
One of the most applications of the contrast principle through size appears on every slide you’ve seen so far.
By enlarging text some text and not enlarging the rest, you emphasize the text you enlarge.
It’s commonly used to differentiate headings from body text (as is the case on this slide).
Manually creating a hierarchy of titles, headings, subheadings, body text, and lists can be difficult to do.
To ensure both consistency across these elements and accessibility for individuals who access the document through the use of screen readers and/or use the navigation pane, use the Styles tool.
Styles are preset, but you can modify them.
CONTRAST (Weight)
Contrast can also be applied using weight.
The most common practice application for this principle in text is the use of boldface to emphasize a word.
CONTRAST (Shape)
Another way to apply contrast is by varying shape.
In text, this is most often applied through the use of different fonts. For example, both IMPACT and CALIBRI are used on this slide.
The variation in their shapes draws attention to the impact font first because it takes up more space.
CONTRAST (Shape – serif and sans serif)
Another way to apply contrast by varying shape is to use both serif and sans serif fonts.
“Serif” essentially means “feet,” and “sans serif” means “without feet.”
The “T” on the left below is in a common serif font - Times New Roman.
The “T” on the right has no feet and is in a common serif font – Arial.
T T
CONTRAST (Shape – common fonts)
Common Serifs
Times New Roman
Courier
Garamond
Droid
Georgia
Common Sans Serifs
Arial
Calibri
Verdana
Droid Sans
Helvetica
CONTRAST (Elemnt Type)
One last application of contrast is created through variation of element type. The full-color photo below is the first one to appear in this set of slides, so users are likely to notice it.
Photo by Unknown author license under CC BY-NC-ND.
To ensure all users can perceive this photo, good design will include the use of alt-text (alternative text) for images. Usually, right-clicking on the image will make an alt-text option appear.
CONTRAST (Element Type - hyperlinks)
One last application of contrast is created through variation of element type.
Hyperlinks will also stand out.
It’s important to ensure that all hyperlinks are descriptive meaning the hyperlink text describes what the link leads to rather than providing only a URL.
This resource from Microsoft offers additional information about using features in Word to make documents accessible.
FOLLOWING THE PRINCIPLES - REPETITION
Repeat visual elements
Colors, shapes, textures, etc.
Organizes and unifies
Examples include:
Use of the same style headings in each section of a document
Use of lists to organize information and to understand how it relates to other information in a document
FOLLOWING THE PRINCIPLES - ALIGNMENT
Everything has a purpose
Everything is connected
Lines are clean
Examples include:
All headings and body text in this document are aligned to the left of the page
Bullets line up with each other
Centering either would disrupt the organization and flow of the document
FOLLOWING THE PRINCIPLES - PROXIMITY
Group similar items
Organizes/provides structure
Examples include:
A bulleted list of ingredients for a recipe
A bulleted list of kitchenware needed for a recipe
An ordered list of steps for a recipe
Mixing items between lists (like jelly, plate, open the peanut butter jar) would confuse users!
PUTTING IT ALL TOGETHER - Example
What differences make the design on the right better?
Examples from Robin Williams’ The Non-Designer’s Design Book, p. 12.
PUTTING IT ALL TOGETHER – Example, cont.
Using principles effectively results in good design that gains and maintains users’ attention and facilitates easy access and use.
Examples from Robin Williams’ The Non-Designer’s Design Book, p. 12.
Removed the unnecessary border
Changed the serif font to a sans serif font, added color, and italicized commentary (Contrast)
Repeated the pattern of bold statement/italicized commentary (Repetition)
Created stronger text alignments to guide the user with less effort (alignment)
Added space between steps to group like items together (proximity)
Removed the unnecessary numbers
REFERENCES
Reddish, Ginny. “What is Information Design?” Teaching Technical
Communication: Critical Issues for the Classroom, edited by James Dubinsky. Bedford St. Martin’s, 2004, pp. 211-217.
Williams, Robin. The Non-Designer’s Design Book, 4th ed. Peachpit Press,
2015, p. 12-13 and 225.
Questions?
Contact your instructor!
24
