✏️ Design fundamentals: 7 tricks graphic designers don’t want you to know

The following tricks aren’t really tricks but some of the design fundamentals I learnt at uni. It’s been a while since I reviewed any of this so this talk is a good refresher for me and a good topic to talk about (hopefully).

#1 Shapes

Image

Lines are great and a used in every type design. Lines give us visual indications of where something begins and ends. They can be used to convey distance, feeling, shape, dimension.

3 flat circles

Now its a wine glass wow. It has 3D shape now.

Three types of lines

Actual lines have weight, length and emotion.

Not a single but a series to make a single

A lineup

Mental connection between two points or elements.

Vertical vs Horizontal

A psychic vertical line is viewed as having hierarchy.

Vertical lines represents hierarchy, heavens, universe, ideas, more masculine.

Horizontal Lines

Horizontal lines between this copy and the image are seen to represent the “idea realised”, also the horizon, the feminine, and the passive.

Dots and Circles

The dot and circle represent perfect, completeness and freedom from distinction or seperation. Can suggest community, friendship, love, unity.

Image

Image

Image

Suggest stability, imply balance. Straight lines and precise shapes represent strength, professionalism and efficiency. Triangles are often associated with power, science, religion and law.

Image

Image result for lego logo

Image result for tesla logo

#2 Negative Space

Negative space what “carries” the subject of an image. The negative space will create a shape itself. A good design’s composition will always consider the balance of positive and negative space. Just as important as that object itself, negative space helps to define the boundaries of positive space and brings balance to a composition.

Image

Image

Image

Image result for Shigeo Fukuda

#3 Scale, Proportion

Scale and Proportion

Scale and proportion both concern size. Scale refers to overall size and proportion refers to relative size.

They both are principles used to help the viewer organise and image and can create or minimise points of emphasis.

We use nature and our body as the bases for our measurement reference. Hence why the first units of measurements were equivalent to a body part.

If objects are out-of-scale of oddly proportioned, the viewer will view it as a point of emphasis. Large scale objects create weight and are associated with more importance than the smaller objects.

Image

Jim Stoten

Florentijn Hofman

#4 Symmetry and Asymmetry

Good design is a core principle to a successful design.

There is symmetrical balance which can be defined as something having a central axis dividing a composition through the middle, horizontally or vertically. Mirrored to each side. It creates a sense of security and solidity, the balance makes the viewer feel comfortable.

There is pure symmetry (mirror image) and approximate symmetry (more appeal, variation on each side while remaining balanced).

Horizontal Symmetry

Influenced the first iPod

Image

Asymmetrical balance is when both sides of the central axis are not identical, but appear to have equal weight. It’s an implied balance.

Image

#5 Hierarchy

Basically it mean ranking, or classification of things according to relative importance.

When this used in design it demonstrates how a viewer should move through the design. What they should see first second and third and last. It affects how a viewer will understand the information, how easy it is to intake and maintains control.

Image

Image

#6 Rhythm, Pattern

Rhythm

The repetition or alteration of elements, often with defined intervals between them. Rhythm can create a sense of movement and establish patterns and texture. It creates a pulse or beat behind a design, like it does with music.

There can be regular (similar intervals), flowing (sense of movement more organic) or progressive (progression of steps).

Changing rhythm between elements, but regular.

Image

Pattern

Image

#7 Typography done good

Stole bits from http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography

Sans Serif vs Serif

Image result for what is a serif

Why Serif? Those little bits are serifs, and help our eyes more easily recognise the the letters. It’s better to use a serif for smaller body copy as it’s easier to read in long form and smaller font sizes. That’s why newspapers do it.

Sans Serif Are better for larger displays.

Fast and easy to read from distance.

This looks pretty, but not practical.

Fonts

Start with one, preferably that has lots of weights

Image

Image

Image

Line height

Line height is important for readability. For most text the optimal is between 1.2em and 1.45em. Not too dense not too sparse.

Image

Line length

The longer the line length the harder it is for your eye to trace back and find the next line. Between 40 and 80 characters per line is ideal. Less is more comfortable. Al­ter­na­tively, use the al­pha­bet test to set line length. You should be able to fit be­tween two and three al­pha­bets on your line

Image

Font Size

Make the font size bigger on desktops as you sit further back (most of the time). You can get away with smaller font sizes on mobile as the viewer will often hold it closer to their face.

Image

Good Summary

Image

Thanks that’s it.