Video-Based Tutorial: Page (1) of 1 - 06/24/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Web Site Planning and Wireframing: Part 6 of 12

Effective informational design By Laurie Burruss

In Web Site Planning and Wireframing: Hands-On Training, Laurie Burruss, director of digital media at Pasadena City College, demonstrates the essentials of creating a web site with a polished, professional appearance and a compelling user experience. The goal of this hands-on course is to deconstruct a web site's home page in order to identify its structural elements and feature set. Using Acrobat Pro and the web developer's toolkit, Laurie shows how to capture a homepage and create, in another layer, its visual framework (wireframe).

Topics include:

  • Seeing, scanning, and reading a web page
  • Understanding naming conventions
  • Creating file structures
  • Understanding page hierarchy
  • Using Acrobat and Photoshop with wireframes
  • Building a professional wireframe from scratch
  • Identifying and using web standards in site design
  • Usability Testing

Effective informational design

Continuing our discussion of Web design principles, we should take a look at information hierarchy. It's an important principle and one that's often overlooked. The way to think about it is WE SEE, THEN WE READ. Web designers often do 4 or 5 jobs. They design the graphic elements, they create the interface design, navigation design, interaction design and often are required to design the information. But it should be done on a hierarchical basis that makes sense from the most important to the least important, from the general to the specific.

When I think about information hierarchy, I just remember this phrase, WE SEE, THEN WE READ. When we approach a stop sign, long before we approach the stop sign we see the red hexagonal shape. It isn't until we come up to the actual sign that we read the word STOP. So that's how we understand what that means from far away and that's why it works as a sign and keeps us from going through intersections too fast.


The same principle also works in web design that we usually do what we call Three Passes. We go from the general to the specific. On Pass 1, we call this gradual perception. We see colors, shapes, main areas, things that pop to the foreground, things that go to the background and the information sorts itself out into main areas.

In Pass 2, we start really understanding what each of those areas may be. It might be branding, it might be content, it might be navigation. And in Pass 3, we actually start to select from those different content areas. We actually pick an area to read deeply, we might look at the subsection title, we might look at an image, we might read a caption, we might see a word in an article that makes us want to know more.

Click PLAY or press spacebar to start or stop video

The same principle or this idea of hierarchy works inside your web page as well. We want to list things in the content area from the most important to the least important thinking of the general pass, the secondary pass, understanding and the third pass detail information. Navigation works this way and also the support elements.

So let's see how this works out in the real world. I'm going to take you out to Jeffery Zeldman's web site. Jeffery Zeldman is a web designer and the proponent of designing with Web standards. He has got a great lookout on it and I often send my students to his site, because he practices what he preaches. But let's pretend just for a moment that we are seeing it for our very first time and we are just noticing how the colors pop, recede, the fonts are bigger, larger and we notice that on the first pass, this image is what draws us in and then slowly we start to recognize other areas.

On the second pass we begin to sort out with this all means, with these colors, with these fonts, what this means. We see that he has his branding at the top. We see that his navigation is on the side on the right and we begin to understand that this area is the content area. The area for deep understanding for detail.

On the third read we actually might say wow! I would like to know how to join his Facebook or what book could change an industry. So we begin to get caught up in the actual detail, in the actual meaning of content. So first read, visual, the overall impression. Second read, understanding. Third read, detail information and knowledge.

This is a great way to design. It keeps people staying at your web site and you want your web site to be sticky and make people want to stay around and see what you have to offer.

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online Training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists.

The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Laurie Burruss serves as the director of digital media at Pasadena City College, where she has also been design professor for the past 15 years. Laurie is a professional digital storyteller, and she has developed a rich curriculum in digital and new media, which includes Flash, ActionScripting, web design and development, motion graphics, digital video editing, 3D modeling and animation, and environmental graphics design. As director of the Digital Media Programs at PCC, she has established many partnerships and collaborations in interactive multimedia, with companies such as Warner Bros., Disney Imagineering, Industrial Light and Magic, and Apple. Laurie has served as project director for grants from the National Science Foundation, the Department of Labor, and more. Laurie received a BFA and an MFA in fine arts from the University of Southern California.
Related Keywords:website planning,wifeframing,web design,web developer,page hierarchy,acrobat,photoshop,web standards,usability testing

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Web Site Planning and Wireframing: Part 6 of 12 by DMN Editorial at Jun. 24, 2010 7:33 pm gmt (Rec'd 2)

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • -->

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved