220 likes | 349 Vues
COMP 135 Web Site Design Intermediate. Week 2. Web Design Concepts. Principles of Design Web Organization. Principles of Design. Proximity Group related items Alignment Align elements to create visual unity Repetition Repeat visual elements in the design Contrast
E N D
Web Design Concepts Principles of Design Web Organization
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.
Proximity Group related items together Physical closeness implies a relationship Nonrelated items should not be in close proximity
Fruits • Apples • Bananas • Grapes • Oranges • Strawberries • Blueberries • raspberries Fruits Apples Bananas Grapes Oranges Strawberries Blueberries raspberries
Alignment No arbitrary placement of design elements on a page Every element should line up horizontally or vertically with another element
Phillip Chee pchee@flemingc.on.ca Computer Science Technologist Fleming College Peterborough, ON
Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca
Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca
Repetition Repetition of elements unifies and strengthens the design Adds visual interest Aim for consistency Shape, colour, fonts, images, lines Push the consistency further
Computer Science Technologist Phillip Chee Fleming College Peterborough, ON pchee@flemingc.on.ca
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.
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.
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
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.
Web Organization • Web site organization or architecture • Hierarchical • Linear • Random (web organization) • Defines how users move around your site and how they find information
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
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”
Linear Organization Home Lesson 1 Lesson 2 Summary • Pages viewed one after the other • Tutorials • Presentations • Tours
Random Organization No discernible structure Not very common Mostly seen on artistic sites Never seen on commercial sites
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
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>