A few years ago, I began developing this site to showcase a portfolio of my skills. Web design was not one of the skills I intended to showcase. I was fluent in SQL and could get around in PHP, and could speak HTML, CSS and jQuery sufficiently well, but my artistic skills were indifferent at best. So I thought I would develop the site in WordPress, pick a theme I liked, and render design skills unnecessary.

Sitting at the feet of a design master changed all that.

My brother Peter, painter of great works of art that will be worth millions when we are all long gone, web design guru extraordinaire, who plied his trade for 20 years at Microsoft before moving on to bigger and better things, generously took me under his wing.

Pete quietly destroyed most of what I thought I knew about web design, and in the process helped me to change my design from a poorly conceived hodgepodge into a design that is attractive, well-organized, easy to navigate, and easy to implement. (The extent to which it is not these things is the extent of my refusal to, to quote Stephen King, “kill your darlings, kill your darlings, even when it breaks your egocentric little scribbler’s heart, kill your darlings.”)

This is still a WordPress site, but it would be hard to recognize the theme I started with.

I had managed to get a header, menu and several secondary pages together before I got in touch with him and asked for his advice. He had this to say:

IMO, you are making your users work too hard to get to your content. Remember, you have about two minutes to convince a hiring manager not to leave your site.

Use your home page to surface a few important things and to provide one-click access to most content. Think about hierarchy, and the order in which you want to take users through your story. Provide clear categories for your info. Scrolling is better than clicking.

For secondary pages, it’s OK to have a sub-navigation, but I would avoid drop downs — better to put links in a horizontal list (like tabs, though they don’t have to look like tabs) so users can click just once to access. Drop downs are not ideal — they were designed for choosing options in forms, and they can be awkward for navigation, making the user do extra work.

Don’t worry about the visual design until your information architecture is ready. Sketch it out first before you make any code changes.

I took all this very much to heart. Peter had put me on to Balsamiq some time before. Balsamiq is a great tool for designing mockups. I opened it up and got to work.

I spent hours tinkering, moving things around, trying this and that, carefully packing items into places where they would fit. Finally, I felt like I had everything laid out in a reasonably economical way.

This is what I came up with:

 
I thought I was getting somewhere, although I wasn’t quite satisfied with it. I was looking forward to getting a few tweaks from Pete, and then getting down to coding. Naive soul that I was …

He now had this to say:

“Clown pants”? Seriously? In other words, this isn’t just a tweak. This is a demolition and rebuild! And I thought I was doing well!

Resilient soul that I am, I got over the shock of dismal failure rather quickly, and when I did, I could see what he meant. I can pack quite a lot of items into the trunk of my car, and it seems I had that mindset when approaching my layout. Once he pointed out my rather scattershot approach to placing content, I had to agree. “Clown pants” was a pretty good description what I had come up with. Back to the drawing board.

Fortunately at this point, Pete had mercy on me and very kindly sent me a mockup of his own, which suffers from none of the deficiencies of my design:

I stared in awe for a while. It was as if Pete had taken my clown costume and, with a wave of his hand, turned it into a bespoke suit! What’s more, there was a lot to learn from his example. The layout is simple and uncluttered. He isn’t afraid to use vertical space. The different categories of information are organized into individual segments, each taking the entire horizontal space and flowing vertically from segment to segment. So moving from topic to topic is a matter of scrolling up and down.

Of course, this is the basis of the design that I used — one doesn’t ignore free help from a master.

The biggest lesson that I learned from this is that a good website designer is essential to a good website. Even a few hours of input from a design expert can save developers many, many hours of wheel-spinning. If not for the few hours that my brother spent with me on this site, I would have spent a hundred hours and more implementing one solution after another that I then discovered that I didn’t quite like, for reasons that I didn’t quite understand.