design principles: crap - mount holyoke college · 2018-06-13 · design principles: crap megan...
TRANSCRIPT
![Page 1: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/1.jpg)
Design principles: CRAPMegan Brooks and Chrissa Lindahl
Research and Instructional Support, LITS
![Page 2: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/2.jpg)
Why does design matter?● Visually appealing = students more likely to read, more
likely to spend more time reading
● Easier to understand. Good design clarifies organization of
information.
● Easier to find specific information. Scannable. Students can
successfully find the answer to a specific question.
![Page 3: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/3.jpg)
Source: The Non-Designer’s Design Book
The non-designer’s design book, 4th editionby Robin Williams
Peachpit Press2015
![Page 4: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/4.jpg)
CRAP Design Principles
“Sometimes CRAP Is Good. Well When the CRAP Is An...” Valary with a Why,
http://valarywithawhy.tumblr.com/post/72901798567/sometimes-crap-is-good-
well-when-the-crap-is-an. Accessed 20 Dec. 2017.
![Page 5: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/5.jpg)
ContrastPurpose
● Create interest
● Aid in organization
Method
● Typeface (font, weight, size, style)
● Color
● Spacing
Do contrast with strength!
Styles should match exactly or be VERY different.
![Page 6: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/6.jpg)
CONTRASTPurpose
Create interest
Aid in organization
MethodType face (font, weight, size, style)
Color
Spacing
Apply contrast with strength! Styles should match exactly or be VERY different.
![Page 7: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/7.jpg)
Contrast
![Page 8: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/8.jpg)
Contrast
![Page 9: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/9.jpg)
Repetition
Purpose● Add visual interest
● Unify
Method● Repeated font style element or shape
● Spatial relationships
Conscious consistency
● Push existing consistencies further
● Create repetitions to enhance design and clarity
Repetition
![Page 10: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/10.jpg)
REPETITION
PurposeAdd interestUnify
MethodRepeated font style elements or shapesSpatial relationships
Conscious ConsistencyPush existing consistencies furtherCreate repetitions to enhance design and clarity
![Page 11: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/11.jpg)
Repetition
![Page 12: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/12.jpg)
Alignment
Purpose● Unify elements on a page● Organize elements on a page
Method● Draw invisible lines on your doc● Every element should have some visual connection with another element● Don’t always stick with centering headings!
ALIGNMENT
![Page 13: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/13.jpg)
ALIGNMENTPurposeUnify elements on a page
Organize elements on a page
MethodDraw invisible lines on your doc
Every element should have some visual connection with another element
Don’t always stick with centering headings!
![Page 14: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/14.jpg)
ALIGNMENTPurposeUnify elements on a page
Organize elements on a page
MethodDraw invisible lines on your doc
Every element should have some visual connection with another element
Don’t always stick with centering headings!
![Page 15: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/15.jpg)
Alignment
![Page 16: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/16.jpg)
Proximity
Purpose● Clarify relationship between elements● Organize
Method● Group related items together● Separate unrelated elements● Squint and count the number of visual elements on a page: aim for 3-5
Proximity
![Page 17: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/17.jpg)
ProximitySpacingRelated things togetherUnrelated things far apart
Avoid evenly spaced elements,
the eye can’t make groups.
Try the squint test.
Use empty space, don’t fill all of it.
Make the document scannable.
![Page 18: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/18.jpg)
ProximitySpacingRelated things togetherUnrelated things far apart
Avoid evenly spaced elementsThe eye can’t make groups.Try the squint test.Make the document scannable.
Use empty space, don’t fill all of it.
![Page 19: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/19.jpg)
Proximity
![Page 20: Design principles: CRAP - Mount Holyoke College · 2018-06-13 · Design principles: CRAP Megan Brooks and Chrissa Lindahl Research and Instructional Support, LITS. Why does design](https://reader034.vdocuments.site/reader034/viewer/2022052611/5f0870707e708231d42204a3/html5/thumbnails/20.jpg)
Proximity