Your SlideShare is downloading. ×
0
Web Design M6/12 English Program – Satree Phuket Aj. Jamie
Web Design <ul><li>For this course we will be using Macromedia Dreamweaver. </li></ul><ul><li>Dreamweaver is a WYSIWYG Web...
Web Design <ul><li>This semester you will create a portfolio of your work which you will display online. </li></ul><ul><li...
Web Design <ul><li>Last school year you used Adobe Flash (Graphic Animation) and Adobe Photoshop  (Graphic Design). </li><...
Web Design <ul><li>What makes a well designed website? </li></ul><ul><li>We’ll look today at 7 important web design featur...
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...
Images <ul><li>A high quality photo related to your website can improve the overall look. </li></ul><ul><li>Simple and cle...
Graphics <ul><li>A logo is an important graphic for your website or company. </li></ul><ul><li>Graphics can also be used f...
Colours <ul><li>The colours you choose to use for your  </li></ul><ul><ul><li>website are also important. Using a colour o...
Interesting Content <ul><li>Is the information on the website interesting for people using the site? </li></ul><ul><li>A g...
Concise <ul><li>Concise - expressing or covering much in few words. </li></ul><ul><li>Pages and pages of long boring text ...
Animations <ul><li>Animations can add humour and life to a web page. </li></ul><ul><li>Be careful, too many animations can...
Web Design <ul><li>Task today: </li></ul><ul><ul><li>Work in Groups of 3 or 4 to create a PowerPoint presentation. </li></...
Example <ul><li>In my opinion  www.wibblywobbly.com  has an excellent example of really easy navigation. I think it is eas...
Upcoming SlideShare
Loading in...5
×

Web Design Lesson 1

325

Published on

Intro Lesson

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
325
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×