After the seeming lack-of-progress of last week, I re-assessed my approach: was I trying to do too much by redesigning the entire website? Perhaps I could just make some updates to the current website. With that, I managed to finally get the front page to a place where it’s actually quite close to the original design concept, but first I had to deal with the presentation and design of the page’s inner content blocks one-by-one.

Regrouping

According to my notes, on March 23 (Day 16) I realized I was stuck on presenting myself. This isn’t a design issue, but a content issue. I was fretting over not looking good, and this was making me overly fussy and frustrated. Compounding this was my dislike of using Photoshop for any kind of layout, so I “got over it” and told myself that there are plenty of people who like it fine; let me just be sloppy with layers and adjust to the workflow it offers. I have a tendency to use Photoshop as someone who survived a Great Famine and am stingy with using memory; I grew up programming computers with 1MHz 8-bit CPUs and 48K of directly-accessible memory total, so I’m like your grandfather hoarding rolls of toilet paper because he remembers what it was like to not be able to get the stuff during the Big War.

But I digress. I recognized I was paralyzed by just not knowing how to describe myself. I knew what I wanted to describe, from the cloud-tag work I’d done in previous weeks, but how to make it look good and not make me look like an ass? That was still bothering me.

The solution: Back to first principles. Let me not worry about style and pizazz, and just speak plainly. In fact, let me just list what should appear, following a simple visual hierarchy.

Here’s how the work broke down over the week:

Day 16

Here’s what I drew on the 23rd, in Illustrator I think. From top-to-bottom, I start with the header, “Dave identity”, and framing statements about creative independence. This establishes who I say I am, and also is the gateway to a lot of the productivity writing. Next is the “What I’m doing”, as blocks of content. Last is the list of things I have for sale.

Day 17

The first barebone stabs at getting the HTML structure setup on my staging blog. This is the first layout I can start to see how the elements might look, and boy is it ugly. It took a while to come up with the skeleton text in the top section.

On the technical side, I did make a spreadsheet to calculate the CSS values I needed to construct perfect multi-column layouts, and I did learn a few bits about CSS floats. Floats are really stupid, but at least I understand their use a bit more. This took another couple of hours to work out.

Looking for the next hit of work to liven things up, I next worked on the product area at the bottom.

I wanted “Pinterest-style” blocks, and had never made anything like that in HTML. My new understanding of CSS floating, though, made this relatively easy to do. I was pleased that it went quickly, though I didn’t like the ragged heights. I would worry about this later…it had been a long day.

Day 18

I worked a bit more on the look of the product area, moving the title up into the image area. This was a look I’d seen on Ars Technica’s redesign, and I had liked it.

I worked on HTML-fying the header as according to my earlier design markup waaay back from Day 9. This went fairly smoothly; I rediscovered the power of line-height in getting consistent text positioning inside of DIVs.

I also got rid of the first sentence, and moved the template to my actual website so I can see it with actual content (eventually). Only administrators such as myself see the website with the in-progress theme. I’m using WordPress, if that isn’t obvious, and a plugin called Theme Test Drive to do this. I’m making the actual changes to a child theme of my main theme, a custom theme I made called “Seah Unified”.

I took a break from HTML and spent a few hours shooting and processing a new header photo, which you can see here. I tried to bunch a lot of things into one photo that had some meaning to me. It was shot in natural light on a tiny fold-out tray table, shot at f/5.6 at ISO100 with my Canon 40D, using a USB cable to control shooting from my desktop computer.

With the photo taken, I was able to drop it into the new header. Now it’s starting to look like a site. I still don’t know how to handle the difficult inner content sections, but I’m too fried to take it on.

Day 19

Not sure why this screenshot is less vibrant than the others; it is saved as 8-bit PNG to save space (me being stingy with bits again), but the others are too.

Anyway, the changes here are in the latest posts section. This little list is pulling recent posts using a custom query, and I’ve implemented fancy sprite-based graphical bullets on the list.

Ok, we’re starting to get somewhere. I’m not loving it, but I have to forge onward.

Day 20

I have made some significant changes. I added a placeholder image to the recent projects area, increased the number of listed posts to balance the columns. I also added a background color and indented all the content to line up with “DAVE SEAH”, which helps run the eye right to the bumper text. However, it also unbalances the page as a whole, which disturbs me. I let it go for now.

I also reworked the bumper so it appears above the “creative independence” area and wrote some initial copy. The idea is to immediate set a personal tone to the website. It was painful to write, but I am starting to get a feel for what works (or doesn’t) for me.

One thing that bothers me is that the site is starting to look way too TEXTY. There’s a lot of text. And the list of posts doesn’t really go with the recent projects area, though visually they look related.

This is the kind of design insight I was waiting for based on the actual content. Unlike a project where the content is already known, I was in the position to make anything I wanted. That is paralyzing when it comes to making a finished design, because the content isn’t even spec’d. But having seen what this looks like, I can now decide to make a different kind of content. I’d been working with a slider script called RoyalSlider for another client; perhaps this could be made to work?

Day 21

More fiddling with the top text, adjusting spacing and presentation of the “productivity – creativity – autonomy” blocks, which will become clickable entry points into some kind of “creative independence” subsection that I need to make. I might start by making this into a single page with multiple link anchors, listing pertinent posts. That would be easiest for now. It’s the basis of a very large content nut that I will have to address in the near future.

I also have integrated RoyalSlider, which has many options but many gotchyas, into the project area. It cost me $20 to get the WordPress plugin version, which was new to me. I’m still not sure at this point how to get the look I want with the slider, which makes assumptions about the aspect ratio of the images.

I eventually decide that this area should be a full-width image and fade-in-out. This helps rebalance the page, and becomes a second header.

Looking at this screenshot right now, I see that it probably needs to be a little shorter to match the height of the top header, or be slightly smaller even. However, this is only evident when looking at the page as a whole; this isn’t possible on most monitors because the header and slider areas aren’t completely on the screen at the same time. Still…a smaller slider area will save a few kilobytes of memory :-)

I reworked the bottom part into a slider as well. It turns out that I actually probably wanted what is called an “image carousel”, not an “image slider”, to implement that properly. However, I am already freaking out a bit about the number of scripts that load on my home page, so I let it be.

This is starting to look finished!

A bit more space adjustment, and I decided to use (gasp) centered text on the bottom two sections. I may return to left alignment once I design the actual slides that go into “New & Notable”. Since this section fades-in rather than slides horizontal, I could maintain the left margin. I don’t know. I’m probably done with this for now. On Monday, I want to be ready to get this deployed on the website. There’s plenty of work to be done before April 4, the next Groundhog Day Resolutions Progress day.

Not to mention also that I have to back-fit the changes into the WordPress template in a clean manner. Ugh. Still so much work to do. Sigh.

Side-by-Side Comparison

Here’s a comparison of the current website’s home page and the new design.

I’m too close to this to really tell if it’s an improvement or not. Functionally, I think it will be an improvement; I’ll measure this with click-throughs using web analytics. Will it result in more people engaging with the content? I hope so.

One observation is that I’m still very tight with my whitespace. Part of this is due to the fear that too much content will appear “below the fold”. I think that this applies only if the top page fails to engage people enough to do something, like scroll the page to see more, but we shall see. And I still have been reserving the top-right of the header for some notifications of “what’s hot”, overlapping the image, which is well above the fold.

Yeah, I could stand to inject more whitespace and loosen up the design a tad. But I don’t need to worry about that now.

Wrapping Up

I think I am actually out of the website design woods for now, and in April I can get back to doing the fun stuff: writing and making things!

I almost forgot why I was doing this all in the first place: it’s too make it easier for people to figure out what me and my site is about, providing entry points to the best content I have. It’s also to establish the “Goods & Services” as a primary entry point, so people can actually find things they want to buy. This is what funds all my efforts to write and create, and currently I don’t have any way of showcasing them well. Now, they can be on every page if I want.

I’m not sure that I’ll have every part of the website perfectly converted by April 4, but the new home page is good enough to use now. With the new home page structure, it’s pretty easy to add another stack of content. I may add in the “latest posts” links at the bottom at some point.

In any case, it’s good enough to deploy now and refine later. There’s a lot of work ahead, but now the patterns are set and it should be much easier. Thank God. For the rest of the weekend, I am going to cook and eat a lot of things and get my energy back!