Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web design lesson 1

337 views

Published on

  • Be the first to comment

  • Be the first to like this

Web design lesson 1

  1. 1. Web Design M6/12 English Program – Satree Phuket Aj. Jamie
  2. 2. Web Design <ul><li>For this course we will be using Macromedia Dreamweaver. </li></ul><ul><li>Dreamweaver is a WYSIWYG Web authoring tool. </li></ul><ul><li>WYSIWYG stands for What You See Is What You Get. </li></ul>
  3. 3. Web Design <ul><li>This semester you will create a portfolio of your work which you will display online. </li></ul><ul><li>We will also take a look at different types of recent web technology. </li></ul>
  4. 4. Web Design <ul><li>Last school year you used Adobe Flash (Graphic Animation) and Adobe Photoshop (Graphic Design). </li></ul><ul><li>We will be using these tools to improve and enhance your Web Pages. </li></ul>
  5. 5. Web Design <ul><li>What makes a well designed website? </li></ul><ul><li>We’ll look today at 7 important web design features: </li></ul><ul><ul><li>Easy Navigation </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Colour </li></ul></ul><ul><ul><li>Interesting Content </li></ul></ul><ul><ul><li>Concise </li></ul></ul><ul><ul><li>Animations </li></ul></ul>
  6. 6. Easy Navigation <ul><li>How easy is it to move from one page of a website to another? </li></ul><ul><li>Does it fit nicely on the screen? </li></ul><ul><li>Does it have a clear menu on every page? </li></ul><ul><li>Drop down menu? </li></ul><ul><li>Search Box? </li></ul><ul><li>Link to Help? </li></ul><ul><li>Example: </li></ul><ul><ul><li>www.flickr.com </li></ul></ul>
  7. 7. Images <ul><li>A high quality photo related to your website can improve the overall look. </li></ul><ul><li>Simple and clear. </li></ul><ul><li>Interesting. </li></ul><ul><li>Introduces the </li></ul><ul><li>website </li></ul><ul><li>Example: </li></ul><ul><ul><li>www.pizzahut.com </li></ul></ul>
  8. 8. Graphics <ul><li>A logo is an important graphic for your website or company. </li></ul><ul><li>Graphics can also be used for navigation. </li></ul><ul><li>Can include your </li></ul><ul><li>website or company </li></ul><ul><li>name. </li></ul><ul><li>Example: </li></ul><ul><ul><li>www.funkypool.com </li></ul></ul>
  9. 9. Colours <ul><li>The colours you choose to use for your </li></ul><ul><ul><li>website are also important. Using a colour or </li></ul></ul><ul><ul><li>set of colours for your menus, text and images </li></ul></ul><ul><ul><li>can give your website a neat and tidy look. </li></ul></ul><ul><li>But be careful, </li></ul><ul><ul><li>bright colours or </li></ul></ul><ul><ul><li>too much of one </li></ul></ul><ul><ul><li>colour can make </li></ul></ul><ul><ul><li>your website </li></ul></ul><ul><ul><li>look untidy and </li></ul></ul><ul><ul><li>difficult to read…. </li></ul></ul><ul><li>www.facebook.com </li></ul>
  10. 10. Interesting Content <ul><li>Is the information on the website interesting for people using the site? </li></ul><ul><li>A good website will always be changing and evolving to serve the needs of it’s customers. </li></ul><ul><li>Example: </li></ul><ul><ul><li>www.hi5.com </li></ul></ul>
  11. 11. Concise <ul><li>Concise - expressing or covering much in few words. </li></ul><ul><li>Pages and pages of long boring text will scare web surfers away. </li></ul><ul><li>Example: </li></ul><ul><ul><li>www.phuketgazette.com </li></ul></ul>
  12. 12. Animations <ul><li>Animations can add humour and life to a web page. </li></ul><ul><li>Be careful, too many animations can make a page look untidy and childish! </li></ul><ul><li>Example: </li></ul><ul><li>http://coraline.com/ </li></ul>
  13. 13. Web Design <ul><li>Task today: </li></ul><ul><ul><li>Work in Groups of 3 or 4 to create a PowerPoint presentation. </li></ul></ul><ul><ul><li>Find 1 website that displays a good example of each of the 7 important web design features. </li></ul></ul><ul><ul><li>Find 1 website that displays a bad example of each of the 7 important web design features. </li></ul></ul><ul><ul><li>(Total 14 websites = 14 slides plus title, introduction and conclusion) </li></ul></ul>
  14. 14. Example <ul><li>In my opinion www.wibblywobbly.com has an excellent example of really easy navigation. I think it is easy because ..... </li></ul>

×