Hierarchy in 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.
Alignment
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 960.gs, 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.
http://www.nytimes.com/redesign/
