July 14th, 2009
Figure 1.1
Yesterday I uploaded quite a bit of content to my portfolio. One of the primary objectives of this site being of course to showcase my work and market myself as an Information Architect, User Experience/Interaction Designer, or whatever term fits best, it was a priority to get my work up online as fast as possible.
After creating a second installation of WordPress on my web server I created JPG/GIF images of some selected pieces of work and uploaded them into individual WordPress posts. The result was a long scrolling page with the heading A SAMPLE OF WHAT I CAN DO in the main banner (Figure 1.1).
I was happy that I had some content in the portfolio but it didn’t take long to realize that this just wouldn’t do. I mean, this might well be a sample of what I can do, but it’s certainly not the BEST sample, not when you consider I placed the words Interaction Design and User Experience under my name up there in the masthead.
What Kind of Example?
Now, this might well be a pretty good example of a site that was thrown together in a few days with only a rudimentary working knowledge of WordPress. It might show some graphic design skills, and an understanding of HTML and CSS. If you knew what I had to go through to reinstall the entire thing and rebuild the database content after I accidentally deleted the initial installation a few days ago, it would show aptitude for problem solving and I’d definitely not be considered a WordPress rookie anymore. As for the images on the page, they’re clearly an example of engaging and interesting content. In fact, on a number of levels this site really ain’t bad at all.
However, what this site is NOT a great example of is Information/Interaction/User-Experience Design. See, I really didn’t start out with much more than a few sketches and ideas in my head and then simply relied on the WordPress architecture to “throw it together.” While this is useful in the sense that it helped me deploy the concept quickly and I do actually have some content online that I can share, because the content hasn’t been organized and sorted and I haven’t yet modified the default “list-o-posts” layout, what we’re left with is a rather uninspiring long page that is a real pain to navigate.
Start at the top
Realizing the page needed some improvement I changed the main heading to “SOON IT WILL BE ORGANIZED BETTER” which at least spoke to the fact that I was well aware of the need to do something about it. I also added one more project to the page, but this didn’t solve the scrolling page issue – rather it added to it. My intention in changing the heading was initially to explain the state of the page contents, however the words seem appropriate not only in this case but in terms of what I’m on here trying to promote in the first place. The title has a catchy sound, I like it, and it may stick, at least for a while.
17,000 Pixels
17,000 pixels is the height of the original screen capture seen in figure 1.1. That was the HTML content without the browser chrome. With the chrome the height would have been, well, over 17,000 pixels and that’s just too damn long. Heck, even 17,000 is too long. But that goes without saying.
So the next step was to cut down on the page height. How does 3,400 sound? It still might be a little long but it’s an improvement over 17,000 and so it’s a good start. How did I do it? I reduced the size of the images as they appear in the posts and aligned each set of images within a single post side-by-side rather than stacked one on top of the other. I then implemented the WordPress Lightbox 2 plugin so that a more detailed image can be seen when the smaller image is clicked. The results can be seen in figure 1.2 and figure 1.3.
Figure 1.3
Figure 1.2
Now that’s not a bad amount of progress made in one day but it doesn’t end there. I can still do a lot to improve not just the organization of items but also make it more functionally intuitive and a lot more engaging. So here we are at the beginning of a process. This is where I get to show what it is I have been saying I can do. This is where I take the work done so far and refine it. It’s almost like a site rebuild, except the site itself is only a few days young and we’re not really “rebuilding” any components of the site, just reorganizing the information and doing some neat things to make the content more engaging and the user experience more pleasant. In order to accomplish that we’ll do a bit of reverse engineering.
What’s Next?
Since I already have the site online and there’s content in the portfolio, I’m already well into the publishing stage before I’ve even started what would usually be the planning and preparation stage, so I’m going to have to backtrack a little in order to move forward. I’ve already spent time on the overall design of the pages and I’m quite happy with the graphical treatment so there will be no need to get into much of that – most of it is already done, partly thanks to the ease and simplicity of WordPress+Free WordPress Themes. Sure I can tidy up some of the page formatting, adjust font sizes, spacing and so forth, and I have actually yet to test the site outside of Firefox on a Mac, but most of that will be taken care of as I work through the rest of the work. After all, this is a somewhat ad-hoc project with no launch date and in fact most of the content appearing in a “publish now, proof later” fashion.
What I’m going to do first is take what I’ve got so far and reverse-engineer some mockups/wireframes of the portfolio page to determine what kind of layout works best. Here’s the first step in this process – Hand sketched low-fidelity wireframe concepts.
I’d say “now this is where the fun begins” but it’s already been going on a while. Don’t worry you didn’t miss anything that won’t come up again.
