This week I'll be starting another new stage in my career, as I take on the role of Director of User Experience at Traction Software, Inc, marking my return to the subjects you've read me blogging about in the past: design of information retrieval and content management systems, knowledge management, and social networking and social software for the enterprise.

It's with great pleasure that I return to work on the application I used as a client, and to the team that I contributed some interface design work to over a year ago as a consultant. You'll be reading me return to blogging about the topics I mentioned above, but this time from the design and product development end of the conversation. Previously I wrote mainly about grassroots needs for social software and km and how blog/wiki tools meet these needs. In addition, I expect to show details of the application and its use for various forms of personal and enterprise knowledge management. I've used this tool in the past on a range of needs, including serving as a tracking system for usability testing issues, documenting project information (wiki style), and simply for logging my own projects and todo lists (personal km style wiki).

There will be more to come. I look forward to sharing with you.

I updated the OmniGraffle Web Design Template.

This web design template for OmniGraffle Professional provides the basic layout for a design deliverable including the following master canvases: document title, section title, wireframe (portrait and landscape), storyboard, and blank. The wireframes were created at 950px wide with guides following the Blueprint CSS Grid system. Wireframes also have 2 small hairline marks around the 600px point to mark the approximate fold. Go grab it here.

After about a 4 year break from blogging about information architecture on iaslash (my last post there was 11/2003) I've decided to return to blogging on a wider range of user experience topics. The new blog is called Konigi. Here's a snapshot of how it looks today:

The word Konigi is a bit of a nonsensical riff on the Esperanto, "koni," which means to know. Before I started on this projectj I wanted to find a way to focus on doing some sort of personal knowledge management related to web design, and somehow I ended up doing this site. I can't tell you how happy I am to have finally found a way to combine my interest in KM, Design and UX, and Blogging into one project.

Herw's what you find on the site for now:

• Interface: A gallery of user interface and interaction examples that are both conventional and accepted solution as well as innovative examples that push the use of medium.
• Design: A gallery of sites that can be described as influential, innovative, and effective at representing their brand and purpose. Visitors may submit designs for inclusion. The submissions that get the most votes will be included among the featured sites.
• Notebook: This is the more traditional blog, pointing to UX resources. For now I'm going to keep the writing lean and succinct. This is also the place where I'll be posting the Collages (Command-Shift-5) I play with occassionally and post to Flickr.
• Function: This is a competitive analysis section that I'm working on and hope to release very soon. Hopefully these pages will start appearing in the Spring.

When I started this project a few months ago, I thought I'd simply be starting a blog or wiki, but somehow it evolved into a more focussed portal of sorts with lots of screenshots. I got my hands on Skitch and started posting screenshots to Flickr. I started a new job last year and found myself taking screenshots a lot more and write a lot less on urlgreyhot. All the little experiments using Skitch on Flickr forced me to organize things and separate these screens from those Ipost to urlgreyhot. This is where Konigi comes in. Hopefully it will keep this stream of screenshots in order so they're findable and reusable by others in the UX community who may be interested in them.

I'd love to hear your feedback.

I made some minor modifications to the wireframe stencil/palette adding some new label markers, cursors including a hand pointer with tool tip, an AJAX spinner, a drop-down/selection menu with options showing, and a sizable window element.

Download the new version from the Wireframe page.

The previous grid article dealt with how to come up with a CSS strategy when you're working with another visual designer's comps. Now I'd like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress. The purpose of this article is to give you an idea of how to approach blog theme design using a grid system. After reading this, you should be able to create a fully-functional grid-based design and HTML prototype that can be coverted into a theme template.

Creating the design grid

I recently redesigned this site because I wanted a layout that provided larger areas for my content. I needed a system that provided me the flexibility to get creative with the layout, but I also wanted to be sure not to lose control of the order and balance of page elements. While the spare layout of my previous design worked well, the new design would be a little more information dense.

For the new layout I used a grid with a simple division of thirds at a fixed width of 801 px. To get to this width, I played around with different sizes that could be centered within a 1024px x 768px browser window with ample white space on the sides. I targetted my maximum width around 800px.

I started by dividing up 800px into thirds and had an approximate width of 267px per third to play with. I borrowed the idea from the MIG design of using a 3 pixel border to separate each division. This odd-sized gutter makes room for 1px vertical border lines with 1px of padding at each side if I need it. I kept sub-dividing the thirds and after a bit of tweaking came up with the grid below. Each little pink box is 1/12 the width of the page (64px wide). 4 of these side to side make up a third of the width, which I would use for normal column of text. 2 or 3 of these side to side would be nice for a narrow column.

Screen shot of the grid (shrunken to fit)

So now I have a grid that could easily be divided into the thirds I needed to make a multi-column layout. This gives me a very simple grid to work with and I don't think I'd need to have smaller grid divisions for blog themes. Next step is to start looking at layout sketches I had in mind and think about how to turn them into XHTML & CSS. The visual design I'm basing this demo on is an old theme I once used on my blog, with a little modification of the graphics and color palette. You can see a screenshot of the old theme (it's the one in the upper left hand corner).

Turning boxes into content areas

To get started, I think about the page elements I want to use. I want the page to have these parts:

• header
  • logo
  • graphic element
• body
  • weblog content
    • blog entry
      • entry metadata
      • comments
  • local navigation
  • advertisements
• footer

I have some hierarchy of elements established in this list. You probably won't need to jot down a list of elements like this to do a weblog layout, but it helps to show where we're going.

Using the list as a starting point, I start to think about where I want these elements to go on the grid. You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.

Wireframe of content areas

Above, I took each of the page elements and blocked them out. We're going to take the wireframe and create the visual design elements for the page and design the layout of the content blocks.

Visual design comprehensive sketch over grid

As I'm doing this design, I realize that I don't actually need 3 grid blocks for the ads, so I use 2 instead. The layout is looking good to me so far, so now I start thinking about how to turn the blocks into CSS.

Turning content areas into CSS elements

Working with grids makes it easier to visualize a strategy for the CSS layout. I start by thinking of the hierarchy of divs that will make up my page wrapper and all of the child divs nested within it. I'll label those in the wireframe to show what I'm thinking.

As you can see, I'm going to enclose the entire page in div#wrapper. The rest is a bit like a sandwich. On the top, I put the #logo and #graphic in div#header. On the bottom, I have div#footer with my copyright info. And sandwiched in the middle is div#main which encloses the 3 column layout of #localnav, #content and #ads.

Next I go about measuring each content block and recording it's dimensions. I'm mainly looking for widths here except for the header, where I actually want the height as well. Heights will, of course, stretch vertically in the div#main. I measure the #header out to be 801px wide by 131px high. In the screenshot below, I show how I get the dimensions of #logo using the Info panel in Photoshop. I do this to each content area, getting fixed widths for all the areas.

Creating the style sheet for the layout

Constructing a shell

When I'm done gathering my measurements, I can start to construct the stylesheet. I start by creating a barebones shell that will look a bit like our wireframe. First I record the main divisions in my CSS file.

Then I put in all the dimensions and positioning. To test my sanity and the precision of my measurements, I put the grid into the div#wrapper as a background image. The core CSS for the layout is below.

Next I start putting the widths (and heights for the #header) I recorded into the style sheet, creating a shell for the site. To make the boxes lay out precisely, I use left floats for columns and the Position Is Everything easy clearing method. If you view a demo of the CSS shell you'll see that the boxes line up precisely against the background grid. Things are looking pretty good. Now we have to add the graphic elements from the comp.

Completing the wrapper

We're almost done now with the wrapper. To finish off the wrapper we have to cut up the background graphics and tweak the the widths just a little so that our border backgrounds fit around the grid. Take a look at the wrapper with header graphics and borders in place .

Final touches

It's looking nearly finished now. All that's left is to do the style elements for the HTML inside the major divs. I put in all of the HTML for the template areas. I create the site logo and drop that into div#logo. I add some padding to the columns inside div#main. Finally, I add color and sizes to the fonts. Now you can view the final HTML template .

Conclusion

Grids are very useful for doing even simple blog themes. They give you a solid system you can rely on to lay out your template and evolve it as needs require.

I showed you how I approach layout and site development for a weblog template and gave you an HTML prototype you can convert into a theme. You are free to use the template in this example, I'm releasing it under GPL. I hope this article helps Drupal developers in some way by giving them a process for approaching their theme designs. Have fun theming!

See also: Cutting and sewing grid-based design: Part 1, working with other people's comps

I'm ready to take a break for a few weeks. I've finally updated my portfolio, adding some Lucent work from the past 4 years, and removing some old work. You can see the new stuff by going to the services section and using the Featured Work links in the right sidebar. Was anxious to get that out of the way. I've also gotten some responses out for new project work and can now focus on actual work for a friend and a few personal projects.

The year has had good and tough times. Some things I can do without like constantly getting colds by taking my son out play with his friends every week. I discovered Airborne, but that damned sinusitis keeps finding me. Such is the life of a parent. The stupid car I use only once a week gave me all kinds of headaches. But otherwise, it's been cool. Time really flew by this year.

Some of the things I've been thankful for: finally feeling like I'm learning to paint, rediscovering cycling, rediscovering that I love to make stuff with my hands, getting better at doing site development, accepting that I can do a little freelance and enjoy it, being lucky enough to do work that I enjoy, finally starting to take my finances seriously, being lucky enough to see my friends occassionally, telecommuting, spending every day with my wife and son and living in a city full of wonders.

Upcoming for me hopefully (sort of a to do list for January on):

• hopefully a blog entry about cutting up comps and creating CSS for grids
• more skinning of this site and experimenting with making Drupal skins (some for you to use for free, some possibly for sale)
• getting physically ready for the spring bike season (seriously)
• selling my car so I can bike commute to NJ (who needs the MTA?)
• back to mixing with Traktor DJ Studio
• sewing classes at Make Workshop
• watching more movies
• learning to trackstand
• getting brown in Jamaica!!!

I need more hours in the day.

I gave a talk at Rutgers, School of Communication, Information and Library Studies to introduce people to blogosphere and to touch on why weblogs are important to information workers. The actual presentation doesn't contain many slides and is rather short on bullet points and text. The diagrams I used on the slides were meant to illustrate some talking points and encourage discussion. There are no speaking notes included with these slides. This material is so familiar with me that I don't really write much in the way of speaking notes any more. The audience of this talk is information professionals who aren't familiar with weblogs and the blogosphere.

Presentation Slide Show, PDF (468 K)

I saw the Broadway version of Rent in 1998. My wife had brought me to see the opera La Boheme at Lincoln Center the year prior. She's a big fan of that opera. I was interested in seeing Rent because I liked the story of La Boehe and of course I had read about all the hype. But I'm not a particularly huge fan of musicals. I went out of curiosity and left a huge fan of the story and the music. Not exactly a Rent-Head, but someone who would listen to the soundtrack over and over until the words and each intonation and phrasing was embedded in memory.

So with this soundtrack imprinted on my mind, I was wondering how much I would like or dislike Christopher Columbus' 2005 cinematic version of Jonathan Larson's play. I had read reviews in Time Out NY and on a few web sites and it seemed like quite a few people were bitching that the movie didn't translate as well on film, that the song order was re-arranged a little, that the cast members -- 90% of whom were from the original Broadway cast -- were too old. So I went without having high expectations.

I came out of the theater pleased. When I read movie critics, over and over I say to myself, why don't these people just try to enjoy movies as they are instead of poring over the intellectual minutae. So much of the discussion about movies sounds like academics (the criticism of movies, that is) rather than providing a description of the experience. I guess if you're really that heady, it can be difficult to get past intellectual aspects of film, it's structure, directing, etc., etc. I know. I do that too. But at the end of the day, I go to the movies to be immersed in a story, to be inspired, to live vicariously through characters I grow to love and hate on screen. And that's what I did with Rent.

The movie really transported me back to the theater production, where I grew to love that soundtrack. The film does not really break any new ground with the material, but honors the play by simply bringing it to the city streets where the scenes really do come to life. They do get the grunginess of late 80's East Village right -- that's one of it's strengths. They get the setting right on-screen, and to a large extent, this is the biggest change in the translation to film. New York City gets to be a prominent actor. And that was really a treat, to see the story come alive in that way.

OK there are other changes, like some small reordering and modification of songs. But a lot more can be told with less in movies. Perhaps the biggest thing that I wasn't expecting is that some of the singing parts were actually spoken. Somehow I wanted to hear all of that sung as well.

I really liked the intimacy of seeing the characters up close. Particularly moving was the death scene with Collins (Jesse L. Martin) and Angel (Wilson Jermaine Heredia). There was just something more emotional and almost tangible about being that close to the characters that you couldn't get onstage. The Life Support group sequences were also pretty powerfully handled in the film. The "Will I lose my dignity" part always shakes me up. Seeing each member of the circle fade away effectively evoked the feeling of loss.

The criticisms of the cast I just disregarded, especially after hearing the movie soundtrack and comparing it with the original Broadway soundtrack. Sure, they're a little old to play twenty something squatters in the East Village, but I was really pleased to see and hear them all, they just sounded so good. Just suspend your disbelief, allow yourself to feel the music you'll enjoy it. There is that same depth of feeling and richness to their singing as there was in the original -- maybe more. As I sang along to the songs in my head, I couldn't imagine being satisfied with different voices. But, you probably would have to have seen the play and heard the original Broadway soundtrack to appreciate this.

Tracie Thoms was also an excellent replacement for Joanne. Her voice just sends shivers down my spine. Rosario Dawson was good too. I've read in some places that her pitch was too perfect and must have been manipulated in the soundtrack. Sure, she doesn't have the depth of the original Mimi, but I was still able to get into her songs as well. Honestly, I really wasn't able to focus on her voice too much while watching. It wasn't until I heard the tracks with headphones on my iTunes that I really could compare the two. I liked the original Mimi's singing better, but Rosario holds her own on screen.

I've gone on for paragraphs now and haven't even touched on the story, this movie's messages and how it feels to watch this slice of life today, nearly 20 years after the story (or the historical context) takes place. There are so many things going on in Rent -- love, loneliness, AIDS, drug addiction, poverty, living in America (in NYC at least) before the turn of the century. Too many for me to discuss. I wanted to focus mainly on my personal experience watching it. I'll just say that if you've seen the play, you'll enjoy it. If you haven't seen it (and you have an open mind) go see it.

Someone pointed out to me that I was mentioned a couple of times in a recent Outsell report: TrendAlert: RSS, Wikis, And Blogs — Oh My!: Popular Technology In The Enterprise.

I gave a talk on enterprise weblogging for the New Jersey Chapter of the American Society of Information Science & Technology yesterday. The presentation is a distilled version of all of my past talks on the topic. I'm finding that I need to prune the actual power point file down more and more to use fewer slides, with more graphics and less text. What this is doing for me is allowing me more space to engage in conversation with the audience rather than to talk at them. This is the point of weblogs, and as I get more comfortable with public speaking this is becoming easier. This entire talk with punctuated with questions and sidebar discussions, which really helped add context to the presentation.

Here are a few of the interesting broader questions that were raised.

What makes weblogs a better choice over email discussion groups or team workspaces? Can weblogs be integrated with existing environments, like Lotus Notes, etc. (various forms of this question were asked)

I've thought about how to answer this question in the past presentations because it comes up. The answer I give is usually starts with the obvious one: ease of use, price, and syndication. They're easier to use for publishing than the tools we currently have (portal systems, content and document management systems), they're easy to install, and they're cheaper (inexpensive or free). I think that's the answer that drove the individual push to blog in the business world initially. But it's not the whole answer. The answer can also be found in how weblogs relate individuals to the company and relate the company to productivity, profitability by using these tools for knowledge sharing. Lee LeFever's "Weblog Pitch" provides the best summary of how weblogs do this. He says "It's about seeing yourself in the context of the company." It's about creating this context and understanding to make better decisions. As you may know from reading or attending my presentation, my long view for all of this is to extract and derive meaning in the relationships that are carved out of weblog use. Weblogs make this sort of extraction very simple because of what has evolved as a pattern for weblog format (blog entry, comment attached to email address or home page, trackbacks, XML feeds with subject fields) can be used for observation of relationships. These relationships can turn into other connections, expert finding, and that sort of thing.

The point people seem to be concerned about is a practical one. We do all of this sharing already in email discussion groups. We use Sharepoint. Why is this any better? My answer is yes, you can archive email discussion. Yes you can do some categorization in team areas. What weblogs offer (besides the cheap, fast and easy experience) is a different experience.

The weblog experience is often about me. I the publishing process. And by control I mean that usually an individual controls what she publishes, whereas an email discussion group is loose. It's based on we rather than me unless you're working with a multi-user weblog. But the experience also adds simple categorization, simple commenting mechanisms (including trackback) and a simple method for sharing and syndicating your output. This is the experience that's unique. The Wiki experience is similar, but with a we/community focus.

Both weblogs and wikis are enablers for grassroots efforts. And there is where the experience takes on meaning to the ecology. As we've seen in the past with Dan Rather at CBS, Jordan Eason at CNN, and George P. Nanos at LANL, weblogs have truly given a great deal of messaging power to individuals for better or for worse. This disruption to the power structures that makes them very interesting with regard to the media or to corporations. Viewed properly, it should be taken as an opportunity to harness the messaging power of the individual.

What should you do to motivate people to weblog?

I reiterated my belief that a healthy ecology depends on the freedom for individuals to express their needs. That is to say, I think that the urge to blog should be self-motivated and that when someone publishes because they feel the need to, they are more likely to sustain that publishing as long as the need exists. Self-motivation is ownership of the process. Requiring people to blog doesn't make sense. I can't believe that the process will be honest, conversational and open if the need doesn't arise organically.

At KM sessions I've been to, I've heard vendors suggest that motivation is the factor that will drive KM software success. To that point, the vendor suggested incentivising contribution by matching with monetary rewards. I think this is entirely wrong. One of the reasons we see weblogs having some success at being used for information and knowledge management today is because it represents the opposite view -- one that suggests that motivation to publish and share knowledge should be an individual matter and should be owned and controlled by the individual rather than mandated from above. Weblogs and wikis are a grassroots revolution, not a idea cooked up by management.