Comp 135 web site design intermediate
Download
1 / 25

COMP 135 Web Site Design Intermediate - PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'COMP 135 Web Site Design Intermediate' - nicki


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Comp 135 web site design intermediate

COMP 135Web Site Design Intermediate

Week 2


Web design concepts
Web Design Concepts

Principles of Design

Web Organization


Principles of design
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
Proximity

Group related items together

Physical closeness implies a relationship

Nonrelated items should not be in close proximity


Comp 135 web site design intermediate

Fruits

  • Apples

  • Bananas

  • Grapes

  • Oranges

    • Strawberries

    • Blueberries

    • raspberries

Fruits

Apples

Bananas

Grapes

Oranges

Strawberries

Blueberries

raspberries


Alignment
Alignment

No arbitrary placement of design elements on a page

Every element should line up horizontally or vertically with another element


Comp 135 web site design intermediate

Phillip Chee pchee@flemingc.on.ca

Computer Science Technologist

Fleming College Peterborough, ON


Comp 135 web site design intermediate

Computer Science Technologist

Phillip Chee

Fleming College

Peterborough, ON

pchee@flemingc.on.ca


Comp 135 web site design intermediate

Computer Science Technologist

Phillip Chee

Fleming College

Peterborough, ON

pchee@flemingc.on.ca


Repetition
Repetition

Repetition of elements unifies and strengthens the design

Adds visual interest

Aim for consistency

Shape, colour, fonts, images, lines

Push the consistency further


Comp 135 web site design intermediate

Computer Science Technologist

Phillip Chee

Fleming College

Peterborough, ON

pchee@flemingc.on.ca


Comp 135 web site design intermediate

  • 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

dolor sit amet, consecteturadipiscingelit. Mauriselementumdiam at nullapellentesqueimperdiet. Donecscelerisquepretiumleo, sit ametimperdietnequedapibus dictum.

Maecenas

Lobortistellus et nequelaciniapulvinar. Nullamvenenatissempervolutpat. Phasellusvelitest, interdum sit amettinciduntnec, ullamcorper ac magna. Vivamusullamcorperlaoreetsemper. Etiamlaciniaimperdietnisl, eudignissimnibhdapibuseleifend.


Comp 135 web site design intermediate

  • 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

dolor sit amet, consecteturadipiscingelit. Mauriselementumdiam at nullapellentesqueimperdiet. Donecscelerisquepretiumleo, sit ametimperdietnequedapibus dictum.

Maecenas

Lobortistellus et nequelaciniapulvinar. Nullamvenenatissempervolutpat. Phasellusvelitest, interdum sit amettinciduntnec, ullamcorper ac magna. Vivamusullamcorperlaoreetsemper. Etiamlaciniaimperdietnisl, eudignissimnibhdapibuseleifend.


Contrast
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
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

Dolor sit 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 Organization

  • Web site organization or architecture

    • Hierarchical

    • Linear

    • Random (web organization)

  • Defines how users move around your site and how they find information


Comp 135 web site design intermediate

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
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
Linear Organization

Home

Lesson 1

Lesson 2

Summary

  • Pages viewed one after the other

    • Tutorials

    • Presentations

    • Tours


Random organization
Random Organization

No discernible structure

Not very common

Mostly seen on artistic sites

Never seen on commercial sites


Html5 media elements
HTML5 Media Elements

<audio></audio>

<video></audio>

<canvas></canvas>


Comp 135 web site design intermediate

Simple to Use

<audio src="a rocking new trip hop tune.mp3" controls></audio>

Development Guidelines

Multiple codecs for multiple browsers

Provides fall-back

<audio controls>

<source src="a rocking new trip hop tune.mp3" type="audio/mpeg">

<source src="a rocking new trip hop tune.ogg" type="audio/ogg">

</audio>


Full compatibility means old practices persist
Full Compatibility Means Old Practices Persist

<audio controls>

<source src="a rocking new trip hop tune.mp3" type="audio/mpeg">

<source src="a rocking new trip hop tune.ogg" type="audio/ogg">

<object type="application/x-shockwave-flash"

data="player.swf?soundFile=a rocking new trip hop tune.mp3">

<param name="movie"

value="player.swf?soundFile=a rocking new trip hop tune.mp3">

</object>

</audio>


Native html5 video
Native HTML5 Video

Authors 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
Fully-supporting HTML5 Video

<video controls width="360" height="240"

poster="placeholder.jpg"

<source src="movie.ogv" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

<object type="application/x-shockwave-flash"

width="360" height="240"

data="player.swf?file=movie.mp4">

<param name="movie"

value="player.swf?file=movie.mp4">

<a href="movie.mp4">Download the movie</a>

</object>

</video>