Custom website case-study: unique WordPress design for award-winning photographer Chris Dei

I recently had the privilege of working with NY-based photographer Chris Dei on redesigning her personal photography website.

After being trained in classical music and then photographing artists in the studio and on location in New York, Chris found her true calling when visiting Africa in 2001. Since then, she’s become a well-known fine art photographer, receiving international acclaim for her signature “old world” sepia wildlife photos. (read Chris’ full bio)

While I always try to keep a close connection with my clients, this project was a really creative collaboration (with more experiments and brainstorming-sessions than usual) that I thoroughly enjoyed.

Chris and I had to really think hard about how to best showcase her work, and we came up with some really creative solutions, all built on top of WordPress. Continue reading to see how unique a design you can achieve if you use the right WP theme and if you let yourself be creative along the way.

Screenshots

Before:

The old website used to have a splash intro page which served no real purpose, it just linked to one of the portfolio carousels.

After:

The new homepage now set the mood for the entire site (antique, old feeling) and acts as an entryway to almost all the sections in the site. All done in a visually impressive way.

Many elements on the homepage are actually clickable areas, showing a small text on hover:

Project backstory

Chris came to me with an incredible story, she had some really bad experiences with web workers in the past. Here are full email snippets:

“Anyone can advertise as Web Designers and Developers and those of us naive enough to believe it are in for a long, painful and in my case, expensive ride and crash.

I do not mind if you use what I am about to tell you if it will save even one other person from the nightmare I have experienced this year.

The first issue began with a “team” who never responded to calls or messages which later I found out was one person farming out the work to India, and posing as a “team” too busy to respond. I lost the deposit. The second was a team that came recommended by a colleague in good faith. The “web designer” it turned out, knew WP, so was able to get the slider I wanted for the site, but knew nothing about photography, so all the color profiles were stripped, the images desaturated and then he tried to “fix” them and they went magenta. The site was supposed to be completed in 4 weeks. Four months later, not even a quarter of the way finished, I requested immediate completion or a refund. I received neither. Between the two, the site had now been “under maintenance” for the better part of 6 months. Enter a colleague – a photographer, author and teacher, who out of compassion, offered to take over and finish the site using the design we had implemented (a WP carousel slider). He did manage to execute the design and maintain the color integrity of the images, however being that he was not a web designer by profession, it was apparently quite more complicated than he anticipated and he was not able to complete it at the originally quoted rate. What to do? I had already lost 6 months. I had no choice but to pay more than double his original fee. When it was finally finished, the sliders were not working correctly but he was unable to get them to work. At this point, my son, who has a business here, suggested his IT guy take a look at it, which he did. He said that he could fix the sliders, but none of the back-end, SEO, analytics etc – had been built in, and in order for him to take over and fix all of it I would have to agree for him to host it. I gave him my GoDaddy password and pin and sent a deposit. It is now 2 months later, and it has become quite clear that he does not know how to fix the sliders and has continuous emergencies and delays that preclude him from doing any of the work. I called GoDaddy, to see if anything has been done in the back end and it seems that I no longer have my domain. I’m not even clear what that means.

So that is where I am now.”

Alex: I know many photographers out there have had bad experiences with web-designers in the past, and I really hope that the industry is maturing and problems like this disappear over time. If you are currently having issues with your current web-worker, be sure to check out my PDF titled “Guidelines for working with a web-designer” available for free when you subscribe to the newsletter.

At the beginning of the project, when I asked Chris for any words to describe the mood needed for the new site, she replied:

“Elegant, Classical, Fine Art, Old World. All my work is sepia-toned and printed on hand-made textured paper. The feeling I like to convey in my work is that when you look at it, you can’t tell if it was done this year, or at the turn of the century.”

The new website was going to be an exploration, not a clearly-defined set of tasks. We did however have a few specific goals in mind along the way:

• replacing the intro page with a functional homepage
• everything should be mobile-friendly
• a cleaner and better-organized admin area

Against some modern web-design standards, and that’s OK

Right off the bat, the website does not embrace flat design (in fact, it truly embodies “skeuomorphism”, the very think that flat-design was set out to replace).

Chris’ photos are not the type of work that needed a modern wrapping. Instead, we needed to place much emphasis on their old-world look and create a corresponding mood for the site.

Mobile-friendliness was still imperative, of course:

Tech info

Project was built on WordPress, using the most customization theme ou there: The7

I love this theme (and I have used it for many photography websites in the past) because it has a very extensive “Theme Options” section (you can easily spend a few hours in there) and because it is very powerful behind the scenes. Not to mention that it comes built-in with the industry-leading Visual Composer page builder and its trusted sidekick “Ultimate Addons for Visual Composer” (both included for free in the theme).

While the theme is powerful and flexible, I still ended up using my web development experience to customize things further. The site now uses:

• over 200 lines of custom CSS code
• 2 custom PHP functions
• some custom JavaScript code as well

All carousels (in the Portfolios section) were built using the powerful “Slider Revolution” plugin, also with the help of custom CSS and JavaScript code on top.

Slider details:

• shows one center image, and 2 images to the sides (faded and 3D-rotated)
• all images are PNG files with transparent background (to showcase the paper edges)
• manually advancing the slider can be done with the side arrows and with the small bullets underneath
• keyboard arrows also advance the slider
• the slider also has a zoom function: clicking anywhere on the images toggles full-page mode, hiding everything else for the page (especially important on vertical images that then have more space)

Switching from one portfolio to another can also be done by clicking on the title (which has a couple of old books, a reminder from the homepage design), which opens up a modal window:

Other WP plugins used along the way:

• Contact Form 7 + Google reCaptcha extension + custom CSS code for the old-postcard contact form
• Media Library Categories to allow the search function to only return portfolio images
• My Custom Functions to help with the image search functionality
• Really Simple SSL to force the site to use HTTPS (after purchasing a SSL certificate, of course)
• Simple Custom CSS for all the CSS tweaks I added along the way
• Wordfence security for security tweaks, firewall and malware scanning
• WP Rocket for top-notch performance
• Only a few plugins listed here for brevity. I also used many other plugins from my favorites list.

Experiments along the way

Homepage studio image:

We started off with a particular font-face and a collage example that Chris liked:

We knew that the homepage would need to link to the 6 main portfolios that Chris had, so we initially thought of creating some sort of collage/composition in Photoshop, with objects viewed from above. Imagine some old books (purchased from stock sites) placed on top of a background image (Chris had an interesting old-map image that we could use):

This type of layout however looked too flat (and unrealistic), so the solution was to shoot it in the studio (in order to gain more control over the composition, and to make it look more visually impressive).

Chris rented some old books with interesting covers:

And decided to use an old wooden board as the backdrop:

This type of composition really opened up ideas, and the thought of adding even more elements to the composition (to be used as links to other pages in the site) was great:

Flipbook effect:

Along the way, we also experimented with creating an old-book page-flipping effect.

This exact type of animation was almost impossible (Or it’s possible to a 3D artist working on box-office movies, and it’s definitely not suitable for the web from a technical standpoint)

The problem was that it still wouldn’t look too realistic:

Imagine this on top of a photo album image like this though.

We later dropped this idea however, because all the plugins and scripts out there were either too unrealistic, or where a nightmare to customize (in order to use the exact images and details we wanted).

Contact form:

In keeping with the tone of the website, I also customized the contact form to look like the back of an old postcard:

The “reCaptcha” box wasn’t there originally, it looks way too modern compared to everything else, but it can’t be customized (for security reasons) and we needed it there to prevent spam messages.

Feedback

In Chris’ own words:

“What a spectacular job you have done for me in the design, corroboration and execution of this website, which has exceeded all my expectations and made what started out as a vision in my head, a functioning and flawless reality on the world-wide-web.

I have learned so much on this journey together, and your patience, attention to detail and willingness to creatively brainstorm as we traveled through, allowed me to have a final result that has to be one of the most beautiful and creative projects I have ever worked on.

I don’t know how to even begin to thank you. I do believe you are one in a million and I can’t recommend you highly enough. Awesome…amazing… spectacular work.”

Conclusion

When the type of photography you shoot demands something special, it’s OK to step outside of the norm and create something unique to showcase it online.

This project taught me to be even more flexible when building custom new photography websites and to take more time to explore the photographer’s wishes and to experiment with new design ideas.

There is nothing that is impossible to achieve technically if you use the right foundation (good WP theme and plugins) and if you can sprinkle custom code where needed.

The web-design process I follow has been constantly improved over many years of experience, and I’m proud to have worked with creative photographers like Chris.