What's the difference between design theory and design elements? Every choice that a designer makes has a specific effect on the audience. Design theory is a system that explains how and why this happens. It gives designers a deeper understanding of how the different design elements can communicate a specific message. Typography is an important part of your design process and, whilst is part of design theory, has its own section.
Read the summary first to get a broad understanding, then look at the detailed explanations for a more in-depth understanding and coverage.
Certainly, design theories encompass a wide range of principles and concepts that guide the creation of visually appealing and effective designs. Let's explore each of the mentioned design theories in more detail below. Under this section, these are explained in greater technical depth, making reference to some research and design language.
Colour theory involves understanding how colours interact and how they can be combined to create visually pleasing designs. It includes concepts like the colour wheel, complementary colours, analogous colours, and colour harmony.
Semantics in design refer to the meaning or interpretation that people associate with visual elements. It's about using symbols, images, and colours to convey specific messages or evoke certain emotions.
These principles focus on the overall composition of a design. Unity ensures that all elements work together cohesively. Harmony involves creating a sense of order and consistency. Balance refers to the distribution of visual weight in a design, whether it's symmetrical, asymmetrical, or radial.
Form and function theory emphasises that the design should not only be visually appealing but also practical and functional. It's about finding a balance between aesthetics and usability.
UX design focuses on the overall experience of users when interacting with a product or system. It includes aspects like usability, accessibility, and user satisfaction. UI design, on the other hand, deals with the specific interface elements users interact with, such as buttons, icons, and layout. Both UX and UI design are crucial for creating user-friendly and intuitive designs.
Responsive design involves creating layouts and interfaces that adapt and respond to different devices and screen sizes. It ensures that a website or application looks and functions well on various platforms, such as desktops, tablets, and smartphones.
Understanding and applying these design theories can greatly enhance the quality and effectiveness of visual communication and user interaction in various design projects.
In the context of digital media, various elements and principles of design play a crucial role in creating visually appealing and effective content. Let's explore each of these elements and principles in detail, with examples. There is overlap with the theory above, but these areas are key to forming a good photo or shot. To help with references, this also looks at multimedia elements in the examples.
Definition: Pattern refers to the repetition of specific visual elements within a design, creating a sense of organization and consistency.
Example: In a website's background, a pattern of small British flags can be used to create a thematic design element, reinforcing a sense of national identity.
Definition: Space in digital media refers to the area within the design where elements exist. It can be positive (occupied by elements) or negative (empty or white space).
Example: In a minimalist app interface, ample white space around buttons and text enhances readability and focuses the user's attention on essential elements. The movie Jaws uses space to give the feeling of vastness when out at sea.
Definition: Colour theory involves the use of different hues, shades, and tones to evoke emotions, convey messages, and create visual interest.
Example: A food delivery app might use warm colours like red and orange to stimulate appetite and convey a sense of urgency for users to place orders. A fantasy film might use bright colours to enhance the story and make you feel like you're somewhere special, or more dystopian films will use monochromatic colours (such as blues) to evoke negative emotions.
Definition: Context refers to the circumstances or information that surround a particular design, influencing how it is perceived and understood by the audience.
Example: A social media post featuring a video about British history might include captions and hashtags related to historical events, providing context for viewers unfamiliar with the topic.
Definition: Texture in digital media involves the visual representation of surface qualities. It can be tactile (able to be touched) or implied (suggested through visuals).
Example: A photography website might use high-resolution images to showcase different textures, such as the rough surface of a stone wall or the smoothness of a silk fabric.
Definition: Balance refers to the distribution of visual elements to create a sense of equilibrium. It can be symmetrical, asymmetrical, or radial.
Example: A website with a large, bold logo on one side balanced by a menu and content on the other side creates a visually pleasing and balanced layout.
Definition: Tension in design is created by elements that are in conflict or contrast, adding visual interest and excitement to the composition.
Example: An advertisement featuring a contrast between vibrant, energetic colours and a grayscale background creates visual tension, drawing viewers' attention to the colourful elements. In a film, tension can be brought through the use of negative space, tone or startling or unhinged motifs.
Definition: Form refers to the three-dimensional shape or structure of an object, both in the physical world and in digital representations.
Example: In a 3D modelling software interface, digital artists can manipulate forms to create realistic representations of objects, characters, or environments.
Definition: Proportion involves the relative size and scale of elements within a design. Proper proportion ensures that elements are aesthetically pleasing and harmonious.
Example: In an infographic about British wildlife, the size of animal illustrations is proportionate to their real-life counterparts, allowing viewers to compare their sizes accurately.
Definition: Value refers to the lightness or darkness of a color. It is crucial for creating contrast and emphasizing certain elements within a design.
Example: A photography portfolio website might use varying levels of brightness and contrast to highlight specific areas of a photo, directing the viewer's gaze and adding depth.
Definition: Harmony in design involves creating a sense of unity and cohesion among different elements, ensuring that the overall composition feels visually pleasing and balanced.
Example: A travel website using a consistent colour palette, typography, and imagery across different pages achieves harmony, providing a seamless and cohesive user experience.
Definition: Lines can be straight, curved, vertical, horizontal, or diagonal. They guide the viewer's eye, define shapes, and can create a sense of movement or stability.
Example: On a British tourism website, horizontal lines might be used to separate different sections, while diagonal lines in images can create a dynamic feel, encouraging exploration.
Definition: Unity is the principle of design that ensures all elements work together to create a harmonious and visually appealing composition.
Example: In a mobile app interface, consistent iconography, typography, and button styles create unity, making the app feel cohesive and easy to navigate.
Understanding and applying these elements and principles in digital media design can greatly enhance the visual impact and user experience of websites, apps, advertisements, and various other forms of digital content.
Semantics is the philosophical and scientific study of meaning in natural and artificial languages. In the context of digital media, semantics often refers to the meaning and interpretation of symbols, text, and other elements of a digital representation.Semantics is about understanding the meaning in languages. In digital media, it’s about how we interpret symbols, text, and other elements. For example, a red rose in a photograph might symbolise love or romance.
Example: in a photograph, semantics might refer to the meaning behind a certain object or symbol in the image. If a photograph features a red rose, the semantics of the rose might be love or romance, as red roses are commonly associated with these concepts.
Semiotics is the study of meaning-making on the basis of signs. Semiotics of photography is the observation of symbolism used within photography or “reading” the picture.
Example: consider a photograph of a road stretching into the distance. The road can be a sign or symbol (signifier), and it might signify a journey, adventure, or the future (signified). The viewer’s interpretation of this sign within the context of the image is the semiotics of the photograph.
Composition in photography refers to the position of elements inside the frame and how they interact with each other. It’s about the visual structure of you
Example: if you’re photographing a landscape, you might decide to place a tree in the foreground to frame a mountain in the background. The way these elements are arranged in relation to each other is the composition of the photograph3.
Pictorial space is the illusory space in a painting or other work of two-dimensional art that seems to recede backward into depth from the picture plane, giving the illusion of distance.
In photography or moving image, this could be demonstrated by a photograph of a landscape where the use of perspective and focus gives a sense of depth. The objects closer to the camera seem larger, while those in the distance appear smaller, creating a sense of three-dimensional space in a two-dimensional image.
Certainly, delving into greater technical depth requires a more detailed exploration of each design theory. Let's break down each theory further below. To find out more, consult the course textbook or use other research sources such as the WWW, design textbooks and videos.
Additive and Subtractive Models: Understanding the differences between additive colour models (like RGB used in digital design) and subtractive colour models (like CMYK used in print) is essential. This knowledge aids in precise colour reproduction across various mediums.
Colour Spaces: In-depth knowledge of colour spaces such as sRGB, Adobe RGB, and ProPhoto RGB is crucial for digital designers. Different spaces have varying gamuts, affecting the range and accuracy of colours that can be displayed or printed.
Colour Psychology: Beyond aesthetics, colour psychology delves into how different colours evoke emotions and influence user behaviour. Designers must understand these psychological nuances to create targeted user experiences.
Colour Harmony: Colour harmony involves combining colours in a way that is visually pleasing. Filmmakers and photographers use harmonious colour combinations to create balanced and aesthetically appealing compositions. Common harmonious schemes include analogous colours (neighbouring colours on the colour wheel) and triadic colours (equally spaced colours on the wheel). Mastering colour harmony is fundamental to creating visually engaging and harmonious images.
Visit this website to learn more about colour harmony: https://blog.thepapermillstore.com/color-theory-color-harmonies/
Symbolism of Colour: Different colours carry symbolic and cultural meanings. For instance, red often symbolises passion, love, or danger, while green may represent nature, growth, or envy. Understanding these cultural connotations enables filmmakers and photographers to convey subtle messages and add depth to characters or scenes. Careful selection of colours for costumes, props, and backgrounds can enhance the narrative and audience connection.
Colour Temperature: Colour temperature, measured in Kelvin, defines the warmth or coolness of light sources. Warm colours (lower Kelvin values) create a cosy, intimate atmosphere, while cool colours (higher Kelvin values) convey a sense of detachment or clinical precision. In filmmaking and photography, controlling colour temperature is crucial for setting the desired mood and ambiance, particularly when working with natural and artificial lighting sources.
When looking at primary colours, it's important to understand whether you are in an additive or subtractive colour space. Starting with an absence of colour (black) we add red, green and blue (RGB) to form white, or variations to create any colour in between. However, when the page is already white, you cannot add colour. Instead, you subtract colour through the primary colours of cyan, magenta and yellow (CMY). These pigments, etc., then block wavelengths of light and combining CYM together will deliver black.
The wheel below is an artist's wheel and discusses subtractive colour. Unfortunately, since cyan is close to blue and magenta to red, the system gets corrupted for the ignorant masses and becomes (wrongly) yellow, red and blue. Some systems use CMYK with the k standing for black (as blue is already using B). This pigment is used to save on CYM pigment waste.
An example of how applying each light channel, red, green and blue, to a full-color photograph alters its color appearance. The RGB model is primarily used for screen displays.
When representing colours in your work, you should use a HEX (hexadecimal) value to give the exact colour. Hex is a number notation used with computers that uses base 16 (denary/decimal uses base 10). For 10-15, we use the letters A-F, so given numbers start at 0, a single hexadecimal digit can range from 0 - F (0-15). 24-bit colour (the standard for modern computers) has three components for each colour (RGB). Each colour channel can go from 0-255. Two hex digits can represent 255, thus FF00FF is seen as Red: FF, Green: 00, Blue: FF or 255, 0, 255. This can be confusing to non-computer scientists, but most programs can give you your colours using hex. It is also used extensively in HTML for website creators,
You can read more about colour as well as colour psychology in this website article: https://blog.colornavigator.net/color-psychology
Iconography and Symbolism: A deep understanding of cultural and contextual symbolism is necessary to ensure that icons and symbols used in designs are universally understood. Icons should be intuitive and not misinterpreted.
Colour Semiotics: Specific colours have cultural and contextual meanings. For instance, red might symbolise danger in one culture but signify luck in another. Designers must consider these semiotic nuances while choosing colours.
Gestalt Principles: Principles like proximity, similarity, closure, and continuity explain how humans perceive visual elements as unified wholes. Applying these principles guides the arrangement of elements for maximum impact and user comprehension.
Visual Hierarchy: Understanding how visual elements guide user attention is vital. Techniques like typography hierarchy, contrast, and scale influence the order in which users perceive and process information.
Balance is a fundamental principle of design that refers to the distribution of visual elements within a composition. It ensures that the design feels stable and harmonious. There are three main types of balance in design: symmetrical balance, asymmetrical balance, and radial balance.
1. Symmetrical Balance
Symmetrical balance occurs when elements are arranged equally on either side of a central axis. It's often used to create a sense of stability, formality, and order.
Example: A website with a symmetrical layout might have a logo in the center, with navigation menus and content mirrored on both sides. This creates a formal and balanced visual structure.
2. Asymmetrical Balance
Asymmetrical balance occurs when different elements are placed on either side of a central axis, but their visual weight is balanced. This type of balance is more dynamic and lively than symmetrical balance.
Example: A poster design might have a large image on one side and smaller text and graphics on the other side. Even though the elements are not the same, their arrangement creates a balanced composition through careful consideration of their visual weights.
3. Radial Balance
Radial balance occurs when elements radiate out from a central point. It's often used in designs where the central point is a focal point, and other elements are arranged around it.
Example: A circular logo with text and graphics arranged around the circumference creates a radial balance. This design technique is commonly seen in badges, emblems, and some website designs.
Tips for Achieving Balance in Digital Media Design:
Visual Weight: Consider the visual weight of each element. Larger, darker, or more complex elements have greater visual weight than smaller, lighter, or simpler elements.
Color Balance: Balance colors across the composition. Darker and more saturated colours tend to have more visual weight than lighter and less saturated colours.
Texture and Pattern: Textures and patterns can add visual weight. Use them carefully to balance the overall composition.
Negative Space: Negative space (empty space) is as important as the elements themselves. Proper distribution of negative space helps in achieving balance and preventing overcrowding.
Experimentation: Don't be afraid to experiment with different arrangements. Sometimes, breaking the balance intentionally can create emphasis and draw attention to specific elements.
Consistency: Maintain consistency in design elements such as typography, iconography, and spacing to create a sense of unity, which contributes to overall balance.
Understanding and applying these principles of balance can significantly enhance the visual appeal and effectiveness of digital media designs, ensuring that the audience's attention is captured and the intended message is communicated clearly.
Usability Testing: Conducting usability tests and employing techniques like eye-tracking studies help in understanding how users interact with the design. This data informs iterative design improvements for enhanced functionality.
Accessibility Standards: Compliance with accessibility standards (such as WCAG) ensures that designs are usable by people with disabilities. Designers must be well-versed in these standards to create inclusive interfaces.
Signifier and Signified: Understanding Ferdinand de Saussure's theory of signifier (the form a sign takes) and signified (the concept it represents) is fundamental. Design elements act as signs, and comprehending their signifier-signified relationship aids in precise communication.
Iconic, Indexical, and Symbolic Signs: Charles Sanders Peirce's classification of signs into iconic (resemblance), indexical (cause-and-effect), and symbolic (conventional association) helps designers choose appropriate visual elements for conveying meaning.
See below for more information on semiotics.
User Research Methods: Proficiency in qualitative and quantitative research methods, including surveys, interviews, and A/B testing, allows designers to gather actionable insights about user behaviour and preferences.
Information Architecture: A deep understanding of information architecture principles helps in organising content and functionalities logically. Card sorting, tree testing, and user flow analysis are essential techniques.
Interaction Design Patterns: Knowledge of common UI patterns (like accordions, carousels, and modals) and when to use them ensures consistent and intuitive user experiences across applications.
Fluid Grids and Media Queries: Implementing fluid grid layouts that adapt to different screen sizes, along with media queries in CSS, is fundamental. Responsive typography and flexible images are key components of a responsive design strategy.
Performance Optimisation: Optimising assets, minimizing HTTP requests, and employing lazy loading techniques are crucial for ensuring fast load times on various devices and network conditions.
Mastering these technical aspects empowers designers to create sophisticated, user-centric designs that not only adhere to aesthetic principles but also provide seamless, meaningful, and accessible user experiences across diverse platforms and devices.
The following is an extract from https://guelphhiking.com/Elements-of-Design.
Design elements are the basic units of any visual design which form its structure and convey visual messages. The elements of design are line, shape, form, space, texture, tone (or value) and colour, "These elements are the materials from which all designs are built."
Line is an element of art defined by a point moving in space. Lines can be vertical, horizontal, diagonal or curved. They can be any width or texture. And can be continuous, implied, or broken. On top of that, there are different types of line, aside from the ones previously mentioned. For example, you could have a line that is horizontal and zigzagged or a line that is vertical and zigzagged. Different lines create different moods, it all depends on what mood you are using a line to create.
Similarly stars in a constellation connected via imaginary lines are a natural example of using lines in a composition.
Lines are more than just dividers -- the right lines can convey movement and emotion, tying together your composition and making it looked polished and professional.
Line quality in drawing refers to the characteristics and attributes of lines used in an artwork. It encompasses how lines are drawn, including thickness, texture, weight, direction, and variation.
A shape is defined as a two dimensional area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture.
For example, a square that is drawn on a piece of paper is considered a shape. It is created with a series of lines which serve as a boundary that shapes the square and separates it from the space around it that is not part of the square.
Geometric shapes or mechanical shapes are shapes that can be drawn using a ruler or compass, such as squares, circles, triangles, ellipses, parallelograms, stars, and so on.
Organic shapes are irregular shapes that are often complex and resemble shapes that are found in nature. Organic shapes can be drawn by hand, which is why they are sometimes subjective and only exist in the imagination of the artist.
Curvilinear shapes are composed of curved lines and smooth edges. They give off a more natural feeling to the shape. In contrast, rectilinear shapes are composed of sharp edges and right angles, and give off a sense of order in the composition. They look more human-made, structured, and artificial. Artists can choose to create a composition that revolves mainly around one of these styles of shape, or they can choose to combine both.
Shapes: they're not just for preschoolers! A shape can be loosely explained as anything defined by boundaries. There are two categories of shapes to consider:
Geometric shapes, which are defined by perfect, uniform proportions (such as a circle, square, triangle), and organic shapes, which have less well-defined edges, free-flowing proportions, and essentially no rules (such as wiggly, blob-like things that don't fit into any real category).
When working on a design, consider both the shapes you're deliberately incorporating (the positive shapes), and the shapes naturally formed around those shapes (the negative shapes).
Perhaps the most famous example illustrating the distinction of positive and negative shapes is Rubin's vase. Developed in 1915 Danish psychologist Edgar Rubin, this now-ubiquitous optical illusion shows two completely different images when the negative shapes are viewed vs. when the positive shapes are viewed.
Form is a three-dimensional object with volume of height, width and depth. These objects include cubes, spheres and cylinders. Form is often used when referring to physical works of art, like sculptures, as form is connected most closely with three-dimensional works
When a shape acquires depth and becomes three-dimensional, then it takes on form. For example a circle is a shape. Corresponding forms can be cylinders and spheres. A triangle is a shape which can be a pyramid as a form. In addition to geometric forms, there can also be amorphous forms.
As a photographer one needs to think about how a 3 dimensional object can be captured on a 2 dimensional screen or piece of flat paper, but still be obviously 3 dimensional. Remember that photography means painting with light. The trick is to pay attention to the light and shadows. Back lighting is most likely to create an image of a shape. Side lighting is more likely to create more light and shadowed areas on the object, which provides more scope for enhancing the form.
Check the 2nd picture below to see the effect of shadows, even though the day was overcast and rainy.
In sculpture, form is of the utmost importance, though it can easily be introduced into drawing and painting using techniques. Baroque sculptor Bernini was a master of form, carving his sculptures in a way that gave enjoyment from any perspective. Form is also a big consideration in architecture, with acclaimed architects like Frank Lloyd-Wright, Zaha Hadid Zaha Hadid, and Tadao Ando giving careful consideration to this element in their designs.
Here's a quick quiz: empty space in a photograph is a) good b) bad. You're right, it was a trick question. The answer is sometimes a, sometimes b, depending on your subject and scene. But the reason I asked you that question is because a common mistake among hobby photographers is in neglecting empty space altogether, all the time. The truth is that empty space can be a very effective compositional tool; the trick is in learning when to use it, and when not to.
Space can be understood as that part of your photograph that exists around a subject, usually the part of the frame that's empty or filled with a vast expanse of sky, water or some other simple background element that doesn't have a lot of distracting elements of its own. Second, it can be used to describe the way in which your foreground and background combine to create an image that has depth.
First let's talk about positive and negative space. The first myth to dispel when talking about space is that negative space--the empty area around your subject--equals a boring photograph. In fact, negative space can actually draw your viewer's attention to a subject, as well as invoke varying emotions. Depending on the setting, those emotions can range from feelings of isolation to feelings of joy, or even a sense of opportunity. Additionally, when you separate your subject from a cluttered background you are simplifying your image, thereby making it more compelling. A simpler picture often has more impact. We often see something that catches our eye and we want to take a picture. Our brain filters out the irrelevant details, but the film in the camera or the sensor does not do this, since it does not know what you think is special.
In order to get the viewer to see what you want them to concentrate on, you can move in close, use a shallow depth of field to blur the background, or angle the camera so that there is mostly sky or water around your subject, or that the background is less cluttered and far enough from the subject to simply provide some soft colour, etc. Remember, very often less is more effective.
To get a handle on when to use space and when not to, think of your camera frame as a box you're putting your subject into. Is she looking out of the box towards the camera? If so, the viewers of that photograph are probably going to be OK with a tightly cropped frame. But what if she is looking away from the camera, at something that isn't in the frame? Then the box you've just put her in is going to seem far too confining if it is tightly cropped. Your subject needs some space to look into. If you don't give it to her, the photograph is going to make your viewer feel uncomfortable or even trapped.
Empty space creates a sense of possibility or mystery. What is she looking at so intently? Is there someone else off camera, or is there an exciting or beautiful scene on the other side of that frame? The question will draw your viewer's eye into that space and create interest that wouldn't be there in a similar, but tightly-cropped version of the same image.
Later on we will talk about the Rule of Thirds and how that can be applied as suggested above.
This is only a two dimensional image of a tree, but appears to have the texture of three dimensional bark. Texture refers to the physical and visual qualities of a surface.
Texture can be used to attract or repel interest to an element, depending on how pleasant the texture is perceived to be.
Texture can also be used to add complex detail into the composition of a design.
Tactile texture, also known as "actual texture", refers to the physical three-dimensional texture of an object. Tactile texture can be perceived by the sense of touch. A person can feel the tactile texture of a sculpture by running their hand over its surface and feelings its ridges and dents.
Visual texture, also referred to as "implied texture", is not detectable by our sense of touch, but by our sense of sight. Visual texture is the illusion of a real texture on a two-dimensional surface.Any texture perceived in an image or photograph is a visual texture. A photograph of rough tree bark is considered a visual texture. It creates the impression of a real texture on a two-dimensional surface which would remain smooth to the touch no matter how rough the represented texture is. In order to create a sense of texture in a picture it is important to pay attention to the direction of the lighting of the subject. Front and back lit subjects are less likely to result in a picture with a high degree of apparent texture. Side lighting is typically the best choice, taking care to explore small changes in the angle of the camera to the subject. As noted in the following picture you can also have reflected light helping to create shadows to boost the impression of a textured surface.
When talking about photography the term tone refers to the overall range of lightness and darkness, and color variation within an image. Also often referred to as ‘value’ the tone of an image can have a drastic effect on how an image ‘feels’; Images containing many dark tones often appear dramatic and sad while images featuring light tones appear happy and vibrant. juxtaposition between image subject and tone can be used to create jarring and powerful images. The difference between the lightest and darkest tones within an image is referred to as ‘Dynamic-Range’.
Tone is incredibly powerful. It is a large part of what sets the mood of the final image.
In black and white photography, the tones are a lot more obvious since it changes the photo to sepia and white or another color and white. However, that doesn’t make the toning of color photography, even though it is subtler, any less powerful. With color photography, it all comes down to enhancing the mood and meaning of the image.
As you’re thinking about tones, start with warm and cool colors, and think about their properties. Warm colors — reds, yellows, oranges and browns — can lend a variety of different feelings to an image, ranging between excitement and welcoming warmth. Cool colors, like green, blue and violet, on the other hand, tend to be more relaxing and refreshing, although blue can be used to indicate sadness.
Color tones can be broken down even deeper than that, however. As you are choosing a tone, it helps to think about the psychology behind colors — in other words, how colors affect people. Here is a quick list of the meaning of various colors to help you choose the perfect tone:
Red is a rare color to use as a cast in a color image, but it has been done before. In general, red has warmth and energy to it, and it can also be used to convey a sense of strength or danger. When you see a red color cast, most often, it will be a shade that trends towards brown.
Orange tones make people think of comfort — good food, warmth and a sense of security.
Yellow is a commonly used tone, and in fact, it is the tone that you’ll get when you take photographs as the sun is getting ready to set for the day — that rich, golden color that makes everything seem more cheerful.
Green is the color of harmony. It tends to make people feel refreshed, so when you add a green cast to an image, make sure that the subject material matches the fresh and tranquil tone you’ve chosen.
Blue is likely the most versatile color. Depending on your subject material, it can indicate serenity or tranquility. Because it is such a chilly color, however, it can also lend a depressing sort of feeling to your images.
Violet tends to make images feel more authentic, and with certain subject material, the image may see more upscale or luxurious. In fact, in monochrome photography, this hue is popular since it conveys a sense of grandeur or motion.
Be aware that shifts in shade mean a lot, too. For instance, a red that trends toward brown, a completely brownish cast, or a yellow-green color can all give the image a completely different feeling than their parent colors will. Experiment in post processing with various shades, and you’ll quickly see what I mean.
As mentioned before, when it comes to tones in monochrome photography, they tend to be a lot more obvious. There are also three ways to add tones to your monochrome images: Add the color to the lightest areas of the photograph, keeping your blacks black, change the color of the blacks and middle tones while leaving the highlights alone, or tone all of the colors across the range.
When it comes to colors, there are several popular options. For instance, sepia is used to soften the image, or to make the image resemble an old-fashioned photograph. If you browse sepia photos, you’ll notice that some trend more towards black, with brownish highlights, while others are sepia all the way through.
With every image that you create, don’t hesitate to tinker with the tones. You’ll be amazed to find that slight adjustments make a huge difference. And, since most of us aren’t attempting to apply tones using obscure and old-fashioned processes anymore, you’ll be able to experiment endlessly to learn what works best for each individual image.
The elements of design create every object around us. Nothing can exist without these ingredients. The discipline of learning the power of these elements and formatting them within the principles of design is the responsibility of the designer. This has many links with the information above, but more succinct.
Typically known as hue. This word represents a specific colour or light wavelength found in the colour spectrum, ranging circularly from red to yellow, green, blue and back to red.
Is a line just a series of points? Or is it the best way to get from point "A" to point "B"? As a geometric conception, a line is a point in motion, with only one dimension - length. Line has both a position and a direction in space. The variables of line are: size, shape, position, direction, number, interval and density. Points create lines, lines create shapes or planes and volume.
Here, mass is interchangeable with volume. A mass is a solid body or a grouping of visual elements (line, colour, texture, etc.) that compose a solid form. Volume is a three-dimensional form comprising length, width, and depth. Three-dimensional forms contain points (vertices), lines (edges), and planes (surfaces). A mass is the two-dimensional appearance of a three-dimensional form.
Also known as motion. This element portrays the act or process of changing place or direction, orientation, and/or position through the visual illustration of starting or stopping points, blurring of action, etc. This is not animation, although animation is an end product of movement, as well as other elements of design.
A two- or three-dimensional element defined by other elements of design.
A technique used in two-dimensional design to replicate three-dimensional surfaces through various drawing and media techniques. On three-dimensional surfaces, it is experienced by touch or by visual experience.
Also known as typography, and it is considered an element in graphic design. Although it consists of elements of design, it is - in itself - often an element in the form of visual communication.
Another word for the lightness or darkness of an area. Brightness measured in relationship to a graded scale from white to black.
The principles of design are applicable to all design disciplines including - but not exclusive to - architecture, art, graphics, fashion, industrial design, poetry, writing, and web design.
The principles of design are tools used to format the elements of design.
The elements of design converge to create a design or arrangement of parts that appear to be a whole with equalibrium.
The "automatic principle." Whenever an element is placed within a format, contrast is created in the various elements. Can be emphasized with contrast in size, shape, color, texture, etc., etc. Offers variety within a visual format.
Utilising movement to create the visual illusion of displacement.
A principle operating on the "slim". Especially important when dealing with clients, where their product or service is more important than the elaboration of design elements. Can also be considered "precise," or "simplistic." Or, it can be considered great design.
Also known as dominance. This condition exists when an element or elements within a visual format contain a hierarchy of visual importance.
A two- or three-dimensional element defined by other elements of design.
A recurrence or repetition of one or more elements within a visual format, creating harmony.
"Oneness," "Harmony," "Gestalt." The condition of completeness with the use of all visual elements within a format.
Writing can be a form of art: a playground for human invention, ingenuity and skill. This applies both to writing by hand (calligraphy) and to letters and characters designed in printed or digital form (typography).
Typography is important in design because it is not just about selecting fonts; it’s about effectively communicating a message, establishing a visual hierarchy, creating a brand identity, ensuring readability, and enhancing the overall aesthetics of the design. It's a powerful tool that can significantly impact how people perceive and interact with visual content.
Typography is vital in design for several reasons:
Readability and Legibility: Good typography ensures that text is easy to read and understand. Proper font choice, size, spacing, and contrast enhance readability, especially in longer passages of text.
Communication: Typography conveys the tone and message of the content. Different fonts evoke different emotions and can communicate seriousness, playfulness, tradition, or modernity. The right choice of typeface can reinforce the intended message.
Visual Hierarchy: Typography helps establish a clear hierarchy in a design. Important information can be emphasised using different font sizes, styles, or colours. This guides the viewer’s eyes and attention, leading them through the content in a logical way.
Branding: Consistent use of typography is a fundamental element of branding. Companies often have specific fonts associated with their brand. The typography used in logos, websites, and marketing materials helps in creating a recognisable and memorable brand identity.
Aesthetics: Typography can enhance the overall visual appeal of a design. Creative and well-executed typography can turn simple text into artwork, making the design visually engaging and attractive.
Accessibility: Proper typographic choices are essential for accessibility. Clear and readable fonts, along with appropriate contrast, assist people with visual impairments in consuming the content.
Credibility: Thoughtful typography can enhance the credibility of a design. A professional and polished typographic treatment suggests attention to detail and quality, which can positively influence how a design is perceived.
Consistency: Consistent typography across various media maintains a unified look and feel. Whether it’s a website, a brochure, or social media posts, consistent typography reinforces the brand and ensures a cohesive user experience.
Iconography and semiotics are terms used in the field of visual communication and art, and they refer to different aspects of interpreting and understanding symbols and signs. It is technically splitting hairs in the art field to separate the two, and they are used by many to relate to the same thing.
Semiotics is the study of signs and symbols and their use and interpretation. Semiotics is the study of the use of symbolic communication. Semiotics can include signs, logos, gestures and other linguistic and nonlinguistic communication methods. As a word, semiotics derives from the Greek sēmeiōtikós, which describes the action of interpreting signs.
It is a broader field that encompasses not only visual symbols but also linguistic signs, gestures, sounds, and other forms of communication. Semiotics examines how signs convey meaning, how they are interpreted by different cultures and individuals, and how they function in various contexts. It explores the relationship between signs, symbols, and the concepts or ideas they represent. In the context of visual communication, semiotics involves the analysis of visual signs and symbols to understand the underlying meanings and messages communicated through images, icons, and other visual elements.
In summary, while iconography specifically focuses on the interpretation of visual symbols and imagery within a cultural or artistic context, semiotics is a broader field that encompasses the study of signs and symbols in various forms of communication, including visual, linguistic, and gestural, to understand how meaning is created and conveyed.
Iconography refers to the visual images and symbols used in a particular artistic, cultural, or historical context. It involves the study and interpretation of visual symbols, icons, and imagery in art, literature, or other forms of visual communication. Iconography explores the meaning and significance of specific symbols, often within religious, mythological, or cultural contexts. For example, in religious iconography, symbols such as crosses, halos, and specific gestures carry specific meanings and convey religious concepts.
A broader category, which also encompasses iconography, but is linked with the study of literal meaning in some form. A sign is a form of language that directly communicates information, often with a specific action required, such as a stop sign on the road. It’s usually quite literal and direct. If you're driving and you see flashing blue lights, this is a sign to pull over because you are being stopped or an emergency vehicle needs to pass.
Symbolism refers to something that represents something else. E.g. a suitcase represents travel, scales represent justice and the law and a red suit may represent Christmas. Symbolism is prevalent in films and literature in many ways. A good blog post highlights the many forms of symbolism in literature and may help with your own research.
Iconography in film and photography refers to the use of symbols, visual motifs, and cultural references to convey specific meanings or themes within a visual narrative. Both mediums often rely on visual symbols and imagery to enhance storytelling, create emotional impact, and communicate ideas. Here's how iconography is used in film and photography:
Characterisation: Iconography can be used to symbolize a character's traits, beliefs, or background. For example, a character associated with religious symbols might represent piety or inner conflict.
Genre Conventions: Different film genres have their own iconographic elements. For instance, a Western film might feature cowboy hats and revolvers, while a science fiction film might include futuristic technology and spaceships.
Cultural References: Filmmakers often use culturally recognized symbols to enhance storytelling. These symbols can carry specific meanings or evoke particular emotions based on the audience's cultural background.
Visual Metaphors: Iconography is employed to create visual metaphors. For instance, a recurring image or symbol can represent a character's internal struggle or a broader thematic element in the storyline.
Historical or Political Context: Filmmakers use iconography to establish the historical or political context of a film. Period-specific clothing, architecture, and symbols help create a realistic setting.
Advertising and Marketing: Iconography is used in photography for advertising and marketing campaigns. Recognisable symbols and imagery can create brand identity and convey messages to consumers.
Social and Cultural Commentary: Photographers often use iconography to comment on social or cultural issues. They might use symbols and imagery to challenge stereotypes, provoke thought, or raise awareness about specific topics.
Documentary Photography: Iconography is essential in documentary photography to represent the culture, lifestyle, and struggles of a community or a particular group of people. Cultural symbols and traditions are often captured to provide insight into a specific way of life.
Fine Art Photography: In fine art photography, artists use iconography to create visually striking and conceptually rich images. Symbols and motifs are carefully chosen to evoke emotions, convey themes, or provoke questions.
Portraiture: Even in portraiture, iconography plays a role. Photographers might use specific props, backgrounds, or symbols to represent the personality or identity of the person being photographed.
In both film and photography, the careful use of iconography and semiotics can add layers of meaning and depth to visual narratives, allowing creators to communicate ideas, emotions, and themes in a subtle and powerful manner.
The YouTue playlists are regularly updated with videos I feel you might find useful in the course of your studies. You can watch the standing video or click to see the entire playlist.