Wireframes & Sitemaps

When a site is being planned, the developers discuss what the site needs to do, how the pages must be organized, and how the user could possibly find everything she needs wherever she is in the site. In order to represent this for the client and team, the information architect draws up the site architecture in a variety of ways. We will be drawing simple site maps for our purposes. Becoming an information architect is actually a great way to enter the interactive world if you find you are neither a programmer or a designer, but gifted in organizing complex sets of information. You would be a crucial part of the team, doing a lot of the structural thinking that will eventually lead to a successful site.

As  a designer, I map out every page my site could need, then decide which pages are part of the main navigation. This means they will be accessible on every page. Look at the image. The squares marked in pink are the pages that are so important, they deserve a spot on the main nav. The gray boxes mark pages that you can only access once you click into one of the main pages.

View larger image
View larger image

This is an informal site map, useful for clients who are not technically savvy and for front-end designers who need to know how the designs they create can best support the overal site structure.

A sample professional flow chart
A sample professional flow chart

Professional information architects use UML charts to create maps programmers read, with specific symbols and syntax that follow the rules of flow charts. Above is an example of a UML chart from Gliffy, an online diagramming program that you can use for free.


Once the site architecture is generally decided, the developers and designers begin to draw up wireframes of each relevant page. Wireframes can be simple diagrams with boxes signifying all of the buttons or content areas, or they can be rough sketches of the actual page design–it depends on the size of the team, the nature of the final site, or the organization building the site. What you can do is start sketching your site out, making sure to specify where your navigation will be, and what information (and images) you will need to style and place.

Here is a sample for a homepage for a site I named Brooklyn Pet World.

View larger image
View larger image

What this does is give you a skeleton to begin your work as designer. I recommend creating wireframes for the homepage and any major types of content pages. That way you know pretty much everything you will need to design, and all the other pages will be based on those initial pages. That way you end up with a cohesive site and you don’t lose precious time by having to backtrack when you realize the site needs additional sections.

Activity: Wireframing with an online tool


Gliffy is a nice online app, give it a whirl and see how you do.

Labtime: Create a sitemap and wireframes of your project

Take some time and create your sitemap and wireframes. Be sure to experiment and find the best arrangement of content and navigation.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s