Phosys web design

Phosys web design

Featured Website: ASRPhoto (redesign)

Last month we launched a redesign of Hampshire photographer Scott Redgrave’s website, www.asrphoto.co.uk. Scott commissioned us to refresh the site branding, colour and design with a view to launching in time for the new year.

The first website we built for ASRPhoto was completed back in 2009, so we thought we’d write a post describing our process this time around and include details of some of the new features we used.

Our original design (2009) and the new website (2012)

The process

The new site had a few requirements:

  • Bigger images
  • Striking, impressive and memorable
  • Very easy to use
  • Great search engine visibility

Our first draft was a more traditional ‘column’ layout design like Scott’s original site. Although this design was ultra-clean and simple it lacked the ‘wow factor’ that we were after.

We changed tack and began work on a ‘full screen’ layout that took advantage of all available screen space. This design also included an expandable text area, rotating background images and a transparent overlay that incorporated a new logo. Here’s Scott’s reaction:

“LOVE IT!!!!”

The site map

After a few minor tweaks to the design we moved on to the build phase, creating the general layout and individual pages that make up the new site. We recommended a slight restructuring of the pages to make them easier to browse and drew up a site map with this in mind.

The new page structure meant that the site would be ultra-simple to use. Each page has a clear label and drop-down menus group the different sections of the site together.

See our blog post:
What’s a site map? A beginners guide to writing a plan for your website

Simplified site maps are the first step to creating a website that is a pleasure for customers to use. If the structure of a site is open and easy to grasp visitors can find the information they need within a click or two. The last thing you want is to frustrate or confuse visitors as they search for content.

Full screen background

The major plus of a full-screen site is that it allows you to display much bigger images and take advantage of larger monitors. Big imagery equals big impact – just the sort of thing we were looking for.

On the downside not every visitor to the site has the same screen resolution, making it tricky to keep the site looking good for everyone. Some extra code would be required to make the background image dynamically resize itself according to whoever visited the site. We shied away from using Adobe’s Flash to accomplish this because Flash is not supported by certain Apple products.

See our blog post:
iPhones, iPads and Flash – an update

Luckily we have a powerful alternative to Flash in the form of jQuery, a Javascript library that has a huge variety of different applications. Best of all, jQuery is well supported by modern browsers and devices.

The site uses jQuery to display a full-screen image sized according to your current resolution, which will then rotate every few seconds. We set up separate portrait and wedding galleries for the gallery to use depending on the page you are viewing, so you only get wedding images in the wedding section and portrait images in the portrait section.

Dynamic content areas

A major requirement of the new site was its visibility: the site needed lots of good copy to keep it visible in Google’s results. Having good site content is one of the best ways to get yourself found in Google search results.

See our blog post:
6 search engine optimisation techniques that your business website can’t do without

It can be difficult to marry a lot of content with clean impactful design, so we achieved this by using a ‘hide-reveal’ button to open and close the text areas of the site. This allows us to have large, dynamic text areas and big impressive imagery on the same page.

On pages where the text content takes priority the content areas remain open – otherwise the visitor has the choice of whether to read the text or just enjoy the photography.

For pages where the content takes priority, Scott chose background photographs where the subject is offset to the right, with an area of negative or neutral space on the left.

Galleries

Keeping up with a theme of big imagery, we employed one of our favourite gallery styles on the site – Colorbox – which allows us to display images at larger sizes by opening them outside (and above) the main content. The Colorbox utility also automatically resizes the images to take full advantage of your screen size. Forward and back buttons also appear to allow the visitor to skip through the images, or you can return to the page beneath and choose a photo from the thumbnails.

Colorbox is another use of jQuery – a non-Flash alternative that will function just as well on an iPad as a desktop computer.

Other features

We added a few other features to the new website –

Chunky buttons are used on the home (and other) pages to allow you to jump through to other sections of the site. These bring attention to pages that you might have missed – they also add extra colour to the content of the page.

The Video page features some embedded video from Animoto – these are easy to add to the site and great for showing off albums and wedding slideshows.

Clients can utilise the Lightbox feature, where they choose a selection of images from a private gallery to email directly to the photographer. This is a great way for a client to indicate their favourite images for use in slideshows and wedding albums.

The web site also includes all of the usual Phosys features – content management, unlimited proofing and online sales and ecommerce.

 

If you’re a photographer looking for a brand new website, find out more at www.phosys.com.

 

One Response

  1. Graet work Bryn, thanks for all your work on the new site for ASRPHOTO Portrait & Wedding Photography – http://www.asrphoto.co.uk

Leave a Reply