A1 Type and Grid

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. Students will complete this as an individual assignment.

Learning Goals

  • 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

Materials

  • Design tools
    • Adobe Creative Cloud (Illustrator, InDesign, etc.) are free to all UCSD students this quarter:
      1. Visit https://creativecloud.adobe.com and enter your @UCSD.EDU email address
      2. If prompted, select “Company or School Account.” From there you’ll go to UC San Diego’s single sign-on screen to complete your login.
      3. 3. Once in the Creative Cloud website, browse for and download your desired app. Click Apps on the top of the page to view all apps.
    • Alternatively these are (free) online tools: Sketch or Figma
  • Readings

What to do

Create a new document in Adobe InDesign or Figma. Setup your page/frame size as 8 x 8 inches (or in Figma which only supports plixels, 768px by 768px). Many visual design tools use picas and points as default units (1inch = 6 picas, 1 pica = 12 points; 1 inch = 72 points). You might need to change the default units to inches so you can specify the margins and gutters without having to convert.

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.

<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>

Stages:

  1. 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.
  2. Create two digital layouts that use one regular 10-point font, no bold, no italic, no color. Select one of these fonts for your work:
      • Baskerville, Caslon, Garamond, Georgia, Palatino, Helvetica, Franklin Gothic, Gill Sans, Verdana
  3. Create two new digital layouts (should be a different configuration than those created for stage two) that use a single 10-point font again. This time, regular, bold and/or italic can all be used to emphasize different parts of the information. Do not use color. Be ready to share your Stage 3 designs for lecture on Thursday April 2nd. Place a .JPG or .PNG of your design in the corresponding Google slide decks:
  4. Create two more new 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.

Deliverables:

On Canvas upload a single PDF (named A1-Lastname-Firstname.pdf; eg., A1-Dow-Steven.pdf) with the following content in this order:

  • 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

Grading Rubric

Grades will be based on the following:

  • Do the solutions conform to the rules?
  • Do the solutions clarify the content and make the information more accessible?
  • Is the type legible, and are the size choices appropriate for the format?
  • What is the visual appeal of the designs?
  • Do the designs improve over multiple iterations?