Human Computer Interactions

Session 3 : Graphic Design Principles

Prepared by: Josh Buzz
Balance
●
Lends stability and structure to an overall design.
●
Things to consider:
– visual weight - Shapes, text boxes and images are the
elements that form your design, so it’s important to be
familiar with the visual weight each of those elements
possesses.
– symmetry - symmetrical or asymmetrical.
●
Symmetrical balance - the weight of elements is evenly
divided on either side of the design, whereas
asymmetrical balance uses scale, contrast, and colour to
achieve the flow in design.
Balance >> Symmetry
Proximity

●
Proximity helps in creating a relationship between similar
or related elements.
●
Elements need not be grouped together, instead, they
should be visually connected by way of:
– font,
– colour,
– size,
– etc.
Alignment

●
Alignment plays a pivotal role in creating a seamless visual
connection with the design elements.
●
It gives an ordered appearance to images, shapes, and
blocks of texts by eliminating elements placed in a
disheveled manner.
Visual Heirarchy

●
formed when extra visual weight is given to the most
important element or message in your design.
●
It can be achieved in various ways:
–  font size &/or weight (e.g. to highlight the title)
– [screen] location (e.g. placing the key message higher
than the other design elements)
– attraction (e.g. adding focus to larger, more detailed
and more colourful visuals than those less relevant or
smaller images).
Repetition

●
A fundamental design element, especially when it comes
to branding.
●
Creates a rhythm and strengthens the overall design by
tying together consistent elements such as logo and colour
palette, making the brand or design instantly recognisable
to viewers.
Colour

●
Colour is an important design basic and it dictates the
overall mood of a design.
●
The colours you pick represent your brand and its tonality,
so be careful with the palette you choose.
●
As a graphic designer, it’s always helpful to have a basic
knowledge of colour theory (e.g.):
– gold & neutral shades evoke an overall feel of
sophistication,
– bright colours signal happiness
– blue creates a feeling of calmness.
– Colour palettes can be used as a contrast or even to
complement the elements.
Color >> Colour Harmony
●
Complementary
●
Colors that are opposite each other
on the color wheel are considered
to be complementary colors (e.g.
red and green).
●
The high contrast of complementary
colors creates a vibrant look
especially when used at full
saturation. This color scheme must
be managed well so it is not jarring.
●
Complementary colors are tricky to
use in large doses, but work well
when you want something to stand
out.
●
Complementary colors are really
bad for text.
Color >> Colour Harmony
●
Analogous
●
Analogous color schemes use
colors that are next to each other
on the color wheel. They usually
match well and create serene and
comfortable designs.
●
Analogous color schemes are often
found in nature and are harmonious
and pleasing to the eye.
●
Make sure you have enough
contrast when choosing an
analogous color scheme.
●
Choose one color to dominate, a
second to support. The third color
is used (along with black, white or
gray) as an accent.
Color >> Colour Harmony
●
Triad
●
A triadic color scheme uses colors
that are evenly spaced around the
color wheel.
●
Triadic color harmonies tend to be
quite vibrant, even if you use pale
or unsaturated versions of your
hues.
●
To use a triadic harmony
successfully, the colors should be
carefully balanced - let one color
dominate and use the two others
for accent.
Color >> Colour Harmony
●
Split-Complementary
●
The split-complementary color scheme
is a variation of the complementary
color scheme. In addition to the base
color, it uses the two colors adjacent to
its complement.
●
This color scheme has the same
strong visual contrast as the
complementary color scheme, but has
less tension.
●
The split-complimentary color scheme
is often a good choice for beginners,
because it is difficult to mess up.
Color >> Colour Harmony
●
Rectangle (tetradic)
●
The rectangle or tetradic color
scheme uses four colors arranged
into two complementary pairs.
●
This rich color scheme offers
plenty of possibilities for variation.
●
The tetradic color scheme works
best if you let one color be
dominant.
●
You should also pay attention to
the balance between warm and
cool colors in your design.
Color >> Colour Harmony

●
Square color scheme
●
The square color scheme is
similar to the rectangle, but
with all four colors spaced
evenly around the color circle.
●
Square color schemes works
best if you let one color be
dominant.
●
You should also pay attention
to the balance between warm
and cool colors in your design.
Contrast

●
Contrast can be expressed in a number of ways, the most
common being color (color-contrast), but it may also be
expressed in other ways such as style contrast, size-
contrast, and direction contrast.
Contrast

Design Contrast elearningbrothers.com

Color Contrast

killersites.com

SIZE
Direction Contrast Contrast
Typography

●
Typography is one of the key pillars of design, and it speaks
volumes about a brand or an artwork when executed
stylistically or even customised. Sometimes, ‘type’ is all you
need to showcase your design concept.
Typography

●
Things to consider:
– Font Families – using fonts from the same family promotes
design unity.
●
TIP: Use font websites such as Google Fonts, DaFont, FontSquirrel, FontSpace, and
1001Fonts as a start not just as sources, but for consultancy.

– Keep the Font Count Low – limit the number of varied fonts
used.
– Respect font integrity – avoid distorting the shape or natural
dimensions of a font. Observe proper Leading, Kerning &
Tracking.
Typography

annenbergdl.org
Typography

●
Things to consider:
– Hierarchy: How thinking
gets done – Guide the user
by establishing proper
heirarchy of elements
expressed through sizing,
positioning, focus.
– Using the grid – useful tool
for positioning, esp. for
beginners.
Typography

●
Things to consider:
– Challenge your perspective – Make a habit of flipping a design
upside down, looking at a mirror image of it or viewing color
designs in grayscale. Modify as needed.
Negative Space

●
The blank space – often called “negative space”, is the
area between or around elements.
●
If used creatively, negative space can help create a shape
and highlight the important components of your design

canva.com

youtube.com
desingmantic.com
Rules

●
Remember, whatever it is that you’re choosing to
communicate, should not be compromised.

howdesign.com
amazon.com
References:

●
Web:
– https://medium.com/@anahatrawal/10-basic-principles-
of-graphic-design-b74be0dbdb58
– http://www.tigercolor.com/color-lab/color-theory/color-ha
rmonies.htm
– https://www.creativelive.com/blog/typography-tips/