If you’re coming here from somewhere else please, start from Why your site sucks (part 1). We’re just getting to the fun stuff now, so get to the back of the line and wait your damn turn.
Now you have lots of notes and index cards and design documents, you have an idea of your , what they’re looking for and how you’re going to give it to them. Well you’ve made it this far so it seems only fair that we get to something a little more cool.
We’re not coding anything yet. AWWW…I know it’s so sad. You’ll get over it.
Aright class let’s begin building a skeleton!
Building the skeleton groups the information that we’ve already collected and lays out a framework. Here is where we fit together related content pieces and how everything is linked. If I spice this up with a little SEO talk, this is also the stage where you figure out what pages you want the link juice to flow to and what pages really don’t matter if they never showed up in the search engines. Where to add tags, canonical tags and where to insert robots.txt.
When deciding how the framework should be put together you’ll want to do something called a metaphor exploration. What you’ll be doing is comparing your website to the organization of a system in the real world so that you can group content in a way that will be familiar to your viewers.
One of the most commonly used is the Organizational Metaphor. In this, items are grouped together by type.
For example: a website that sells movies might group items on the site similarly to a video store (Horror, Action, Foreign, Westerns, Comedy, Family, Independent etc.)
A functional metaphor relates tasks on the site to those that can be done in another environment.
For example: a site that sells client side server performance tools might use car terminology such as Torque, tune, Rev, Accelerate, Overdrive, Boost, etc. ( I work on the internet not on cars, I’m only using terminology Hollywood told me was cool. I don’t actually know.)
A Visual Metaphor gives a visual representation of the information you are trying to get across.
For Example: a Dj website might use graphics found on traditional media players (play, pause, stop, rewind, fast forward)
You may end up using one or a combination of all three types of metaphors. The important thing is that it makes sense where it is being used. Content Metaphors may make sense globally but a visual metaphor might work better locally. Remember you are designing as for the end user. The navigation of your site has to be intuitive or you run the risk of losing or short changing yourself on potential .
Take notes on where these metaphors make the most sense and record your results.
Now we’re pretty close to making your site suck a little less ass (hopefully). Make your final decisions on the importance of the content on your site, where you want people to go, how they are going to get there, where they go next etc. and set it all in stone. Create a hierarchical map and call it the “site structure listing” it should look something like this
- Section 1.1
- Section 1.2
- Section 2.1
- Section 2.2
- Section 2.2.1
When you’re done, create a visualization of the list and create a blueprint.
Create a legend that defines how the pages link together, components of the pages, which links are no followed and any other special information that each page might have.
Now define navigation to know how your users will get from one page to another. You want to help prevent them from getting lost.
There are two different types of navigation Global and Local. Global navigation should be predominately displayed either in a top navigation, sidebar, footer or any combination of each. Generally you want to keep your global navigation from 5-7 links.
Local navigation should be able to help a user easily get from one page to other related pages within the site fairly easily so they won’t get lost and can stay on topic (remember you did group these documents already so it should be fairly simple)
When all is well, create a design document and get ready to move on to the last and final phase. Congratulations for making it this far you now have a pretty sturdy framework for your site to be built upon.