Sitemaps and Wireframes

Sitemaps

sitemap

Before you begin any project, you should always prepare a sitemap to plan out your site and keep it organized. Sitemaps are like a family trees consisting of your website pages rather than a list of smelly, distant relatives who send you odd knitted things over the holidays.

Sitemaps show how the visitor will get from one page to the next and back and establishes all of the pages you need to design, which is critical when quoting on a project!

Wireframes

wireframe

Wireframes are the rough layout of a web page. They help us plan out what does where and is an effective way to communicate our thoughts to the client
Since they are basic line drawings, they get the client to focus on what elements are on the page rather preventing them from getting distracted over nit-picky design issues.

Presenting the Sitemap and Wireframe

sketch_sitemap

Depending on the client and the project budget, you can either present elaborate sitemaps and wireframes done in Photoshop or Illustrator or just sketch one out. Here are some great hand-drawn examples.

Here is a great example of original wireframes and the finished product.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s