06 Jul 2007 0008H

Construction Notes 2: Blueprints, First Draft

Flushed with success on moving the sidebar to the left, I proceeded to do some layout. Realistically, no one is going to care about the sodding layout because they’re subscribed to the RSS feed, but it’s an exercise and it’s overdue.

After looking at the content, I dinked around with Illustrator for a few hours tonight to create some wireframe/comps. Stole outright from Khoi Vinh’s lovely, lovely Swiss modernist design for his Movable Type blog, Subtraction, and from the Guardian’s website.

I have now established a type hierarchy with which I can start to build the CSS and have blocked out the general places where type and content should go. After playing with the idea of type replacement and various typefaces like Georgia, Verdana, even Times New Roman, I’ve decided I’m staying with Arial, Helvetica, sans. I am keeping links underlined because, as an IA, you need to make links visually different from the rest of the text and the links, being underlined and colored, are a conventional visual cue that these go someplace else. There are some links on this page that should probably be buttons, since they perform actions. If I need to I can change all this by tweaking the CSS. The thing I like about that is, I can always do so for special occasions anyway, and there will be some. The less we rely on various hacks and visual trickery the more flexible the thing can become, is the way I figure it. Still, I’ve grouped all the subscription widgets in top left to facilitate that task but haven’t thought out too much about where the Technorati and 9Rules stuff will go yet. I may yet have to hack.

I’m going to start with two templates, one for the front or home page, one for category pages. They look like this:

blueprint1.gif

This is the home page. Since I actually now have a life outside of work, I’m thinking there is necessarily a division of content into “my work” and “my life” sections. From there we can customize category pages and sidebars for each of the content sections. The navigation may look like six buttons, but is really semantically an unordered list. The search box I moved top right, per convention. I thought about moving the login to top right as well, but that’s only if lots of people were logging in. So it’s okay to keep it buried for now. I also added a doormat as the footer. I don’t know exactly what will go in there yet, aside from the usual doormatty type stuff. A lot of what’s in the doormat is already in the left sidebar/local nav.

blueprint2.gif

This is the category page. I don’t know how it will respond when I move Archives and Links into the content area, however, haven’t thought that far ahead. What I did for this section is divide up the main content area into a three-column block with two columns for the entries and one for the offsite content, like LastFM and Pandora.

More in a bit.

Permanent link to Construction Notes 2: Blueprints, First Draft

Filed under Construction Notes

Be the first to respond to "Construction Notes 2: Blueprints, First Draft"

RSS feed for comments on this post. TrackBack URL

No responses yet.

And now it's your turn.

Fire your weapon, soldier. Just be careful of friendly fire. NAME & EMAIL required.

You must be logged in to post a comment.