1. UNLEASH POTENTIAL
Design 101
Lesson 01: Design Elements

2. Sean Buch
UX/UI/FED
Lesson by

3. Design is the visual communication of ideas through logical and ordered visual elements on a page, website, app or in this
case a presentation.
Design is not about making things ‘pretty’ or adding fluff to content, it is an essential part of the user’s experience of your
product or offering and could be the difference between user adoption or a failed project. Just to put this in perspective:
“Jeff Bezos invested 100 times more into customer experience than advertising during the
first year of Amazon. AirBnB’s Mike Gebbia credits UX with taking the company to $10
billion.” – Forbes Technology Council
What is Design?

4. What is Design?

5. Design elements are the basic units of any visual design which form its structure and convey visual messages. Painter and
design theorist Maitland E. Graves (1902-1978), in his book, The Art of Colour and Design (1941), defined the elements of
design as:
1. Line
2. Direction
3. Shape (Substituted for space)
4. Size (Substituted for scale)
5. Texture
6. Value (Not covered)
7. Colour
These elements are the materials from which all designs are built. We will be looking at those elements today.
Design Elements

6. Line
Design Elements
Space
Scale Texture Colour
Direction

7. Line is an element of art or design that is defined by a point
moving in space. It is probably the most fundamental of the
elements of design as it is usually the starting place – for
example I begin a design by laying out the lines of a page in
the form of a wireframe.
Lines can be vertical, horizontal, diagonal, or curved. They
can be any width or texture. Lines can also be be
continuous, implied, or broken.
Line

8. Straight line evokes order and neatness, wavy lines create
movement, and zig-zagged lines can imply tension or
excitement.
A technique applied in photography is the use of ‘leading
lines’ which guides the viewer’s eye and are incorporated
into web design as seen on the right. Finding and
emphasising strong leading lines in your piece allow you to
direct the eye through your design or to focal points.
This webpage has a diagonal grid with very strong leading
lines that take you down the page, from section to section, in
a swift zig zag shape.
Line

9. Elements in a page design, for example in the form to the
right, intentionally guide the viewer’s eyes from one area of
the page to another. Common directional patterns are
horizontal, vertical and diagonal.
How the eye moves over a page or content is central to the
consumption of that content and can also be referred to as
‘flow’ . So when designing it is important to ask ‘How does
your eye move across the page? Do your readers know
exactly where to look next? Is the direction that their eye
takes logical?’
Direction

10. Studies have analysed the exact nature of our eye movements and the patterns our eyes trace when viewing the world
around us. Below you’ll see a heat map from an eye tracking study by the Nielsen Norman Group to better understand a
user’s pattern of content consumption. The study proved that a common pattern for the eye to take is an “E” or “F” shape
when it comes to web pages, so placing your top content to the left of your page, or along the top is not just an aesthetic
choice but good business. There is also the potential for a common “Z” pattern as per the previous example.
Direction

11. Space, or depth, is a property of our 3-dimensional world
and we can imply spatial relationships through 2-
dimensional design as well.
Space is the area that a shape or form occupies or the area
created between shapes and can be defined as both
positive and negative space depending.
The artist M.C. Escher, was a master of space and spatial
relationships – as in seen in this example, he used the space
in between the birds to create the shape of fish. This is
negative space at work – considering everything around and
in between your design, and manipulating that space to
form something new.
Space

12. Web design agency, ‘Built by Buffalo’ uses white space
cleverly in their homepage design. The logo is given
importance by allowing for negative space around it while
the content is intriguing and structured based on a
hexagonal grid.
While the user scrolls, whitespace still dominates the design
to given focus area real emphasis making the page engaging
and easy to navigate.
Space

13. Scale is the deliberate sizing of individual elements to help
us make sense of the content on a page. When adjusting the
scale of different elements on you give the viewer visual
queues as to what is important.
You can also create a relationship between different pieces
of content in your design by adjusting their size. This
relationship is essential when conveying information in a way
that is understandable, digestible and logical.
Note the picture on the right and the dramatic effect scale
and the relationship between different elements can have
on an object.
Scale

14. The scaling and placement of elements to signal importance
is referred to as ‘visual hierarchy’ – this is of pivotal
importance on a webpage, app or presentation of analytics
and data visualisation for example where content needs to
be given levels on importance.
.
The publication design on the right by The Consult scales up
certain statistics, information and numbers to draw
attention to those pieces of data over others.
Scale

15. Texture can be defined as “the properties held and
sensations caused by the external surface of objects
received through the sense of touch.”
Texture is the way a surface feels or is perceived to feel. It
can be added to attract or repel interest to an element,
depending on the pleasantness of the texture.
Texture should play a supporting role in design; don’t
overuse them or you may end up with a design overwhelms
or confuses your user’s senses.
Texture

16. The use of texture in a website can contribute to the experience by adding warmth, personality and feeling. You can
achieve a memorable result when applying texture that relates to your product or brand. Texture can be accomplished in a
number of ways such as typography, background patterns, hand- drawn illustrations, photographs or UI/UX elements.
Sometimes using only a small textured detail or element is all you need so use it sparingly!
Texture

17. Colours is one of the more prominent elements of design –
it can convey a mood or emotion (red on Valentine’s Day);
strike fear (in the animal kingdom), warm the heart or create
joy (a beautiful sunset).
Colour theory is the guiding principle around which
designers or artists use colour – this relates to colour mixing
as well as the visual impacts of certain colours.
You will likely be familiar with a colour wheel (represented
somewhat differently on the right) that defines things such
as primary, secondary or tertiary colours – knowing how the
eye perceives colours in isolation and grouped together will
better aid you in creating clear designs that convey your
message.
Colour

18. • Aids organisation - Developing a colour strategy and staying consistent creates order.
• Gives emphasis – Colouring certain content creates a hierarchy on your page, website or app.
• Emotional or cultural association - colour means different things to different people depending on their cultural context
– as an example, white is associated with purity in some cultures while it is associated with death in others.
Colour

19. Dieter Rams, BRAUN

20. Thank You.

21. Website: www.decisioninc.co.za
Email: info@decisioninc.co.za
UNLEASH POTENTIAL
decisioninc @DecisionInc. Decision Inc.