Type III: Week Two

When you arrive

  1. Place your designed licenses on the common table
  1. Pull up your Sketch file and original site
  1. Meet in groups of three or four and share your Sketch wireframes

HTML and CSS Grids demo

How are web sites structured? How have developments in HTML and CSS allowed for different sorts of design opportunities. CSS Grid is very new, and will change the way sites are coded, but also conceptualized. Let’s take a look.


Play around with the example files provided in the GitHub account and on gridbyexample.com. Become familiar with CSS Grid and make some of your own grids. Place content in them, look to overlap grids, etc. The Piet Mondrian painting above is provided as inspiration.
  • Learning Objectives
  • Get a feel for how Web layouts work
  • Get more comfortable with looking at coding.
  • Experience how web grids differ from print ones


Assignment: Occupational Outlook Handbook

The U.S. Department of Labor maintains and publishes information about every viable profession. The Occupational Outlook Handbook is useful data for policy makers, those looking to change careers, and more. According to the Handbook, “graphic designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers.” The Handbook has a lot of useful information, but it is presented using in a very default way. I would like each of you to design a new version of the Handbook in Sketch. 

Your designs should work well on mobile devices and for folks of various ages and linguistic capabilities. Your design may suggest new features or functionality not currently available on the site. You do not need to include the Bureau of Labor Statistics navigation, simply a link to the BLS from somewhere on your design. Consider the site a free-standing website with its own voice, color, style, etc. You only need to design templates for distinct pages of the site.

Final critique for the project is week 5 — in three weeks.

Learning Objectives:
  • Learn how to organize lots of information
  • Learn how to communicate your design with high enough fidelity
  • Work with Sketch
  • Improve Web design skills


For Next Week

Research similar websites on the web. Research two types of sites: those whose functionality/interface might be similar, and those whose aesthetic seems appropriate/interesting for this project. Add the sites to arena under a new Channel called Type 3: OOH. Additionally, start to add sites to your own arena channel with websites that have used type well (their fonts, grids, spacing, etc). Build your typographic repository.

Sketch out wireframes for how to structure information. You may put these sketches into “Sketch” or simply have them in your sketchbook. Next week is a working session.