In my opinion, website design is largely if not all about the organization and presentation of content. Therefore, a considerable amount of time needs to go into designing the content layout of the website before the visual design stage should begin.
Pulling your elements together into a logical order is a must. Most website pages can be broken down into several basic elements:
The process of designing the content layout of the website is done via Wireframes for each and every page. Traditional Wireframes are black-and-white diagrams that illustrate blocks of content, navigation and functionality of a website design.
Wireframes have been used as a tool to communicate content and structure of a page’s design without the distractions of color and imagery. They are also broadly understood by both Clients and Web Professionals. Wireframes are generally used to help a web designer work quickly through a series of layout iterations before the visual design is implemented:
Grids are a combination of vertical columns, horizontal fields, and white space gutters. Designers have often thought that working inside a grid can be restrictive rather than a creative process. Untrue.
Using grids will:
With my grid in place, I can start sketching out where I want all of my content to go:
You: Great Mike… thanks for all of these screenshots and such from that book I cant afford! And… wow… don’t you look like a geek in that photo! But… what the hell do I do in order to turn in that Wireframes assignment?!?!
Me: Funny you should ask. I have an example we can look at. This should help put it into perspective for you:
View: Creating a Website Wireframe in Illustrator | Premium Design Works