As part of my work with Exeter City Futures it has been my responsibility to put on a web design hat and develop – the website for its fully-fledged impact accelerator which was launched after a successful year-long pilot.

Engage Marketing were consulting on the project, creating the logo and giving direction on branding. I customised the design of the site starting from a standard WordPress template, adding my own graphics and spending a lot of time perfecting the parallax scrolling effect on the home page.

Working with WordPress

I’ve developed a few websites for small startups and businesses but hadn’t really delved into WordPress development before The Exeter City Futures website uses a WordPress template so I decided this was the way to go for consistency. I spent some time redeveloping my own website using WordPress to learn the ins and outs of its php templates, hierarchy, and the loop, so I could confidently create the website for Exeter Velocities when the time came to start the project.

I’d recommend the book ‘Professional WordPress Design and Development’, by Brad Williams, David Damstra, and Hal Stern, for anyone wanting to get into the nuts and bolts of WordPress development.

‘Resonsive Web Design with HTML5 and CSS3’ by Ben Frain has also been helpful for brushing up on the latest developments in responsive design.

Illustrating Exeter Velocities

Throughout the site I decided to keep the layout simple and spend a lot of time on the illustrations in the banners and on the home page, to give the brand a unique personality. Many of the images are based on photographs I took during the pilot accelerator programme, and have taken around Exeter over the last year. The style is deliberately naïve but I was keen to add some depth to the imagery to make the illustrated city feel more like a three dimensional place you could move around in.

Exeter Velocities Home Page

Exeter Velocities About Us

Exeter Velocities Our Network

I started by making sketches, and then using those as the basis for the graphics in Adobe Illustrator.

Mark Jones Sketch Book

Mark Jones Sketch Book

The World of Edena by Moebius was something I’d been reading during the early stages of designing the website, and there were some images from that book which were in the back of my head while creating the graphics. Especially some of the splash pages of the idyllic planet Edena.

Perfecting Parallax

I also wanted to add some movement to the home page and the parallax scrolling effect seemed the perfect way to do this. Inspired by a vintage parallax effect from the animated movie Yellow Submarine (the bit just before the Eleanor Rigby sequence) it gives the city a sense of depth:

Which when translated into an Exeter-inspired future city looks like:

The parallax city is made up of just three layers, the challenge was getting the overall height right so that users didn’t have too far to scroll down to the main content on the home page.

My aim with was to create a site that offered an inspiring illustration of a future sustainable city and a stream-lined user experience that makes applying for the accelerator programme as simple as possible. Time and Google Analytics will tell whether this is the case and I look forward to the process of tweaking and improving the site and the web design based on those insights, and digging in with some search engine optimisation.

Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen + 11 =