If you know that your website is gathering dust but can’t afford a new full-featured custom website, you can consider just freshening up your existing website (I call it a “website makeover”).
With the help of a photography website designer, you can bring new life into your existing website by doing CSS tweaks (and maybe minor HTML/template changes as well where if needed).
That’s what I recently did for a Hawaiian stock photography website running on a classic PhotoShelter template: photoresourcehawaii.com
This is a great example of how a photography website can be improved with custom CSS code, and I hope you can draw some inspiration from it:
Before:
After:
Project description
Tami, who runs the site, wanted a fresh new look, as the site has been as is for about 7 years.
“It has been such a successful business over the years. I am not ready to let it go, so I must find a new way to market it given the crazy scene going on in the world of stock. I know being in Hawaii is the only reason I have made it this far. I have a home business and have to supplement my income with other work. I love Hawaii and sharing its beauty with the world. It is living Aloha!”
She wanted to make the website mobile-friendly, and to switch to lighter colors (as she knew the black background made text hard to read).
Instead of implementing these tasks blindly, I really wanted to understand Tami’s goals for the site, to make sure that any changes will also help her in the long run. After answering all the questions from my “project-kickstarter” form, we both decided it made sense to stick to the existing PhotoShelter template she had (called “Caboose”, instead of redesigning the whole site from scratch), because it was just the right type of text-heavy template she needed to sell stock images.
Here’s a recap of the goals we had set for the design “makeover”:
- making the entire site mobile-friendly
- adding a prominent search box in the header throughout the site (on mobile too)
- cosmetic changes throughout the site to make it more modern
- having a stronger watermark applied throughout the site
Over all, I wanted to bring a new face for the website. Everything was meant to be lighter, with bigger text, and all elements more spaced out and relaxing to the eyes :-)
Making the site mobile-friendly
The old site required users to pinch-and-zoom in order to navigate the site. Using CSS, the new site was how completely responsive, fluidly adapting to any screen size (not just to some fixed breakpoints). Here’s a before-and-after comparison:
General site tweaks
Besides featuring the search box more prominently in the header area, I changed the accent color (for links/buttons and other graphic elements) from red to blue, the exact shade of blue used in the logo, which works well with all the ocean images on the site.
Typography was also improved by increasing both font-size and line-height throughout the site for a more easy-to-read experience.
I then started to take each page/template in the site and tweak the code (after switching to manual-customization mode) and add custom CSS to “modernize” it. Along the way, I also gathered some recommendations where I thought the content can be improved/consolidated. Image pages now also display the IPTC caption and headline (instead of just the filename) to help both users and search engines understand the images better.
Here are a series of before-and-after screenshots from the site:
In fact, gallery thumbnails automatically occupy the full width of the browser on very large desktop screens, increasing the number of images per row:
“I am loving how fast and efficient you are! My lord, what a great web master! I am super pleased with your service.” – Tami Winston
Conclusion
Building a full-featured WordPress site (that’s maybe integrated with a photography eCommerce platform like PhotoShelter) would obviously be the most powerful online solution for a photographer. But sometimes that’s a bit out of reach financially, or there would simply be no need for that type of complexity.
A website makeover is basically a simpler way to improve your photography website without investing in a new redesign from scratch.
Having an experienced designer optimize your site and polish all the small design details can really help you in the long run. An improved online presence will grow your business as a result.
P.S. If you enjoyed this case study, also check out this WordPress design makeover I did a while back, and learn how small typography/alignment/design tweaks can have a big impact on the overall look of a website.
