OUGD503 - Responsive: P.A. Kelsall Boards

Here are my final boards for P.A. Kelsall.

OUGD503 - Responsive: P.A. Kelsall Stock Photos

I suggested the idea of using stock photos for the page banners, because the ones provided aren't of high enough quality to not get pixelated.

istockphoto
I looked on istockphoto to see what they had available, the prices and licenses.

I typed in 'bathroom' to find lots of available. I altered my search to cheap photos, horizontal and photographs.

I found this one, which would be £20 for the size I wanted.

I went back searching, with the cheapest option selected.

I then found this one which would be a tenner which is better.

I looked at the license, and to put it online you only need a Standard License rather than the Extended version which is good because it is cheaper.

OGUD503 - Responsive: P.A. Kelsall Designs

I sent these to the developer to see what he thought before showing them to the client. I did this to see if he has any suggestions, and to make sure he can code it easily.

The coder was happy with them, and he sent them to the client because they were his in the first place. The client was happy with the designs, and just wanted a few changes to the content. This meant the coder can now start developing it, as he can alter the content himself.

Home Page

About Us

Gallery

Contact

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.

I also showed what it would look like when you clicked on an image.

Contact

I also made the outline of the form grey rather than blue so that it stands out more.

OUGD503 - Responsive: P.A. Kelsall Logo

Logo
I then went onto Illustrator to design the logo. There is already an existing one, but it is a low quality image, so I just redid it.
However, the client wanted it blue rather than the existing green, and I thought the font choice could be better. So I tried a few blues and fonts.

I wasn't sure whether to have the tagline in bold, light, central or left-aligned.

This is the blue I chose. It is neutral, professional and portrays plumbing.

The client wanted the font less round, so I changed the dots to squares.

I also altered the 'a' so that the spur and terminal were straightened.

I did the same with the 's' and 'e', making the ends straight. It looks a lot more professional now just by making subtle changes.

OUGD503 - Responsive: P.A. Kelsall Content

I asked for the content for the website before I design because that is how I work.

Pages:

• Home
• About Us
• Gallery
• Contact Us

Home
Established over 25 years, P. A. Kelsall has been offering a unrivalled quality of service to Blackburn, Hyndburn and the Ribble Valley. We offer high standard plumbing and heating services, as well as specialising in bathroom and wet room design and installation. As a business we are both gas safe registered and city & guilds certified.

About Us P. A. Kelsall, is a fully qualified and gas safe registered plumbing and heating business established over 25 years. We offer a complete service from design through to installation with the highest standard of finish and customer service. We specialise in innovative bathroom and wetroom renovations as well as offering general plumbing services. Please view our portfolio of work here.

Contact Us

You can contact P.A Kelsall by either calling 01254 888082 or 07813 955073. Alternatively you can enter your details and a message below and we will get back to you as soon as possible. Thank you. Name: Contact Number: E-Mail: Message: Submit


Postal Address: P. A. Kelsall West Barn Mill Lane Great Harwood Lancashire BB6 7UQ

OUGD503 - Responsive: P.A. Kelsall Brief

I have been asked to create a website for a plumber. For this, I have decided to collaborate with a developer so that I can produce a responsive and advanced site, as I only have limited knowledge of HTML and CSS.

Brief Title
P.A. Kelsall Website

The Brief
I have been asked to design a website for a plumber based in Burnley. It should clearly portray a plumber and heating tradesman who is professional and reliable.

Considerations
I need to consider who will be looking at the website, and what they will be expecting. They will want to find the information that they need where they would expect it on regular websites. This means I need to make it straightforward and functional, but I still want to make sure it has aesthetic appeal.
I also need to consider the skills of the developer, because I don't want to design an all-singing, all-dancing site that can't actually be made.

Concept/Proposition
The client doesn't like much white space so I am going to produce a site that uses as much space as possible while still being clean and relevant. 

Background
P.A.Kelsall is a plumbing and heating business with over 25 years worth of experience in Lancashire. They provide their services to Ribble Valley, Hyndburn and Blackburn. They have a gas safe registered and have a city and guilds certificate. They specialise in bathroom and wetroom design and installation.

Target Audience
People and business's who want to hire a photographer for their shoots. 

Mandatory Requirements

• Portfolio of his work
• Include bio and contact details
• A design that the developer can code

Tone of Voice

The tone of voice should be professional and approachable, as well as reflect a trusted and established business.

Deliverables

• Website Design with four pages

OUGD503 - Responsive: P.A. Kelsall Scamps

I did some rough sketches in my skectbook firstly.

Then I went onto wireframe templates so I could easily go to screen.