COMP 135 Web Site Design Intermediate

1. COMP 135Web Site Design Intermediate Week 2

2. Web Design Concepts Principles of Design Web Organization

3. Principles of Design • Proximity • Group related items • Alignment • Align elements to create visual unity • Repetition • Repeat visual elements in the design • Contrast • Add visual excitement and draw attention The Non-Designer’s Design Book, Third Edition. Robin Williams. Peachpit Press. 2008.

4. Proximity Group related items together Physical closeness implies a relationship Nonrelated items should not be in close proximity

5. Fruits • Apples • Bananas • Grapes • Oranges • Strawberries • Blueberries • raspberries Fruits Apples Bananas Grapes Oranges Strawberries Blueberries raspberries

6. Alignment No arbitrary placement of design elements on a page Every element should line up horizontally or vertically with another element

7. Phillip Chee pchee@flemingc.on.ca Computer Science Technologist Fleming College Peterborough, ON

8. Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca

9. Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca

10. Repetition Repetition of elements unifies and strengthens the design Adds visual interest Aim for consistency Shape, colour, fonts, images, lines Push the consistency further

11. Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca

12. Curabitur a lacus purus, in fermentumnunc. Aeneanauctormollis magna sit ametmattis. • Donec • faucibusestutnullaelementumsedrutrumnisl tempus. Suspendisse a consequat sem. Quisque ac lectustortor. Maurisegetfringillaeros. Utpretiumleo sit ametarcuvestibulum id vestibulumloremfringilla. • Vivamus • in eroslorem, uttristiqueenim. Proinviverramolestieligula. Quisque sit ametmollismassa. Loremipsum dolorsit amet, consecteturadipiscingelit. Mauriselementumdiam at nullapellentesqueimperdiet. Donecscelerisquepretiumleo, sit ametimperdietnequedapibus dictum. Maecenas Lobortistelluset nequelaciniapulvinar. Nullamvenenatissempervolutpat. Phasellusvelitest, interdum sit amettinciduntnec, ullamcorper ac magna. Vivamusullamcorperlaoreetsemper. Etiamlaciniaimperdietnisl, eudignissimnibhdapibuseleifend.

13. Curabitur a lacus purus, in fermentumnunc. Aeneanauctormollis magna sit ametmattis. • Donec • faucibusestutnullaelementumsedrutrumnisl tempus. Suspendisse a consequat sem. Quisque ac lectustortor. Maurisegetfringillaeros. Utpretiumleo sit ametarcuvestibulum id vestibulumloremfringilla. • Vivamus • in eroslorem, uttristiqueenim. Proinviverramolestieligula. Quisque sit ametmollismassa. Loremipsum dolorsit amet, consecteturadipiscingelit. Mauriselementumdiam at nullapellentesqueimperdiet. Donecscelerisquepretiumleo, sit ametimperdietnequedapibus dictum. Maecenas Lobortistelluset nequelaciniapulvinar. Nullamvenenatissempervolutpat. Phasellusvelitest, interdum sit amettinciduntnec, ullamcorper ac magna. Vivamusullamcorperlaoreetsemper. Etiamlaciniaimperdietnisl, eudignissimnibhdapibuseleifend.

14. Contrast Make elements very different (lines, colours, typefaces, spatial relationships) If they are not exactly the same, make them different Creates visual interest in the design Helps in creating information hierarchy Typography is a good place to make contrasts

15. Web Site Design • Curabitur • A lacus purus, in fermentumnunc. Aeneanauctormollis magna sit ametmattis. Donecfaucibusestutnullaelementumsedrutrumnisl tempus. Suspendisse a consequat sem. • Quisque • Ac lectustortor. Maurisegetfringillaeros. Utpretiumleo sit ametarcuvestibulum id vestibulumloremfringilla. Vivamus in eroslorem, uttristiqueenim. Proinviverramolestieligula. Quisque sit ametmollismassa. • Nullameget • Lacus nibh, et gravidafelis. • Vivamusullamcorperlibero at massablanditgravida. • Nam dictum fermentummetuseuconsectetur. • In laoreetadipiscingmollis. • Vivamus • Pellentesquetellus lacus, quisvestibulumtellus. Maecenas elementumultricestortoregetmollis. Nulla tempus sempererateufermentum. Praesentsagittis, mi euelementumsollicitudin, mauris mi tinciduntturpis, et vulputatesemipsum vitae quam. Loremipsum Dolorsit amet, consecteturadipiscingelit. Mauriselementumdiam at nullapellentesqueimperdiet. Donecscelerisquepretiumleo, sit ametimperdietnequedapibus dictum. Maecenas lobortistellus et nequelaciniapulvinar. Nullamvenenatissempervolutpat. Phasellusvelitest, interdum sit amettinciduntnec, ullamcorper ac magna. Vivamusullamcorperlaoreetsemper. Etiamlaciniaimperdietnisl, eudignissimnibhdapibuseleifend.

16. Web Organization • Web site organization or architecture • Hierarchical • Linear • Random (web organization) • Defines how users move around your site and how they find information

17. Home Learning Modules Resources Colophon Week 1 Week 2 • Most web sites uses this architecture • Clearly defined home page • Links to major sections • Pages within sections as needed

18. Hierarchical Organization • Don’t make it too shallow • Chunk large numbers of sections into smaller, manageable units • Five to nine chunks of information is suitable • “seven plus or minus two” principle (George A. Miller) • Don’t make it too deep • Stick to the “three click rule”

19. Linear Organization Home Lesson 1 Lesson 2 Summary • Pages viewed one after the other • Tutorials • Presentations • Tours

20. Random Organization No discernible structure Not very common Mostly seen on artistic sites Never seen on commercial sites

21. Semantic vs. Presentational Markup Semantic markup uses HTML elements that describes the content Presentational markup uses HTML elements that describes how the content should look or be displayed

22. Comparing Elements • Semantic • <strong> • <em> • Use CSS font-family • Use CSS • Use <div> with CSS • Use CSS font-size:larger • Use CSS font-size:smaller • Use CSS text-decoration:line-through Presentational <b> <i> <font> <hr> <center> <big> <small> <strike> or <s>