The Basics Of Web Design


Published on

Lecture about Basics of web design at University of Westminster

1 Comment
  • Hi ,Jon M B.
    I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much

    Check out this SlideShare

    Please Addme to your Favs ’♥’ bye bye
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The Basics Of Web Design

    1. 1. The Basics of Web design
    2. 2. Get a web presence video
    3. 4. What makes for good web design?
    4. 5. Elements of Good Design <ul><li>Navigation </li></ul><ul><li>Layout </li></ul><ul><li>Ease of use </li></ul><ul><li>Consistency. </li></ul><ul><li>Graphics </li></ul><ul><li>Call to action </li></ul><ul><li>Simplicity – Save the pixel! </li></ul>
    5. 6. Navigation <ul><li>Top or left navigation bars </li></ul><ul><li>Stand out with different colours </li></ul><ul><li>3-click best practice </li></ul><ul><li>No more than 7 top level headers </li></ul>
    6. 7. Layout <ul><li>Consistent layout across all pages </li></ul><ul><li>Simple, clear navigation </li></ul><ul><li>Top or left nav bars </li></ul><ul><li>Key links at the bottom. Why? </li></ul>
    7. 12. Ease of use <ul><li>Make it easy for your reader to go where you want them to </li></ul><ul><li>Don’t clutter/overcrowd the front page. </li></ul><ul><li>Talk to your defined audiences </li></ul>
    8. 14. Graphics <ul><li>Keep your graphics as small as possible. </li></ul><ul><li>‘Save for web’ on Photoshop </li></ul><ul><li>Use only JPG, PNG, GIF </li></ul>
    9. 15. Call to action <ul><li>There must be a reason you want people to come to your site </li></ul><ul><li>What is it you want them to do when there? </li></ul><ul><ul><li>Buy? </li></ul></ul><ul><ul><li>Subscribe? </li></ul></ul><ul><ul><li>Comment? </li></ul></ul><ul><ul><li>Interact? </li></ul></ul><ul><ul><li>Read / learn </li></ul></ul>
    10. 18. Save the Pixel!
    11. 21. Case Study: Turning the Netcare website around
    12. 22. Old Website Design Lack of navigation planning Large white spaces Random placement of banners Cluttered old-style artwork
    13. 23. Old Website Design News after ‘low level’ adverts Ineffective placement of company links
    14. 24. Old Website Design Hospitals sorted by Netcare regions
    15. 25. New Website Features Doctor and hospital search General search Clean, clear design layout Font size adjuster
    16. 26. New Website Features Drop down navigation Auto-refreshing baby pictures
    17. 27. New Website Features Company quick links
    18. 28. The good and the bad
    19. 35. What do you think ?
    20. 40. Web design tools
    21. 41. Web design tools <ul><li>Synthasite </li></ul><ul><li> </li></ul><ul><li>Squarespace </li></ul><ul><li>Blogger </li></ul><ul><li>Google sites </li></ul><ul><li>Dreamweaver </li></ul>
    22. 42. Synthasite <ul><li> </li></ul><ul><li>Free </li></ul><ul><li>Fexible </li></ul><ul><li>Takes a bit of getting used to </li></ul><ul><li>Lots of layout options </li></ul><ul><li>Use the simple templates </li></ul>
    23. 43. Wordpress <ul><li> </li></ul><ul><li>Blogging tool only </li></ul><ul><li>Not very flexible </li></ul><ul><li>Free </li></ul><ul><li>Widely used in both forms </li></ul><ul><li>Some templates </li></ul><ul><li>Simple </li></ul>
    24. 44. Squarespace <ul><li> </li></ul><ul><li>Highly flexible </li></ul><ul><li>Great looking templates & sites </li></ul><ul><li>Anyone can create great looking sites. </li></ul><ul><li>Not free </li></ul><ul><li>Takes getting used to </li></ul>
    25. 45. Blogger <ul><li> </li></ul><ul><li>Blog only </li></ul><ul><li>Very easy to use </li></ul><ul><li>Can look terrible so need to work hard on layout </li></ul><ul><li>Free </li></ul><ul><li>Widely used for beginners </li></ul><ul><li>Not that flexible </li></ul>
    26. 46. Google sites <ul><li> </li></ul><ul><li>Quite easy to use </li></ul><ul><li>Some tricky features </li></ul><ul><li>Free </li></ul><ul><li>Can be boring at times </li></ul>
    27. 47. Dreamweaver <ul><li>Not online </li></ul><ul><li>Expensive </li></ul><ul><li>Good level of web knowledge needed </li></ul><ul><li>Will need a host site </li></ul><ul><li>Completely flexible </li></ul><ul><li>Weapon of choice amongst web designer </li></ul>
    28. 48. Thank You skype: jonin60seconds [email_address]