Graphic Design: Content Portability & the Information Hierarchy

There are many ways to say the same thing.

I designed and coded these examples for my students to demonstrate the idea of “portability of content”, to get them thinking about the information hierarchy and simultaneous uses of data in layout design.

For each design, there are the same 7 sections in the information hierarchy (shown below). The HTML in each of these designs is 100% the same (all that changes is the CSS).

Here are the 7 sections in the information hierarchy:


Corcoran College of Art + Design


John Carmody


Fall Semester 2012


  • interactive WEB design I
  • interactive WEB design II
  • junior studio GRAPHIC design
  • documentary AUDIO design
  • senior thesis DIGITAL media design


John Carmody

  • CV website
  • video website
  • audio website



  • corcboard
  • tutorials
  • email


Choose A Theme

  • invitation
  • decay
  • mishmash
  • Steinweiss LP
  • blade runner
  • iPad
  • swiss
  • the bleakness
  • television kills
  • back in the ussr
  • notebook

  • Interactive StoryMap: Bus Trip Across America, pt 1

  • Original Song: I Really Didn’t Mean It

  • Interactive JavaScript Game: O No!

  • WordPress Dev & Design: National Press Foundation

  • WordPress Dev & Design: More Than Cancer

  • Interactive StoryMap: Life on the Mississippi

  • Deep-Zoom Image: The Five Points, 1827

  • Photo: No More “Breakfast All Day”

  • Graphic Design: Custom T-Shirts

  • Interactive Family History: Genealogy Museum

  • Graphic Design: CSS Grid Print-To-Web Experiments

  • WordPress: The Cary Group

Client Case Study:
The National Press Foundation

I was hired to build the National Press Foundation a brand new website featuring a state-of-the-art digital asset management system allowing the foundation to deliver streamlined interactive educational experiences to the national and international journalists making up its target audience.

READ MORE about the interesting, successful NPF project