Good visual designs are based on underlying grid systems that help to provide consistent locations for type and graphic elements, resulting in an ordered, legible design. In this assignment, students will demonstrate an understanding of the use of an underlying grid in a design layout by creating different designs using the same grid. This is a warm-up assignment that students can complete during the first week of class. Do this assignment individually, not in teams.
Develop proficiency with using a grid system to organize content for a screen design
Understand how font choice and typesetting can affect legibility
Work iteratively through sketches and multiple layouts under different constraints
Learn how to give and receive feedback in a constructive way during critiques
Design tools
Adobe Creative Cloud (Illustrator, InDesign, etc.) (free 7-day trial)
Readings
(Required for reading reflection) Lupton on Letter, Text, Grid
(optional) Bigman on The History of the design grid
Create a new document in Figma or Adobe InDesign. Setup your page/frame size as 8 x 8 inches (or in Figma which only supports pixels, 768px by 768px). Create a grid with ¼ inch (or 20 pixels) margins all around, and four vertical columns with ¼ inch (or 20 pixels) gutters. Use guidelines to divide the grid horizontally, resulting in a grid of 16 squares with ¼ inch gutters and margins. See the video tutorials below to learn how to make the grid in Figma and InDesign:
Arrange the text supplied below on the grid. All of the text must be used in each design that you create. Beware of extra line breaks or spaces that may be created when copying this into your document.
<begin text snippet>
Common Typographic Diseases
Various forms of dysfunction appear among populations exposed
to typography for long periods of time. Listed here are a number of
frequently observed afflictions.
Typophilia
An excessive attachment to and fascination with the shape of
letters, often to the exclusion of other interests and object choices.
Typophiliacs usually die penniless and alone.
Typophobia
The irrational dislike of letterforms, often marked by a preference
for icons, dingbats, and—in fatal cases—bullets and daggers.
The fears of the typophobe can often be quieted (but not cured) by
steady doses of Helvetica and Times Roman.
Typochondria
A persistent anxiety that one has selected the wrong typeface.
This condition is often paired with okd (optical kerning disorder), the
need to constantly adjust and readjust the spaces between letters.
Typothermia
The promiscuous refusal to make a lifelong commitment to a single
typeface—or even to five or six, as some doctors recommend.
The typothermiac is constantly tempted to test drive “hot” new
fonts, often without a proper license
</end text snippet>
Note: for all stages, you should be using the text above and ONLY that text. No additional text, shapes, shading, lines, images, etc. are allowed.
Produce at least ten sketches on paper of different designs using the grid. Sketching roughly on paper is the fastest way to look at a page layout holistically. Remember, the point of sketching is to explore alternatives quickly.
Create two digital layouts that use one regular 10-point font with no bold, no italic, and no color. Select a standard font such as Baskerville, Caslon, Garamond, Georgia, Palatino, Helvetica, Gill Sans, or Verdana
Create two new digital layouts (different than those created for stage 2) that use one regular 10-point font again. This time you can use bold and/or italic to emphasize different parts of the information. Do not use color. Be ready to share your Stage 3 designs during lecture on Thursday April 1. Place a .JPG or .PNG of your design in the corresponding Google slide decks:
Make sure to document your participation in the critique (even if you cannot make it to class in person on this day) by posting a comment on the slide deck. Keep your critiques civil and helpful. Take a screenshot of your comment and submit that for the "A1 Crit Participation" assignment by April 4.
Create two more final layouts. You now have the option of selecting up to two typefaces (two at most). Any font size, regular, bold, and italic can all be used to emphasize different parts of the information. Do not use color.
By Sunday April 4 at 11:59pm, upload a single PDF on Canvas (named A1-Lastname-Firstname.pdf; eg., A1-Dow-Steven.pdf) with the following content in this order. You can include section headers or section dividers to label the stages:
Title page with your name, pID, date, and email
Stage 1: 10 sketches (photograph your paper sketches, can have multiple on one page)
Stage 2: Two digital designs done in ten-point type (one font), no bold, no italic
Stage 3: Two digital designs done in ten-point type (one font), with bold and/or italic
Stage 4: Two digital designs with up to two fonts, and the option to use multiple sizes, bold and/or italic. These should be your final two best layouts.
Don't forget to take screenshots of your critique participation on April 1 and post those to the "A1 Crit Participation" assignment by April 4 at 11:59pm.
Grades will be based on the following:
Do the layout stages conform to the rules?
Do the sketches and digital designs broadly explore options and improve over multiple iterations?
Is the type legible and are the font sizes appropriate? Is the text treated consistently?
Do the final designs clarify the content and make the information more accessible?
Do the designs make effective use of white space?