Principles of design: The basis of good design
By: Linda Okorie
Tags: UI Design, User Experience, Design, Graphic Design, Product Design

Photo by Aleks Dorohovich on Unsplash

As designers, it’s our goal to pass information in the most pleasing way possible. Starting out, there’s a wealth of literature to read and videos to watch that can get quite overwhelming to take in at a glance. People take different routes to learn all that needs to be learnt but there are basic principles of design which if they are mastered now will make all the difference and set your designs apart. This is a sneak peek into what they are about.

Fundamentals

The first thing we should know is that every design through any visual medium is made up of the following elements; Line, Shape, Form, Texture and Balance. These fundamental elements are little pieces that make the bigger picture. No matter your need, these little elements make all the difference and can either make or break a design. They are present in every form in every place — in the texture of your clothes, the layout of your home and even little things like the shape of your cup. You can access more on the basic elements of design here.

Photo RhondaK Native Florida Folk Artist on Unsplash

Colour

Colours can draw your eyes to an image, evoke a certain emotion or communicate important things without using words at all. Most people have a favourite colour that they are drawn to. They like the feelings such colours create in them but they aren’t actively conscious of their reactions to it. People wear black when they are sad, stop signs are red and the walls of hospitals are predominantly white. These colour choices were not by chance but to create or enhance feelings to fit the venue or location.

“DESIGN SPEAKS LOUDER THAN WORDS”

Colours can be described in HEX, RGB,CYMK, HSV or HSB code. Although HEX, RGB and CYMK can describe colour, CYMK is used majorly in print media and the other two don’t do a good job in describing shades of a colour. HEX code in particular is difficult to understand. On first glance, do you understand the value #13AC7B? Confusing right? HSV or HSL has been prescribed as the best choice for specifying colour on digital media. The colour wheel which we were taught in school is a guide to selecting colours that will be a magic wand in the arsenal of any designer. Using different formulae for selecting colour, creating a colour palette to use in a project is to an extent, simplified. Some formulae include;

Monochromatic: This uses one colour from the colour wheel and uses saturation and value to create variations.

Analogous: This uses colours that are next to each other on the colour wheel like reds and oranges or blues and greens.

Complementary: This uses colours opposite each other on the wheel like Blue and Orange or Red and Green.

Split Complementary: This uses two colors on either side of the complement. This gives the same level of contrast as complementary but more colours to work with.

Triadic: This uses three colours that are evenly spaced. These combinations tend to be striking so be mindful when using them.

Tetradic: This uses four colours forming a rectangle on the wheel. The formula works when you let one colour dominate and the remaining as accents.

To learn more on colours, follow the link here.

Photo by Francesco Ungaro on Unsplash

Typography

This is the style or appearance of text. Since it is present in almost every form of media, how we style it plays a vital role in design. Fonts communicate more than words expressed through them. They can be casual, neutral, exotic or graphic. For example, the fonts used in children’s literature and adverts show the playful nature of kids and invite them in. Serious information is normally passed with text that looks as serious (sometimes grim and scary) as the message. There are different kinds of fonts; Serif, Sans-serif and Display fonts. There are some things to consider when selecting fonts such as Hierarchy, Leading, Tracking and Kerning. When selecting fonts, note that less is more. Limit yourself to one or two font choices per project. Follow the link here to understand more on the types of fonts and things to consider when selecting fonts.

Photo by Halacious on Unsplash

Layout & Composition

Layout and Composition gives your work structure and make it easy to navigate (think your kitchen or office floor layout). It also shows the relationship between elements. There 5 principles of Layout and Composition that can help sharpen your work; Proximity, White Space (Negative Space), Alignment, Contrast and Repetition.

Proximity: This is using visual space to show relationship in your content.

White Space: This is also a major principle of design but is tightly related to Layout and Composition hence mentioning it here. It helps in defining and separating different sections.

Contrast: This is difference between two items. It can help you catch the reader’s eye, create emphasis or call attention to something important. Contrast can be created using colour, size or visual weight and different styles of text.

Repetition: This is a reminder that every project should have a consistent look or feel. Being consistent make your work easier to read. When the user knows what to expect, they can relax and focus on the content.

You can see more here.

Photo by sarandy westfall on Unsplash

Images

Images are more than just decoration. In design, they are the hook that draws the viewer to what you have to offer. Compelling visuals help you connect and make a strong impression on viewers without them reading a single word. People are drawn to images that look authentic and tell a story. There are two kinds of images, Raster and Vector images. Each are good under certain circumstances. Ensure when selecting images for your design, look for images that are sharp, clear and free of distortion. More on images here.

Photo by Markus Spiske on Unsplash

Negative Space

Negative space or white space is the area of the design that is empty. Negative space is something that would be thought of as a bye-product of designing but actually is something that is as important as the other principles discussed above. It gives our design breathing room and passes emotions in and of itself. Look at the picture above, there’re just a bunch of frames on a wall. It is the proper use of negative space that gives it beauty as design or art. Negative space can be manipulated through padding, margin and line height. There are two types of negative space: Micro & Macro negative space. Micro negative space is the small space between elements while Macro negative space is the larger space between layout elements. Watch the full video on Negative space to see more.

And that’s all the basic principles of design. Every good design out there whether print media, digital, artwork or architecture make use of these principles. Grasping these principles now will change how you see everything permanently.