Energise an image heavy website by design
AUTO RESTORATIONS, 52 STEWART ST, CHRISTCHURCH, NEW ZEALAND
Making it to the cover of Classic Car magazine, the superior quality of Auto Restorations’ work speaks for itself in this 6 page cover article (linked).
Established in 1973 Auto Restorations has a story to tell. Every year it must mobilise new car restoration projects. To do this it relies on existing clientele, affluent, discerning people who might already know of the company by word of mouth, prestigious Concours D‘Elegance ‘First In Class’ wins, the publicity that generates in classic car enthusiasts’ media, their advertising, website and brochure—sales brochures, basically—designed to showcase the superior quality of the work they do. Showcase the process of restoration, the completed works, among them some of the most refined and rare cars in the world, and do it justice with advertising and promotional material that has the maximum effect and gives the impression to their select international clientele of an organization worthy of trusting one’s precious, valuable car to.
Well crafted and well made custom built motor cars, widely regarded as some of the most rare and beautiful, are the results of the restoration process, a process which varies.
Some rebuilds are particularly challenging and may take many hundreds of hours of meticulous work by expert technicians that sometimes stretch over years. The strict rule for their sales material is a focus on the process of restoration and the advantages Auto Restorations offers their niche customer base, working faithfully to an exacting standard at a fair market price.
Alfa Romeo Tipo 8C, #31, restored by Auto Restorations in 1998, cresting the hill at Thunderhill Raceway Park, California, 2018.
“I chose Auto Restorations to restore my rare Alfa Romeo Tipo C race car, one of only three remaining, because of the Kiwi attitude that if you can’t buy it, you’ll make it”.
~Peter Giddngs, owner/driver
For their customers the restoration and pride of ownership of classic cars is an exciting and unique passion, yet the goals of Auto Restorations’ outgoing marketing material are the same as most familiar business projects. Irrespective of what you’re selling, the idea is to draw the reader in so, in this case, they can picture themselves participating in the process the firm has to offer.
To show and tell who Auto Restorations are and what they want to say on their website there are few better tools for this than photographs, but photographs have inherent limitations which a designer must overcome.
The front cover of Auto Restorations’ double gatefold capabilities brochure creates motion with multiple images fixed along a horizontal axis, and places their eminent work centre stage.
Set a stage
Establish a focal point
As with the layout of Classic Car magazine when designing image-heavy websites the way to captivate your audience is by using the techniques of diversity, rhythm and zoom.
With access to the client’s thirty five year archive of photos, many of them very beautiful and rare classics, it is the most natural thing to want to use them all. But in any website page design your most important first step with each page is to establish a focal point. This legacy layout with small pictures and not much diversity in scale between them doesn’t do that.
The snapshot photos of work in progress taken by the client’s staff are full of mysterious information that in the context of the process was relevant to the client. So while the photos are full of information, as a whole they’re a mess and a jumble.
The best way to establish focus on each web page is to create a dominant object. In the case of classic car restorations it is often the lone vehicle in silhouette, in other words with the background cut away, is the best way to draw the reader’s eye first. But equally important is its role as a visual anchor.
Establish visual benchmarks
Use recurring elements and techniques
The art of the silhouette: The distracting background is toned down but still provides needed scale and context that looks natural.
It is important for multi-page projects that they appear related; that is they speak with one visual voice. Since the photos are presenting the reader with ever-changing scenery, the most efficient way to do this is to repeat one or two elements or techniques uniformly throughout the site pages. These techniques are echoed in print. To illustrate, I’ve chosen three: photos in silhouette, custom circular icons used as symbols for the workshop departments and bespoke composite header images on most pages.
It is important that this uniformity of what the site looks like begins on the homepage, which sets the stage for what follows, it introduces all the graphic devices used across the site, and clearly answers “Who we are” “What we do,” and “What the visitor can do here.”
Familiarity amidst change
A team of 1930s Alfa Romeo racing cars from the United States lined up in the workshop.
Recurring elements provide benchmarks of familiarity amidst the changing scenery of photos and are used on every page. Photo silhouettes are among the most sophisticated elements because they are almost entirely subliminal; that is, the website user does not notice them consciously.
Create an engaging homepage design that informs and sells
The subjects of the slides in the marketing communications “Automotive Dreams” homepage slideshow, showcased above, were pre-determined. The award winning restorations, a handful of historic race cars, plus American muscle car projects embodied all the qualities the client wanted to feature. The photo that would make a good slide is the one that would also make a good poster; it’s simple, clear and focused on the single subject of a classic car. With their niche market of customers in mind, for the variable content on the homepage the best photo is the one that tells a vivid story all by itself. The storytelling quality is more important than technical excellence, photos which with a few words will complete a story are ideal.
Photos with sharp, loud or hectic backgrounds, are avoided or silhouetted as necessary to make them easy to read. Similarly fuzzy, shadowy or washed out images and ones with odd yellowy colour casts had to be colour corrected and cropped to achieve a uniform high standard. Up to date informal portraiture, environmental documentary photos of the workshop facility and shoots of completed restorations were commissioned during the course of the rebrand and website redesign project as required to keep the project current.
From the client work-in-progress image archive a staff member shot this photo of a crankshaft made from billet steel for an Aston Martin DB6 engine by the firm’s machine shop technicians.
Design using scale and colour for diversity, interaction and pace
Eye movement is vital to an energetic layout. First create a focal point—in this case the large panoramic composite images that head up the top tier website pages—the remaining individual car page thumbnail images are scaled obviously smaller and uniformly because they are grouped in a grid. The eye follows the objects in descending order of size, although this is subliminal. This effect effectively guides the visitor around the site pages quite deliberately.
A photo is moment that’s been frozen. While a still image has many attributes none of them are very conducive to the pace of a restoration process. For this, more is needed, the photos need to interact. This is done with silhouettes and diversity of scale. The eye looks for variety and the interactive attributes of the gallery pages made motion follow mouseovers and clicks very well.
At the close of the project all that was left was to assess whether the single-minded goal of the website redesign had been done right, was the perception of Auto Restorations’ work process enhanced and their high class completed work able to be seen in a new light? The reaction from the client and their customers was yes, they were happy and impressed.
Credits
Date: 2009–12
Client: Auto Restorations
Front end web designer, Graphic designer, Research & writing, Photography, site population and content management: Shaun Waugh
Back-end web coding, bespoke Joomla c.m.s.: Zoomroom Interactive
©magentadot brands
MagentaDot Brands 