COLLABORATIVE WORK PLACEMENTWeb Design Project

INTRODUCTIONFor this task I had it easy, since I had already done the project before it was set, as a friend of mine had a project for me to do which I had accepted.I was asked to make a company website for a small business in York, because website design is something I can do and I’m interested in.

Web Design Project For

PLANNINGThe project started when I was asked to meet up with the clients in their office in York, something I was apprehensive about as I was face to face with 3 people who were all wanting answers and all were giving me ideas.

PLANNING

Home Products Links Contact

“Our Cameras Don’t Sleep”

The sketch on the left is the basic layout of the website they wanted. The one on the right is basically what I saw the sketch as when I saw it. It looks basic but there is lots of different things you wouldn’t normally realize about a websites layout like…

PLANNINGDifferent things you would need to think about…

- Is the navigation horizontal or vertical?

- Which colour schemes should be used?

- Should it span the page or should it be tight and compact?

- Complex or Simplistic?

Home Products Links Contact

Home Products

LinksContact

PLANNINGSo I set to work, I decided to make three different designs, writing about 400 lines of code in total, trying slightly different layouts and colours, but the main points that the client made were that it should be: - Simple.- Use the colours White and/or Red.- Contain images and flash animations they provided.

DESIGN #1

This is the first design, I’d say its probably the most simple and it simply has the logo, a grey navigation bar which fades at each end and then some simple text for where the content would fit.

Basic, White Page

Company LogoNavigation has Faded

Ends

DESIGN #2

This is the second design, I put some contrast in this one by having a black background, a solid white block for the content to be on, and simple text and also the logo in the top-left.

Company Logo Basic Navigation

Dark BackgroundFaded Footer

DESIGN #3

The third design is simple again, but uses some subtle gradients at the top and a dark contrasting navigation bar with a drop-down menu on the navigation bar and a glow on the buttons when hovered upon.

Company SloganCompany Logo

Dark Navigation Bar

DESIGN DEVELOPMENT

The clients spent some time looking over the designs and they chose Design #3, so this meant the content for the website could be put in.

DESIGN DEVELOPMENTBefore I did start on the content, I had to modify the design throughout its development, as different issues cropped up as the content grew. This meant lots of time spent on the code:

It does look boring but it can be interesting trying to get things to work.

DESIGN DEVELOPMENT

Some small features I learnt and implemented were some nice drop-down menu’s, to save on cluttering up the main navigation.

DESIGN DEVELOPMENT

Another feature I had to implement was a contact form. I didn’t code this from scratch, but modified an existing script which could do this for me. It simply emails the content submitted to a specified email address.

DESIGN DEVELOPMENTAnother thing I had a go at was Search Engine Optimisation. This is where you code your website in a way that displays the website high on search engines like Google, Bing, Yahoo, etc.

You can see the keywords in the code which help search engines list the website correctly.

DESIGN DEVELOPMENT

I had not done this before, and I think for a first attempt I did a good job of getting it high up on the search engine pages, it is #1 on Bing and Yahoo, and #3 on Google.

Yahoo Bing

Google

DESIGN DEVELOPMENTThere were a few small touches that I also implemented, which I thought added to the overall website.

Mini Logo Here

FINISHED WEBSITE

Home Page

FINISHED WEBSITE

Product Uses Page

FINISHED WEBSITE

Demo Video Page

FINISHED WEBSITE

Contact Us Page

FINISHED WEBSITE

The Various Product Pages

EVALUATIONOverall I learnt about what its like speaking to a client and making a website within a time frame.I learned that with a client you do have to put plenty of effort in to make sure the project goes ahead and in the right direction.

Thank you for listening to my presentation.