1 / 23

Collaborative Work Placement

Collaborative Work Placement. Web Design Project. 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.

alexis
Download Presentation

Collaborative Work Placement

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Collaborative Work Placement Web Design Project

  2. 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. Introduction Web Design Project For

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

  4. 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. 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? PLANNING Home Products Links Contact Home Products LinksContact

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

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

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

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

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

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

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

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

  14. 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. DESIGN DEVELOPMENT 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. FINISHED WEBSITE The Various Product Pages

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

  23. Thank you for listening to my presentation.

More Related