Digital Design and Visual Problem Solving

This is an archive of visual problem solving exercises I pose to my digital students of  design.

Black Square Problem

By using four flat black squares of the same dimension, create a graphic image to express the meaning of each of the following words: order, increase, bold, congested, tension, and playful. Make eight preliminary sketches for each word in the areas indicated. Then select the most effective solution for each and execute it in the larger designated area. Using only four squares may seem to be a rather limited palette for expressing such dives words, but consider how these squares can be expanded into a more comprehensive language by utilizing various design principles.

Click here to download the Black Square Problem

Because design skills become more comprehensive by creating several solution for a single problem, selecting the most effective solution is an important condition explored through this assignment. [20 points]

Coming up: You’ll create a blog and a Flickr account next class  [5 points], and begin to explore the fundamentals of design using Adobe Illustrator as a tool.

—

Black Square Problem, Part 2

Today, we begin to learn how to use Adobe Illustrator as a design tool. These are your objectives:

• Correctly apply the basic functions of Adobe Illustrator to convert your previous six pencil drawings into digital designs.
• Correctly save, export, and upload your finished designs to your computer and to Flickr.
• Add a new blog entry that describes, in writing, the details of your first lesson in Illustrator; add linked images of each of your six designs.

The basic Illustrator functions are:

• Open
• Size
• Shape
• Constrain
• Move
• Resize
• Arrange (bring to front, move to back)
• Layer
• Save
• Export

Plus…

• Upload to Flickr
• Link images to blog

These designs should be finished and viewable on your blog by the start of next class. [10 points]

—

Production collaboration, or how I learned to work with others to set up a large format print job.

Take a few minutes to post your work onto your blog if you haven’t already done so. We’re going begin with a class review of the designs you posted onto your blog.

After the review, get into work groups of four; I’ll demonstrate how to set up guidelines.

Objectives for today:

• Set the files up to print.
• Add 1 point border to each. Save.
• Create new document at 12 x 18 inches – three of you; one will create a 6 x 36 inch file.
• Add guide lines.
• Copy and paste each file into the new file. Save.
• One person in group creates a 24 x 36 inch file. Copy and paste each file (three at 12 x 18 inches; one at 6 x 36 inches) to create one large file. Save in .pdf format. Copy .pdf to flash drive; bring to Mr Anderson for large format printing.
• Post a reflection to your blog and explain in “how to” detail everything you’ve learned about Illustrator today. [10 points]

Coming up next class: “Visual Cultural Metaphorical Self Portrait”… and you’re going to need those collages you created last week!

—

Visual Cultural Metaphorical Self Portrait

OK, so let’s begin to act like designers by engaging in a problem-solving assignment that will use some of the skills you’ve already learned along with a couple of new concepts that we’ll learn along the way.

If you click here, you’ll find a general overview of this assignment on my Flickr site. I’d like you to take a few minutes to go over each of the visuals and the notes that accompany them. Jot down absolutely anything that comes to mind that you don’t know how or what to do – it’s okay if your list gets lengthy! On your blog, create a new post with a link to my tutorial and add your list. Show that to me and then you’re ready to begin a little design that I call the ”Visual Cultural Metaphorical Self Portrait”… and you’re going to need those collages you created a week or so back.

—

Visual Cultural Metaphorical Self Portrait, Day 2

You should have your collage scanned in and have added layers of personal information to it by now. I’m going to show you some new tools today, including:

Converting type to paths – now it can be treated just like an illustration.

Photographing yourself in silhouette

• Camera – shoot with bright background, in focus, with partner
• Place image in Illustrator
• Trace Image
• Background in bright color, delete silhouette of selfie
• Copy, then place over collage
• Adjust size as necessary
• Use shape tools to create a colorful “eye”
• Add one word that describes your personality
• Convert to paths
• Add a stroke, fill with color.
• Keep colors vivid, but somehow related.

Save, export to .png, add to Flickr and add to blog for a grade.

Who wants additional credit? Let’s see how many truly different versions can you create on your own and add to your blog?

Check yourself: Are you adding your required notes and images to your blog? If you’re not current, my grade won’t be either!

—

Design Using Color and Geometric Shapes

First Thing Today: Let’s do a check for missing assignments – let me know if you have a grade missing for something you believe has been submitted. If this is the case, send me an email right now and be specific about the details. Also check in the column on the right – does your name appear? If not, it means I don’t yet have a URL for your blog (and nothing gets graded without that information!) Take care of these two things right now.

 Today, we’ll be working with geometric shapes and contrasting color harmonies.

You’ll learn to:

• Fill shapes
• Fill strokes (lines)
• Identify and use color harmonies

• We’ll begin with a very short discussion, followed by small group research investigation: Learn everything you can about color theory, psychology, and harmony in 45 minutes. Add your group’s information to each of your blogs. Include visual links!!

After that, we’ll begin to design. Today is a challenge to see who can create the most designs by the end of the block today. (They only count if they’re interesting…and I’m the judge of what counts as interesting!) Each design must be two vivid and contrasting color only, and must only use repeated geometric shapes. Use colors that “make the eye dance.”

—

Designing with Type

The primary intention of this problem is to explore various aspects of the design principle Contrast. Your assignment is to experiment with negative relationships, scale as it pertains to contrast, and patterning. Using only letterforms, create three sets of four designs to represent the following:

1. Scale
2. Negative/Positive
3. Transparency

Use a minimum of two letterforms and as many colors as your ideas require, except for the negative/positive problem where only black and white are required. The first four designs for Scale are due by end of block today, posted to your blog. Remember that all designs should be 6 x 6 inches. You may begin Negative/Positive once Scale is submitted.

Here are examples of ways to solve the Negative/Positive problem.

Before you get started today, it’s important to get into the right frame of mind. So take a play break, visit and play each of the following games:

Kern Type   |   Shape Type   |   Color

—

Designing with Type, continued

I’m going to throw a few design restrictions at you today. But first, take the starting ten minutes of class today and do this:

• Post the designs you created last class to your blog.
• Title your blog Designing with Type #1 (10 points)
• Don’t begin the next part until you’ve added this post.

Today’s design assignment will have you continuing to work with the same concepts we began to use last class. However, you have two new restrictions:

1. You may only use character. In my examples below, I’ve chosen a character that interests me, the number “8”.
2. You may only use the typeface Rockwell Extra Bold (see the example at the top of this post.)

If you need a reminder of the ideas we’re working on with this assignment, click here. In a nutshell, start today at the beginning: Create at least four different designs that solve the “Scale” problem – use only one character, and use only Rockwell Extra Bold. (20 points possible) When you are satisfied with your solutions, repeat this exercise for the “Positive/Negative” problem (20 points) and finally, the “Transparency” problem (20 points). Earn as many as 2 additional credit points (up to a total of 20 possible extra points) for each additional design that you add which meets the assignment criteria.

—

Test: Pattern Fill Variations

This is a test.

• I can… analyze instructions to complete an assignment. (10 pts)
• I can… use digital tools to research and solve problems. (10 pts)
• I can… use Swatch Libraries to select and apply specific color harmonies. (10 pts)
• I can… use the Pathfinder to merge simple shapes into complex shapes. (10 pts)
• I can… create pattern fill variations. (10 pts)

Today’s objectives:

• Merge simple shapes into a visually interesting complex shape.
• Use a complex shape to create a pattern fill.
• Create at least four versions, using the Art History Swatch Library: (1) saturated color; (2) analogous color; (3) low contrast color; (4) monochromatic color.
• Add each version to your blog, correctly labeling each, by end of class today. Title your blog, “Pattern Fill Variations.” 50 points

Click here and follow this tutorial to get started.

Just so you know, we are going to use these patterns to create a self portrait. Intrigued? Stay tuned!

—

Graphic Self Portrait

• I can… Manipulate complex shapes to create a symbol that is personally meaningful.
• I can… create a background pattern in which the symbol appears in different sizes and colors, and overlaps to fill the space.
• I can… create an exaggerated self portrait that emphasizes line and contrast.
• I can… merge the elements together to create a layered illustration.

OK, so we’re going to start to put together some of the concepts we’ve learned and practiced in class. You’re going to create a 24 x 24 inch graphic self portrait in much the same style as the example posted here.

Step 1. Design a symbol that is has personal meaning for you. What words describe you? How would you represent those words visually? Add the symbol to your blog and title it “Personal Symbol.”

Step 2. Use the symbol you create to develop a background pattern. Repeat the symbol, but vary the color and sizes, and overlap the symbols to fill the space. Because we’re going to design a large artwork, let’s create your pattern fill at 6 x 6 inches instead of 1 x 1 inches as we did last class. Add your pattern fill to your blog and title it “Large Pattern Fill.”

Step 3. Create a self portrait drawn from line. OK, so this is not a drawing class, but designers do draw. I will demonstrate in class how to create an expressive drawing, but the first thing you need to do is to use your computer to make a ¾ length photograph of yourself in an interesting or provocative pose. Alternatively, you may use a digital camera or your cell phone – regardless, you’ll need a print to work from. Add a scan of the line drawing to your blog and title it “Line Drawing.”

Step 4. Putting it all together: you’ll scan the illustration, create a 24 x 24 inch background, and we’ll brainstorm other elements that might be included to create a visually rich graphic self portrait. Add the finished portrait to your blog and title it, “Graphic Self Portrait.” ALSO: email the finished .ai file to me so that I can print out a full size version.

And – of course! – if you don’t add these things to your blog, I can’t give you credit for any of the work you’ve done. 200 points

—

Graphic Self Portrait (continued)

I CAN use a camera to create a reference image.

I CAN use line drawing to create an illustration.

I CAN use a scanner and Illustrator to convert a drawing to a vector file graphic.

We will pick up where we left off last class. Check yourself:

• Have you posted your personal symbol?
• Have you created and posted your background pattern?

Today, we’re going to use line drawing to create the black and white illustration that will be an important part of our design.

• Demo
• Photograph yourself in a provocative pose
• Print it out
• Trace it using ink dropper or stick – try to keep it crudely drawn!
• Let it dry, then scan it
• In Illustrator, use the Trace Image command
• Save it and post it.

  
Shoot it. Trace it. Keep it crude. No problemo, right?

After this, we’ll begin to merge elements into one design, and add other graphic and typographic elements to further personalize your design.

—

Surface Design

I CAN use Illustrator to create a variety of surface designs.

I CAN combine colors harmonies to unify a surface design.

I CAN incorporate rhythm to denote a sense of movement within a surface design.

Surface design affects thousands of commercially available products, from clothing to paper products, beauty packaging, accessories, interiors, and more. For this assignment, you’ll be asked to…

• Define surface design. [10 pts]
• Review the pattern design styles from the examples below, choose four options and create four different surface designs based on those design styles. [140 pts]
• Create a product and apply one of your surface designs to that product. [30 pts]
• Make a three-minute presentation of your designs to the class. [20 pts]

Total: 200 points       All presentations will be on October 31.

Types of Pattern Design

Arabesque. An elaborate ornamental design of intertwined floral or geometric motifs. Commonly comes from (or inspired by) Islamic art or architecture.

Brick Layout. A layout in which every second row is shifted halfway in the horizontal direction.

Bull’s Eye. A pattern of concentric circles, often creating optical effects, such as movement or pulsation.

Chevron. A traditional, woven or printed design of zigzags in a stripe layout, also called herringbone.

Counterchange. A design where a certain color of the motif and its ground are reversed in another part of the design to balance the elements. See also two-color symmetries.

Diaper. A small-scale geometric pattern in a set layout of interlocking or closely aligned forms. Also a weave forming a diamond (diagonal) pattern.

Dog’s Tooth. A pattern of small broken or jagged checks created by four-pointed stars. Same as hound’s tooth.

Eccentric. An eccentric is a pattern of thin lines generating an illusion of a distortion or op-art effects. Another spelling is excentrics. The class is believed to be originated from the Lane’s Net pattern.

Half-drop. A layout in which the motif is repeated halfway down the side in the vertical direction. The most frequently used repeat in textile design. 

For any presentation you make in the Art Department, please follow this format:

1. Introduce yourself.
2. Explain the visual problem you’ve addressed. (This assures your audience that you begin on common ground.)
3. Describe the challenges you confronted and use a positive tone: “I had to consider what two very dissimilar objects had in common.” as opposed to a negative voice: “Combining two different things was a really stupid assignment.”
4. Explain how you solved the problem. How did you use techniques, media choices, subject choices to effectively address the visual problem? Be sure to explain using artistic vocabulary, but use real world examples to make connections for your audience: “I selected complimentary colors to create a sense of vibrancy, much like the purple and gold contrasts of a football jersey.”
5. Re-state the problem and summarize how your work solves the problem.
6. Thank your audience and ask for questions.

Audience Responsibility: Ask Questions and Provide Helpful Feedback. For example:

• Ask “why” and “how” questions.
• “Have you considered…”
• “Did you try …?”
• “Have you thought about….”
• “I wonder what would happen if…”
• “I would recommend…”

—

Using Design to Communicate: Mental Disorders

See more examples by clicking on the illustration above.

I can analyze technical text and make a logical written inference from it.

I can use the internet to produce and publish writing, and to interact with others.

I can conduct short research to demonstrate an understanding of mental disorders and minimalist design.

I can gather relevant information from multiple digital sources to assess the credibility and accuracy of sources.

Today we begin to take what we’ve learned about design and apply those skills and ideas to a real-world assignment.

You are a designer and have been hired by a national mental health organization to develop a poster (or a series of posters) that will used in a public education campaign. Your objective is to create a minimalistic poster design that visually communicates a specific mental disorder.

Begin by researching the assignment and posting your findings onto your blog. Complete this in class today.

• What do we mean by “minimalist design”?
• What are examples of designs that rely only on visuals to immediately communicate a message?
• What is meant by “mental disorder”? What sort of misunderstandings can you think of that might be associated with mental disorders? Why might it be important for people to understand the complications of a mental disorder?
• Identify at least five mental disorders. Create a T-Chart to characterize and compare them. (Characteristics vs. Stigma)
• If you were asked to select one disorder to research for a design, which would it be? Explain why.

Here are some websites to get you started. Cite all information that you use and be sure to locate at least one other website to verify anything that you do use from any source.

Substance Abuse and Mental Health Services Administration. 

National Alliance on Mental Illness.

Mind – For Better Mental Health.

Points for this section: 75 

—

Using Design to Communicate: Mental Disorders (day 2)

I CAN make sketches to develop basic visual ideas that easily communicate the basic idea of a specific mental disorder.

I CAN display all of my sketches on Flickr and my website.

Remember: You are a designer that has been hired by a national mental health organization to develop a poster (or a series of posters) that will used in a public education campaign. Your objective is to create a minimalistic poster design that visually communicates a specific mental disorder. Select one of the mental disorders that you researched last class. Develop at least ten rough sketches. Complete these in class today.

• Keep your sketches simple: use plain paper and a pen.
• Work small: make your sketches approximately 4 x 6 inches.
• Photograph or scan your sketches and add them to your last blog entry.
• Decide which sketch you’d like to develop into a finished design and explain why it best meets the assignment criteria.
• Do not begin your finished design until you’ve discussed all sketches with Mr Anderson.

Points for this section: 75

—

Using Design to Communicate: Mental Disorders (day 3)

I CAN make appropriate decisions about the combination of colors, shapes, space, and textures to create a minimalist design.

I CAN use Adobe Illustrator to create an 18 x 24 inch poster that visually communicates the vital characteristics of a specific mental disorder.

This is where the rubber hits the road. Begin with your strongest sketch. Working in Adobe Illustrator, design a minimalist poster measuring 18 x 24 inches. Choice of color, shape and arrangement is up to you, but keep the design simple – in other words, “minimalist.” Only one word or phrase should appear in your design: the name of the disorder should be clearly depicted using the typeface Helvetica Neue Bold. Follow Patrick Smith’s examples for your typographic size and placement. Your finished design is due on your blog by end of class today.

Points for this section: 75 points (total of 225 points)

—

Designing a Poster for a Publishing Client

   

I CAN analyze a fictional character’s “backstory” and make a logical inference from it.

I CAN use design principles to visually communicate the challenges faced by a fictional character.

Much like our last assignment, you are a graphic designer hired to create a poster. The difference this time is that your poster design will be used as a marketing tool.

Your client is a major comic book publisher and their assignment for you is to create a minimalist poster design that communicates the back story of a super hero. Specifically, your design should visually communicate the hard past or challenges that confronted these larger than life comic book characters.

You have three days in class, beginning today, to create your 18 x 24 inch design. Submit your designs by end of class on Tuesday before the Thanksgiving Break. UPDATED DEADLINE: This class will only meet for a short time on Tuesday the 26th. Your deadline has been extended to end of class on December 3.

—

Paper Engineering: Popup Design

 

You’ve got the next four classes to complete your final exam; it is due on December 16. No late submissions will be accepted. This is where you put it all together and demonstrate your ability to use the skills and concepts you’ve learned this semester to solve a complex design problem.

For this assessment you’ll be exploring the world of paper engineering – what is more commonly known as “pop-up” design. The term “pop-up” is kind of a catchall term used for dimensional and movable books and greeting cards. What makes all pop-up designs work is kinetic energy, created by the opening of a page, the pulling of a tab, or the turning of a wheel. In class today we will look at many specific examples of pop-ups, and see exactly how they are folded and glued together. In this example, the pop-ups look very complicated, but we all know that looks can be deceiving: by combining simple engineering and the basic elements of pop-up design, you’ll be able to create your own original pop-up. 300 points

Your assignment is to design a fully functioning pop-up card. These are the specifics:

• Every single surface must be covered with a pattern of your own design. You must incorporate at least ten different patterns into your pop-up. These will need to be printed and carefully glued to card stock that you will then use to engineer your pop-up.
• Your pop-up card configuration should follow what is known as a “Four-Page Fold” (see Illustration A). The size should be 8 x 10 inches when folded – thus, 16 x 10 inches when unfolded.

Illustration A

• Your pop-up must incorporate at least three different parallel folds, three different angle folds, and at least one tab or wheel.

The subject of your design should be selected from one of these topics:

Love

Fairy Tale

Innocence

Memory

Insanity

Misfortune

Silence

Nature

Time

Sorrow

Dreams

Fantasy

Family

Sports

Secrecy

Magic

Horror

Paradox

You’ll turn in your pop-up design for assessment, but before you do:

Photograph your design from at least two views and add it to your class website.

Write. Examine the designs of your classmates. Choose one design and write a short critique of that student’s design (at least 100 words in which you offer feedback: what worked, what could have worked better, what they might have done differently.)

Write some more. Now, explain your own challenges and decisions on this final assignment in at least 100 words.

Finally, respond to this prompt: What do I know now about graphic design that I didn’t know at the start of the semester. (At least 100 words.)

—

Last day of the semester – let’s see how creative you can be…

Concept designers – or visual futurists – develop ideas for products that aren’t yet on the market. These are often pretty amazing concepts that we wish were real, but which have yet to be produced.

The Cloud Sofa is supposed to give one the illusion of floating on their own personal cloud. A magnet in the base is supposed to generate enough magnetic force to hold the sofa aloft.

The Propulsion Powered Flying Cycle (which just goes to show that inventors should not be allowed to name their own products) is a flying jet bike, straight out of a sci-fi flick.

The Polygon Concept Bike, somehow inspired by human DNA, has controls for you iPod built into the steering area. Too bad it doesn’t have jet propulsion too…

The BRB Evolution, with smooth and contour lines running throughout the entire car, it’s capable of fitting into tight spots with its Dyson vacuum-like design. In addition to being “green,” it does zero to sixty in 9.2 seconds.

The MOY was made for a generation used to using media to express themselves. The “skin” of this car can be changed at will so that you have a “new” car every day, if you’d like.

So here’s your assignment for the day: Choose one of these futuristic product concepts and come up with at least two different logo designs for it. Post it to your blog, along with the photo of the product. Explain why your logo is perfect for the futuristic product you’ve selected. 50 points.

—

Introduction to Typography

I CAN identify and illustrate the most important characteristics of letterform design.

The most basic tool of the graphic design is the letterform. You’ll be working in small groups today – in your table groups, select one person to be the recorder and please use one Cornell Notes page for the entire table.

__________________

Prompt 1. Aside from decorative typefaces, most books and magazines rely on fonts that can be categorized as either serif or sans serif. In your table groups, conduct a group internet search to determine what the main differences are between serif and sans serif designs. Are they used for different purposes? Most importantly, why do these differences exist at all? Your group has 10 minutes to reach their conclusions and then we’ll discuss.

__________________

Prompt 2. Every letterform is created from a variety of identifiable elements. For instance, the point at the top of the capital letter “A” is called the apex. What are the most important characteristics of letterform design? In your table groups, conduct internet research to identify the main elements of letterform design. As a group, sketch out a poster that charts the various characteristics. Your group has 15 minutes, after which we’ll compare notes to see who has located the most complete list of identifiers.

___________________________________

Your assignment. Working on your own, create a comprehensive 8 x 8 inch design in Illustrator to illustrate and explain the most important characteristics of a letterform design. Use examples of serif and sans serif letters where appropriate. Include a short block of text that explains in your own words the difference between serif and sans serif designs, and why those differences exist. Add the finished design to your Flickr account and to your blog. Title your blog entry, “Introduction to Typographic Design.” This assignment is due at the start of next class (Friday). [20 points]

Extra credit. There are a variety of distinctly different styles of serif fonts. 2 points additional credit for every different style of serif that you can correctly identify and include in your design. For instance, (and you can’t use this one, “Slab” is one form of serif and is exemplified by the font “Rockwell.”) [Up to 10 points additional credit.]

Double top secret extra credit. In your design, explain where italics fits into the picture – where does it come from and how is it used? [Up to 5 points additional credit.]

—

Basics of Typography

I CAN visually express the meaning of a word by manipulating letterform characteristics, spacing, and arrangement.

Did you wind up with a design that is both visually interesting and also effectively communicates some of the same ideas as the illustration above? If so, pat yourself on the back!

Today’s agenda includes the following:

• Review the most important characteristics of letterform design.
• A short history of typography (in five minutes or less)
• Examples of “expressive word” design
• Review of the Expressive Word Design assignment, along with some changes to the instructions. (In other words, if you don’t take notes you may not do the assignment correctly! You’ve been forewarned!) Let’s also look very closely at the I CAN statement for today.  25 points

For those of you interested in graphic design – and thus, more detail than you may ever need to know about letterform design! – click here and here.

Extra Credit: For anyone who can located free fonts online, correctly install a specialty font onto their Mac, and then demonstrate how to do this – 10 points.

—

Logotypes

This is a well known example of a logo design that uses only typographic elements to solve the design problem.

I CAN explore the typographic possibilities of individual letterforms by designing a series of logos.

• Print: Finished Letterform Characteristics and Expressive Words assignments. Display all in hallway. Group review of Expressive Words assignment, make note of corrections; finished Expressive Words is due next class and will be graded at that time. Bring prints to class and replace any revisions on wall. Letterform Characteristics designs will be graded today.
• Introduce: Basics of Typographic Measurement and Spacing
• Review of Logotypes assignment. Use today’s studio time to work on this assignment.
• Due next class: finished Expressive Words, first draft of Logotypes. These should be on your blog and printed out for class review. [25 points]

—

Outside Class: Typographic Basics

Review this very short video, and be prepared for a quiz at the start of next class. On your own, be sure to research the meaning of “leading.” (It will be on the quiz.)

—

Typography Quiz

I CAN identify and make use of basic typographic concepts to design a logo.

I CAN develop multiple solutions for a visual design problem.

_________________

Today’s class activities are worth quite a few points, so read carefully.

Part 1. Before we get started on today’s studio activity, click here to take this short online quiz to check your understanding of typographic basics. (34 points)

_________

Part 2. When you have submitted your quiz, go back to the designs you created for the 003 Logotypes exercise. Select your favorite version then…

• Go to dafonts.com, Urban Fonts, and/or 1001 Free Fonts; select and download several fonts that you feel fit well with your design idea. You should include at least one new serif, one new sans serif, one new script, and at least two new display fonts.
• Create at least five new versions of your logo design. Demonstrate the possible variations using serif, sans serif, italic, and decorative/display fonts. Post these to your blog by the end of today’s class period. (36 points)

You will have a short video to watch outside class that will prepare you for your in-class work next time we meet. The link will be posted to this blog later today.

—

Early Letterforms

I CAN research and write about a historical connection to design.

First off, on my part an apology because I published 006 and 007 out of order. We’ll have to refigure this in class today because I screwed up. On your own time, you’ll first need to watch this short video. Then…

• Research one letter from either of the alphabets in the video.
• Based upon what you’ve learned, write a short (approximately 100 word) informative paragraph about the letter you’ve selected.

Bring your paragraph to the next class where you will need it to complete your assignment during class time. Specific design instructions will be provided at class time.

—

Early Letterforms: Design Assignment

I CAN make appropriate design decisions about the placement and emphasis of typographic elements.

I CAN create more than one single solution to a design problem.

Pair up with another student and exchange paragraphs. Proofread your partner’s text to ensure that the paragraph is grammatically correct.

Carefully read the instructions for your design assignment, Early Letterforms, located here. More examples can be viewed here.

Using the paragraph you’ve written about your letterform, create three designs that meet the assignment requirements. Pay attention to the important differences in each design.At least one complete design should be posted to your blog before the end of class today; the other two should be posted before the beginning of next class. Bring prints of all three to next class. (100 points)

—

Experimental Typography

I CAN playfully experiment with the free-form design characteristics of typography.

Watch this very short video, complete the assignment, and bring those pieces with you to our next class.

—

Experimental Typography, continued

 

I CAN use “found” typography as a basis for experimental typographic layouts.

Use your cropped newspaper and magazine clippings as a starting reference to recreate your three favorite originals. Retain the character and proportions of the original, but create a completely new variation by rewriting the copy, changing the typefaces, introducing new color into text and background, and using the stylus pad to develop the illustrations. In the example above, see the original clipping on the left and the finished design on the right. See more examples below. 100 points + 10 pts extra credit for each additional design up to 50 pts. Post your finished designs to your blog by midnight tonight.

—

Experimental Book: “Hearing Type”

I CAN create a page design that exploits the relationship between the printed word and the vocalized word.

Format: 9 x 6 inches (Always work on two pages at a time. Thus, your two-page design should be 18 x 6 inches.)

• Must include structured typography on all pages
• Must include color on all pages
• Must include cutouts
• May not include photography or clip art – all designs and illustration must be original.

Your assignment is to create an experimental book. This is a pretty complicated process, so we’ll work our way through this each day a step at a time. First off, let’s discuss the concept of the book, which you’ll title “Hearing Type.” Because typography is a visual representation of our spoken language, you’ll explore the visualization of sound and music by creating a typographic map of acoustic space, based on the translation of a short segment from a piece of music. The most important fundamental concepts to communicate are:

• harmony (represented by unity and variety)
• hierarchy (represented by contrast, size and structure)
• rhythm (represented by spacing and implied motion).

Today You’ll Develop the Concept. Last class you were asked to choose your “theme song” and to bring it and the lyrics to class today. Begin by extracting and analyzing a short segment (about 12 words) from your theme song. The segment must include voice (represented by text) and instrumentation (represented by color, texture, and graphics.)

Using Adobe Illustrator, create page one and two of your book: a typographic translation of the selected segment, based on a visual grid that represents the properties of sound on the vertical axis, and time on the horizontal axis.

Consider how you might represent each of the properties of sound (amplitude, duration, pitch, and timbre) with typographic and graphic elements. Look at the example at the top of this post – notice that the text gets larger as the words get louder; they are higher or lower on the page, depending upon how high or low the notes are. Think about the interaction of sounds, the hierarchy of instruments that produce tonal clusters, harmony through variations in density or texture, the hierarchical structure of space, the dynamics of rhythm and motion, and the distinct yet related intervals of pitch and time. What typeface best represents the mood of the music, the voice of the singer?

Each day you will extend the designer further, digging deeper into your theme song.

Stay focused: this assignment is a long term performance assessment. Each day is worth 100 points. If you miss a day, it is your responsibility to make up lost time for credit.

—

Constructing a Star Book

We will use class on Monday, February 24 to construct the book portion of your design. We’ll be using a “Star Book” configuration which, when folded, looks pretty much like every other kind of book. However, when unfolded it becomes much more interactive. Watch the tutorial above to see the specific steps necessary to create your star book. Important note: Be sure to multiply all dimensions by 1.5!

—