Lesson One :

What is Design?

There's no short definition of Design, because Design is a topic that has vast scope. Wikipedia definition of Design

Here's a comprehensive list of professional disciplines that come under the definition of "Design". When someone mentions "design" to you, what do you think they're referring to? It could mean any of the following :

Web Design

In the Cert3 Screen & Media we're chiefly concerned with Web Design. Web Design differs from traditional Graphic Design because it deals with sensory engagement, user experience, accessibility, audio, video, animation and meta information all to strict standards for deployment known as web standards.

Common to both disciplines is the importance of the Principles of Design. The Principles of Design have universal application and not just restricted to Web Design and Graphic Design. These principles help determine how you treat items in a layout; typically position, size, colour and spatial relationship to other items in the layout.

The Principles of Design | What are they?

Before you jump in and start designing it would help to understand some of the Principles of Design. These aren't like road rules for driving, or the immutable Laws of Physics, they're more like guidelines. Follow the guidelines to maximise the chance that your layout design will be easy to read, understand and retain.

 

There is no definitive list of the Principles of Design, however these are widely regarded as the important ones:

Focus

focus mantra in blue with shadowFocus (also referred to as "dominance" or "emphasis") means that the items on the page do not compete with each other for your attention (like a stamp album), there will be one item that has more emphasis than the others so your attention is drawn to it first.

Stamp Album | Where's the FOCUS?

stamp album layoutA typical stamp album places equal emphasis on all items. The viewer doesn't know where to look for the information; nothing stands out except for the top-left to bottom-right eye-flow convention (for Western readers, other countries/ races view layouts differently).

Generally, avoid the stamp-album metaphor in your layouts.

Note# This is, of course, a design compromise; a stamp album needs to hold lots of stamps; it doesn't need to adhere to design fundamentals, its chief purpose is NOT to communicate or advertise).

Here's a "strong" example of focus:

bottle of beer, on table in pubThe product shot of the beer bottle places emphasis on it by virtue of its central position in the shot as well as the bottle's image clarity relative to the surroundings. This is referred to as a "hero shot". It's called a hero shot because early pulp-fiction would often portray their story's hero/heroine on the front cover like a figurehead for the publication; pointing to the sky or posing with a monumental backdrop. In the photo opposite the hero is the bottle.

Focus and Information Hierarchy
The goal of any designer is to make the layout "easy to read and understand". This is vitally important if you're designing a billboard on the side of a highway with viewers driving past at high speed or if you're competing in a busy scenario; magazine covers in a newsagent is one such scenario.

To make things easy to read it's best to design a clear focus into the layout. Once you have a clear focus, other items in the layout then can "work off that" thus establishing a hierarchy.

The expression "information hierachy" describes how the items on a page have levels of emphasis according to the following:


cover of Health Matters mag featuring beach sceneHere's a typical example of a "designed" information hierarchy (see magazine cover opposite) :

This example has been marked with discs indicating the order of hierarchy...disc 1 has the most focus, disc 7 the least.

See if you agree with the following rationale which explains why items have a certain level of emphasis.

The process is somewhat subjective, but it should demonstrate how you might implement a hierarchy for your layouts.

Note: Some layouts might have very simple hierarchies with few discernable items on the page. The key factor here is that there needs to be obvious focus to make the layout easy to interpret.


Learning Task: Drag n' Drop

Idenifying Focus and Hierarchy (10 mins)

Test your understanding of "focus" by dragging the numbered discs to the appropriate objects in the layout examples below. Similar to above, disc 1 has the most emphasis, disc 6, the least dominant.

It's likely you'll see it differently to the solutions presented but generally the focus and hierarchy follows a trend based on focus, emphasis (scale, colour, character of item) and position.

Hint#
Sauce Magazine: treat the photo of the 3 band members as 1 object.

Hint#2
The discs will change colour to indicate the most likely location.

No need to submit anything, this is just for practice.

 

Chris Adams 2017

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Learning Task: Identifying focus & hierarchy (3hrs)

Find three layouts (magazine covers, adverts, web pages, DVD sleeves etc) and place (don't glue or staple) discs on the layout (use these, print and cut them out). Disc no. 1 being the object with the greatest emphasis down to the last disc having the least emphasis. Find one layout that has at least five easily identifiable levels of hierarchy. Find another with as few as possible.

Take a photo of each of your layouts showing your arrangement of discs. Pick your favourite layout and publish it to your blog. Submit the URL using the Assignment Tool ready for feedback.

This is somewhat subjective (open to personal perception) so don't feel that there is a single correct way to do this task although your choices should align with conventional Design Principles.

Resources:
To help you with understanding the concept of dominance or focus, read this short piece by Steven Bradley.

 

Chris Adams 2017


 

Design Elements: The building blocks

wucius wong book coverIn the context of Design, elements provide a common language for designers & artists. They are the smallest/ most fundamental items that define what we see in a layout. The following definitions are based on Wucius Wong's book: "Principles of 2-dimensional design".

 

 

Elements

Point
The point is the simplest element of visual design. It is infinitely small and radiates from the centre just like the sun. It indicates position.

In a typical design the point could be represented by somebody's face in a photo or artwork that sits alone surrounded by whitespace.

Line
Line is defined by two or more points. Straight or curved. Infinitely thin. It indicates direction and position. In a typical design, the line could be formed by text columns or by the header or footer. Eyelines in photos of people are a fairly common representation of "line".

Plane
Plane is a "line in motion". As a line "sweeps" it defines a plane. A plane has length and breadth but no thickness. Picture frames, columns of text, the blue panel you're currently looking at are all examples.

Volume
Volume is the path of a plane "pushed" or extruded. In 2-dimensional design it is an illusion (portrayed by using perspective/vanishing points or shading ). It's usually found in building illustrations, 3d maps, motion graphics titling, artwork with extrusions, anything that explores the illusion of depth on a page or screen.

patrick Brown Ilustration of bar sceneIllustration by ex-student 2006, Patrick Brown. For more of Patrick's fantastic artwork check out Deviant Art.
Where can you see "volume" in this illustration?

Properties of Elements

When elements are portrayed on the page or screen they might be done in pencil, ink, whiteboard marker on a whiteboard, a finger drawn through sand on a beach or on a fogged-up car window, tyre marks at the drag strip or pixels on a monitor.

When this happens the element displays the following list of properties:

Shape
circle square triangleAny element that is drawn now has a shape. Figure "a" represents three shapes. Even a dot has a shape.

Size
squares varied in sizeSimilarly any element drawn would have a size which is measurable and can have a scale relative to the elements around it including the framal reference or ground it's drawn on.

Colour
3 red, grrn blue squaresAny element drawn would now have a colour.

Texture
3 gnarly textures b/wAny element drawn would have a texture derived from the substrate (paper, LCD screen, sand, bitumen, brick etc) or the pencil, ink, paint used to draw it.

 

Relational Elements

These describe the inter-relationships between shapes in a design. Some are suggested, like direction and position and some are felt like gravity and space.

Direction
3 squares rollingThe direction of an object is determined by its relationship to other objects, how it relates to the viewer and how it interacts with the framal reference or ground. In Figure "a" the shapes appear to be moving from left to right like a sprinter away from the starting line.

Position
circles in a boxAn object's position is determined by where it sits in relation to the framal reference. in Figure "b", the dot appears resting, then hovering then floating.

 

Space
A shape takes up space. Absence of shape liberates space and can be useful in focussing attention to other parts of the design. Space is also know as white space. White space is a designer's best friend and an editor's enemy. Editors like to "cram in " as much text as possible and generous white space prevents that.

Not to be confused with negative space. We'll look at the difference a little further on.

 

Tension & Tension Points
green desktop mag coverWhen objects get close to each other they create "tension". Tension is generally to be avoided but can be used to good effect to imply chaos or stress.

The designer of this Desktop magazine cover (opposite) elected to create tension by positioning the rockets close to the edge of the page. The purity of the grid and page margins is "tainted" by this. It conveys a sense of chaos, disorder and rebellion which relates to the artwork (it's a black skull firing red rockets out of its mouth !)

Experienced designers often use tension in this deliberate way. Inexperienced designers arrive at this by accident. Tension points if used poorly create distractions and affect the layout hierarchy and therefore flow.

 

 

Learning Task: Identifying Elements & Principles (1-2hrs)

Choose the "busiest" layout from the three you used for the previous task (the layout hierarchy task) and on this, first in pencil (so you can rub it out) then in high-contrast thin marker pen, mark where you see "Elements" and "Principles" of Design. Try to identify at least eight in your chosen layout. Don't obscure the artwork, try to label your layout with "neat" use of the marker pen, your teacher needs to be able to see the layout as well.

Here's a list of elements and principles that may be evident in your example:

  • focus (principle)
  • colour (element)
  • shape (element)
  • scale (element)
  • alignment (principle)
  • texture (element)
  • flow (principle)
  • point (element)
  • line (element)
  • gravity (element)
  • space (element)
  • position (element)
  • direction (element)
  • plane (element)
  • volume (element)
  • proximity (principle)
  • balance (principle)
  • rhythm (principle)
  • typographic unity (principle)
  • colour unity (principle)

 

Take a picture/scan of your final version and publish it to your blog. Caption it with what you thought of the process. Submit the URL via the Assignment Tool for feedback.

Chris Adams 2017

Here's an example of what's expected, try to identify as many elements & principles as you can.

green cover of Desktop


Are there any missing from this example?

Summary

This lesson introduced Elements and Principles of Design and you were given three Learning Tasks to complete. The next lesson builds on this as we expand your visual language "vocabulary".