Design 101: Basic Design Theory

Hello everyone!

As I mentioned previously, I’m going to be doing a short series of blogs on design in visual novels. I’m not going to be explaining how to make a logo or GUI per se, but hopefully I can give you some tools and point you in the right direction.

First blog is on design theory. Now, now, no groaning. The theory is actually pretty important and while I hate to smack people in the face with it straight up, it must be done. I’ll try to keep it as simple as possible. The theory is what allows you to actually design, to think about your problems and solve them. Some people would already be using these principles out of aesthetic instinct for what looks good, but the theory can help you when you get stuck because it allows you to analyse the problem in a logical manner.

*Note: I’m a graphic designer, not a web designer. As such I actually specialise in print design rather than on-screen design. While the two disciplines share a lot of similarities, there are also some distinct differences. There are some areas that I am not fully informed on, but I will do my best to cover the basics.

Now we’ll start with the biggest chunk of theory before I move onto the design principles and elements.

 

SEMIOTICS:

Semiotics is the language and study of signs. In this instance, a sign is any piece of visual information that signifies meaning beyond its literal form. Humans read these signs and interpret information from them. For instance, letters and words. Letters and words are abstract shapes that we have been taught mean something. CAT for example doesn’t look anything like a cat. But it means cat. In fact it brings to mind many things that you would personally relate to the word cat. So the arrangement of these three abstract symbols have signified to you meaning beyond what they are.

Signs can range from symbols, like the Cross or the Star of David to refer to specific religions, to more complex images like a Ferrari representing wealth or the scale that means justice and balance. In fact, you read, and have read, images every single day you have seen the world (discounting the couple weeks in the beginning). Some are instinctual and some are taught. We read people’s body language and emotions, we read brands and logos, we read colours and type. All of these things gather meaning to us until they are much more than what they are physically. It’s why a logo is a company’s most precious asset, because that one image can evoke numerous meanings and emotions in people without actually having to spell it out.

To create good design, you have to understand how people read things and how to manipulate that in order for you to convey what you want. That is what a designer does. We are communicators. It is our job to pass on the correct message to people in a way that they are most likely to understand.

You shouldn’t be picking your colours, typefaces, styles and compositions arbitrarily or just because you personally like them (though that can factor into it). Instead, you should be stepping back and asking yourself ‘What do I want to say here? What do I want to communicate to the people who look at this?’ When you answer these questions, you will find directions so you can pick the right combinations of signs in order to signify what you want. While there is no such thing as one design being better than all others, some are definitely more appropriate.  I’ll be going into this further when I talk about Design Processes next time.

For further reading  try checking out Semiotics for Beginners

 

THE ELEMENTS AND PRINCIPLES OF DESIGN

The elements and principles of design are not universal. Unlike the scientific communities, international designers have never gotten together to actually standardise what these are and what they mean. People call them by different names, or split up the categories and so you will find sources telling you different things. As such, I can’t tell you anything definitively, but I’ll try and explain the ones I know of.

Hopefully this list is quite a nice way to help focus you and help you problem solve. If you get stuck, try going through the list and thinking about each element separately to see if your answer lies there. None of these exist in isolation; they usually work together in different combinations. You will see a lot of cross over as I explain, which should hopefully help you understand  how they belong in context with one another.

For further reading, the most comprehensive guide is Universal Principles of Design but I wouldn’t recommend that unless you were really into learning about them as it’s quite in depth.

 

THE ELEMENTS

blog_0013_Line
LINE

A line is defined as a mark that connects 2 points. It’s the 2D plane. A line can be of different thicknesses, go in different directions, be straight or curved. A line can define space, separate elements, connect areas, emphasis things. Sometimes lines might not even be physical and are instead the result of lining up elements to create an imaginary line of focus or direction.

 

 

blog_0012_Layer 1
SHAPE

Further on from line, you have shapes. Squares, circles, rectangles, triangles and so on. Shapes can contain elements that belong together, they can highlight and draw focus to different things, they can be used to create patterns within a design so that the shape takes on a certain meaning, like if a particular shape was always used as a warning sign in your design. Shapes can have personality. A rectangle is strict and formal, while a circle is seen as more friendly and approachable. Organic shapes are also in contrast to non-organic shapes.

 

blog_0011_Layer 3
SIZE

Size is how big or small something is in relation to other objects. Size is a great way to create hierarchy since big things can attract a lot of attention while smaller things can be secondary. For example a Headline vs the Body Copy in a newspaper. Size can also help you create balance with your content, make things easier or harder to read or create emphasis through contrast of different sizes. Someone shouting might call for a bigger text size for instance, since we would read the bigger size as being vocally louder.

 

blog_0010_Layer 2
SPACE

Space is any given area. Space is very important in design and you will often hear people talk about ‘white space’. White space doesn’t have to be white. What it refers to is empty space, space you haven’t put content in. Space is used to group or separate elements, make things easier for people to read, direct people through a design or even create certain emotional reactions. A single word on an empty page could seem very lonely or peacefully, while an overcrowded page might seem fun or make people feel anxious.

 

blog_0009_10
TEXTURE

Texture refers to the tactile feel of something. This can be literal, for instance if a designer used rough paper instead of smooth to create a certain effect, or it can be implied, like using a stippling effect to create the illusion of bumps on paper. Humans are very tactile creatures; we like to touch things (and as such often have to be told NOT to touch things). Texture can give things a lot of meaning, especially if you are mimicking something from the real world. Maybe you want your interface to have the texture of metal because it gives meaning to your design. Maybe something natural like wood may be more appropriate. Maybe something smooth and glossy like glass is more called for.

 

blog_0008_Layer 4
COLOUR

Humans love colour. It is very important to us. Colours have a huge amount of impact in design and there has been a lot of research done on how humans interpret colour and what it means to us. Colours have biological impacts. Red and yellow increase appetite (and fast food places specifically use certain tones that also make us uncomfortable after a certain amount of time so we move on quickly) and surgeries are often painted green so surgeons do not get dizzy after looking up from staring at red for so long as the eye gets tired . Colours also have a psychological impact. Some colours invoke certain emotions and create different reactions based on context. This is also influenced by the culture you were brought up in where colours have different meanings attached to them. Colour is a great way to convey meaning, highlight important content and differentiate between elements or information.

 

blog_0007_Layer 5
VALUE

Value is closely linked to colour and refers to how light or dark something looks. Colour can actually be defined with a number of terms (that are often confusing) including Hue, Value, Chroma, Luma, Tone, Reflectiveness and so on. In this instance it’s only about how light or dark something is. Value can be used to create contrast, like if you put a dark object near a light one, balance, because a darker object visually weighs more than a light one or direction, if you go from light to dark.

 

blog_0006_ABC 123 _!~
TYPOGRAPHY

Typography refers to type. Letters, numbers, symbols and signs. Like the other elements, typography has great potential to help you communicate, and not just in the literal sense where a word means something. Typefaces have personalities. Serifs (when the letters have little feet, like Time New Roman) tend to be serious, older looking and have an official presence. A San-serif (which means no serifs, such as Arial) is more modern, easy going and fun. There are a wide range of different styles and tastes and you will find most sites will divide their content by type (Serif, Script, Blackletter) and Feeling (Casual, Elegant, Rough). When picking out a typeface, try and think about what type of personality it should have, as if it was a character.

Typography doesn’t just refer to the typeface you choose. It’s also how you set the type, the point size (how big), weight (light, bold, italic), kerning (space between letters) and leading (space between lines). Typography is a very huge subject and it takes a while to wrap your head around it. I’ll go into it further later on as best I can as there are a lot of different things to consider and ways you can place with it.

 

THE PRINCIPLES

As you read through these you will probably notice that I have already mentioned some of them in the elements. This is because the elements are what cause the principles. When you are trying to get a specific principle to work, try thinking of how the elements could effect it and how you might use them.

blog_0005_Layer 6
PROXIMITY

Proximity refers to how close or far things are from one another. Proximity can either associate different elements (I’ve grouped these things because they belong together) or disassociation (I’ve put these things far apart because they do not belong together). Obviously space is a big element here. Proximity can help you control how people read things and in which order they read them. It can create unity or conflict between the elements.

 

blog_0004_Layer 7
CONTRAST

Contrast is the degree one thing differs from another. Like proximity, it can be used to group or not group elements. Elements of similar contrast (for instance in tone or size) will be seen as more likely to relate to each other than elements that have a large contrast. Use contrast for when you need to define certain things, when you need to draw attention, or when you want things to belong with one another.

 

blog_0003_Vector Smart Object
REPETITION

Repetition is patterns. Humans love to look for patterns, to find the order in the chaos. As such, we will pick up repetition very quickly and give it meaning. Repetition is a great way to help understanding. For instance, a page number always being in the same place on a page, so people know where to look for it. By repeating a design, people will link them together and understand them quicker. It can also be used to create unity. For instance, maybe you are using a certain element in your logo. And then you use it in the rest or your design. You reuse the colours as well. Suddenly all these different bits and pieces are visually unified and they belong together.

 

blog_0002_Layer 8
ALIGNMENT

Alignment refers to when things do or do not line up. Elements that line up will be seen as more related to each other than elements that are not. Alignment also helps create order and focus within a design, which makes things a lot easier to read. Designers often use a grid of some sort so organise the different parts of their design, though sometimes this grid is also broken. The use of a grid typically creates a more pleasing design, as the elements lining up simply looks better and humans prefer it. However not aligning things is a great way to make people feel uneasy and anxious if that is your intention.

 

blog_0001_Layer 9
BALANCE

Balance is quite a big principle. There are two primary types, symmetrical and asymmetrical. Symmetrical design is when everything is perfectly split in two. You have 4 orange circles; you put two on one page and two on the other. This is balanced. Symmetrical balance is fairly easy to achieve, but not particularly interesting to look at. Asymmetrical balance is a lot harder to do, but far more interesting. Asymmetrical balance requires you to understand optical balance, which is how elements visually weigh against each other. You will probably instinctively notice when something is unbalanced as it will start to make you feel uneasy as if something were off. Figuring out how to fix it totally depends on what you are doing. Big objects weigh more than little, dark more than light, the closer something is to the edge the more it will seem to weigh. There are a number of little tricks to work it out, but you generally can follow your gut instinct on it. You should be able to feel when something isn’t balanced right.

 

blog_0000_SHOUT!
EMPHASIS

Emphasis is when you draw attention to a particular element. When you emphasis something, you are saying that that thing is important and people should look at it before the other things. Headlines are larger so you read them first. We might underline or bold a word of importance. Maybe we make a certain image bigger than the others. You should use emphasis to direct the viewer, to let them know what they should do, what they should remember, what actions are the most important. Emphasis can make a work more dynamic and interesting to look at because it will have direction and volume, so long as you emphasis the right things.

 

And that concludes the first blog post! Hopefully I didn’t bore you all to death. If you have any questions, feel free to ask J

Next up: Design Processes.

Comments

  1. Thanks for starting this blog Auro! I now realise that I have been neglecting some elements when it come to designing. I’m also guilty of choosing and placing elements because they ‘look good’ or were requested and never looked into it deeper. As a graphic designer do you automatically analyse the message behind designs?

    • I’m glad you like it! Don’t worry, a great deal of design is doing ‘what you think looks good’. That is because a great deal of your instincts will align with best practice since it’s what humans find appealing. But understanding the theory can be the biggest help when you get stuck, because it gives you context for the choices you have made. It’s very much a creative practice, but like art, the theory can be used to guide you.

      Good design should be able to pass on it’s message regardless of whether the viewer knows design or not. But a graphic designer will break down the how and why behind design. This takes a little while, and it’s just like any form of education where one of your first steps is analyzing what everyone else is doing. I definitely recommend looking around at other designers and seeing how they solve their problems since it can be a great way to learn! One of the main things I had to do while I was at uni was write rationales. I had to explain why I picked a certain colour, or why I choose this layout or anything I did in order to communicate the message and fulfill the brief. So by understanding what others are doing, and looking at the choices you make, you can start making logical connections that can make problem solving way easier in the future :)

      Let me know if I haven’t answered your question properly or if you have any other questions ^_^

  2. Mehedi Hassan
    May 30, 2015 - 4:41AM

    Nice. I like it.. it’s easy to understanding the work that I should do.

  3. Bookmarked :)

Leave a Reply

Your email address will not be published / Required fields are marked *