Principles of Design Part 1 of 2

Table of Contents: 

Objective

Time/Materials

Reminders Before You Start

Vocabulary

Tips and Tricks

Introduction

Background

Activity

Wrap-Up

Objective:

Participants will become familiar with the four basic principles of design: Contrast, Repetition, Alignment, and Proximity (CRAP) and be able to identify them in real-world examples.

Time: 55 minutes

Materials:

Scavenger Hunt Handout (see attachment),

computers (ideally one per person) + Internet access

Projector/screen

Markers (enough for each group)

Paper (at least one sheet for each group)

Magazines (with lots of pictures) – optional

Reminders Before Module One

• Review the instructor powerpoint and vocabulary before the lesson, and make sure that you feel sufficiently familiar with the material before start.
• If you have time, collect recent/relevant examples of good/bad design principles and bring them to the lesson. This will help participants make the connection between the principles and designs they see in real life.

Key Vocabulary

Contrast: The arrangement of opposite elements (light vs. dark colors, rough vs. smooth textures, large vs. small shapes, etc.) in a piece so as to create visual interest, excitement and drama.

Repetition: The repeating of visual elements such as line, color, shape, texture, value or image, which tends to unify the total effect of a work of art as well as create rhythm. Repetition can take the form of an exact duplication (pattern), a near duplication (theme), or duplication with variety.

*Alignment: The organization or grouping information/elements to create order and balance, or to call attention to a focal point of the design. This concepts often has to do with placing items on a canvas so that they line up (example: left, right, center aligned). There are two main types of alignment: edge alignment and center alignment. Note that not all design elements have to be aligned, but non-aligned elements or asymmetry should be used in an intentional or meaningful way that benefits the purpose of the design.

*Proximity: The closeness of groups that produces a bond or emphasizes a relationship between elements. Elements that are close together are perceived to be more related than elements that are further apart. Proximity in web design is most commonly achieved by grouping information.

*Instructor’s note: Proximity vs. Alignment?

Proximity and Alignment are highly related concepts in design, and some participants may be confused as to the difference between the two. A good way to differentiate the two is to have participants first assess a design’s alignment by using a straight edge (ruler, pencil, pen, etc) in front of their line of sight and noting which elements “line up.” Check the vertical, horizontal, and radial orientation of elements and note whether or not certain features seem randomly placed on a page, or whether they are in balance with other elements.

To assess proximity, ask participants which elements on the page belong together. This is especially important in designs that incorporate text or functionality. Ask participants of the orientation of elements on the page helps or hinders the user’s experience — either by directing their eye to certain key features of the design, or allowing them to access related information easily and in a manner that highlights a sense of priority.

Tips and Tricks

• Try to minimize lecture time (time when you’re talking at participants)
  • Make sure to frequently ask participants to share their own thoughts/feelings, either via pair share (turn to your partner) or to the entire group. This will help them stay engaged with the content and relate it back to their own interests.
• Use examples whenever possible
  • Whether it’s a flyer in the room, a just-released movie poster, or someone’s cool t-shirt, remind people that design is all around them!
• Don’t forget the quiet folks
  • Just because some people are quiet doesn’t mean they have good things to say! If you notice someone isn’t talking, consider inviting them specifically to share their thoughts, or employing more “pair share” — asking people to talk to the person next to them rather than the large group
• Use humor to help people learn
  • Memorizing principles doesn’t sound fun, but telling participants to make their designs as CRAP-y as possible always gets a laugh. Have fun and use the funny mnemonic device to help people remember the four principles, and emphasize that these are industry-recognized concepts (meaning we didn’t just make them up for our own amusement)

Introductions – 5 minutes

Welcome participants to the Geek Squad Design Principles class! Have all staff in the room introduce themselves. (Name, role/title, and what you do in that role.) If there is time, go around the room and have each participant share their name and their favorite color.
Introduce the course and instructor:

“In today’s class we will be learning about design principles, meaning tips for what can help us understand why we like the look of certain products, paintings, even video games!”

INTERACTION #1: “Now I noticed that many of us have a favorite color. How many of us have a favorite shape or a shape that we really like? (Show of hands — call on a few few people to share).”

INTERACTION #2: “What about a favorite artist, like a painter or maybe you have a book where you love the style of the drawings? (Show of hands — call on a few few people to share and ask how they would describe that person’s style of art).”

“I love that we all like different things! And just so you know, learning about design principles doesn’t mean that there are rules for what you’re supposed to like, or that we’re supposed to all have the same favorite color! Instead, think of design principles like magic glasses that allow you to think about why people make the choices they do in art and technology. Maybe learning about them will inspire you to create different kinds of projects or try new combinations of art!”

Background: Why might we like certain types of designs or art? – 15 minutes

Next, you’ll use the Google Drive Presentation (link below) to go over the 4 basic principles of design: Contrast, Repetition, Alignment, and Proximity. Encourage participants to weigh in on each slide (see presentation notes).

Materials:

Instructor computer with Internet access or downloaded version of Google Drive Presentation

Projector/screen

Handout of Powerpoint slides (optional)

Instructor’s Note: Be sure to review the slides and notes ahead of time to (a) familiarize yourself with the content, and (b) make sure the presentation and internet connection work properly.

Introduce the activity by letting participants know they’ll be sitting through a brief presentation:

“We’re going to take about 15 minutes to look at some pictures of designs and see which ones we like and discuss why. After that we’ll get hands on a play a little game, but for now let’s put our observation caps on and see some examples of design in action!”

LINK: The Principles Of Design: Why We Like What We Do

Hands-On Activity: Design Principle Scavenger Hunt – 25 minutes

Next, you’ll have participants practice identifying the four main principles of graphic design by having them do a mixed media scavenger in groups. This is a fun, non-competitive activity that will help them use real-world examples to better understand how each principle is applied.

Instructor’s Note: Before this activity, make sure you have computers with Internet access tested and ready to go. Ideally, person has their own computer, although it can also work well with one computer per group (maximum 4 people per group).

Materials:

Computer with Internet Access

Poster Paper and markers (for each group)

Magazines (optional) for each group + scissors

1 handout per group (see below)

Introduce the activity and split participants into 4 groups and assigning each one of the design principles:

“Now that we’ve learned about the four basic design principles, CRAP, we’re going to see if we can find some cool examples of how they’re used all around us. We’re also going to get to know each other a little better by working in teams. So let’s start by splitting into four groups.”

Instructor’s Note: To split a large group into smaller groups, you can have participants count off 1 through 4, which will evenly mix participants and encourage people who don’t know each other to meet. Once you have four groups, assign each one a design principle — contrast, repetition, alignment, or proximity.

This activity works best if each group is no bigger than four people — if you have more than 16 participants, creating more groups and having more than one group focus on each design principle (ex: you may have two groups working on contrast).

Give each group a copy of the handout “Design Scavenger Hunt” (see next page). Go over the instructions, emphasizing that their goal will be to find as many of the items on the list as they can related to their design principle.

“Has anyone every done a scavenger hunt before? How does it work? (let participants answer)…. Exactly. Only instead of collecting things, we’re going to be finding different types of examples of each of our design principles. Remember, if you get confused or your forget what your design principle means, you can always ask your teammates or one of the instructors for help. Let’s go over the list together.”

1. A really strong example of your design principle
2. An example of your design principle gone wrong (a design that needs work)
3. A good example of your design principle from an app or game
4. A good example of your design principle from a magazine or advertisement
5. A good example of your design principle from a movie poster
6. A good example of your design principle from an album or book cover
7. A good example of your design principle from classical art
8. A good example of your design principle in the room (like someone’s shirt)
9. An original drawing/sketch that you make that demonstrates your design principle

“To find these things, you can use the Internet, like a google images search, for example, or the magazines we’ve brought in the room, or even your eyes! I have paper and pens for you to create your own drawings. Remember that you don’t have to do them in order! Once you think you’ve found an example, call an instructor over and we’ll take a look and sign off on your example. Let’s take 15 minutes to see how many we can find! Remember, we’re all learning so it’s okay if you have questions. Our main goal is to have fun!”

Instructor’s Note: If you want to preserve the examples, you can have participants print them out or copy/paste them into a document to show later. Another alternative is to use different tabs on their Internet browser for each example, which they can share back later.

For timekeeping purposes, let participants know when they have 5 minutes left and 1 minute left.

The chart is also available to download as a HANDOUT: Design Principle Scavenger Hunt 

Presentation: Group share back (10 minutes)

Take the last ten minutes of the class to let each group share back a few of their favorite examples of what they found through the scavenger hunt. There probably won’t be time to go through all nine examples, so ask each group to share one or two that they really liked.

“Nice job, everyone! I saw some great examples from each of the groups. Let’s go around and have each group tell us their design principle, remind us what it means or something you all learned,  and then share your two favorite examples that your group found.”

Instructor’s note: It may be a good idea to have everyone share their original drawing and the example from the room, since these are the most hands-on and closeby examples that the groups will have collected. If you’re not sure if everyone completed those tasks, simply ask for their two favorites.

At the end of the group share back, thank everyone for participating and remind them that these design principles are all around them, and it’s something they can use when putting together their own projects for school or for fun.