Introduction to basic design principles Balance Hierarchy Contrast

Introduction to basic design principles Balance, Hierarchy, Contrast, Alignment, Repetition, Proximity

Balance lends structure to an overall design. It is the shape of the arrangement of the elements on the page. The aim is to arrange your text, images, shapes etc on your page with a specific layout so that they provide a harmonious feel to your design. Balance is either symmetrical or asymmetrical. Symmetrical balance is when 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. Placing important elements (or the focal point) of the design in the visual centre is a common design feature that is effective. The visual centre of an image is just above and slightly to the right of the actual centre.

Proximity helps in creating a relationship between similar or related elements. Elements that are related to each other need to have a visual connection. They may be placed close to each other, or they may have something in common, for example they may be the same colour or shape, size, font etc.

Alignment creates a visual connection with all of the design elements on the page. It gives an ordered appearance to images, shapes, and blocks of texts by eliminating elements placed in a disorganised manner. Alignment will guide the viewer’s eye from one element to the next. Edge alignment is when the elements on the page are aligned with one of the edges of the page. They may be aligned left or right, top or bottom, but are connected to the edge of the page by being aligned with the page’s edge.

Hierarchy is how you present the different elements of your design and directs the viewers’ eye to where you want them to focus their attention. Hierarchy is created when extra visual weight is given to the most important element or message in your design. . . the larger the element, the more important it is. Size matters! People read larger text first. It can be achieved in various ways — using larger or bolder fonts to highlight the title; placing the key message higher than the other design elements; or adding focus to larger, more detailed and more colourful visuals than those less relevant or smaller images. Another way to give emphasis to an element on your page is to give it space and room to “breathe”. Leaving white space around an element, then that element is more visible to the reader. Bright colours also grab attention, so any text or image that is brightly coloured will have prominence on your page.

Repetition strengthens the overall design by tying together consistent elements such as the logo and colour palette and linking elements together through their shape, colour or font. Repetition creates a sense of unity and cohesion. It strengthens hierarchy.

Contrast happens when there is a difference between two opposing design elements. The most common types of contrast are dark vs. light, large vs. small. Contrast guides a viewer’s attention to the key elements. The greater the difference between the two elements, the greater the contrast. Make sure that the contrast is obvious. . . do not use fonts that are similar to each other, use fonts that are very different. Do not have sizes that are only slightly larger or smaller, have a big difference in size.

Colour dictates the overall mood of a design. It’s always helpful to have a basic knowledge of colour theory such as complementary and analagous colours. Colour palettes can be used as a contrast or even to complement the elements on the page.