[A Design Case Study]
Galway Trails, which is about to go live officially, was good fun to make.
A lot of the time I do websites for artists, so the imagery is basically done before I arrive – take Natalie’s or Kevin’s, two recent ones for painters. This is wonderful, because the thing a website needs more than any other is good pictures.
In this case though the client was Jim Ward, a tour guide. Photos of the places Jim guides people around therefore would be a vital element of the design, but he didn’t have anything like as many as we would need. So I had an opportunity to create imagery for a site myself.
It was not one I was going to miss.
Photography has always been like the fourth or fifth string to my bow, (which itself doubles as a small harp); it was what I wanted to do when I left school in fact, though I soon found that the sort of work you could get paid for – event photography, basically – was insanely stressful if you only had a basic manual SLR. Imagine trying to capture that perfect moment, from the perfect angle, while simultaneously adjusting focus, aperture, exposure time, focal length, flash intensity… I had to give it up in the end because I could never forgive myself for the moments I lost.
But scenery is patient, so I never lost my love for landscape pictures. As you may remember we were highly fortunate with the weather this summer, and my partner and I were planning to go camping anyway… Into the van and off to Connemara we shot. It was a lovely weekend. I never stopped taking pictures, because there never stopped being a thing that looked like a picture.
Here’s a few we couldn’t fit into the site:
Where, as they say, would you get it?
Jim the client did have pictures from other tours, but he hadn’t been so fortunate with the weather. Consequently, a lot of them were… a little less than inviting.
It has a certain brooding magnificence I guess. But if a tour guide’s site is anything it’s an invitation to come outdoors, and images like this did nothing to make me want to leave the comfort of my duvet. I was sure they would lose Jim customers.
It was time to put the coffee pot on and get Photoshop revved up.
It’s almost scary, isn’t it? Sometimes Photoshop feels like the great power that brings great responsibility.
In theory I could have made most of the pictures look like they were taken on nice days – the ones where there wasn’t visible water on the ground at least – but that would’ve felt dishonest and looked boring. So for most of them I chose not to tweak the weather…
…so much as the drama.
This is from Jim’s tour of the places and events of the 1916 Easter Rising in Galway. (Yes, it wasn’t just Dublin.) This was the most challenging part of the site, because all we had to work with here were pictures of a few locations and monuments, almost every one of them taken on an overcast day. It wasn’t really selling it.
I’m absolutely sure the tour is fascinating. It’s not about monuments after all but events, and hearing about those events in the places where they actually happened. And not only is Jim a great talker, his own grandfather took part in the rising, so his account has a certain authenticity.
The goal therefore was to take those photographs and make them look as interesting as the tour would be. I’ll let you judge whether I succeeded in that.
This 1916 tour section is a good example of the layout I chose for the site as a whole: A single column, with images that “spring out” on anything wider than a phone. It’s an approach I like for sites with a substantial amount of text because it keeps the words easily readable, no matter how wide the screen, while making the most of the available space for images.
This is how the home page looks on desktop – if you could see the whole thing at once without scrolling. Essentially, it’s a stack of four full-width screens:
- The logo, menu and header imagery, with a succinct explanation of what the site is about and a nice big pressable button (what marketers like to term a “Call to Action”).
- A bold image slider, with links to the main sections of the site.
- A more detailed introduction to Jim’s tours, containing all the essential keywords and links to all parts of the site.
- A big iconic image, and the footer.
I’m particularly fond of the photo of Galway’s Quay Street at right, because it’s actually a composite of two shots. If you look closely you can probably see the stitching, but it’s not really visible at the size it displays on the site.
And also, because it was one of the first images of Quay Street actually looking like Quay Street for well over a year.
The picture of the notorious Lynch Window on the left was from an afternoon when I really went to town. The light was good and from the right direction, and I shot the pictures in “Raw” so I could get the best from them.
(If you remember film photography well enough to indulge an analogue analogy, using Raw is like doing your own developing and printing in the darkroom instead of sending the film off to a lab.)
I got far more material than we actually need yet, so we set most of it aside to go with posts that Jim may add in the future. Meanwhile though here’s a couple of favourites:
Jim had very few preconceptions about the design, but he did want to make use of the iconic 1651 map of Galway city. I was well on for that, I’m a big fan of the 1651 map myself. It’s a fantastic bit of late-renaissance cartography. Also my house is on it. So I decided to put this enigmatic image literally front and centre.
Considered as an image though it is a little plain and grey, despite its fascinating detail. And that very detail makes it a bit too distracting to be used in the background. What can I do with it?
First I pare it back to the old city walls. Now it’s less a map, more very much an engaging shape. Kind of reminds me of the Mandelbrot set.
But it’s still grey. Grey map. Grey…dient map. How about a gradient map?
This is where you choose colours and “map” them onto the tones of a black and white image. One closely related to the background say, with another to contrast with it in a vibrant way.
OK maybe a biiiit over the top, the lime green. But I like the effect. Now is the time to think hard about what the site’s background colour is actually going to be.
I like this one, but it’s still probably too intense.
OK that has a nice historic feel to it, and I think it hits the right balance – muted enough to work in the background, but mysterious and strong.
For the foreground I wanted an image that shouts “This is a website about guided walking tours!” Unfortunately none of the photos Jim has is quite ideal, but one comes close: it features him with a group of young adults on a trip to the ancient fortress on Dún Aonghasa on the Aran Islands.
But it looks so cold…
I decided that this image was vital and I had to go all-out on transforming it. Adobe Photoshop was called on again of course, but interestingly the technique used is something that pre-exists image editing software by maybe half a century. What I’m doing here is essentially the same as the orange-coloured glass “Warming Filter” I might have used on my 35mm SLR back in the day.
I just used it a lot.
I wouldn’t blame you if you find that a bit extreme. But if you look at it in context, against the moss-green background and the soft map image, the saturated reds harmonising with the logo, I think it works very nicely.
Obviously, function number one of the site is to get the word out there about Jim’s guided tours; close second to that though is taking bookings for them online. That of course makes this an e-commerce site, and in Ireland we’re fortunate at the moment to have a great scheme to help people start out in e-commerce. The grants are administered by the system of Local Enterprise Offices and so are colloquially known as “LEO Vouchers”, though the official name is the Trading Online Voucher Scheme. It offers up to €2,500 towards the cost of a site, which is great.
(If there is a disappointment, it’s that it used to be not merely great but downright fantastic. Now the scheme covers 50% of your costs. That’s really good if you need a €5,000 site and have €2,500 to spend. But in its first phase the scheme would cover 90%, which was ideal for someone starting out. Basically you could get a sophisticated, money-earning website for €250 or less.)
Just one hitch: While the online booking system was the main e-commerce aspect of Jim’s site, he doesn’t want to take online bookings now. The tourist season is pretty much over. Also there’s a plague on. It will be just the thing when Jim is back doing regular tours, but right now taking payments online could commit him to give a tour when the circumstances, be they legal, medical, or meteorological, might be dead against it. So I designed the booking system – and then hid it.
We needed another e-commerce aspect to fulfil the grant criterion therefore, but there was one Jim wanted anyway: Selling audio guides. Specifically, he wanted to put up QR codes on signs or posters at various points of interest so that people could scan the code and, for a small fee, download an audio file of him telling the story of that place. That struck me as a great idea, and I worked hard on finding a good simple way to make it work.
Client User Interface
Another thing I like to do for clients is create a customized control panel. As they tend not to be experts with WordPress themselves I generally do the admin duties for them (covered, along with site hosting, maintenance, and backup, by a small annual fee), so they can be spared the stark confusion that is the WordPress admin-level interface.
To be technical a moment, I usually give clients “Editor” privileges, which is just enough power to change any content on their site without being burdened with under-the-hood stuff. But even that level presents you with a vast array of knobs and dials. So I make them a hand-crafted panel with just the few controls they’ll need for creating blog posts or new products and uploading images (and in this case, audio).
It also includes a brief manual, with instructions and screenshots to help them go about these tasks.
(Though once in a while a client gets so good with WordPress that I give them full “Admin” level access and just let them run with it. Isabelle’s is a great example. The site I designed for her a few years ago is in there somewhere, but she’s really made it her own.)
A Vector Logo
I included designing a logo for Jim in the price, and was determined to make it a proper one that he could use for all of his publicity materials, online and in print. Therefore it had to be in vector format.
Vector What Now?
Most images you see are made out of dots of colour; pixels on a screen, spots of ink in print. When we talk about resolution, what we mean is the size of these dots – they have to be so small that the eye doesn’t notice them individually. If you enlarge a picture bigger than it was intended to be, you see the dots and the illusion is ruined.
This is where vectors come in. Instead of using dots, a vector image is made up of curves described mathematically – like the curves on a graph. These don’t have any resolution; they can scale as big or small as you like and still look perfectly sharp. This is why they’re preferred for things like logos.
I’d decided at quite an early stage that the hooker, the traditional working sailboat of Galway Bay, should probably be the logo image. It may be a little obvious but it’s nicely iconic – and highly suitable, as Jim does tours that take the boat (no longer a hooker, alas) to the Aran Islands.
And it’s red because the sails of a hooker are traditionally red. This was one of the reasons I went for a moss-green background for the site, to set that off well. As you saw in the header examples above I was considering shades of maroon at one point, because maroon is Galway’s official colour. But sadly it’s also a damned hard colour to work with, and it certainly wouldn’t have gone as well with a red logo.
Creating a vector meant firing up Adobe Illustrator, a program I’m no expert with. Fortunately my partner is, so she gave me a lot of pointers. In brief: If you’re used to Photoshop it’s exactly like using Photoshop, except backwards.
Also fortunately, before I started drawing the boat it occurred to me that someone had probably done that before. I was able to pick up a nice vector hooker for surprisingly little. (Quiet at the back.) I just had to bring it in to Illustrator and add the lettering. Bearing in mind the various circumstances in which you might want to use a logo I kept it simple.
And there we have it, a logo Jim can use on everything from business cards through t-shirts to billboards. All part of the service.
I’m an all-round Web person. As well as doing design and development (the nitty-gritty technical stuff that comes in three-letter acronyms), I create content too. A lot of the time the client will want me to edit or even write the text for their site. Jim Ward however, as well as being a tour guide, is a writer and playwright so I had little to to do there. But I got to go wild with images. It made for a lovely change.
Thanks, Jim. It was a great project.