Slide 1

COMP 135Web Site Design IntermediateWeek 2Web Design ConceptsPrinciples of DesignWeb Organization

Principles of DesignProximityGroup related itemsAlignmentAlign elements to create visual unityRepetitionRepeat visual elements in the designContrastAdd visual excitement and draw attentionThe Non-Designers Design Book, Third Edition. Robin Williams. Peachpit Press. 2008.ProximityGroup related items togetherPhysical closeness implies a relationshipNonrelated items should not be in close proximity

FruitsApplesBananasGrapesOrangesStrawberriesBlueberriesraspberries

FruitsApplesBananasGrapesOrangesStrawberriesBlueberriesraspberries

AlignmentNo arbitrary placement of design elements on a pageEvery element should line up horizontally or vertically with another elementPhillip Chee pchee@flemingc.on.ca

Computer Science Technologist

Fleming College Peterborough, ON

Computer Science TechnologistPhillip Chee

Fleming CollegePeterborough, ONpchee@flemingc.on.ca

Computer Science TechnologistPhillip Chee

Fleming CollegePeterborough, ONpchee@flemingc.on.ca

RepetitionRepetition of elements unifies and strengthens the design Adds visual interestAim for consistencyShape, colour, fonts, images, linesPush the consistency furtherComputer Science TechnologistPhillip Chee

Fleming CollegePeterborough, ONpchee@flemingc.on.ca

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum diam at nulla pellentesque imperdiet. Donec scelerisque pretium leo, sit amet imperdiet neque dapibus dictum.

Maecenas Lobortis tellus et neque lacinia pulvinar. Nullam venenatis semper volutpat. Phasellus velit est, interdum sit amet tincidunt nec, ullamcorper ac magna. Vivamus ullamcorper laoreet semper. Etiam lacinia imperdiet nisl, eu dignissim nibh dapibus eleifend. Curabitur a lacus purus, in fermentum nunc. Aenean auctor mollis magna sit amet mattis.

Donec faucibus est ut nulla elementum sed rutrum nisl tempus. Suspendisse a consequat sem. Quisque ac lectus tortor. Mauris eget fringilla eros. Ut pretium leo sit amet arcu vestibulum id vestibulum lorem fringilla.

Vivamus in eros lorem, ut tristique enim. Proin viverra molestie ligula. Quisque sit amet mollis massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum diam at nulla pellentesque imperdiet. Donec scelerisque pretium leo, sit amet imperdiet neque dapibus dictum.

Maecenas Lobortis tellus et neque lacinia pulvinar. Nullam venenatis semper volutpat. Phasellus velit est, interdum sit amet tincidunt nec, ullamcorper ac magna. Vivamus ullamcorper laoreet semper. Etiam lacinia imperdiet nisl, eu dignissim nibh dapibus eleifend. Curabitur a lacus purus, in fermentum nunc. Aenean auctor mollis magna sit amet mattis.

Donec faucibus est ut nulla elementum sed rutrum nisl tempus. Suspendisse a consequat sem. Quisque ac lectus tortor. Mauris eget fringilla eros. Ut pretium leo sit amet arcu vestibulum id vestibulum lorem fringilla.

Vivamus in eros lorem, ut tristique enim. Proin viverra molestie ligula. Quisque sit amet mollis massa. ContrastMake elements very different (lines, colours, typefaces, spatial relationships)If they are not exactly the same, make them differentCreates visual interest in the designHelps in creating information hierarchyTypography is a good place to make contrasts

Web Site DesignLorem ipsum Dolor sit amet, consectetur adipiscing elit. Mauris elementum diam at nulla pellentesque imperdiet. Donec scelerisque pretium leo, sit amet imperdiet neque dapibus dictum. Maecenas lobortis tellus et neque lacinia pulvinar. Nullam venenatis semper volutpat. Phasellus velit est, interdum sit amet tincidunt nec, ullamcorper ac magna. Vivamus ullamcorper laoreet semper. Etiam lacinia imperdiet nisl, eu dignissim nibh dapibus eleifend.

CurabiturA lacus purus, in fermentum nunc. Aenean auctor mollis magna sit amet mattis. Donec faucibus est ut nulla elementum sed rutrum nisl tempus. Suspendisse a consequat sem. Quisque Ac lectus tortor. Mauris eget fringilla eros. Ut pretium leo sit amet arcu vestibulum id vestibulum lorem fringilla. Vivamus in eros lorem, ut tristique enim. Proin viverra molestie ligula. Quisque sit amet mollis massa.

Nullam eget Lacus nibh, et gravida felis. Vivamus ullamcorper libero at massa blandit gravida. Nam dictum fermentum metus eu consectetur. In laoreet adipiscing mollis. Vivamus Pellentesque tellus lacus, quis vestibulum tellus. Maecenas elementum ultrices tortor eget mollis. Nulla tempus semper erat eu fermentum. Praesent sagittis, mi eu elementum sollicitudin, mauris mi tincidunt turpis, et vulputate sem ipsum vitae quam.

Web OrganizationWeb site organization or architectureHierarchicalLinearRandom (web organization)Defines how users move around your site and how they find information

Most web sites uses this architectureClearly defined home pageLinks to major sectionsPages within sections as needed

Home

Learning ModulesColophon

Resources

Week 1

Week 2

Hierarchical OrganizationDont make it too shallowChunk large numbers of sections into smaller, manageable unitsFive to nine chunks of information is suitableseven plus or minus two principle (George A. Miller)Dont make it too deepStick to the three click ruleLinear OrganizationPages viewed one after the otherTutorialsPresentationsToursHome

Lesson 1

Lesson 2

Summary

Random OrganizationNo discernible structureNot very commonMostly seen on artistic sitesNever seen on commercial sitesHTML5 Media Elements

Simple to Use

Development Guidelines

Multiple codecs for multiple browsers

Provides fall-back

Full Compatibility Means Old Practices Persist

Native HTML5 VideoAuthors of HTML5 hoped for a base format support

Alas, browser makers have not agreed to one

Therefore we are in the midst of a video codec format war

Two main camps

one supporting MP4, a patent-encumbered format

the other supporting Theora Video, which is not

Fully-supporting HTML5 Video