If you have been following along with our Web Design Process I touched on creating a web schematic. This post goes into more detail on what that is and how to make sense of ours.

Shortly after collecting and analyzing the answers from our questionairre I begin work on the web schematic. This is one of the most important documents we create because it lays the groundwork for the web design to come.

Website Schematic Definition: A graphical representation of where navigation and links will appear on a proposed website.

That sounds great but what does that mean? Well let’s break one down to learn how to decipher this document.

Website Schematic Legend

The best place to begin is to take a look at the legend. Let’s break it down…

Essentially the purple box is a webpage. In this example it’s the “About Our Chapter” Page. Each blue box represents a link on that page. The color coded circles help me group similar layouts for future web templates. Any text not included in a link represents the beginning thoughts on the content of the web page. The gray lines extending out from the links show where the user will be directed when they click on the link. This is typically another web page.

Once you understand that each page is represented by a purple box and the gray lines show you what page you will be sent to when you click, you have a basic understanding of the schematic.

Full schematic breakdown

These graphics are not final by any means but they are crucial to helping me move onto the next step of design-wireframing. Essentially these schematics begin to organize my thoughts on what links and content need to go on what pages. While I am producing wireframes I am constantly referring to this schematic to insure I am staying on track and not duplicating work by making extra templates when I don’t need to.

I hope this breakdown helps you to better understand what it is you are looking at and illustrates just how important this web schematic can be when designing a web site.