Re-design: Reading Short Stay

For my first punch at a re-design my friend chose the Reading Short Stay website. After I’d gotten over the initial shock of how basic this site looked I sat down to take a more objective look at it.


Basic analysis of current website

The biggest problem here is a lack of branding: logo, colour palette, background and use of typography. As I am no branding expert and it isn’t my main aim of this task I just quickly threw together a basic logo after trying out withoomph.com, took their existing blue to use as an accent colour since it connotes clear, fresh, airy, quiet, soothing and resting qualities all of which you’d expect from a home and selected a simple font: Edmondsans Regular. I then took inspiration for the diagonal lines to break up the clean white background from another website I stumbled across some time ago as simple patterns always work better than stock imagery.

Reading Short Stay Re-designed logo

My basic logo design for Reading Short Stay.

The next issues that needed addressing were mainly layout and alignment related. I personally am not a fan of the two column layout of images and then text – it’s very basic, outdated and doesn’t give a nice flow. In addition the proximity of the images isn’t utilized as they aren’t placed adjacent to the corresponding copy text (the picture of the garden is on the rates page rather than the garden apartment page).

Two Column Layout

The existing two column layout.

Alignment Issues

Alignment left to its own devices in the footer.

I also found it quite difficult to find the information I wanted, navigation wasn’t an issue it was more that things weren’t organised or grouped with similar things that i was anticipating as a user. With this in mind I re-jigged some text, created a testimonials page and did some light re-writing to use correct English.

So with those observations let’s look at how I started to transform the website.


Re-design in progress

I started with looking at some competitor websites and noticed that the majority rely on stunning interior shots to be the main focus, as I didn’t have that luxury as I was simply re-using their existing imagery I needed to come up with a cunning plan. I sketched some rough layouts in my notebook and then started taking chunks of information from the home page and placing it until I liked where it sat.

Initial layout sketches

Initial layout sketches for the re-design.

I always design in gray-scale first and focus on adding contrast by giving emphasis to top priority information. I quite liked the idea of Polaroid style for snapshots of key selling points and balanced it out with circles for things that needed to grab attention. Once the home page was to this basic stage I replicated the design for the other pages.

Here are some images of the in progress:

Home page in progress

Home page in progress

Testimonials page in progress

Testimonials page in progress

The next stage was to introduce the colour palette to bring more contrast and make things pop. Designing the Polaroids saw several possibilities with variations in outline thickness and shadows which can be seen below. Do you think I picked the best one? What would you have done?

Polaroid Designs

Polaroid Designs


The finished re-design

Ta-dah! Here are all the pages in the re-design, to see ‘before’ images visit the Reading Short Stay website.

Home Page

Reading Short Stay Re-design: Home Page

Garden Apartments Page

Reading Short Stay Re-design: Garden Apartments Page

Top floor apartments page

Reading Short Stay Re-design: Top floor apartments page

Testimonials page

Reading Short Stay Re-design: Testimonials page

Rates page

Reading Short Stay Re-design: Rates page

Contact us page

Reading Short Stay Re-design: Contact us page


So that was my first stab at a re-design and I’d love to hear what you think 🙂 Any suggestions, improvements, things you would have done differently – just comment below!

til next time
Hemi

Advertisements

One thought on “Re-design: Reading Short Stay

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s