1. By Vicky Vickers Summarized by Mr. Parslow Webpage Design

2. Vicky Vickers Resume  Owner of Word Crunchers, Etc.  Specializes in website design and HTML training  Past-president and webmaster of Victoria Macintosh Users Group (1995-98)  Founded Web Enthusiasts Association of Victoria (1996)

3. July 1999  Published article in “MACtalk”  Discussed (7) Major Rules to follow  In creating a good website  To be followed in our webpage design class

4. Rule 1: Keep homepage simple  Average attention span by user  5 Seconds  “Company’s Face to the World”  Most important page  Most users look at this page first  Can make or break them looking at the rest of the site

5. Ways to keep homepage simple  Keep sentences/headings short  Get to the point!  Use taglines/intro with purpose of site  Search engines pick this up  Add smaller graphics  Insert larger graphics throughout rest of site  Identify Yourself! (Logo, Contact)

7. Rule 2: Same design features throughout site  Without consistency…  User doesn’t know if they are on the same site or not  Pick one background  Use throughout your site  Use minimum number of font styles  No more than 2-3 (Headings, Paragraphs, Captions)  Text Colors  Choose a colour scheme in beginning  Keep overall layout the same  Navbar, header, logo, etc.

8. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 1.Container Without this, we would have no where to put the contents of our page

9. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 2. Header and Logo Identity of the company; increases branding recognition

10. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 3. Navbar Links to portions of your website; typically on the left (towards top) or top of webpage (never on right side)

11. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 4. Main Content Most important part of page; make this the focal point of the design

12. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 5. Footer Bottom of the page (think of your “feet” at the bottom of you); contains copyright, legal info, some links

13. Web Page Anatomy Source: The Principles of Beautiful Websites Article, Jason Beaird, 2007 6. White Space (aka Negative Space Helps the design to “breathe” and not feel so crowded; this space is a good thing!

14. Rule 3: Keep design clean and simple  High contrast important with text/BG colors  Backgrounds  Stay away from complicated designs (unless they are very simple or have one color)  For main content (where paragraphs will be read, stick with solid colors)  Choose dark colors for text (easier to print the webpage)

16. Rule 4: Use small, quick- loading graphics  Most users want information, NOT great graphics  Always save your images for the web  Using GIF, JPEG, TIFF  Cannot be a PSD file  Usually JPEG High will be used

17. Rule 5: Keep webpages short  User does not want to constantly scroll down the page in finding information  Follow KISS:  Keep It Short & Simple  Long article  Divide into multiple pages OR  Divid e Article into sections  Use header titles for this

18. Rule 6: Provide Multiple Links  Users will take different roads in your website  ALWAYS include link back to homepage  Typically the logo is “linked” to the home page  Navigational Bar  Links to all your pages!  Thumbnail Images  Smaller images; link these to bigger images

19. Rule 7: Continuously update website  Information is constantly changing  Sites with old information clog up the Internet  Updated Site  Users will come back