The wireframe represents a key stage in the creative process as defining our content areas at an early stage in the project will help greatly in defining the scope for development. At a glance, you can see that our page is composed of 3 basic sections: the header, the content area, and the footer.
Taking a deeper look at what’s going on in each of these sections, we can start with the header portion of the page where you’ll note that we have a navigation menu followed by a banner, and this might be an image or some text that we decide to overlay at a later time.
Moving down the page, the next area is going to be the main section that will host our variable content, and for the purpose of this tutorial we’re going to focus on an index template that we can use to link-out to other pages. This template will feature a stream of posts composed of article excerpts and complementing this area is going to be a sidebar that we can fill with some supplemental content.
Following the content area, the last part of our page is that of the footer which will contain some simple content information, such as a copyright.
So take some time to familiarize yourself with the wireframe and join us in the Photoshop portion of the series where we’ll be designing the mockup for our website.