Everything You Need to Know About the Principles and Types of Design

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

I’ve labored with many graphic design groups over time, 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 have to be solved.

And should you’re utilizing a software like Canva to deal with advertising and marketing design by yourself, our knowledgeable designers have some suggestions for you as effectively.

Desk of Contents

What’s advertising and marketing design?

Advertising 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 design may take the type of interactive experiences in model activations.

Former HubSpot designer Amanda Chong places it succinctly: “Design is about creating possible, practical options to a wide range of issues, and all the time occurs with a specific purpose in thoughts.”

Significance of Advertising Design

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

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 appropriately to the consumer, we’re not doing our job.”

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

Ideas of Advertising Design

There are lots of extra phrases associated to those rules: motion rhythm, symmetry, and white house. These design ideas fall underneath and/or are primarily based on the above tenets and subsequently aren’t thought of standalone rules.

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

Stability

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

• Symmetry (formal steadiness): 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 called radial symmetry. The 4 logos under are all symmetrical:

• Asymmetry (casual steadiness): When objects are organized erratically round a vertical or horizontal axis. Usually, there’s one dominant facet or ingredient 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, type, measurement, and texture.

White house, or detrimental house, can also be an vital ingredient of distinction. These empty areas in a composition may also help arrange the weather in a composition and emphasize crucial ones. It additionally creates an aura of luxurious and minimalism, just like the Academy of Movement Image Arts & Sciences brand (under left). NBC’s brand (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 measurement, font choice, and contrasting coloration mixtures can change the main focus of a design. DeRosier explains hierarchy as “creating a transparent visible pathway on digest info.”

There are three fundamental levels of dominance in design:

• Dominant: The thing of major emphasis. It’s given probably the most visible weight and is often discovered within the foreground of a composition.
• Sub-dominant: The thing(s) of secondary emphasis, sometimes discovered within the center floor.
• Subordinate: The thing(s) of tertiary emphasis, sometimes discovered within the background.

The visible middle is the place we naturally give attention to a bit of visible design. It’s barely above and to the best of the particular middle of a composition and is also known as “museum top.”

Motion

Motion is the visible path a viewer follows when viewing a composition. With correct motion, a composition can create a story and supply a high-quality consumer expertise (UX). Motion might be established utilizing design parts like traces, shapes, and colours.

Proportion or Scale

Proportion refers back to the visible weight and measurement of a composition’s parts and the way they relate to one another. This precept is also called scale.

The relative measurement of 1 object to a different may also help create a focus or motion alongside the composition. Additionally, various sizes of objects may also help talk the significance and dominance of 1 ingredient over one other.

Within the graphic under, the orange circles are the identical measurement — the one on the best simply seems larger as a result of it’s surrounded by smaller contrasting circles.

Unity

Visible unity is the sometimes fundamental purpose of design, though that opinion differs amongst designers and sure design communities. Unity, or concord, refers back to the relationship between the person components and the entire of a composition. When a composition’s parts are in settlement, there’s unity; when the weather aren’t in settlement, a composition as an alternative has selection.

The next design rules are related to unity.

• Alignment: When objects are lined up on a sure axis or cadence
• Continuation: When a line or sample extends
• Perspective: When there’s a distance between parts
• Proximity: When objects are positioned shut collectively
• Repetition: When objects are copied a number of occasions
• Rhythm: When objects recur with a slight change or interruption

Whereas the rules of design are thought of common, they appear slightly completely different as utilized to completely different design communities and practices. Under, we’ve reviewed the highest seven sorts of design in advertising and marketing.

Sorts of Advertising Design

• Graphic Design
• Branding and Emblem Design
• UI and UX Design
• Internet (Entrance-Finish) Design
• Multimedia Design
• Environmental Design

Let’s break down every sort of design and the way they apply to the advertising and marketing trade.

Graphic Design

Graphic design might be what you image if you consider design within the advertising and marketing discipline: social media photographs, e-mail advertising and marketing headers, infographics, postcards, and far more. This Canva template reveals how an infographic could be designed:

Since visible content material is a extremely precious and interesting advertising and marketing medium, corporations depend on graphic designers to create property that symbolize their model and talk with their viewers.

Branding and Emblem Design

Branding and brand design is a subset of graphic design. It contains the visible parts of a model and model identification, reminiscent of logos, typography, coloration palettes, fashion guides, and extra.

Branding and brand designers create property that symbolize a model, illustrate the model’s mission, imaginative and prescient, and values, and promote brand awareness for the corporate.

In the event you’re not a designer, don’t fear — instruments like HubSpot’s own brand kit generator may also help with logos, coloration palettes, and extra.

UI and UX Design

Person interface (UI) and consumer expertise (UX) design give attention to bettering 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 accountable for making a visually pleasing, on-brand expertise for customers by way of net web page design, app design, and theme design on websites like WordPress and Shopify.

UX designers, however, are accountable for ensuring a product solves an issue by way of usability testing, consumer flows, and digital prototypes.

Internet (Entrance-Finish) Design

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

Internet designers create property that produce a gorgeous and absolutely practical web site, reminiscent of splash pages, navigational parts, sitemaps and pages, scrolling and clicking options, and content material administration methods.

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

Multimedia Design

Multimedia (or movement graphic) design makes use of a wide range of media, notably video and animation. Due to its time and value necessities, this kind of design has traditionally been reserved for these in TV and movie. However with developments in expertise and a current rise in video content material advertising and marketing, movement graphic design has grow to be extra accessible than ever.

Multimedia designers are accountable 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, reminiscent of murals, workplace design and branding, retailer interiors, occasion house design, and signage and interactive promoting.

Advertising Design Ideas

We’ve coated the fundamentals of the most typical sorts 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.

Observe: Maintain 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 sort 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 function. This may 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, think about 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 may make small tweaks relying on what sort 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 may boost an in any other case textual content or image-heavy piece of content material. Icons may additionally be capable of illustrate ideas that photographs 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 Emblem 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 an inventory of adjectives that describe your model, firm, and tradition. This may assist you to select coloration mixtures, 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 symbolize the “temper” of your model — aka a mood board.

2. Get slightly funky.

Your brand and model property don’t need to be a simple illustration of what your organization does.

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

As you design your model’s visible identification, don’t be afraid to get slightly funky and incorporate some distinctive design features. Doing so could assist your model stand out from the remaining.

3. Maintain it easy.

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

Customers will type an opinion in your model in a break 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 brand or one other ingredient, she says to be sure you’re not including so many parts that the design dilutes or loses its that means.

4. Prioritize consistency.

That is maybe crucial tip in the case of branding and brand design: Be constant. You possibly can spend a whole lot of hours and hundreds of {dollars} growing a stunning visible identification in your model — but when it’s not mirrored on each piece 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 mixtures, 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 instance.

UI and UX Design Ideas

Observe: UI and UX are two several types of design, however as a result of they’re so related, we’ve collected just a few suggestions that may apply to each practices.

1. Adapt a consumer’s perspective.

Whether or not you’re designing the interface or the expertise of an app, web site, or on-line software, all the time adapt the attitude of a consumer. Why would somebody use your web site? What would they hope to realize? What would possibly their challenges be?

It’s vital to analysis your consumer base and higher perceive how they’d method your web site or utility. Take into account doing first-hand consumer analysis by way of a spotlight group or by speaking to present prospects.

2. Anticipate errors.

No matter how a lot you discuss to your viewers, there’ll all the time be just a few stumbles amongst customers.

Anticipate these by incorporating fool-proof mechanisms, reminiscent of not letting somebody submit an internet type in the event that they’ve skipped a field or having a consumer affirm they’d prefer to exit in case they unintentionally clicked off the display screen. These mechanisms may also help forestall errors earlier than they occur and let your customers know you’ve bought their backs.

3. Don’t neglect requirements and developments.

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

Take into account sticking with identified design patterns, requirements, and developments, reminiscent of a navigation bar within the prime proper nook or contact info alongside the underside of the web page. This may also help your customers already subconsciously know navigate your web site with out rationalization.

4. Be mobile-friendly.

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

Take into account the spacing of your buttons, the scale of the textual content, and every other navigational or organizational parts that could be inconvenient in a responsive design.

Additionally, have a look at how your web site could change when seen on a desktop, pill, and numerous sorts of smartphones.

Internet (Entrance-Finish) Design Ideas

1. Take into account the fold.

On an internet 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. An important info on an internet site ought to all the time be positioned “above the fold” (like in newspapers) so a customer doesn’t need to 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 lot of info to share with guests, it may be tempting to litter all of it above the fold, so of us see it instantly. However much less cluttered web sites are simpler to learn, navigate, and digest.

Maintain 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.

Coloration psychology performs a giant position in advertising and marketing. With out us even figuring out it, sure colours can encourage us to do sure issues, reminiscent of click on a button or proceed on to the following web page of an internet type.

Use colours to information the identical sorts 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 may make a model appear disengaged with its purchaser persona.

The photographs in your web site ought to symbolize your viewers, and should you can’t seize your precise viewers, you need to work arduous to search out inventory photographs that do.

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

Time to Design

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

Even should you don’t think about your self a designer, we encourage you to grow to be extra conversant in the weather and sorts of design. You by no means know when you could have to seek the advice of on a undertaking or whip up a design of your personal.

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