Key Concepts

G uide the attention, the eye, and the mind (Perspective - Las Meninas)
R elationships (repetition, rule of thirds)
A lignment (focus and flow - Siqueiros)
P roximity (group related items and separate unrelated ones)
H armony (color, composition/weight - Joan MirĂ³, thematic relationships)
I nterest (Figure/Ground - Magritte, Picasso; Geometry - Escher, Positive/Negative Space & Symmetry - Escher)
C ontrast & Consistency
S implicity

- chericem1 chericem1

Key Principles

Graphic design is about . . .

Perspective - creating and packaging meaning
Purposes - scaffolding a reader's engagement with ideas
Problems - solving aesthetic, conceptual, and spatial problems
Principles - expressing "the greatest number of ideas in the shortest time with the least ink in the smallest space" (Edward Tufte)
Products - using the simplest, most effective tools to complete the task
Process - "listening" to and being led by the work
Putting the senses to work!

Typophile Film Festival 5 Opening Titles from Brent Barson on Vimeo.

- chericem1 chericem1

Key principles of graphic design include . . .

  • Focus the attention
  • Guide the eye
  • Consider the aesthetic and emotional effects of your choices
  • Breaking conventions and countering expectations can surprise and delight your audience, or frustrate them, depending on how well you prepare them for those moves and how deliberately you execute them
- chericem1 chericem1

Primary Purposes of Graphic Design

A ctivate attention
B uild meaningful patterns for the brain
C ommunicate conceptually
D evelop ideas in layers of space
E ngage emotions, eyes, and intellect

- chericem1 chericem1

Consider this set of examples:


3-D Film Promotional Poster for Star Wars

A Collection of Infographics That Are Actually Well-designed

A Museum Let Street Artists Do Whatever They Want On Its Walls

Artist Re-creates His Own Childhood Drawings 20 Years Later


As More People Look at This Digital Horse, It Becomes More Spectacular

ApplianceDesignJuly2006.png - This company now produces a digital edition of its monthly magazine. Be sure to turn your sound on, then "turn" the page. Also, play with the buttons at the top of the page (especially Tools and Links)!

Bluesfear Worm - What happens when artists attempt to blend their work? (Original link now appears to be non-functional, but you can see a video of the original project below. Some images may not be appropriate for classroom use.)

And this is a 3-D visualization of the entire mural:

COLORSMagazineLogo.png - This magazine uses a combination of provocative images and text in a variety of languages to tackle the sociocultural significance of a different theme each month. The materials make compelling contributions to bulletin boards, but MUST be previewed prior to classroom use as much of what is included in the magazine would be inappropriate for classroom use.

Creative Mom Transforms Her Baby's Naptime Into Dream Adventures

DailyDoseOfImagery.png- An outstanding photoblog that teachers could use to facilitate discussions re: what makes various kinds of photos "work" You can learn a lot about digital photography simply by viewing!

DaveWerner'sPortfolio2006.png - An outstanding example of the powerful effects layering aesthetic, conceptual, emotional, intellectual, and visual elements using mixed media

Eyetrack III.png - Take a look at what research shows about eye movement patterns and their implications for web page design.

FrameThatSpam.jpg - Artists transform information into code, and then represent it in multimedia

Grafik Dynamico - What happens when RSS meets text, images, and creative formats?

Jonathan Harris: Today - A photo a day

LineRider.png - Fun game

MasterpieceOrAd.png - Famous works of art mixed in with ads. Can you tell the difference?

MikeSternDigitalTime-LapsePaintingPortfolio.png - Time lapse paintings (very cool)

RunningTheNumbers.png - Statistics are powerful, but photos, well . . . see for yourself!

SectionSevenCabinetOfWorks.png - Interactive, extremely visual portfolio that uses different styles for each project

Snow Art - What does this man have to understand in order to be able to create these works of art?


The Girl Effect - Great example of how simply playing with typeface can enhance meaning, and of how setting text to music also changes the impact of the text

These29CleverDrawingsWillMakeYouQuestion.JPG (Also available here.)

This Mom Lets Her 4-year-old Finish Her Drawings

Union Station Centennial Experience

Union Station Centennial Experience from Quixotic on Vimeo.

Vik Muniz: Art with wire, thread, sugar, chocolate - TED Talks video with incredibly innovative examples of sophisticated pieces of art created out of wire, thread (esp. compelling), and spaghetti! - chericem1 chericem1

Weird Perspective of a Painting Found in Windsor, England

YipYopLogo.png - A beautiful portfolio full of examples of well-designed animations, cds & posters, icons, illustrations, logos, photos, and web graphics


Interactive Activities

ArtPad.png- Provides a canvas and brushes, you create

CustomEyeChartMaker.png - Type in your text and it will generate an eye chart for you

Eyetrack III - Fixation Exercise - Test your understanding of eye movement patterns typical of people viewing a webpage with this interactive quiz.

Vispo.png - Langu(im)age - Interactive Visual & Sound Poetry - A very fun place to play! (Requires Shockwave)

Litebrite - Select your peg colors and create your own images similar to the original children's game

twitdraw_logo.png - Collaboratively draw graffiti and post to Twitter

The Undivided Mind - A virtual exhibit that mixes art, science, & media (clothing, imagery, sound/video, music, and movement)

VisualDNA.png - A personality quiz project geared toward visual responses


Potential Graphic Design Projects

Publicizing Your Professionalism

  • Websites
    • Google Pages - Choose a template, enter your text, and publish your page with this free, easy-to-use, online tool from Google
    • Weebly

Publicizing Your Program

  • Coloring Books
    • Dumpr - This free online suite of tools allows you to edit your Flickr photos in order to turn them into coloring book images (VERY COOL), make them look old, turn them into globes, or add reflections. You can then save them to your Flickr account. (Still in beta)

    • Generator Blog - A fantastic blog that contains links to all sorts of free, interesting generators (such as cereal boxes, insurance cards, money, etc.) that would be great tools for students to use in creating creative advertising campaigns

  • Scrapbooks
    • Scrapblog - Combines the purposes and multimedia features of blogging with the visual affordances of scrapbooking. Comes with built-in templates and can accommodate music and video too

    • VoiceThread - Easy way to connect photos and voices--particularly useful for emphasizing language without ignoring visual (in FL classes, for example). Would also be great for capturing family history.

  • Slide Shows
    • Slideshare - Use premade themes to create slideshows from your photos that you can embed in your blog or website.

  • T-shirts
    • - Type in a website and it will generate a word cloud for a t-shirt based on the most commonly used words on the site that you can customize.


Communicating Design: Competitive Analysis - A really useful article that demonstrates how to use graphic representations as tools for comparison, analysis, and dissemination of information.

Matei, Sorin A. (2004). Mental maps: Making the invisible visible. Retrieved November 14, 2006, from


A Periodic Table of Visualization Methods - A terribly clever attempt to categorize multiple methods of visualizing data and represent them in the style of the periodic table of elements. A link to the article that accompanies the table: A link to visual maps of other researchers working in a similar vein:

Basic Principles of Visual Design - A one-page PDF handout that outlines the basic principles of graphic design (proximity, alignment, repetition, and contrast) from The Non-designer's Design Book by Robin Williams.

Data Visualization - Cherice's most recent bookmarks on the subject

Design & Technology Support Pack - This PDF file outlines a curriculum consisting of a series of hands-on activities that teachers can use to help students consider issues of design. It is intended for use in conjunction with this free set of Big Zipper color posters. The links on the rest of the site are well worth exploring--especially for business teachers. Downloadable PDFs include case studies, Through the Keyhole: User Research--a neat set of ready-to-use activities to help students think about market research, and a host of other well-designed activities.

Finding Heroes in Fine Art - This site provides lesson plans and online resources for guiding students to explore the concept of heroism through fine art.

Graphic Arts - Cherice's most recent bookmarks on the subject

Graphics Teachers Web Log - A blog for graphic arts teachers with interesting tips and tricks for teaching graphic arts

Information Aesthetics - A nice blog with loads of examples of infographics

Milestones in the History of Thematic Cartography, Statistical Graphics, & Data Visualization - Timeline displays key innovations

My Hero Virtual Arts Gallery - This site provides lesson plans, examples, and resources for helping students use the visual arts to explore the concept of heroism.

The Principles of Design - Expands on the 4 basic principles of design (Proximity, Alignment, Repetition, & Contrast) and includes examples and links to resources that emphasize the cognitive and psychological bases of the PARC principles.

Rhetorical Triangle - This graphic depicts 3 key elements that must be considered when designing advocacy efforts designed to produce change

State of the Pandemic - Note how each example of visually represented data helps you to understand and remember a particular idea.

Visualizing Information for Advocacy - Downloadable PDF of a booklet that advocates users think about what story their data tell, how to represent it in clear, compelling, convincing ways that will move an audience to action. Excellent advocacy resource for NGOs.

Visual Literacy - Cherice's most recent bookmarks on the subject

Visual Representations - Cherice's most recent bookmarks on the subject

Visual Rhetoric - Cherice's most recent bookmarks on the subject

Visual Thinking - Cherice's most recent bookmarks on the subject

Web Design - Cherice's most recent bookmarks on the subject


Bubbleshare - Allows you to edit audio and images online for free

Comeeko - Free, well-designed software that lets you create comic strips and save them for others to view. -

Dumpr - This free online suite of tools allows you to edit your Flickr photos in order to turn them into coloring book images (VERY COOL), make them look old, turn them into globes, or add reflections. You can then save them to your Flickr account. (Still in beta)

FD's Flickr Toys - Loads of free "generators" that will allow you to create CD covers, motivational posters, etc.

Flickr - Allows you to create libraries of images that you can share with others and is a particularly good place to "store" a shared collection of photos for a group.

FlickrCC - Good source of copyright safe images

Gliffy - An online application that allows you to create diagrams and share them with others.

Grokker - Displays search results conceptually/graphically/visually or in the traditional list format--your choice.

Letterpop - Create newsletters from a large selection of templates by clicking, dragging, and dropping, then download and save them or display up to 10 different ones online for free

Many Eyes - Upload and display your data in a wide variety of ways

My Brochure Maker - Create your own brochures from templates

Picnik - Absolutely fabulous, free, easy-to-use, extremely functional, online image editing software. Lets you rotate, crop, color, or edit photos and will soon offer special effects. Interfaces very well with Flicker. (Still in beta)

Pikipimp - A free, online site that lets you upload pictures, add all sorts of accessories and speech bubbles to them, then save them. The site will generate a URL where the pictures can be viewed, as well as code for your webpage.

Quintura - A very cool search engine that returns the results visually. Mouse over one of the tag words to see additional layers of results. See the new site for kids here:

Stock Xchng - Find professional quality, copyright safe photos to use in publications and websites here

[[;|Visual Search Labs]] - Enter a search term (or combination of terms) and this search engine will display related images;

Websites as Graphs - Lets you visualize the content of a website (in terms of images, tables, text, etc.) graphically. Useful for evaluating websites in terms of content and design issues.

Weebly - Create free websites from templates by clicking, dragging, and dropping


Ben Fry - Take a look at the ways a scholar from MIT is working with scientists to help them visually analyze and represent complex data sets. First, run the anemone applet and click any of the nodes and drag them to see the effects. Next, view the Quicktime movie of Valence. Before you do so, I recommend that you read the couple of paragraphs of textual explanation below the movie links so that you'll understand what you are watching.

Cat Herders - This EDS commercial is great for considering the idea of multiple literacies

Hecktor - Print from your laptop to the wall with only a can of spray paint and some string.

How Beauty is Made - A fascinating video that shows how technological tools are used to "create" beauty for advertising campaigns. This would make a great springboard to a discussion on the effects of advertising, the ethical use of technology, and a wide variety of social issues.

Jeff Han on TedTalks - PHENOMENAL video demonstrating computer screens with touch sensor technology capable of handling inputs from multiple data points at once. Major implications for artistic creation, graphic design, etc. Key ideas: "the interface just disappears," multitouch navigation