1. Collaborative Work Placement
Web Design Project

2. 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

3. 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.

4. 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…

5. 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

6. 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.

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

8. 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.

9. 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.

10. 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.

11. 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.

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

13. 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 s the content submitted to a specified address.

14. 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.

15. 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.

16. DESIGN DEVELOPMENT
There were a few small touches that I also implemented, which I thought added to the overall website.
Mini Logo Here

17. FINISHED WEBSITE
Home Page

18. FINISHED WEBSITE
Product Uses Page

19. FINISHED WEBSITE
Demo Video Page

20. FINISHED WEBSITE
Contact Us Page

21. The Various Product Pages
FINISHED WEBSITE
The Various Product Pages

22. 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.

23. Thank you for listening to my presentation.