IMD09117 and IMD09118  Web Design and Development Unit 10 Shape, perspective and principles of design
Shape and texture  Version A Unit 10   ©2008  Napier University  Focussed on linking Adds personality, interest without distracting Square - stability, easy on a grid Organic shapes - spontaneous, harder to program
Shape and texture  Version A Unit 10   ©2008  Napier University  Rectangular screen  Ubiquitous Softened by round edges What about PDAs, mobiles etc
Shape and texture  Version A Unit 10   ©2008  Napier University  http://www.wz-berlin.de   http://www.sfmoma.org/
Shape and texture  Version A Unit 10   ©2008  Napier University  Texture and patterns can provide tactile sense of the interface’s look and feel Rough, rugged, smooth, organic, manmade Geometric - precision.  Organic - haphazard Be restrained to avoid over complexity
Shape and texture  Version A Unit 10   ©2008  Napier University
Shape and texture  Version A Unit 10   ©2008  Napier University
Shape and texture  Version A Unit 10   ©2008  Napier University
Shape and texture  Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University  Representing 3D objects on 2D surface Linear or atmospheric/aerial Adds interest Achieved by relative size of objects, overlapping objects, blurring or sharpening of objects, lines meeting at a point.
Perspective Version A Unit 10   ©2008  Napier University  The horizon line is a theoretical line that represents the eye level of the observer.  The horizon itself might be above the horizon line if there are trees or other features on the actual horizon.  At times there is no visible horizon
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University  Vanishing point is on the horizon line where receding lines appear to converge.  Objects that are parallel to one another have the same vanishing point.
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University  http://www.arjanverschoor.nl/
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University  Atmospheric perspective- how the appearance of an object is affected by looking through air.  Distant objects lose information less contrast with their surroundings.  less bright colours (become blue grey)  less clarity - fuzzy edges smaller
Perspective Version A Unit 10   ©2008  Napier University
Perspective Version A Unit 10   ©2008  Napier University
Principles of design  Version A Unit 10   ©2008  Napier University  Balance, contrast Economy Emphasis Movement Repetition, rhythm, pattern Proportion Unity, variety
Balance Version A Unit 10   ©2008  Napier University  Visual equalisation of the elements in a work of art.  Symmetrical or asymmetrical
Balance Version A Unit 10   ©2008  Napier University  Asymmetrical balance  may appear more casual and less planned Harder to use because the designer must plan the layout very carefully to ensure that it is still balanced Unbalanced page or screen creates a feeling of tension as if the screen might tip
Balance Version A Unit 10   ©2008  Napier University  Asymmetrical   can be achieved by colour, value, shape, texture, position or eye direction.
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Balance Version A Unit 10   ©2008  Napier University
Contrast Version A Unit 10   ©2008  Napier University  Combing art elements to stress the differences between the elements.  Bright with dull colours Angular with rounded shapes Related to emphasis
Contrast Version A Unit 10   ©2008  Napier University
Contrast Version A Unit 10   ©2008  Napier University
Economy Version A Unit 10   ©2008  Napier University  Distillation of an image to the basic essentials for clarity of presentation. Using only what is needed for visual effect Eliminating any elements that distract attention from the essence of an idea.  It tends to be an abstraction.
Economy Version A Unit 10   ©2008  Napier University
Economy Version A Unit 10   ©2008  Napier University
Emphasis Version A Unit 10   ©2008  Napier University  Certain elements assume more importance than others  Some features are emphasised and others are subordinated.  Emphasis is concerned with dominance and the development of a main idea or centre of interest (focal point)
Emphasis Version A Unit 10   ©2008  Napier University
Emphasis Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University  Produces the look of action or to cause the viewer’s eye to sweep over the work in a certain manner. Objects can be made to appear to be moving by different kinds of shapes, forms, lines and curves.  Diagonal lines tend to create the illusion of movement or motion.
Movement Version A Unit 10   ©2008  Napier University  Changes in direction  or change in the darkness or lightness of an image can also create a sense of motion.   Similar shapes connected with each other or overlapping each other can imply movement or restlessness.
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Movement Version A Unit 10   ©2008  Napier University
Repetition Version A Unit 10   ©2008  Napier University  Combining art elements so that the same elements are used over and over to achieve balance and harmony. Repetition, rhythm and pattern are design principles that complement each other, according to Larkin.  Grouping similar forms in an effort to satisfy the user's perceptual need for a sense of order and wholeness.
Repetition Version A Unit 10   ©2008  Napier University  The user recognises these traits and the eye is drawn to it.  Repetition is the most powerful when the variables of size, shape, texture and colour are equal.
Repetition Version A Unit 10   ©2008  Napier University
Repetition Version A Unit 10   ©2008  Napier University
Repetition Version A Unit 10   ©2008  Napier University
Repetition Version A Unit 10   ©2008  Napier University
Rhythm Version A Unit 10   ©2008  Napier University  Combining art elements to produce the look and feel of movement, especially with a visual tempo or beat.  Rhythm can be described as timed movement through space; an easy, connected path along which the eye follows a regular arrangement of motifs.  Creates predictability and order in a composition.
Rhythm Version A Unit 10   ©2008  Napier University  The parallels between rhythm in sound/ music are very exact to the idea of rhythm in a visual composition.  The difference is that the timed "beat" is sensed by the eyes rather than the ears.  The rhythm can be irregular or regular.
Rhythm Version A Unit 10   ©2008  Napier University
Rhythm Version A Unit 10   ©2008  Napier University
Rhythm Version A Unit 10   ©2008  Napier University
Rhythm Version A Unit 10   ©2008  Napier University  Linear rhythm refers to the characteristic flow of the individual line.  Accomplished artists have a rhythm of their own.  Linear rhythm is not as dependent on pattern, but is more dependent on timed movement of the viewer's eye.
Rhythm Version A Unit 10   ©2008  Napier University  Clear repetition of elements in a composition, or it may be a more subtle  in the underlying structure of the image. Alternation is a specific instance of patterning in which a sequence of repeating motifs are presented in turn; (short/long; fat/thin; round/square; dark/light).
Rhythm Version A Unit 10   ©2008  Napier University  Gradation employs a series of motifs patterned to relate to one another through a regular progression of steps. This may be a gradation of shape or colour.  Can create a sequence of events, not unlike a series of images in a comic strip. The use of rhythm is the designer's ability to use sustained repetition to assist in the provision of a sense of order.
Rhythm Version A Unit 10   ©2008  Napier University
Pattern Version A Unit 10   ©2008  Napier University  The principle of design that is the repetition of shapes, lines, colors, etc.
Pattern Version A Unit 10   ©2008  Napier University
Proportion Version A Unit 10   ©2008  Napier University  Proportion is the principle of design that deals with the relationship in size of one component of a work of art to another.
Proportion Version A Unit 10   ©2008  Napier University
Proportion Version A Unit 10   ©2008  Napier University
Unity and variety Version A Unit 10   ©2008  Napier University  Unity is the quality of wholeness or oneness that is achieved through the effective use of the elements and principles of design (harmony). Variety is a way of combining art elements in involved ways to achieve intricate and complex relationships.
Websites Version A Unit 10   ©2008  Napier University  http://www.universaldesignstudio.com/online/flash.php   http://www.attilahartwig.com/#   http://www.rootylicious.com/   http://www.dunun.com/2002/   http://www.studiobreakfast.be/   http://www.antonwatts.com/   http://www.exactitudes.com/   http://www.olaf-veltman.com/   http://www.sagmeister.com/
Summary Version A Unit 10   ©2008  Napier University  Shapes, textures and patterns can be organic or manmade. They can affect the personality of the interface and should be appropriate, interesting and consistent.
Summary Version A Unit 10   ©2008  Napier University  Perspective is the means of representing 3D objects on a 2D surface. It is achieved by relative size, overlapping objects, blurring and sharpening and lines meeting at a point.
Summary Version A Unit 10   ©2008  Napier University  The principles of design are balance, contrast, economy, emphasis, movement, repetition, rhythm, pattern, proportion, unity and variety.

Perspective Principles

  • 1.
    IMD09117 and IMD09118 Web Design and Development Unit 10 Shape, perspective and principles of design
  • 2.
    Shape and texture Version A Unit 10 ©2008 Napier University Focussed on linking Adds personality, interest without distracting Square - stability, easy on a grid Organic shapes - spontaneous, harder to program
  • 3.
    Shape and texture Version A Unit 10 ©2008 Napier University Rectangular screen Ubiquitous Softened by round edges What about PDAs, mobiles etc
  • 4.
    Shape and texture Version A Unit 10 ©2008 Napier University http://www.wz-berlin.de http://www.sfmoma.org/
  • 5.
    Shape and texture Version A Unit 10 ©2008 Napier University Texture and patterns can provide tactile sense of the interface’s look and feel Rough, rugged, smooth, organic, manmade Geometric - precision. Organic - haphazard Be restrained to avoid over complexity
  • 6.
    Shape and texture Version A Unit 10 ©2008 Napier University
  • 7.
    Shape and texture Version A Unit 10 ©2008 Napier University
  • 8.
    Shape and texture Version A Unit 10 ©2008 Napier University
  • 9.
    Shape and texture Version A Unit 10 ©2008 Napier University
  • 10.
    Perspective Version AUnit 10 ©2008 Napier University Representing 3D objects on 2D surface Linear or atmospheric/aerial Adds interest Achieved by relative size of objects, overlapping objects, blurring or sharpening of objects, lines meeting at a point.
  • 11.
    Perspective Version AUnit 10 ©2008 Napier University The horizon line is a theoretical line that represents the eye level of the observer. The horizon itself might be above the horizon line if there are trees or other features on the actual horizon. At times there is no visible horizon
  • 12.
    Perspective Version AUnit 10 ©2008 Napier University
  • 13.
    Perspective Version AUnit 10 ©2008 Napier University
  • 14.
    Perspective Version AUnit 10 ©2008 Napier University Vanishing point is on the horizon line where receding lines appear to converge. Objects that are parallel to one another have the same vanishing point.
  • 15.
    Perspective Version AUnit 10 ©2008 Napier University
  • 16.
    Perspective Version AUnit 10 ©2008 Napier University http://www.arjanverschoor.nl/
  • 17.
    Perspective Version AUnit 10 ©2008 Napier University
  • 18.
    Perspective Version AUnit 10 ©2008 Napier University
  • 19.
    Perspective Version AUnit 10 ©2008 Napier University Atmospheric perspective- how the appearance of an object is affected by looking through air. Distant objects lose information less contrast with their surroundings. less bright colours (become blue grey) less clarity - fuzzy edges smaller
  • 20.
    Perspective Version AUnit 10 ©2008 Napier University
  • 21.
    Perspective Version AUnit 10 ©2008 Napier University
  • 22.
    Principles of design Version A Unit 10 ©2008 Napier University Balance, contrast Economy Emphasis Movement Repetition, rhythm, pattern Proportion Unity, variety
  • 23.
    Balance Version AUnit 10 ©2008 Napier University Visual equalisation of the elements in a work of art. Symmetrical or asymmetrical
  • 24.
    Balance Version AUnit 10 ©2008 Napier University Asymmetrical balance may appear more casual and less planned Harder to use because the designer must plan the layout very carefully to ensure that it is still balanced Unbalanced page or screen creates a feeling of tension as if the screen might tip
  • 25.
    Balance Version AUnit 10 ©2008 Napier University Asymmetrical can be achieved by colour, value, shape, texture, position or eye direction.
  • 26.
    Balance Version AUnit 10 ©2008 Napier University
  • 27.
    Balance Version AUnit 10 ©2008 Napier University
  • 28.
    Balance Version AUnit 10 ©2008 Napier University
  • 29.
    Balance Version AUnit 10 ©2008 Napier University
  • 30.
    Balance Version AUnit 10 ©2008 Napier University
  • 31.
    Balance Version AUnit 10 ©2008 Napier University
  • 32.
    Balance Version AUnit 10 ©2008 Napier University
  • 33.
    Contrast Version AUnit 10 ©2008 Napier University Combing art elements to stress the differences between the elements. Bright with dull colours Angular with rounded shapes Related to emphasis
  • 34.
    Contrast Version AUnit 10 ©2008 Napier University
  • 35.
    Contrast Version AUnit 10 ©2008 Napier University
  • 36.
    Economy Version AUnit 10 ©2008 Napier University Distillation of an image to the basic essentials for clarity of presentation. Using only what is needed for visual effect Eliminating any elements that distract attention from the essence of an idea. It tends to be an abstraction.
  • 37.
    Economy Version AUnit 10 ©2008 Napier University
  • 38.
    Economy Version AUnit 10 ©2008 Napier University
  • 39.
    Emphasis Version AUnit 10 ©2008 Napier University Certain elements assume more importance than others Some features are emphasised and others are subordinated. Emphasis is concerned with dominance and the development of a main idea or centre of interest (focal point)
  • 40.
    Emphasis Version AUnit 10 ©2008 Napier University
  • 41.
    Emphasis Version AUnit 10 ©2008 Napier University
  • 42.
    Movement Version AUnit 10 ©2008 Napier University Produces the look of action or to cause the viewer’s eye to sweep over the work in a certain manner. Objects can be made to appear to be moving by different kinds of shapes, forms, lines and curves. Diagonal lines tend to create the illusion of movement or motion.
  • 43.
    Movement Version AUnit 10 ©2008 Napier University Changes in direction or change in the darkness or lightness of an image can also create a sense of motion. Similar shapes connected with each other or overlapping each other can imply movement or restlessness.
  • 44.
    Movement Version AUnit 10 ©2008 Napier University
  • 45.
    Movement Version AUnit 10 ©2008 Napier University
  • 46.
    Movement Version AUnit 10 ©2008 Napier University
  • 47.
    Movement Version AUnit 10 ©2008 Napier University
  • 48.
    Movement Version AUnit 10 ©2008 Napier University
  • 49.
    Movement Version AUnit 10 ©2008 Napier University
  • 50.
    Movement Version AUnit 10 ©2008 Napier University
  • 51.
    Repetition Version AUnit 10 ©2008 Napier University Combining art elements so that the same elements are used over and over to achieve balance and harmony. Repetition, rhythm and pattern are design principles that complement each other, according to Larkin. Grouping similar forms in an effort to satisfy the user's perceptual need for a sense of order and wholeness.
  • 52.
    Repetition Version AUnit 10 ©2008 Napier University The user recognises these traits and the eye is drawn to it. Repetition is the most powerful when the variables of size, shape, texture and colour are equal.
  • 53.
    Repetition Version AUnit 10 ©2008 Napier University
  • 54.
    Repetition Version AUnit 10 ©2008 Napier University
  • 55.
    Repetition Version AUnit 10 ©2008 Napier University
  • 56.
    Repetition Version AUnit 10 ©2008 Napier University
  • 57.
    Rhythm Version AUnit 10 ©2008 Napier University Combining art elements to produce the look and feel of movement, especially with a visual tempo or beat. Rhythm can be described as timed movement through space; an easy, connected path along which the eye follows a regular arrangement of motifs. Creates predictability and order in a composition.
  • 58.
    Rhythm Version AUnit 10 ©2008 Napier University The parallels between rhythm in sound/ music are very exact to the idea of rhythm in a visual composition. The difference is that the timed "beat" is sensed by the eyes rather than the ears. The rhythm can be irregular or regular.
  • 59.
    Rhythm Version AUnit 10 ©2008 Napier University
  • 60.
    Rhythm Version AUnit 10 ©2008 Napier University
  • 61.
    Rhythm Version AUnit 10 ©2008 Napier University
  • 62.
    Rhythm Version AUnit 10 ©2008 Napier University Linear rhythm refers to the characteristic flow of the individual line. Accomplished artists have a rhythm of their own. Linear rhythm is not as dependent on pattern, but is more dependent on timed movement of the viewer's eye.
  • 63.
    Rhythm Version AUnit 10 ©2008 Napier University Clear repetition of elements in a composition, or it may be a more subtle in the underlying structure of the image. Alternation is a specific instance of patterning in which a sequence of repeating motifs are presented in turn; (short/long; fat/thin; round/square; dark/light).
  • 64.
    Rhythm Version AUnit 10 ©2008 Napier University Gradation employs a series of motifs patterned to relate to one another through a regular progression of steps. This may be a gradation of shape or colour. Can create a sequence of events, not unlike a series of images in a comic strip. The use of rhythm is the designer's ability to use sustained repetition to assist in the provision of a sense of order.
  • 65.
    Rhythm Version AUnit 10 ©2008 Napier University
  • 66.
    Pattern Version AUnit 10 ©2008 Napier University The principle of design that is the repetition of shapes, lines, colors, etc.
  • 67.
    Pattern Version AUnit 10 ©2008 Napier University
  • 68.
    Proportion Version AUnit 10 ©2008 Napier University Proportion is the principle of design that deals with the relationship in size of one component of a work of art to another.
  • 69.
    Proportion Version AUnit 10 ©2008 Napier University
  • 70.
    Proportion Version AUnit 10 ©2008 Napier University
  • 71.
    Unity and varietyVersion A Unit 10 ©2008 Napier University Unity is the quality of wholeness or oneness that is achieved through the effective use of the elements and principles of design (harmony). Variety is a way of combining art elements in involved ways to achieve intricate and complex relationships.
  • 72.
    Websites Version AUnit 10 ©2008 Napier University http://www.universaldesignstudio.com/online/flash.php http://www.attilahartwig.com/# http://www.rootylicious.com/ http://www.dunun.com/2002/ http://www.studiobreakfast.be/ http://www.antonwatts.com/ http://www.exactitudes.com/ http://www.olaf-veltman.com/ http://www.sagmeister.com/
  • 73.
    Summary Version AUnit 10 ©2008 Napier University Shapes, textures and patterns can be organic or manmade. They can affect the personality of the interface and should be appropriate, interesting and consistent.
  • 74.
    Summary Version AUnit 10 ©2008 Napier University Perspective is the means of representing 3D objects on a 2D surface. It is achieved by relative size, overlapping objects, blurring and sharpening and lines meeting at a point.
  • 75.
    Summary Version AUnit 10 ©2008 Napier University The principles of design are balance, contrast, economy, emphasis, movement, repetition, rhythm, pattern, proportion, unity and variety.