Jeff Huang Team : Web Design

Hierarchy in web design

Jeff Huang Team : Web Design

Before I moved to Newtown, I went to Kinokuniya bookstore very often where just 2 blocks away from my place. And the 2 modern chairs located in the design corner, that’s my favorite space to waste time with books around. I would like to share one chapter from GRAPHIC DESIGN THE NEW BASICS by Ellen Lupton, the author of the famous book THINKING WTH TYPE.

This page tells the basics of Hierarchy , it’s the most important page in this book, she mentioned it again from her previous book:


The new web design trend nowadays is FLAT DESIGN, TYPOGRAPHY, CONTENT FIRST. That’s makes typography and hierarchy much more important than before. It’s designer’s magic, we set some cues allow readers can easily scan through the page, lead user to enter and exit the content and pick up the things they’re looking for.  So there’s a list here you should considering during designing a website or any kind of visual work:


  • Weight / Size

  • Style (italic / uppercase / lowercase / small caps) 

  • Color 

  • Alignments 

  • Spatial intervals (indent, line spacing, placement )


In this case, the typographic variations generated in CSS  using the structural hierarchy.

<h1> The title

<h2> The program tilte

<h3> the location where host the program

<class=”time”> The time of the program will be held

<p> The short description of the program


This is easy, but yet this is the foundation of a good visual that based on.



This is the grid system that use in graphic design: 


This is the grid system that use in web design

Visit the one of the best grid frame work, it’s simple and balanced. It came out before the responsive age, but still works perfect with responsive web design,  a must-have tool for me when I build a website. 



Redesign New York Time

This case presents the best example to utilize the new trend of design and the basics from hierarchy. Make a heavy content website easy to read.