Skip to content

Pat Dryburgh

About 1 minute after launching my new site just over a month ago, I had opened Photoshop and was working on version 1.1 of the design. I didn’t want to rebuild the site, but knew there were aspects of the design that could use improvement.

I began working on those improvements in whatever short periods of free time I could find over the past month. As the month went on and I was able to see how people were interacting with the site, I could see even more places where a bit more thought would make the experience much more enjoyable for everyone.

While the look of the site now is pretty different from the previous version, what’s under the hood is pretty much exactly the same. Testifying to the power of CSS, the majority of the changes were purely aesthetic. The blog was the one area where major layout and semantic changes were made, as well as the addition of the Photography page.

I want to highlight some of the changes, and explain why those changes were necessary.

Simplified Homepage

Simplified Homepage

Not a major change, but one that I believe adds much needed clarity. When visitors arrive to the site, I want them to see what I do. Before, there were 7 possible options to accomplish this:

  • the featured project
  • two calls to action in the copy
  • four recent projects

As we all know, when presented with too many options to choose from people generally choose not to choose at all. By limiting the calls to action to three (featured project, two calls in the copy) I am making that decision decidedly easier for visitors.

Better Project Navigation

When a visitor was finished viewing a project, they were presented with a simple “Previous/Next” navigation scheme. There was no indication about what type of project they would be seeing next, or how many projects were left to go through.

With the new design, I’ve opted for clarity over simplicity. Under each project study is a list of all of the possible projects that can be viewed, including the name of the project and the type of work that was done. Now visitors who are only interested in my web work won’t need to sift through any print or other work, or vice versa.

Work Navigation

Better Blog Layout

As I mentioned above, the blog saw the greatest changes in layout, semantics, and aesthetics. As well as updating the look and layout of the blog, I also added proper commenting support on the site.

For those who have been following me for a while, you know I got rid of comments a couple of years ago. While it was nice not having to fight through the spam, I believe quite a bit was lost by not having your voice in the mix. Now, you are more than welcome to comment away on any post you’d like.

Just above the comment section I have updated the post navigation. Reading more about web usability, I realized that a simple “previous/next” link structure isn’t sufficient enough for users. With the new navigation, visitors can see the title of the post they will be going to, and make an informed decision of wether it’s worth their time to investigate.

Blog Navigation

Better Contact Form

When I launched the new site last month, my friend Chris Wallace made the comment that my contact form was, well, boring. At first I defended the form, as it was simple and clear and minimal. But as the site has been launched for a month now I have seen how right Chris was.

What the contact form truly lacked was affordance. Affordance, as defined by the book “Universal Principles of Design(affiliate link), is “a property in which the physical characteristics of an object or environment influence its function.”

While the original form had normal web form-like elements, it lacked any sense of affordance. Plain form elements on a plain white background. When people would visit the contact page, there was nothing there enticing them to use the form.

With the new design, I made sure to create a form design that clearly identified the form’s purpose, as well as brought a little bit of fun to the design. The new form looks like an envelope—an identifiable element that communicates “contact— and includes a button that looks ready to be pushed once the form is filled out.

Contact Form

Overall, I’m really happy with this iteration of my site. I believe it builds on the strategy and though that went into the first version, and improves on some of the areas that weren’t quite right the first time around.

And of course, I would love to hear what you think!

Permalink for “Redesign: Highlights” published on date_to_rfc822