Design & Photo Editing: A New Website for Wouter Kingma

Jan 19, 2015
Consulting Case StudiesDesignPhoto Editing

Last week I wrote about designing Dubai-based commercial photographer Wouter Kingma’s new wordmark, which was the first step he took toward revamping his graphic identity. To bring you up to speed, Wouter started his journey at WM with a Branding & Marketing Plan, and decided to take advantage of all the consulting services we suggested he look into, beginning with his new logo. Here’s what we came up with:

A watermark logo for Wouter Kingma

Once that was complete, it was time to move on to Wouter’s website. As we often do, senior photo editor Sean Stone and I worked in tandem with Wouter to revamp his web presence. Sean worked with Wouter on his web edit while I handled the web template customization. Our design and photo editing departments prefer to work together like this so that it becomes a collaborative process that allows us to make decisions with each other’s work in mind.

Screenshot image of Wouter Kingma website - Before

Wouter’s website before.

While I worked on bringing Wouter’s new branding to life on his site, Sean tackled the edit. Here’s what he had to say about the process:

Wouter already had a lot of great work on his site, but needed assistance with his organization. I helped him reconfigure his galleries, putting more emphasis on his active lifestyle and industrial portfolios. I worked with him to introduce new photos to his galleries, fleshing out his categories with his most recent, strongest pictures to speak to brands that he will market to in the near future. I chose to keep two main sections, a portfolio and a projects gallery, to separate the more produced work from his personal, documentary projects. We also created a new gallery of an ongoing project on falconry that has been a labor of love for Wouter.

Meanwhile, Wouter had already been toying around with a new PhotoFolio site (a web template service designed with photographers in mind that allows for large images and a mobile-friendly viewing experience), so I dove into the customization and started by implementing Wouter’s “W” as the splash page and favicon (a small 16×16 px icon that appears in the browser bar) on his site to set the tone.

Screenshot image of Wouter Kingma website - After (splash page)

The splash page on Wouter’s new site.

We decided a fullscreen image like the one below was a nice introduction to Wouter’s site, and I used the red of his logo to subtly echo his branding in the hover and active states of his navigation, as well as the links throughout the site. Usually, we recommend that photographers keep their navigation on the left side of their website, but because Wouter is based in Dubai (and Arabic is read right to left), a flush right navigation was appropriate.

Screenshot image of Wouter Kingma website - After (home page)

Wouter’s site after.

Wouter is also a special case in that he does a great deal of writing and has one of the most well-populated blogs we’ve seen from a photographer, so I wasn’t surprised that he had more than the average amount of text content for his site. We looped in a web designer/developer that I work with frequently to handle the more intricate layouts and functionality that Wouter had in mind, and made sure that all of Wouter’s copy remained live text. We recommend live text because when your text is saved as an image, it doesn’t scale well, is barely legible on mobile devices and misses out on any SEO opportunities that live text could bring. With the amount of text content Wouter has to offer, it was imperative that we use all live text on the new site.

Screenshot image of Wouter Kingma website - After (About page)

Wouter’s site after.

We implemented Sean’s edit and the site took on a life of its own, with a sleek mosaic grid thumbnail view and large, powerful images.

Screenshot image of Wouter Kingma website - After (gallery)

Wouter’s site after.

Screenshot image of Wouter Kingma website - After (car)

Wouter’s site after.

Screenshot image of Wouter Kingma website - After (contact page)

Wouter’s site after.

It was also very important to Wouter that his site visitors were able to subscribe to his mailing list, so the developer we worked with integrated that into Wouter’s contact page, along with all of his location and contact information. Once we’d finalized Wouter’s portfolio site, we advised that he customize his blog to be cohesive with the new site and branding. Wouter sent me inspiration of blogs he liked, and, after some research, I found a responsive WordPress theme that met the majority of Wouter’s wants and needs. Wouter purchased the theme, and we had the developer customize it to his liking, also migrating all of the content from Wouter’s previous blog.

Screenshot image of Wouter Kingma website - After (blog page)

Wouter’s new site is now live and looking great, so be sure to check that out right here. Wouter had this to share about our work together:

Working with the team at Wonderful Machine has been a great experience. They bring industry knowledge to the table and think proactively on how to create a better brand. Looking at the results I’m super happy how it has all come together.

For a complete before and after critique of Wouter’s site, you can watch our screencast below:

Wouter’s Before and After

Thanks for watching! Until next time, don’t forget to check out all of our consulting services, and drop me or Sean a line if you’re interested in a new identity or if you’d like to build out your own brand. We’d love to hear from you!