Design Practise: OUGD503 - Responsive: P.A. Kelsall Designing the Website

Here is the digital development of the website.

Home Page

I then went onto Fireworks to start designing the website.

I played with the idea of having contact details at the top of website.

I tried it in a long banner.

Then a short banner underneath the nav bar.

I adde a long img which would draw the user in.

Then above the nav bar.

I also started playing with adding text onto the img so the user has a quick link to the gallery.

I tried different opacities. I also tried the contact banner under the img.

As there isn't much content, I thought about having the link and info about the img underneath it to fill space. I don't think this would make sense to the user though being underneath.

I then thought about having text in the space the img would be, as I would need to buy a stock photo to do this, but this looks boring.

I then put a box over the image, with turned down opacity so you can still see it.

I think thtis looks a lot better as you can still see the image but this is the focus.

I then started on the footer. I used the blue background I have been using throughout the site, but it does seem a bit much.

I thought about having the contact details on it so the user can see them on every page. I also needed the Gas Safe register logo on it.

I had the headings next to the info at first, because a postal address is quite long when written properly, and I didn't want the footer to be too big.

I then made the headings above the details, and made the postal address on two lines.

This has made the footer smaller, which is better as it shouldn't draw too much attention.

I then thought about adding a 'Why choose us' section, as I have seen that in the content of existing plumber websites.

I just made up some content for that based on what other plumbers say.

I then thought about having rectangles around each one, but they look too much like links now.

I still don't like how it is one blue strip though.

Plus I need something to fill the space next to the Welcome section. That can't be one column because line length would be too long compromising readability.

I also made the footer a dark grey which works a lot better I think. I also changed all the black on the site to that grey, so only two colours have been used.

I tried adding another heading on the footer, but then I thought it wasn't really necessary.

Then I made the Why choose us section into a list of bullet points instead so that it fills the blank gap, and doesn't look like links.

It is starting to get there now.

I then tried changing the button on the img banner to blue, but it doesn't stand out that much now.

I then added another bullet point on the Why choose us section as the gaps were too big.

I changed the button to white again. This is the home page design finished!

About Us

Then I started the About Us page. I decided that when you are active on a page, the nav link should change to 'medium'. It should also do this when you hover on it.

I put a testimonial on the banner, as I think this is something people want to see so that they know it is reliable. I just made up one for the sake of showing what it would look like.

I also used the same layout as the home page to create consistency. I used the content given to me for the About Us section, but created my own for the 'services' section. This just gives a quick view to the user about what they do.

I then added speech marks to the testimonial section, to show that is a quote. There is also a link saying where to visit their portfolio, which I changed to blue so that it stands out as one. This is finished now, and was really quick to do once I had the layout, type and colours sorted.

Contact Us

Then I started working on the Contact page. First, I got a screenshot of Google maps of where the business is. To the left of it is just fields, so I took the screenshot so that there is more content on the right. This is so people get more of a realisation where the business is as there are more streets to see.

Then I put this into the design. It would actually be a working google maps view when coded, but this is for illustration purposes.

I put a little banner on the maps saying the address. I didn't want it too far down as it would be too close to the same content in the footer.

I also added the content I got given about contacting, and the fact that it needed a form.

There is too much white space on the left.

So, I made the form spread across two columns. This also means there is more space to write in the message box.

This is the final Contact page.

About

I added three white dots on the testimonial section, so that there is a choice of testimonials.

Gallery

This is the gallery page, and I wanted to keep it simple so that the pictures speak for themselves really. The banner allows for an introduction to the page.

The images are simply laid out three to a row on desktop, and a heading and caption underneath. This can be easily updated.