Activity

Timing: 2 to 4 hours
Level: Ages 15 and up

Design principles
Activity Overview
Designers use design principles to evaluate and inform the consistency and visual hierarchy of
their design. Put into action, design and typographic principles, can then be used to make sure
designs reach an intended target audience and/or meet the goals of a company or individual.
Use this activity to introduce the how to use design principles and typography so students can
evaluate and inform their designs.
Note: Portions of this activity align to the Adobe Certified Associate objectives. Within the instruction steps and
technical guides, the specific learning objectives for the exam(s) are referenced with the following format: 1.1

Activity Objectives Background preparation resources

Design skills Technical and content information

•• Understanding and employing design principles ISTE NETS*S Standards for Students
•• Understanding and employing color theory Adobe Certified Associate objectives
•• Understanding the impact of typography
•• Understanding the relationship between color,
typography, layout, and tone
•• Understanding the use of symbols and representa-
tive graphics.

Research and communication skills

•• Critiquing designs

Project Assets

Presentation: Introduction to design principles 2.2, 2.1, 2.2,

2.2, 2.3, 2.3

Presentation: Introduction to typography design 2.3, 2.3,

2.3

Guide: Understanding typography concepts 2.3, 2.3, 2.3

Worksheet: Design principles 2.1, 2.2, 2.2, 2.2, 2.3, 2.3
 Activity Steps

1. Introduce the concept of using design principles to evaluate and inform design. Use the Introduction to design
principles presentation 2.2, 2.1, 2.2, 2.2, 2.3, 2.3 to introduce specific design principles. Some principles to cover include:
•• Emphasis/contrast (focal point)
•• Proximity/groupings and visual hierarchy
•• Balance
•• Alignment
•• Harmony/proportion
•• White space
•• Repetition
•• Color and the color wheel
•• Rule of thirds
2. Introduce and discuss sustainable design. Explain that sustainable design is about being sensitive to the
environmental impact of your design and being mindful to make an effort to comply with economic, social,
and environmental sustainability principles.
Note: For more information on sustainable design, see the Background preparation resources.

3. Introduce and discuss how symbols and representative graphics can be used in visual design. Specifically,
introduce the concepts of data visualization and infographics and how design principles are used to create
symbols and representative graphics that convey information in a variety of ways.
Note: For more information on visual design, see the Background preparation resources.

4. Using the Introduction to typography design presentation 2.3, 2.3, 2.3, discuss the following information about
typography concepts:
•• Serifs: Short lines at the end of characters.
•• Kerning: Space between two letters; becomes very important with large typeface and might need to be
adjusted manually.
•• Tracking or letter spacing: Adjusting overall space between all letters, not just pairs of letters.
•• Leading: Space between two lines of text; can affect readability.
•• Baseline shift: Lowest point of most letters (except those that go below it, such as “y” and “g”); can be
used to create interest.
•• Readability: Be aware of line length, spacing, correct hyphenation, causing reader fatigue by using too
much colored text, caps, or curvy, swooshy type.
•• Fonts: For readability in print and online, compare sans serif to serif and consider size, font families, and
the dangers of using too many font combinations.
5. Show students print-, web-, and video-based examples, some that are well designed and some that are not, of
the type of project you want them to design (for example, websites, logos, commercials, and so on) and
discuss with students the types of design principles. Be sure to identify and discuss the following:
•• Identify visual elements that can support content hierarchy, such as navigation scheme, the use of color,
text headings, fonts (color, emphasis, and size), indentation and alignment, paragraph headings, and lists.
•• Identify visual cues and design principles that help the example stick in their minds.
•• Discuss how the examples are appropriate for their purpose (for example, the organizations they repre-
sent).
Design principles Activity 2
 •• Discuss how the designs reach the intended target audience and/or meet the goals of the company or
individual.
6. Ask students to use the Design principles worksheet 2.2, 2.1, 2.2, 2.2, 2.3, 2.3 to define each design principle and select
an example of how that design represents that particular principle. Once the students have completed their
worksheets, select a few to share their documents and explain why the example they chose represents a
particular design principle.
Note: You might want to gather examples in a presentation to lead students through this exercise.

7. Time permitting, discuss some or all of these design tips from Don’t Make Me Think: A Common Sense
Approach to Web Usability, by Steve Krug (Que Books, 2005):
•• Make the most important things prominent: larger, bolder, near the top, with more white space.
•• Relate similar content visually: grouped by heading, lined up, with similar look or size, grouped in an
area.
•• Nest content visually: use boxes in boxes, have headings and indented subheadings to show elements as
parts of groups.

Assessment:

0 – Does not meet

3 – Meets expectations 5 – Exceeds expectations
expectations
Design Absent or incomplete. Worksheet is complete and Worksheet is clearly and
principles draws examples from the class thoughtfully completed.
worksheet discussion, the design
principles and typography Worksheet includes specific
presentations, and the and clear examples from the
typography guide. class discussion, the design
principles and typography
presentations, and the
typography guide.

Background preparation resources:

•• For more teaching and learning resources on the topics in this project, search for resources from the community
on the Adobe Education Exchange: http://edex.adobe.com/.

Design principles

•• Timothy Samara’s 20 Rules for Good Design: https://www.behance.net/gallery/7616553/Book-Layout-Timothy-

Samaras-20-Rules-of-Good-Design
•• An article on design principles: http://www.digital-web.com/articles/principles_of_design
•• Before-and-after formats illustrating design principles:
http://desktoppub.about.com/od/designprinciples/l/aa_pod2.htm
•• A short introduction to graphic design theory, explaining the aspects of design to consider when composing a
piece of fine art or producing a graphic layout:

Design principles Activity 3

 http://www.usask.ca/education/coursework/skaalid/theory/cgdt/designtheory.htm
•• A brief discussion of the main principles of design: http://char.txa.cornell.edu/language/principl/principl.htm
•• Definitions and examples of elements and principles of design: http://www.johnlovett.com/test.htm
•• Definitions for graphic design principles: http://www.msu.edu/~glazered/tc801/graphic.html
•• 10 principles of good web design:
http://www.creativebloq.com/netmag/dieter-rams-10-principles-good-web-design-1133872

Color theory

•• An overview of color theory and the color wheel: www.colormatters.com/colortheory.html

•• A color theory tutorial: www.worqx.com/color/
•• A site to spur discussion and terminology of color selection: http://kuler.adobe.com

Design process

•• This article from design-lib.com design libraries discusses the design process:
http://www.design-lib.com/guidelines-to-graphic-design-process-gd.php

Typography

•• A general introduction to typography on the web: www.wpdfd.com/wpdtypo.htm

•• What typography is, featuring type used on letterhead, envelopes, business cards, flyers, and brochures:
www.vipprinting.com/typetips.html
•• The difference between type on the web and in print and how to bring the two together:
www.graphicpush.com/webpage-printing-typography-and-usability-considerations
•• Typography for web design:
http://markboulton.co.uk/journal/five-simple-steps-to-better-typography

Sustainable design:

•• An independent online toolkit for sustainable graphic design: www.re-nourish.com

•• The Living Principles for Design framework: http://www.livingprinciples.org/framework/introduction/
•• The Living Principles Resources: http://www.livingprinciples.org/resources/context/overview/

Visual Literacy:

•• The Visual Literacy Whitepaper: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/

education/pdfs/visual-literacy-wp.pdf
•• Data Literacy: http://www.slideshare.net/traasaster/data-literacy-presentation1
•• Infographic about Infographics: https://www.customermagnetism.com/infographics/what-is-an-infographic/

Design principles Activity 4

Books

•• Lupton, E. (2010). Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, Second Edition.
New York: Princeton Architectural Press. Review the companion website: www.thinkingwithtype.com.
•• New York: Princeton Architectural Press. Review the companion website: www.thinkingwithtype.com.
•• Lawler, B. (2009). The Official Adobe Print Publishing Guide, Third Edition. Berkeley: Adobe Press.
•• Williams, R. (2007). Robin Williams Design Workshop, Second Edition. Berkeley: Peachpit Press.
•• Dougherty, B. (2009). Green Graphic Design. New York: Allworth Press www.greengraphicdesign.net/
•• Jedlicka, W. (2009). Packaging Sustainability: Tools, Systems and Strategies for Innovative Package Design.
Hoboken, New Jersey: John Wiley & Sons, Inc.

ISTE NETS*S Standards for Students

This project is aligned to the ISTE NETS*S Technology Standards. Depending on the subject and content area the
student selects you may research your own state content standards to see how this project aligns to your state
requirements.
ISTE NETS*S: Curriculum and Content Area Standards – NETS for Students

1. Creativity and Innovation

Students demonstrate creative thinking, construct knowledge, and develop innovative products and
processes using technology. Students:
a. apply existing knowledge to generate new ideas, products, or processes.
b. create original works as a means of personal or group expression.

Adobe Certified Associate Exam Objectives

Adobe Certified Associate, Web Authoring objectives

2.3 Demonstrate knowledge of page layout design concepts and principles.

Adobe Certified Associate, Visual Communication objectives

2.2 Demonstrate knowledge of design principles, elements, and graphic composition.
2.3 Demonstrate knowledge of typography.

Adobe Certified Associate, Interactive Media objectives

2.2 Demonstrate knowledge of design elements and principles.

Adobe Certified Associate, Video Communication objectives

2.3 Demonstrate knowledge of visual techniques for enhancing video content.

Design principles Activity 5

Adobe Certified Associate, Graphic Design & Illustration objectives
2.1 Demonstrate knowledge of design principles, elements, and graphic composition.
2.3 Demonstrate knowledge of typography.
2.4 Demonstrate knowledge of the use of symbols and representative graphics.

Adobe Certified Associate, Print & Digital Media Publication objectives

2.2 Demonstrate knowledge of design principles, elements, and graphic composition.
2.3 Demonstrate knowledge of typography.
2.4 Demonstrate knowledge of the use of symbols and representative graphics.

For more information

Find more teaching materials for using Adobe
software in your classroom on the Adobe
Adobe and the Adobe logoare either registered trademarks or
Education Exchange: http://edex.adobe.com/. Adobe Systems Incorporated
345 Park Avenue trademarks of Adobe Systems Incorporated in the United States
and/or other countries. All other trademarks
San Jose, CA 95110-2704 are the property of their respective owners.
USA
www.adobe.com © 2013 Adobe Systems Incorporated. All rights reserved.