Design Fundamentals

Project 1 - Iconography

By CRAIG KUNCE

1. Introduction

Iconography, icons, pictograms, pictographs, ideograms, logograms, symbols, brandmarks—whatever name you choose—are symbols used to help viewers quickly identify and relate to something. This something may be a sound, word, a real object, an action, an idea, or a belief.

Icons are our earliest know form of human writing. Before humans had an orderly written alphabetical language, they drew pictures.

Icons are everywhere in our society. Some of the most well know are:

    1. The ubiquitous MEN and WOMEN icons on public restroom doors.
    2. The wheelchair icon painted in handicapped parking spaces and entranceway signs to buildings
    3. The red circle and diagonal line symbolizing NO
    4. NO SMOKING icon with a cigarette covered with a NO circle icon

Credits: handicapped, no smoking, washroom

2. Examples

Student Work

Savannah Britton

 

Hayden Gullickson

 

Stephanie Price

 

Stephen Schams

 

Jonny Tippets

 

3. Learn more

Wikipedia: ideogram
An ideogram or ideograph is a graphic symbol that represents an idea or concept, independent of any particular language, and specific words or phrases. Some ideograms are comprehensible only by familiarity with… (read more)

Great icon design includes:

  1. Visually delivering the message to the audience
  2. Begin with a base grid so your icons go together
  3. Imagine you are drawing icons to be used globally
    (Can your icons communicate to every Earthling—no matter which language they speak?)
  4. Choose a consistent and appropriate line style
    (angular, circular, rough, bold, brush strokes, thick/thin etc.)
  5. Choose a consistent and appropriate illustration style
    (abstract, b/w line work, loose and swashy, neat and tidy, etc.)
  6. Make sure they look good dime-sized and larger

4. Apply it

Design Project
Apply your new knowledge with a real design project. You will design 6 individual icons that symbolize a related set of categories.

OPTIONAL - Build and present your project on Behance.net - build it as you go through the design process. This is what your Behance presentation should look like: Example Behance Presentation

What's Due

  • 10 developmental sketches on color graph paper, b/w graph paper
    (marker, pencil, or Illustrator)
    (about 1" tall each)
  • 2 rough sketches
    (any category)
    (Marker or Adobe Illustrator)
    (3" tall or wide)
  • 2 critiques in class
  • 6 final icons
    Present your final 6 icons in two sizes. 3/4" and 3" (total of 12 icons)
    (marker or Adobe Illustrator)

Instructions

  1. Choose a related set of categories
    that a business or organization needs to visually communicate with their customers. Here are a few potential clients to design for (or you can choose your own):
    • 6 Car Detailing website category icons
      (Wash & wax, sparkling hubcap cleaning, under-body rust treatment, interior vacuum, engine-brite package, complete cleaning package, etc.)
    • 6 Restaurant menu category icons
      (Appetizers, Salads, Soups, Drinks, Beef, Chicken, Seafood, Pasta, Tour of Italy, Tour of Spain, Kids menu, etc.)
    • 6 local bank website category icons
      (Mortgage, Investments, Retirement Planning, Online Banking, Bill Pay, Checking, Savings, College 529 Plans, IRAs, Christmas Club, etc.)
    • 6 online newspaper's sections/category icons
      (World, Local, Editorial, Arts, Entertainment, Classified, Sports, Weather)
    • 6 food brand flavor category icons
      (Fine Chocolate - Organic, with almonds, 85% cacao, 70% cacao, with blueberries, energy/sports chocolate, etc.)
    • 6 subway/airport/bus stop signs category icons
      (telling people where they can walk, bike, place their bags, use headphones, buy tickets, use baby strollers, wheelchairs, etc.)
    • 6 local coffeehouse drink category icons
      (Coffee, Latte, Cappuccino, Steamers, Smoothies, etc.)
    • 6 grocery/department store isle sign icons
      (Fruits, Veggies, Meat, Dairy, Bakery, Bread, Donuts, Salad Bar, etc.)
  2. Hand draw on graph paper (download color graph paper here, b/w graph paper), or in Adobe Illustrator
  3. Set up an underlying grid to ensure consistency

    Credits: image 1, image 2
  4. Begin your creative work… sketch and draw
  5. We'll critique in groups, and one-on-one, in class as you develop your icons into a finalized set of six.

5. Evaluate it

We'll evaluate your design work using these learning outcomes (also on this project's evaluation sheet):

  • Are you designing effective marketing and advertising material?
  • Are you appropriately using design software?
  • Are you following a design process?
  • Are you practicing legal & ethical standards?
  • Are you explaining and selling your creative solutions?