Collaborative Work Placement Web Design Project

Introduction For 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

planning The 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.

Home Products Links Contact PLANNING “Our Cameras Don’t Sleep” Home Products Links Contact 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…

PLANNING Different 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 Links Contact

PLANNING So 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.

Navigation has Faded Ends DESIGN #1 Company Logo Navigation has Faded Ends Basic, White Page 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.

DESIGN #2 Company Logo Basic Navigation Faded Footer Dark Background 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.

DESIGN #3 Company Logo Company Slogan Dark Navigation Bar 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.

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 DEVELOPMENT Before 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 DEVELOPMENT Another 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 Yahoo Bing Google 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.

DESIGN DEVELOPMENT There 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

The Various Product Pages FINISHED WEBSITE The Various Product Pages

evaluation Overall 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.