Skip to main content
Loading Explore guides…
Visual Design Theory · Acedra
Home
Explore
Art
Visual Design Theory
Sign in to save
Chat
If YouTube asks you to sign in, open the video on YouTube.
Watch on YouTube
Reload player
Transcript
56 segments
Copy
Hide video
0:07
Hello and welcome to the Design Theory, The Basics of Visual Design course. My name is Robin Louw and I'm a certified UX designer and Adobe Creative educator, and I have more than a decade's worth of visual design experience, most of it being self-taught. Who should take this course? It's for beginner visual, graphic designers looking to improve their designs and explain design decisions and or front end developers that need to understand design theory. Topics that we'll cover.
0:44
We'll cover what design theory is and the relationship between art and design. The basic elements of visual design and the principles for good visual design. So why take this course? You'll have an experienced graphic designer as your instructor, and you will learn to understand the principles necessary for good visual design, which you'll need if you do things such as design, UI, UX, web, design, t-shirt design, print, etc.. So what is design theory?
1:23
Design theory is an approach that helps to understand and explain design knowledge, and it defines the basic building blocks or elements of visual design and design theory describes the principles used when working with design elements. Art is not design. Design helps to solve a problem, whereas art is a bit more diverse. It's, you could say, a form of expression and design theory reference today is influenced by modern art movements and notable influences are the De Stijl
2:11
style of art, which dates back to 1917 and the Bauhaus Art, Architecture and Design School, which dates back to around the same time 1919. Why is design theory important? It allows a designer to clearly explain a design decision, and it's an essential tool for helping graphic and visual designers diagnose design problems. So what are the basic elements of visual design? These are the elements used to create a visual design. They include the following points and lines,
3:00
shapes color texture typography and form points and lines. Connecting to points forms a line and lines help make divisions. Repeating a line creates texture, and straight lines have a length, width and direction. Shapes. Shapes are self-contained areas, lines, color, texture, and or different values define the area, and every object is composed of shapes. Color, also known as you color helps to differentiate items, create depth and emphasis, and organize information. Color theory
4:22
The color wheel. The color wheel is based on the original color circle by Sir Isaac Newton and dates back to 1704. Today, most Color Wheels show 12 colors, three primary colors, as in our example red, green and blue or traditionally red, yellow, blue or even red, green and violet. Then we have three secondary colors, which is a mix of the primary and six tertiary colors, which is a mix of primary and secondary tints and shades. Tint is a color result when white is added, tone is when grays added
5:25
shade is when black is added, and saturation is the strength or weakness of a color. Color temperature. Warm colors include red, orange and yellow, and the variations of these cool colors include green, blue and purple, and variations of these red and yellow are both primary colors within the warm spectrum. While blue is the only primary color within the cool spectrum, greens take on some of the attributes of yellow, while purple takes on some of the attributes of red
6:12
and warm colors appear closer, while cool colors appear farther. Neutrals neutral colors include black, white, gray tans and brown, and these are commonly combined with brighter accent colors. And neutrals can be used on their own, but the meanings and impressions of neutrals depend more on the colors surrounding them. Color schemes. A color scheme is used to set a mood, attract attention or make a statement. This is also known as style and appeal. The color wheel is the basic tool
7:06
for creating color schemes. Monochromatic, complementary triadic and square are types of color schemes the monochromatic color scheme. This is a scheme using only one color and all its tints, tones and shades. It's the easiest color scheme to use, although it can be seen as bland, boring but a safe choice. Complementary color schemes. This is when we match up colors that lie directly opposite each other on the color wheel also include all the tints, tones and shades of both colors,
8:02
and it allows for a wider range of choices. It's great to use as it contains both warm and cool colors and complementary color schemes. Provides contrast Triadic color schemes. This is when you pick one color and then pick two other colors that lie equidistant. Also great to use as it contains both warm and cool colors and it's useful if a temperature needs to dominate the other. Square color schemes. This is when all four colors are spaced evenly around the color circle and works best if
8:56
you let one color be dominant. Although it can be a complicated scheme to use other color schemes exist, and it's also possible to create your own. And today, online tools makes it easy to create color schemes. Meaning of color colors can portray a certain feeling or emotion, and these meanings can change due to cultural differences. Warm colors are seen as positive and energetic, but red can also mean danger or anger. Cool colors are seen as relaxing or reserved,
9:53
but green can also mean greed or envy. White, which is a neutral color, is seen as clean and pure, while black. Also, a neutral color can mean elegance or power, but also sad or evil. Subtractive versus additive. There are two models for clean visual design. CMYK stands for cyan, magenta, yellow and key, also known as black. The CMYK model is a subtractive model that means that CMYK colors are created through absorbing wavelengths of visible light, and CMYK applies to painting and printing.
10:54
RGB stands for Red, Green and Blue. The RGB model is an additive model. This means that RGB colors are created through light waves that are added together, and RGB applies to displays such as computers, televisions and electronics. And when working with the RGB color model ensure that you comply with web content accessibility guidelines or the acronym WCAG. WCAG are recommendations for making web content more accessible for people with disabilities. There are three levels of conformance
11:57
level A, which is a basic requirement level AA, which is overall accessibility and level AAA Enhance accessibility. Try and aim for a level AA contrast ratio between two colors, and there are a variety of tools that exist to make this task easier. Although decorative and inactive text or elements are exempt, Also do not rely on color alone to convey information, prompt a response, indicate an action or distinguish a visual element. Texture, texture is the feel of a surface or perception thereof.
12:58
Repeating a texture creates a pattern, and texture can attract or deter attention depending on how it's used. Typography. Typography refers to the type of font, for example, serif or sans serif, the size of font, the alignment of the font, the color and the spacing of the font. A brief history of typography. Typography has existed throughout human history. The invention of paper was a key element in global cultural advancement and block printing
13:57
also known as wooden printing, was first recorded in Chinese history and movable metal type was already known by the 12th and 13th centuries. Around 1455 inventor Johannes Gutenberg Mass produced the Gutenberg Bible, and this demonstrated the power of the printing press and movable metal type, which marked the beginning of the printing revolution. Typography fundamentals. Typography is the art and technique of arranging type arranged type must be legible, readable, and set the right tone.
14:52
Tone is the mood or feeling conveyed visually, regardless of content. For example, a formal or informal tone, legibility is determined by how easy it is to differentiate the characters in a typeface. For example, an uppercase L from a lowercase L, and readability refers to how easy it is to read words or blocks of text and the style of a typeface affects readability, the baseline. This is an imaginary line, and each line of text rests on the baseline. Cap height.
15:45
This refers to the height of a typefaces capital letters measured from the baseline. For example, flat capital letters such as capital M or II. X height. This refers to the typefaces height of the lower case X. Ascenders, these or the upper part in certain letters that extend beyond the cap height. For example a lowercase d and descenders. These are the lower part in letters that extend beyond the baseline. For example, a lower case y. Weight weight refers to the relative thickness of a font.
16:35
Common weights are light, regular, medium and bold, light being the thinnest and bold being the thickest weight for web typography. Weight can also be defined by using the numerical value range from 100 to 900. Tracking, also known as letter spacing refers to the space between each letter in a word, larger type, such as headlines use tighter letter spacing to improve readability while looser spacing is used for smaller type, which can improve readability. Kerning.
17:19
This refers to custom spacing between different letters. Line length. This refers to the number of characters per line of text. The ideal length for body or paragraph text should be between 40 to 60 characters, and the wider displays can go up to 120 characters with an increased line height, and for shorter line of text. The ideal line length is 20 to 40 characters. Line height, also known as leading, defines the vertical space between baselines and line height is proportional to type size
18:11
and the measurement of line height ignores ascenders and descenders. Paragraph spacing is the vertical space between paragraphs and to maintain vertical rhythm, paragraph spacing should be about the same as the line height. Type alignment is how text aligns where it is placed. Left aligned text is aligned to the left margin, right aligned when text is aligned to the right margin. And this is the most common setting for right to left languages, although it's not recommended for long text.
18:49
If it's a left to right language. Center is when text is aligned to the center, although it's not recommended for long text, and tabular figures or mono space numbers keep values optically aligned for better scanning. And these are ideal for use in tables. Typefaces, serif typeface or font. A serif is a small shape or projection at the ends of a letter. Times New Roman and Georgia are examples of serif typefaces. Slab serifs. These have a heavy stroke weight,
19:32
and Bitter is an example of a slab serif font. Sans-serif typeface. Sans-serif is a typeface without serifs and sans is from the French word that means without. Arial, Verdana and Futura examples of sans-serif typefaces. Monospace typeface. This is a typeface where every character takes up the same width. Roboto, Mono and Source Code Pro are examples of mono space typeface. Handwriting typeface. These have a natural handwritten feel and are better suited for headings and titles.
20:16
FF Market and Indie Flower are examples of handwriting typefaces. Black letter. These have a high contrast stroke with straight lines and angular curves. Amador is an example of a black letter typeface. Script. A script font replicates a calligraphic style of writing, and Bickham script is an example of a script typeface. Display typeface. This is a typeface for use at large point sizes and better suited for headings and titles. Shrikhand in Righteous are examples of display typefaces. Form form
21:06
refers to the volume and mass of 3D objects, and is a combination of two or more shapes and form can be enhanced with different tone, color and texture. The basic principles of visual design. What's are the basic principles? The basic principles can be considered tools to be used with the basic elements and applying the basic principles correctly to the basic elements leads to a successful visual design. Basic principles to consider are unity, gestalt, space, hierarchy, balance contrast scale
21:59
dominance and similarity. Unity. Unity is when all design elements appear to belong together, visually or conceptually. To avoid a boring and overwhelming design, the visual design must strike a balance between unity and variety. And unity also refers to the visual linking of various elements of the work. Gestalt. Gestalt is a German word for form or shape, and is a psychological study of how we perceive visual stimuli. It's the work of early 20th century German psychologists
22:45
Max Wertheimer and colleagues Kurt Koffka and Wolfgang Kohler. It helps to perceive the overall design as opposed to individual design elements. And if design elements are arranged properly, the gestalt or form of the overall design will be made clear. The four properties, emergence, reification, invariance and multi-stability are the key principles of Gestalt. Gestalt properties. Emergence, the Gestalt property emergence is when identifying objects visually,
23:26
our brain will match the outlines to familiar objects we already know, and once the outline emerges, we move on to finer details. Reification. The Gestalt property of reification is when we can visually identify things that are partially obscured as a whole, even if they are not. In example A, we see a triangle when it's three objects. In example B, it's seen as a complete three dimensional shape, while examples C and D as belonging to a single shape. The Gestalt Property Invariance.
24:21
The Gestalt Property Invariance is similar to Reification, but concerns viewing objects from different perspectives. Examples and A, C and D are all recognized as the same basic shape compared to example B. Multi-stability. The Gestalt property Multi-stability is when different interpretations of an object exist and the brain will switch back and forth between the interpretations. The Rubin’s Vase Illusion is a famous example of this. Basic Gestalt principles, Similarity.
25:09
The Gestalt principle Similarity is when elements within an assortment of objects are perceived to be grouped if they are similar to each other, meaning they belong together. Similarity can be affected by attributes of color, size, shape and orientation. In our example, the colour circles are perceived as being grouped and form horizontal rows. Proximity. The Gestalt principle. Proximity is when objects or shapes that are close to one another appear to form groups, even if the shapes, sizes
25:55
and objects are different, they will appear as a group if they are close. In our example, the 32 circles are perceived as being separated into three groups. Closure. The Gestalt principle Closure is when objects such as shapes, letters, etc. are perceived as being whole when they are not complete. If provided with enough information, we will fill in what we perceived are missing parts to create a hole. In example A, we perceive a circle on the left and square on the right.
26:38
Example B, without enough information, it is difficult to form these shapes by looking at it. Figure-ground. The Gestalt principle. Figure-ground is when we perceive elements as either the object or focus known as figure or the background known as ground. Figure-ground is stable when the figure is distinct from the background, and the background does not compete for attention. Figure-ground is not stable. when the figure and the background compete for attention,
27:17
a circle on a background is an example of a stable figure-ground relationship. While the Rubin's Vase, which we covered in more stability, is an example of an unstable figure-ground relationship. Continuation. The Gestalt principle Continuation states that preferring the path of least resistance. We perceive lines as continuing along the established path or direction, and we are less likely to group elements that intersect with unexpected directional changes as being one object.
27:59
For example, the cross keys emblem perceives overlapping keys as opposed to a single object. Common Fate. The Gestalt principle Common Fate states that objects that move on the same path or at the same speed are perceived as belonging to the same group. In example A, circles moving in the same direction are grouped instead of those with a matching color and in example B circles are moving at different speeds and direction, making it difficult to perceive them as a group. Space.
28:43
Space is defined when something is placed in it. White space, or negative space is an important part of visual design, and white or negative space is the empty area around a positive design element. White space does not have to be white to be considered negative space, and negative-positive space is related to the figure-ground gestalt principle. By integrating space into design, it can help reduce noise or clutter, improve readability, and or create an illusion. Hierarchy.
29:30
Hierarchy refers to guiding the eye on a page or screen to view design elements in the order of their importance. Hierarchies are created by using size, color positioning of elements, and many other visual signals. For example, use 2 to 3 type sizes to indicate what pieces of content are most important, or consider using bright colors for important items and muted tones for less important ones. Elements at the top are usually perceived as most important. Balance.
30:11
Balance creates the perception that there is an equal distribution of design elements. Balance can be achieved with or without symmetry in the design, also known as symmetrical or asymmetrical balance, to create balance, establish an imaginary axis and distribute design elements evenly. Choose the kind of balance for what you want to convey. Symmetrical balance is when similar elements are evenly distributed relative to the imaginary axis, and symmetrical balance is quiet and static.
30:53
Asymmetrical balance is when dissimilar elements but of equal visual weight are distributed relative to the imaginary axis. And asymmetrical balance creates a sense of energy and movement. Radial balance is when elements radiate out from a central point in a circular direction and radial balance leads the eye to the center of the composition. Contrast. Contrast is the juxtaposition of dissimilar elements. We use contrast to signal the fact that elements are different,
31:33
and you can create contrast by using size, color and other characteristics. Scale. Scale refers to using relative size to signal importance and rank of elements in a design. It creates interest and depth by demonstrating how each item relates to each other based on size. Usually the most important elements in a design are bigger than the less important ones. For a visually pleasing design, use no more than three different sizes. Dominance. Dominance places focus on a single element
32:13
as the focal point in a design and others being of less significance. Dominance can be established through scaling and contrasting based on size, color, position, shape and other factors. When using dominance, be sure to maintain the unity of the design Similarity. Similarity refers to creating continuity throughout a design without exact duplication. It’s used to make items work together over an interface to help users learn the interface quicker. For example,
32:52
to express continuity from page to page in publications such as in headers, themes, etc. Refer back to the Gestalt principle of similarity.
33:09
Now that we've covered the basic elements and principles of visual design, let's go through a few examples. Here we see the Google homepage making use of white negative space, color and contrast. We have a logo with contrasting colors, and this grabs attention from the white space, the logo is the largest element and above the input field, which places focus on the wide input field, making use of hierarchy and dominance. And if we
33:56
draw our imaginary axis, we can see that we have almost perfect symmetry. In the next example I have an outdoor event poster. We have the element of color, which is a warm color and a simple color scheme. Then we have typography and lines and we can see the font used gives it an informal tone and the use of lines helps create divisions. And with our imaginary axis we can see we have almost perfect symmetry. In the next example, I have a topographic map made up of repeated points and lines,
35:01
which are the elements of lines and texture. And in this photo we have contrasting colors and different interpretations.
35:29
So your assignment goal is to design image using at least two design elements and at least one design principle. Based on what you've learned in this visual design course, and you can do so using Adobe Spark (Express) or if preferred, your graphic design tool of choice. The duration of this assignment is one hour, deliverables will be a link to your designed image as well as make a note of at least two design elements used and at least one design principle used to create your image.
36:10
So if you have not used Adobe Spark before, it's an online design tool which allows you to create social graphics, web pages and short videos, and to use Adobe Spark. All that is required is an Adobe account and you can get started with the free starter plan. And if you're new to design and have not yet created an Adobe account, it's recommended as it allows you to create a Behance profile where you are able to showcase your work. Right. So let's get started with a Adobe Spark.
36:52
With this assignment, you're allowed to be as creative as you like. So now that I'm on the Adobe Spark homepage, I can choose the image or post I'd like to create. I can also choose a template and work from that, but I'm going to choose Instagram post. And when I've selected that I have a choice of templates I can work from. But what I will do is I will simply create my own image. So before I get started, I'll give my project a name and this will be a Instagram post called I Love Pizza.
37:39
So if I select my blank canvas, I can use this as my negative space, but I think I will add an element to my space and I'll use a warm orange color. So now I have one element as part of my image. Next, I'll add another element in the form of text so I can choose a template or I can add my own text. I'll add my own text. I'll simply say, and that is center aligned. I think what I'll do is I'll make it stack. So I go back to editing my text and then I'll make it bigger.
38:33
I'll increase the size of it. Now Adobe Spark has added a backing shape to my text. I'll remove that. And now my type color does not have enough contrast and I think I'll change my type color to white. So I still have my warm color and I think for my image I want to keep the colors warm. And I think the white on the warm orange has a nice contrast. Although the type I had like this type is slightly too formal for my liking. I'll change my type to something a bit more informal.
39:17
Yes, this is the font I would like. I would like something a bit more informal. So I have my two elements color and type and the principle being used. You could say that having this type center aligned, I have almost perfect symmetrical balance, but maybe I'll just tweak things further and I'll add another element. So I can simply say add on the right, I'll choose icon and then I'll search for pizza. I'll choose this pizza pizza slice, and with my pizza slice chosen,
39:59
I'll give it a warm color as well. Now, this is not quite balanced, so I'll just tweak my element and I will just make a slight adjustment for the pizza slice scale down. The image still has a balanced look and I am happy with the look of that, so I'll happy to share that. So before I share, I just have to confirm that I have at least two design elements and one design principle. Yes, I do. So let me head on to the top right corner of Adobe Spark and I can simply say publish, and that will allow
41:01
me to share either as a link, email, Twitter, Facebook, and that's the link you'll need for your assignment, so I can copy that and paste it to my assignment. So by taking this course and completing this assignment, you now be able to clearly explain each design decision you make.
41:33
Well done on completing the basics of visual design course. Let's recap. So now you should know what design theory is and the relationship between art and design. We covered the basic elements of visual design and the principles of visual design, and then reviewed examples of good visual design, making use of both the basic elements and the principles of visual design. And you should have created your own image by applying a basic principle to design elements. Rule of thirds.
42:50
The rule of thirds is a guideline for composing visually compelling images. This is when you divide an image into nine equal zones using horizontal and vertical lines, and you place the focal point of the image where the lines intersect and the top or bottom horizontal lines can be used to place the horizon. The rule of thirds was written by English painter and engraver John Thomas Smith in 1797. Look Room and Lead Room. This is a composition technique linked to the rule of thirds.
43:36
This is done by adding space in front of a person or object. For example, a person looking at something or someone just off screen or a car in motion. Headroom. This is a composition technique linked to the rules of thirds, which refers to the distance between the top of subject's head and top of the frame. It's best to avoid too much or too little headroom. The ideal composition has a subject's eyes positioned one third down from the top of the frame. Leading lines.
44:21
This is a composition technique that guides the viewer into the image and towards a focal point. These could be physical leading lines or implied, also known as subtle leading lines. We also have converging lines. This is when two parallel lines converge to a single point.
Here to help you learn
Sign in to keep a private conversation with your course tutor.
Ask me anything about the material…
Sign in to chat