We are available for hire, find out more.

RSS Feed

An illustration for a responsive site

By Rach ~ Wednesday, 03 July 2013

We recently got involved with designing a landing page for a new charity fundraising initiative which is the brainchild of Viv Slack.

The basic idea of ‘Get Out and Give’ is that you join in with outdoor adventures and give whatever you think that adventure is worth to charity. You can see the finished page design below:

Design for desktop screens

Taking inspiration from the logo (by Sarah Peel), I thought it would be lovely to extend the landscape out and show some of the fun outdoor things possible in a large header illustration.

As the site would be responsive, I added an extra level of detail to the illustration which, for the most part, won’t be seen on average-sized screens. As I wasn’t building the page, I wanted to give the developer the option of having the illustration at full width, no matter how large the screen.

I also created alternatively proportioned illustrations to be used at the lower breakpoints. Actually being very disciplined for once about keeping separate elements on their own layers made moving cyclists and other active people into these smaller viewpoints easy.

Image for mid-sized screens e.g. tablets:

Tablet screens header

Image for small screens e.g. mobiles:

Mobile header image

I’m really looking forward to seeing this live. In the meantime do get involved at the ‘Get Out and Give’ meetup page.