Wireframes & Sitemaps

10/19/2015

A WIREFRAME is an outline of a website. It is the first step of the creation of a site. Good web designers start out with a wireframe sketch in order to visualize their ideas on paper.

Tips for drawing wireframes:

If you are drawing it out, use a ruler and graph paper.
Some common elements of a site include: header, content, and a footer.
Decide how many columns the site has.
Use boxes and lines to separate content.
To illustrate an image, you may use an X.
To illustrate a video, draw a rectangle and place a "play" button inside of it.
To illustrate a slideshow, draw a rectangle with an x, and put arrows on either side.
Align the elements of the site.
Alignment!!!

Wireframe Slideshow

A SITEMAP is a visual map of the navigation of a website. The more pages your site has, the more complicated your site map will be. A sitemap for Apple will be GIANT, but a sitemap for my site will be rather small. Most large sites have the sitemap accessible as a page so that users don't have to navigate throughout a large site.