Personal Website part 1: Chose the site and Information Architecture

First, decide if you want to do a portfolio site or a small business. And if you can’t think of a business, just do the Frederick Coffee Co. or something comparable. I recommend this site because it has an amount of content that’s appropriate for a beginner.

Step One – Content Round Up

After you decide what your site will be about, you need to round up the content. There is no trick to this, you just need to gather up all the content such as text, images, blog posts, articles, videos, charts, graphs, calendars and the list goes on. Round it all up and dump it into a folder. If it is something like a YouTube video, just grab the URL. If you don’t have the content, create it. For example, if you are making a portfolio site and want to have an “about me” section or résumé, be sure to create them in this step if you have not already.

Step Two – Organization

Now for the more difficult part – information architecture (I.A.) – or at least a beginner’s attempt. This is the organization of content in an effort to make things easy to find and easy to learn and understand for the user. The needs of your website’s users should drive every decision you make.

I don’t want you to spend more than week on this because I feel it starts to change the scope of the class beyond HTML and CSS. It’s easy to get lost in. But it is definitely something you should be exposed to and aware of. The sites you are building at your current skill level should be simple, have a limited amount of content and you could probably do the I.A. in your head. But at least go through the motions just to be exposed to it.

I.A. is usually delivered to the client as a wireframe. A wireframe resembles an architect’s blueprints. Here are a few examples of hand drawn wireframes. Here is an article that compares hand drawn and digital wireframes, and discusses grayscale vs. color and a few other topics. Like most things in the web development industry, there is no single correct or perfect way of doing something. So do what works for you. Some wireframes are drawn on bar-napkins and some almost look like design mockups – but remember the purpose: to show your client how the site will be organized and arranged BEFORE you waste any time building the site. Have them sign off on the wireframe so that later when they try and change the scope of the project (or change their minds), you can justify charging more or at least make them retract their request so they are not taking advantage of you.

I like to put my own twist on wireframes by actually attaching the website’s content. Here is a section of the I.A. I did at my day job – I have a wireframe which describes what the “about us” page will contain, and then the actual content that will ultimately populate the “about us” section. And also a home page wireframe.