Visual Design

Visual Design

Creating Graphics with Affinity Designer

The Importance of Color Models

Knowing the basics of different color models is important for when you create a slide, as they explain how colors are defined for use in slide decks.When creating slides, we need to know how to define RGB colors, how to utilize the HSL values to adjust colors to our advantage and how brand CMYK values and web HEX values relate to the colors we need to use in PowerPoint and how to translate them to use in PowerPoint.

4 Basic Color Models

RGB - CMYK - HSL - HEX

RGB is an additive color model commonly used in electronic displays and digital media, while CMYK is a subtractive color model used in printing. RGB works by combining red, green, and blue light to create a full range of colors, while CMYK works by subtracting cyan, magenta, yellow, and black ink from a white background to create colors. HSL is a color model that defines colors based on their hue, saturation, and lightness values, and is often used in design and color analysis. In HEX Colors are defined using a hexadecimal notation, which consists of six characters representing the intensity of red, green, and blue components. Each pair of characters represents one of the RGB components, ranging from 00 (minimum intensity) to FF (maximum intensity). For example, the color white is represented as #FFFFFF (255, 255, 255) in hexadecimal notation.

+info

+info

Ever wondered why certain colors make you feel a certain way? That's what color psychology is all about! It's the fascinating study of how different hues can affect our behavior and perceptions. Colors not only influence how we see the world but also how we experience things like taste. Yes, that's right! A color can actually make your food taste different. But here's the kicker: the way colors affect us can vary depending on who we are. Your age, gender, and cultural background all play a role in how you react to different colors. It's like a colorful journey through your mind! And while color meanings might change from one culture to another, there's a neat little theory that suggests our color preferences stay pretty consistent, no matter who we are. So, next time you're surrounded by a rainbow of colors, pay attention! They might just be influencing you more than you realize.

Color Psychology

+info

Color Accessibility

• Use High Contrast: Ensure sufficient contrast between text and background colors to improve readability, especially for users with low vision or color vision deficiencies.
• Provide Alternative Cues: Supplement color-coded information with additional visual cues such as icons, patterns, labels, or text descriptions to convey meaning.
• Avoid Sole Reliance on Color: Use a combination of color, shape, texture, and typography to convey information, allowing users to interpret content even if they cannot distinguish certain colors.
• Test with Simulations: Use color blindness simulation tools or browser extensions to preview how designs appear to users with different types of color vision deficiencies. This helps identify potential accessibility issues early in the design process.
• Follow Accessibility Guidelines: Adhere to accessibility standards such as the Web Content Accessibility Guidelines (WCAG).

Accessible Design Tips

+info

+info

Lack of Color Consistency

We all love colors, right? But we don’t have to use them all. Using an inconsistent color palette not only just confuses the user, but also makes your design and brand hard to remember. When designing, you want your customer or user to remember your brand or design. And having a consistent set of colors throughout the branding is a good way to make your brand recognizable. Solution: Learn the art of color coordination. What are the effects each color have on the user and use the the ones which fits your purpose. Moreover, set a certain number of colors to bring consistency to your overall design. Make your own color palette or take inspiration from other sources. And try to stick to the colors that you decided.

+info

Lack of Negative(White) Space

Too much text, graphic design, or competing elements can be overwhelming and intimidating for your audience. Take old website designs for example.Solution:Learn white space and try to apply it to your designs giving each element of your design room to breathe, by applying white space to your design will automatically make it look cleaner, sophisticated and the message is clear, another pro tip is to apply visual hierarchy principles and minimalist principles making your design look professional.

Low Contrast

Have you ever had to squint to read something, even if you were holding it up close? That could possibly be because of low contrast. Check out the examples below: Which is easiest to see? Definitely #1, right? That’s why whether you’re working with visual or textual elements, you want to be designing with high contrast in mind. High contrast means everyone will be able to read and understand your design.Solution: Double check your color palettes for contrast using this handy tool here. Anything above a 4:5:1 ratio for normal text is considered readable.

+info

Pixelated Image

You know what I’m going to talk about here right? Avoid raster images. Avoid them as much as you can in your design. Pixelated images never look good. Solution: When designing, try to use vector elements. And when exporting them, export at a much higher resolution than you need. You can always scale them down if you want to and it won’t harm the quality.

+info

Using Only Color to Convey Message

Users that are completely blind, have low vision or have a color vision deficiency will have trouble perceiving content if only color is used to indicate differences. The content should also use patterns to distinguish content as needed, or use meaningful semantics to describe information, rather than relying on color alone.Solution:To make your content accessible use not only color, but different patterns of lines to distinguish the difference between the elements.

Too Many Fonts

You know what I'm talking about. You've all seen those posters, ads, or billboards that use more font types than there are sentences. That's never a good sign. Just remember: less is more. It's such a popular cliche because it's so true.Solution:Try using different font weights.

+info

Choosing Wrong Colors

Colors have their own meaning and they are associated with different feelings and emotions, and common mistake is to choose the wrong color for your design making the message hard to understand or making the viewer perceive the contrary message.Solution:Learn about color psychology and the different meanings of colors to create harmonious palettes, use tools to check for color harmony.

Lack of Visual Hierarchy

An important principle of graphic design is visual hierarchy. It communicates to the viewer the importance of each element in relation to the rest. Solution:Use large and small scale to emphasise the content. The largest text is the most important message, followed by the subtitle and then the body text.

Lack of Alignment

One way to create order and symmetry in your design is to properly align elements. A lack of alignment can lead to a product that looks messy and disorganized.Solution: Use grid and rulers to arrange your elements neatly.

Text Hard to Read

The goal of good design is not just to be aesthetically pleasing, but to effectively communicate a message. In line with this, text should not only fulfill design goals, but also be easy to read. Placement of text as well as contrast between text and background is important.Solution: Adding color overlay.

PEN TOOL: https://bezier.method.ac/SELLAR SKETCH: https://www.behance.net/gallery/44223009/Affinity-Designer-Workbook-tutorialBACKGROUND REMOVAL: https://new.express.adobe.com/tools/remove-background

Thank you!