The Rules Of Graphic Design - Principles to Live By

When it comes to marketing graphics, brand design, or website layouts, it is important to understand that graphic design has rules and these rules, when followed, can take your graphic design to the next level and keep your reader wanting more! Keep reading to learn how the rules of graphic design can elevate your marketing graphics, website layouts, and brand identity to create impactful and consistent designs that captivate your audience.

Graphic Design Rule #1: Importance of Visual Hierarchy

With layout design, you can’t just add arrows to guide the viewer or think that if you simply bold and CAPS a sentence it will be seen first in a design. 

That’s where visual hierarchy comes into play. How you design your graphic, and especially your text, is what helps guide your viewer through it, what you want them to read first, and which piece of information needs more focus.

What to Consider

1. Type Size
2. Type Case
3. Type Weight
4. Type Color
5. Alignment
6. Typography and Pairing
7. Spacing/Placement

1. Type Size

Generally, the larger the font, the more likely it will be read first. 

Think...

There is a reason we have a hierarchy of font size for headers, sub-headers, and paragraphs. We want the reader to read them in that order.

2. Type Case

ALL CAPS WORKS BEST FOR HEADINGS

I would not recommend using it for an entire paragraph as the reader might think that you are yelling at them. All CAPS will draw more attention. KEEP IN MIND, if a type font is hard to read in all CAPS or if you capitalize a long sentence or paragraph, it will be harder to read and thus, ignored or skipped by your reader.

3. Type Weight

Bolding a font will draw more attention to it in a sentence or paragraph. Use this to call out more important information or words you want the reader to pick out if they are scanning. If you bold TOO much, it can look chaotic. Use it sparingly. 

In the example above you can see that if the viewer read NOTHING but the bolded font, they would know that I am here to help them with design support so they can stand out online.

Bolding can also be helpful if you are using text over an image. If the text is hard to read, the viewer will simply not read it or get frustrated. Bolding the font over imagery can help make the text more legible.

4. Type Color

Using a contrasting color can help draw out words in a sentence or paragraph. Keep in mind the readability of the color you use in contrast to the rest of the text and the background color. Similar to bolding, you don’t want to overuse this technique or it will feel too busy. 

 5. Alignment

Alignment is related to position of your text and design elements. It helps create visual hierarchy in your layout as well as text. You can play with the different alignment options to create a clear difference between the heading, subheading, body of text, or various paragraphs.  

Notice in the image below, the top section is left justified while the second section is center aligned. This helps balance out the design and breaks apart this large section into more bite-sized pieces. 

6. Typography and Pairing

Successful typography pairing can elevate your design by creating a clear hierarchy and distinction between headings, subheadings, and body text. Font Pairing is a great way to differentiate words, sentences, or sections. Always be mindful of legibility! One or two words with hard-to-read font styles like a script font might work well but if you can’t read it in a sentence, others won’t be able to either. 

When choosing font pairings, try to balance them out. If one is a heavy font weight/bold font style, use a thin font to contrast. If you choose a serif font for headings and a sans-serif font for body text.

7. Spacing / Placement

Lastly, you can use spacing and placement as a graphic design technique to create more white space and draw out the importance of your text or design element. This helps the reader’s eye take a break and focus on one thing at a time. 

Think back to the first image above...

The center positioning and the copious amounts of negative space around "First You Read This" (along with the size of font and the contrast in font type) immediately draws your eye to read it first. 

The left alignment of the second sentence brings your eyes back to the natural direction of reading so that you read that next and then the bottom right-justified text reads more like a footnote which your viewer will read last or find less important. 

               Use of Negative Space

Negative space is the area of a design that is left unmarked. It’s not just the absence of content but a powerful tool that can enhance the readability and focus of your design. Proper use of white space can lead to a cleaner, more organized design that directs the viewer's attention to the most critical elements.

               The Rule of Thirds

The Rule of Thirds is a fundamental principle in both photography and graphic design. By dividing your design into nine equal parts with two equally spaced horizontal lines and two equally spaced vertical lines, you can position the most crucial elements along these lines or at their intersections. This approach creates a more balanced and engaging composition, making your design naturally pleasing to the eye.

Graphic Design Rule #2: Color Theory and Emotional Impact

Color isn’t just about aesthetics; it’s about evoking emotions and influencing perceptions. Understanding color psychology is crucial for designers. For instance, blue often conveys trust and professionalism, making it a popular choice for corporate designs, while red can evoke excitement and urgency, often used in sales and promotional content. Incorporate complementary colors to create contrast and highlight essential elements, but be mindful not to overuse them.

Graphic Design Rule #3: Use of Imagery and Icons

Visual content such as images and icons play a pivotal role in graphic design. High-quality images can convey complex ideas quickly and effectively, while icons can break up text and guide the reader’s eye through your content. In the example below our client, CHooZ FUN, wanted to convey a fun and playful energy in their brand guidelines. The use of people having fun in imagery catches your eye in their psychology synopsis and makes you want to read about it. The use of icons in both their target market and customer avatar pulls the theme of "fun" throughout and adds a more playful energy to a seemingly boring topic.

Ensure that your images are not only relevant but also optimized for web use to maintain fast loading times.

Graphic Design Rule #4: A Clear Call to Action (CTA) Design

In marketing, a well-designed Call to Action (CTA) can significantly increase conversion rates. Your CTA should be visually distinct, with a contrasting color that grabs attention but still aligns with your brand’s overall color scheme. Placement is also key—position your CTA where it naturally follows the flow of content, and use action-oriented language to encourage clicks. 

In the social media story series example below you can see a clear call to action; "Comment BRANDGUIDE to claim this free tool" with "BRANDGUIDE" in a contrasting color so that the reader doesn't miss it. 

Graphic Design Rule #5: Importance of Consistency in Design

One of the most critical rules in graphic design is consistency. Consistency across your website and marketing materials reinforces your brand identity, making your content more recognizable and memorable. Brand consistency involves using the same color palette, typography, and logo placement across all platforms. This not only helps in creating a cohesive visual experience but also builds trust with your audience.

In General...

You don’t have to do all of these in one design but stay consistent. Pick + choose which works best for your layout and content. When in doubt, less is more and remember to pull back and look at your design layout from afar to see if anything feels hard to read, lost in the mix, or just plain too much.

Ready to build your beautiful brand but not sure where to start?

We have a FREE resource just for you! Create a beautiful and eye-catching brand that attracts your ideal customers and helps you stay consistent with your branding across all platforms. Click here to access this Website Mockup + Brand Guide template and training.