P

Line

Space

Shape

Balance

Empahsis
(contrast)

Empahsis
(proportio
n)

Dominanc
e

Unity
(Proximity)

Unity
(Repition)

Pattern

x1

Texture

Colour

3-D Form

Tone

Movement

2. Create examples of the Typography design elements listed below:

a. Typeface :

b. Size :

c. Alignment

d. Format

e. Spacing

3. For those elements listed above, provide images from the internet that illustrate each
element. Note: Your images may be screenshots of websites,
images or text you have copied.

4. Explain the components of the Gutenberg Diagram.

The Gutenberg Diagram rule is used to show a user behaviour known as reading gravity, the
common habit of reading left to right, top to bottom.
The upper left quadrant is the
first area that a users eye will
focus on. The eye will then
sweep downward crossing the
centre or intersection of all four
quadrants, before coming down
to the bottom right hand
quadrant. The upper right
quadrant and lower left
quadrants are called fallow
areas. The top right quadrant is
a strong follow area, where the
lower left is a weak follow area.

a) Find an example of this being applied to a website.

b) Also find an example of where a website has not utilised this idea.

5. What is meant by the term Form of Content when applied to website design?
The term form refers to the work's style, techniques and media used, and how the elements of design
are implemented. Content, on the other hand, refers to a work's essence, or what is being depicted.
6. Show examples of how the Rule of Thirds has been used in an image. How is the Rule of
thirds similar to Grid layouts in Web design?
In its most simple form the rule of thirds refers
to a 3 by 3 grid that fits on top of any image. There
are no specific sizes to the blocks only that
The grid works horizontally or vertically and helps you
determine how the eye follows an image or
group of images (such as a website).
The grid-shaped rule of thirds concept helps
understand the places on an image where a person is naturally
drawn when viewing an image or even your webpage.
points are where the grid lines intersect.
Following the rule of thirds philosophy, images
thirds regions are the most pleasing and are
associated with balance and harmony. Where
the focus of an image falls in the imaginary grid can
create associations as well. For example, the
placement of an object in one third of the photo
can imply motion,

they are equally shaped.

you
In theory, the most eye-catching
that fall into

Successful use of the rule of thirds can

create a feel of natural balance, which is
often asymmetrical. It can help designers
who tend to design with perfect
symmetry break out of their comfort zone
and try something new, while still
maintaining a sense of design order.

On homepages,
thirds when

apply the rule of

determining
placement of

key
elements banners, social media or interactivity icons,
advertising and even key parts of your content. On subsequent or
content pages, use the rule of thirds to help you determine
where to place images or help readers focus when visiting
your site. Think about how many sites are structured as
well; sites with sidebars on both sides often allow for main content
to fall within the centre third of the site

7. Take a screenshot of a poorly designed website there are many sites that show examples
of these!! On the screenshot show three or four design elements and/or related principles
that have not been followed. Also, if Typography or Compositional Rules are areas where
the site is lacking point these out.

8. Now take a screenshot of a well-designed website and annotate this in a similar way as
above. I.e. 3-4 areas that follow sound elements/principles of design Typography and
Compositional Rules have also been used in a positive way.