OK, I need to start off with a confession.  Last week when I decided that I was going to describe how I built this site, the site was just the one resume page (minus the menubar).  Since then I had a fit of inspiration combined with insomnia which I've put to good use and launched some functionality that I was planning on getting to in the spring.  So, for the next few posts we'll be discussing how to build that page, and then expand outward exactly as I have on the site.

Although this post is a Drupal post, the lessons here apply to other CMSs as well as static HTML sites.

So, first things first ....  What is a wireframe?  Quite simply it's a plain, unskinned schematic for each page of the site which describes what data is on each page and the basic functionality of the site.  Generally it does not include design elements such as logos, and styling.   When I build a wireframe I also tend to avoid kinky javascript goodness that's not related to the site's functionality (for example, I not include javascrpt accordion on a wireframe, I would include a javascript rating module since there's that drives both the development and design).

Where do I begin?  Generally,  I start looking in the analog world for ideas.  Although we're in the digital world, we want the site to be immediately recognizable.  If I'm creating a brochureware site, I might look at the firm's paper advertising and brochures for inspiration; blogs and news sites look to magazines and newspapers.  So when I decide to build a digital resume I look at a paper resume.

So, let's look at a Resume.  The image on the left shows an outline of a basic resume.  There is a header with personal information (name, address, phone number and email address), a paragraph or so block of text (either a Summary, Objective, etc), an Experience section containing the information about each position held,  a Skills section listing your skills.  There might also be sections for Education, Papers, Volunteer Opportunities, Conferences, Awards, etc.  Although they aren't actually discussed here, I feel that the lessons we discuss today can be applied to them as well.

Now, let's look at want I've done to create the digital version (over on the right).  Since I'm on the web, I've added some sections that make sense on the web but wouldn't be realistic on a traditional paper resume. 

First off, there's a sidebar containing a contact form (which I honestly could've flushed out further).   The justification for that is simple, once someone has found your Resume, there should be no barriers to getting in touch with you.  Similarly, a contact information box has been added where you can put Skype, IM, Social Networks and other web-centric means of contact.

Also there is a portfolio section.  To be honest although I'm starting by building a Resume, my eventual goal is to have a full fledged online portfolio.  Even if that isn't the case, if you're in any sort of creative field, a portfolio is a good idea.

Although not a web-centric feature, I split the jobs section into 2 regions, one for the types of jobs I'm currently looking for, one for jobs that might have useful skills but aren't directly relevant to your current job hunt.  This is less about the web and more because people, at least in technology, need to keep reinventing themselves.  For example, over the past 20 something years; I've been a DOS developer, Windows developer, Technical Lead, Development Manager, and now Freelance Web Developer.  Although not directly related the skills in my previous jobs, there are skills I've used there might be of interest to some potential employers.

There are some minor changes in the personal information section, mostly to protect privacy or answer common questions I'm asked by recruiters. 

So, that's it.  Hope you've learned the why and how of wireframing from a basic level.  Generally there are 2 directions a project goes from here: a developer begins building the ste while a designer begins working on a look and feel.  Since we are going to be working with a contrib theme later on, we're going to dive in and discuss how to structure the content in our next post.