The whole lot You Have to Know Concerning the Ideas and Forms of Design

A fundamental grasp of design rules is beneficial for any marketer — perhaps you’re a part of a scrappy DIY staff and must do your personal design, or perhaps you simply need a greater understanding of what your in-house design staff is as much as.

I’ve labored with many graphic design groups through the years, and in my expertise, understanding a few of these predefined tenets of design can enhance cross-team communication, since you’ll have a greater vocabulary to explain the issue(s) that must be solved.

And when you’re utilizing a device like Canva to deal with advertising and marketing design by yourself, our skilled designers have some suggestions for you as properly.

Desk of Contents

What’s advertising and marketing design?

Advertising and marketing design is extra than simply — because the identify suggests — designing for advertising and marketing. It’s a artistic technique that makes use of visible and even interactive parts to drive a model’s advertising and marketing targets and messages. And it’s not even restricted to 2 dimensions: Advertising and marketing design also can take the type of interactive experiences in model activations.

Former HubSpot designer Amanda Chong places it succinctly: “Design is about creating possible, purposeful options to quite a lot of issues, and at all times occurs with a selected aim in thoughts.”

Significance of Advertising and marketing Design

Good advertising and marketing design emphasizes the hierarchy of your message, enhances its readability, and even makes it extra welcoming to your audience.

I requested Nichol DeRosier, a senior visible designer at HubSpot, why advertising and marketing design was so vital. “On the finish of the day,” she says, “we’re visible communicators. And if [designers are] not speaking the message accurately to the person, we’re not doing our job.”

Even the best copywriters can’t overcome poor design — CTAs will get misplaced, clients will get confused, and your messaging gained’t convert your viewers.

Ideas of Advertising and marketing Design

There are various further phrases associated to those rules: motion rhythm, symmetry, and white house. These design ideas fall beneath and/or are based mostly on the above tenets and due to this fact aren’t thought-about standalone rules.

Let’s break down every precept of design and their related design ideas.

Steadiness

Steadiness is how objects in a composition are organized and what visible weight they carry. Steadiness might be achieved utilizing the next strategies.

• Symmetry (formal stability): When objects are organized evenly round a vertical or horizontal axis. When objects are organized round a central level (or a radius), it’s often known as radial symmetry. The 4 logos under are all symmetrical:

• Asymmetry (casual stability): When objects are organized inconsistently round a vertical or horizontal axis. Sometimes, there’s one dominant facet or aspect in an asymmetrical composition. These 4 logos are asymmetrical:

Distinction

Distinction refers to how parts in a composition differ. This precept is usually paired with the precept of similarity, which is how composition parts resemble one another. Distinction might be established utilizing design parts like coloration, house, kind, dimension, and texture.

White house, or destructive house, can also be an vital aspect of distinction. These empty areas in a composition may help set up the weather in a composition and emphasize an important ones. It additionally creates an aura of luxurious and minimalism, just like the Academy of Movement Image Arts & Sciences emblem (under left). NBC’s emblem (under proper) cleverly makes use of white house to create the silhouette of a peacock.

Dominance or Hierarchy

Dominance, or hierarchy, refers back to the various levels of emphasis inside a composition. Parts like dimension, font choice, and contrasting color combinations can change the focus of a design. DeRosier explains hierarchy as “creating a clear visual pathway on how to digest information.”

There are three main stages of dominance in design:

• Dominant: The object of primary emphasis. It’s given the most visual weight and is typically found in the foreground of a composition.
• Sub-dominant: The object(s) of secondary emphasis, typically found in the middle ground.
• Subordinate: The object(s) of tertiary emphasis, typically found in the background.

The visual center is where we naturally focus on a piece of visual design. It’s slightly above and to the right of the actual center of a composition and is often referred to as “museum height.”

Movement

Movement is the visual path a viewer follows when viewing a composition. With proper movement, a composition can create a narrative and provide a high-quality user experience (UX). Movement can be established using design elements like lines, shapes, and colors.

Proportion or Scale

Proportion refers to the visual weight and size of a composition’s elements and how they relate to each other. This principle is also known as scale.

The relative size of one object to another can help create a focal point or movement along the composition. Also, varying sizes of objects can help communicate the importance and dominance of one element over another.

In the graphic below, the orange circles are the same size — the one on the right just looks bigger because it’s surrounded by smaller contrasting circles.

Unity

Visual unity is the typically main goal of design, although that opinion differs among designers and certain design communities. Unity, or harmony, refers to the relationship between the individual parts and the whole of a composition. When a composition’s elements are in agreement, there’s unity; when the elements aren’t in agreement, a composition instead has variety.

The following design principles are associated with unity.

• Alignment: When objects are lined up on a certain axis or cadence
• Continuation: When a line or pattern extends
• Perspective: When there’s a distance between elements
• Proximity: When objects are placed close together
• Repetition: When objects are copied multiple times
• Rhythm: When objects recur with a slight change or interruption

While the principles of design are considered universal, they look a little different as applied to different design communities and practices. Below, we’ve reviewed the top seven types of design in marketing.

Types of Marketing Design

• Graphic Design
• Branding and Logo Design
• UI and UX Design
• Web (Front-End) Design
• Multimedia Design
• Environmental Design

Let’s break down each type of design and how they apply to the marketing industry.

Graphic Design

Graphic design is probably what you picture when you think of design in the marketing field: social media images, email marketing headers, infographics, postcards, and much more. This Canva template shows how an infographic might be designed:

Since visual content is a highly valuable and engaging marketing medium, companies rely on graphic designers to create assets that represent their brand and communicate with their audience.

Branding and Logo Design

Branding and logo design is a subset of graphic design. It includes the visual elements of a brand and brand identity, such as logos, typography, color palettes, style guides, and more.

Branding and logo designers create assets that represent a brand, illustrate the brand’s mission, vision, and values, and promote brand awareness for the company.

If you’re not a designer, don’t worry — tools like HubSpot’s own brand kit generator may help with logos, coloration palettes, and extra.

UI and UX Design

Consumer interface (UI) and person expertise (UX) design concentrate on enhancing how web site, app, and software program customers work together with and expertise a product.

Whereas some roles mix UI and UX design, the 2 practices are fairly completely different. UI designers are liable for making a visually pleasing, on-brand expertise for customers via net web page design, app design, and theme design on websites like WordPress and Shopify.

UX designers, however, are liable for ensuring a product solves an issue via usability testing, person flows, and digital prototypes.

Net (Entrance-Finish) Design

Net design applies to the front-end (public-facing) facet of a web site. Entrance-end designers are like UI designers geared up with coding data — they design static UI mockups for a web site after which translate them into HTML, CSS, and JavaScript code. (However don’t confuse this observe with front-end net improvement.)

Net designers create property that produce a lovely and absolutely purposeful web site, comparable to splash pages, navigational parts, sitemaps and pages, scrolling and clicking options, and content material administration techniques.

HubSpot’s free software program features a drag-and-drop website builder, when you’re trying to create or refresh your web site however don’t have an online design background.

Multimedia Design

Multimedia (or movement graphic) design makes use of quite a lot of media, notably video and animation. Due to its time and value necessities, such a design has traditionally been reserved for these in TV and movie. However with developments in expertise and a latest rise in video content material advertising and marketing, movement graphic design has turn into extra accessible than ever.

Multimedia designers are liable for creating moveable property that talk and delight with an viewers, like animated logos, GIFs, animated movies, tutorial movies, and animated or interactive web sites.

Environmental Design

Environmental design, also called environmental graphic design or experiential design, is meant to enhance an individual’s expertise by furthering the aim of an surroundings, whether or not that’s to be memorable, thrilling, informative, motivational, or simply navigable. The observe merges inside design, structure, graphic design, landscape design software, and industrial design.

Environmental designers create property that join folks to their surroundings, comparable to murals, workplace design and branding, retailer interiors, occasion house design, and signage and interactive promoting.

Advertising and marketing Design Ideas

We’ve lined the fundamentals of the most typical forms of design in advertising and marketing: graphic, branding, UI and UX, net, multimedia, and environmental. Now, we will dive into some suggestions for the highest 4.

Be aware: Preserve an eye fixed out for the rules of design we mentioned above … they’ll make an look on this part, too.

Graphic Design Ideas

1. Begin with the aim.

What kind of content material are you designing — a social media advert, e-mail template header, or e book? These are three completely different items of content material with three very completely different functions and targets. Earlier than you create your design, jot down its objective. It will assist preserve your design and content material targets aligned as you create your piece of artwork.

2. Apply your fashion information.

When deciding on what design parts to incorporate, take into account your organization’s branding fashion information. (We’ll get into how and why to create a method information subsequent.) This information will instantly present you what colours, fonts, and different design parts to make use of when designing your content material. From there, you can also make small tweaks relying on what kind of content material you’re creating.

3. Create order with traces and alignment.

Traces and alignment in your graphic design can create motion and order. Align the textual content in your graphic to information your viewer as they learn, or incorporate horizontal traces to part off your textual content and imagery. Much like the way you format lengthy weblog posts in small paragraphs, traces and alignment make items of graphic design simpler to digest.

4. Pepper in some icons and illustrations.

Colours, textual content, and pictures make for beautiful graphics, however don’t restrict your parts to these three. Icons and illustrations also can boost an in any other case textual content or image-heavy piece of content material. Icons may also have the ability to illustrate ideas that images can’t, and so they function artistic bullet factors for lengthy lists.

Right here’s a Canva template by Lythcreative that makes use of easy illustrations to interrupt up a cleansing record, making it extra visually interesting:

Branding and Brand Design Ideas

1. Design the aesthetic of your persona.

How do you visually current the persona of your model and firm? In case your model was an individual, what would they be like? Your branding design ought to replicate the solutions to those questions.

Earlier than beginning your design, make a listing of adjectives that describe your model, firm, and tradition. It will provide help to select coloration combos, photographs, fonts, and different design parts and convey out the important thing factors of your persona. Additionally, utilizing your model adjectives as steerage, construct a group of photographs, graphics, coloration samples, and related logos that signify the “temper” of your model — aka a mood board.

2. Get a little bit funky.

Your emblem and model property don’t must be an easy illustration of what your organization does.

HubSpot’s orange sprocket isn’t particularly about our software program, nevertheless it was designed to signify advertising and marketing, gross sales, and repair, which is what our software program began with. DeRosier additionally notes that “it’s easy — you need a emblem mark to be easy sufficient to be actually small or actually massive.”

As you design your model’s visible id, don’t be afraid to get a little bit funky and incorporate some distinctive design facets. Doing so might assist your model stand out from the remainder.

3. Preserve it easy.

Your branding ought to talk your aesthetic in beneath a second. Impressions are made within the blink of an eye fixed, and your emblem and model id are not any exception.

Shoppers will kind an opinion in your model in a cut up second, so preserve your design easy and to the purpose.

DeRosier says it’s tempting in design to “throw so many [design elements in a logo] that it will get overcomplicated.” Whether or not you’re designing a emblem or one other aspect, she says to ensure you’re not including so many parts that the design dilutes or loses its that means.

4. Prioritize consistency.

That is maybe an important tip in terms of branding and emblem design: Be constant. You possibly can spend lots of of hours and hundreds of {dollars} creating a beautiful visible id to your model — but when it’s not mirrored on every bit of print and digital content material, your assets have gone to waste.

Consistency applies on a pair completely different axes — horizontally alongside your content material parts, like fonts, spacing, and coloration combos, and vertically throughout your content material shops, like your social media accounts, e-mail, web site, and print supplies.

Create a method information to encourage everybody to stick to your new branding. Right here’s HubSpot’s Style Guide for example.

UI and UX Design Ideas

Be aware: UI and UX are two various kinds of design, however as a result of they’re so related, we’ve collected a couple of suggestions that may apply to each practices.

1. Adapt a person’s perspective.

Whether or not you’re designing the interface or the expertise of an app, web site, or on-line device, at all times adapt the attitude of a person. Why would somebody use your website? What would they hope to attain? What may their challenges be?

It’s vital to analysis your person base and higher perceive how they’d method your website or utility. Think about doing first-hand person analysis via a spotlight group or by speaking to present clients.

2. Anticipate errors.

No matter how a lot you speak to your viewers, there’ll at all times be a couple of stumbles amongst customers.

Anticipate these by incorporating fool-proof mechanisms, comparable to not letting somebody submit an online kind in the event that they’ve skipped a field or having a person affirm they’d wish to exit in case they by chance clicked off the display screen. These mechanisms may help stop errors earlier than they occur and let your customers know you’ve acquired their backs.

3. Don’t neglect requirements and tendencies.

Many designers love paving a brand new path and reinventing the wheel with their designs. Whereas this will create one thing distinctive and memorable for the person, it could additionally create confusion.

Think about sticking with identified design patterns, requirements, and tendencies, comparable to a navigation bar within the high proper nook or contact data alongside the underside of the web page. This may help your customers already subconsciously know the way to navigate your website with out clarification.

4. Be mobile-friendly.

Responsive design is non-negotiable for web sites and purposes, however is your design additionally mobile-friendly?

Think about the spacing of your buttons, the dimensions of the textual content, and some other navigational or organizational parts that could be inconvenient in a responsive design.

Additionally, have a look at how your website might change when seen on a desktop, pill, and numerous forms of smartphones.

Net (Entrance-Finish) Design Ideas

1. Think about the fold.

On a web site, the fold is taken into account the underside of the display screen — the place your web page would “fold” if it had been a bodily merchandise, like a newspaper. A very powerful data on a web site ought to at all times be positioned “above the fold” (like in newspapers) so a customer doesn’t must scroll right down to see it.

2. Use white house to attract focus.

Within the case of net design, much less is usually extra.

With a number of data to share with guests, it may be tempting to muddle all of it above the fold, so people see it immediately. However much less cluttered web sites are simpler to learn, navigate, and digest.

Preserve guests in your web site by including loads of white house round your content material; it’ll be simpler for them to focus.

3. Use coloration to information motion.

Colour psychology performs an enormous function in advertising and marketing. With out us even realizing it, sure colours can encourage us to do sure issues, comparable to click on a button or proceed on to the subsequent web page of an online kind.

Use colours to information the identical forms of motion in your web site. Make all your CTAs a daring coloration to assist them stand out.

4. Keep away from generic inventory photographs.

There are many methods to make use of photographs in your advertising and marketing, however the one technique to keep away from is utilizing generic inventory photographs, which might make a model appear disengaged with its purchaser persona.

The pictures in your web site ought to signify your viewers, and when you can’t seize your precise viewers, you need to work exhausting to seek out inventory photographs that do.

Professional tip: One nice technique to gather viewers photographs is by working a user-generated content material (UGC) marketing campaign.

Time to Design

Design is available in all styles and sizes — actually. From web sites to print graphics to workplace house design, design performs a significant function in advertising and marketing our companies and types.

Even when you don’t take into account your self a designer, we encourage you to turn into extra aware of the weather and forms of design. You by no means know when you’ll have to seek the advice of on a mission or whip up a design of your personal.

Editor’s be aware: This submit was initially printed in February 2019 and has been up to date for comprehensiveness.