Starting with Structure

Structure is important in building a successful Web site, but it is often difficult to visualize how all of the pages in our site relate to each other. Sitemaps and wireframes are two tools that can help you understand the relationships between parts of a page or sections of a site.

Note: For those of you who are more advanced, I’m not talking about the kind of sitemap you submit to google, an XML list of links and code. I’m referring to a visual sitemap, a chart that maps all of the pages and sections of a site and how a visitor would navigate from the home page to a designated page on the site.

Sitemap example

By creating this map near the beginning of the process, you can feel confident that everyone working on the project understands how it will be built without wasting time and energy on trial and error. Looking at the site from this high-level view will also help you to prioritize what information is most important.

Wireframes take this process to the next level by forcing you to subject a single page to the same sort of scrutiny. Organizing the content of a page by function and importance will help you to determine a layout that supports your site goals and makes navigation fluid for site visitors.

Wire frame

You will find that taking the time to complete these steps before you jump into building functional Web pages will make projects easier and save a lot of time in the end.

Learn more:

http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

http://blog.flipstudios.com/2009/10/

http://www.gdoss.com/web_info/web-site-wireframe.php


Some free online tools:

Writemaps

Lovely Charts

Gliffy

Mockflow

Leave a Reply

Your email address will not be published. Required fields are marked *