Everything you need to know about the principles and types of design

Furniture. Dress. Software. Posters. Cards. Experience. Building. Websites.

These are all things that can be designed. Devil, design has so many different meanings and uses that you wonder if the term can be defined at all.

Answer: It can. Design has a variety of definitions, but in its simplest form it can be defined as both a verb and a noun: it can refer to the process of creating a composition or to the composition itself.

Design is about creating workable, functional solutions to a wide variety of problems, and it always does so with a specific goal. – Amanda Chong, HubSpot designer

As ambiguous as it seems, design can be defined … especially when it comes to how it applies to marketing. That is why we have compiled this guide so that you can better understand the design and its principles and types. Bookmark this guide for future reference and use the chapter links to go to a section of your interest.

Design has many different connotations depending on the application. It’s an incredibly fluid industry. In short, design can be any way you want it – as long as you don’t forget some of its predefined principles. These are known as the Principles of design.

The principles of design

The principles of design are universal ideas that apply to design as an industry and practice. These principles are principles that all designers should follow in order to create an effective, impactful composition. The basic principles include balance, contrast, dominance, hierarchy, proportions and unity.

There are many additional terms related to these principles: rhythm of movement, symmetry, and white space. These design concepts fall under and / or are based on the above principles and are therefore not regarded as principles in their own right.

Let’s break down each design principle and the design concepts associated with it.

Feeling stuck? Take part in our design for non-designer workshop.

balance

balance is how objects are arranged in a composition and what visual weight they carry. Equilibrium can be achieved using the following methods.

  • Symmetry (formal equilibrium): When objects are evenly arranged around a vertical or horizontal axis. Objects that are arranged around a center point (or radius) are known as radial symmetry.
  • Asymmetry (informal equilibrium): When objects are unevenly arranged around a vertical or horizontal axis. In an asymmetrical composition, there is usually a dominant side or element.

source

contrast

contrast refers to how elements differ in a composition. This principle is often paired with the principle of similarityThis is how compositional elements are similar. Contrast can be set using design elements such as color, space, shape, size, and texture.

White space is also an important contrast element. Often referred to as negative space, this space referring to the empty parts of a composition. Spaces can help organize the elements in a composition and highlight the most important ones. It also creates an aura of luxury and minimalism.

design-2 source

Dominance

Dominance refers to the different degrees of Emphasis within a composition. Emphasis is usually achieved through elements such as size, font choices, and certain color combinations (which can create contrast). There are three main levels of dominance in design.

  • Dominant – The object with the primary emphasis. It has the greatest visual weight and is usually the focus of a composition.
  • Subdominant – The objects with secondary emphasis that are usually in the middle ground.
  • Child – The tertiary emphasis objects that are usually found in the background.

Fun fact: the visual center Here, of course, we’re focusing on a piece of visual design. It is located slightly above and to the right of the actual center of a composition and is often referred to as the “museum height”.

design-3 source

Move

Move is the visual path a viewer follows when looking at a composition. When moved correctly, a composition can create a narrative and provide a high quality user experience (UX). Movement can be created using design elements such as lines, shapes and colors.

design-4 source

Proportion or yardstick

proportion of refers to the visual weight and size of the elements of a composition and their relationship to one another. This principle is also known as frame.

The relative size of one object to another can help create focus or movement along the composition. Different object sizes can also help communicate the importance and dominance of one element over another.

design-5 source

unit

Visually unit has been identified as the primary goal of design, although this opinion differs between designers and certain design communities. Unit or harmonyrefers to the relationship between the individual parts and the whole of a composition. When the elements of a composition match, there is unity. If the elements do not match, then there should be a composition diversity.

The following design principles are associated with the unit.

  • Alignment – When objects are aligned on a specific axis or cadence
  • Continuation – When a line or pattern extends
  • Perspective – When there is a gap between elements
  • Proximity – When objects are placed close together
  • Repeat – When objects are copied multiple times
  • Rhythm – When objects return with a slight change or interruption

design-6 source

While the principles of design are believed to be universal, they look slightly different in relation to different design communities and practices. Below we’ve checked the top 7 Kinds of design In marketing.

Types of design in marketing

  • Graphic design
  • Branding and logo design
  • UI and UX design
  • Web (front-end) design
  • Multimedia design
  • Environmental design

Let’s break down each of the design types and how they are applied to the marketing industry.

Get 195 free visual marketing design templates from us.

Graphic design

Graphic design is probably what you think of when you think of marketing design: social media images, email marketing headers, infographics, postcards, and more.

design-7 source

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

Do you need templates that you can use to create content for any online channel? Download our free library of 195+ visual marketing design templates.

Branding and logo design

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

design-8 source

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

Learn the basic concepts of graphic design and how to use them to create high quality graphics in the HubSpot Academy Graphic Design Essentials course.

UI and UX design

The user interface and user experience (UX) design focuses on improving the way website, app and software users interact with a product and its experience.

design-9 source

While some roles combine UI and UX design, the two approaches are very different. UI designers are responsible for delivering a visually engaging brand experience for users through website, app, and theme design on sites like WordPress and Shopify.

UX designers, on the other hand, are responsible for ensuring that a product actually solves a problem through usability testing, user workflows, and digital prototypes.

Web (front-end) design

Web design applies to the front-end (publicly accessible) page of a website. Front-end designers are like UI designers who are armed with coding skills. You design static UI models for a website and then translate them into HTML, CSS, and JavaScript code. (Don’t confuse this approach with front-end web development, however.)

design-10

Web designers create assets that create an attractive and fully functional website, such as: B. Welcome pages, navigation elements, sitemaps and pages, scrolling and click functions as well as content management systems.

Multimedia design

Multimedia (or motion graphics) design creates graphics for a variety of media, particularly video and animation. Because of the time and expense involved, this type of design has historically been reserved for those on television and film. With the advances in technology and the recent surge in video content marketing, motion graphic design is more accessible than ever.

Multimedia designers are responsible for creating moving assets that communicate and engage with an audience, such as moving logos, GIFs, animated videos, tutorial videos, and animated websites.

Environmental design

Environmental design, also known as environmental graphic design, is designed to enhance a person’s experience by promoting the purpose of an environment, be it memorable, exciting, informative, motivational, or easy to navigate. The practice combines interior design, architecture, graphic design, landscape design and industrial design.

design-11 source

Environmental designers create assets that connect people to their environment, such as: B. murals, office design and branding, shop fittings, design of event rooms as well as signage and interactive advertising.

Marketing design tips

We covered the basics of the most common types of design in marketing: graphics, branding, UI and UX, and web, multimedia, and the environment. Now we’re going to dive into some tips for the top 4.

Note: Pay attention to the design principles described above. They are also shown in this section.

Graphic design tips

1. Start with the purpose

What kind of content are you designing … a social media ad, email template header, or an e-book? These are three different pieces of content with three completely different purposes and goals. Make a note of the purpose of the content before creating your graphic design. This can help keep your design goals aligned with your content goals as you create your artwork.

2. Apply your style guide

When deciding which design elements to include, consider your company’s branding style guide. (We’ll explain how and why to create a style guide next.) This guide shows you immediately what colors, fonts, and other design elements to use when designing your content. From there, you can make small changes depending on what type of content you’re creating.

3. Create an order with lines and alignment

Lines and alignment in your graphic design can create movement and order. Align the text in your graphic to help the viewer read it, or add horizontal lines to separate text and images. Similar to how you format long blog posts in small paragraphs, lines and alignment make graphic designs easier to digest.

design-12 source

4. Pepper in some symbols and illustrations

Colors, text, and images make for beautiful graphics, but don’t limit your elements to these three. Symbols and illustrations can also spice up otherwise text or image-intensive content. Symbols can also help illustrate concepts that photos cannot, and act as creative bullet points for long lists.

Beautify your graphic design today with our 135 free icons to use in your marketing graphics.

Branding and logo design tips

1. Design the aesthetics of your personality

How do you present the personality of your brand and your company visually? If your brand were a person what would it be like? Your branding design should reflect the answers to these questions.

Before starting your design, make a list of adjectives that describe your brand, company, and culture. This allows you to choose color combinations, images, fonts and other design elements and highlight the most important points of your personality. Using your brand adjectives, create a collection of images, graphics, color samples and similar logos that represent the “mood” of your brand – a.k.a. a mood board.

2. Get a little funky

Your logo and brand values ​​don’t have to be a simple representation of what your company does. The HubSpot logo really has nothing to do with marketing, sales, or service software. Nevertheless, it represents our company perfectly and is at the same time unforgettable and unmistakable.

Sprocket-web-color-5-1 While you’re designing your brand’s visual identity, don’t be afraid to get a little funky and consider some unique design aspects. This can help your brand stand out from the crowd.

3. Keep it simple

Your branding should communicate your aesthetic in less than a second. Impressions are made in a snap, and your logo and brand identity are no exception. Consumers will decide in a split second whether they like, dislike, impressed, or have nothing to do with your brand. So keep your design simple and to the point.

4. Prioritize consistency

Perhaps the most important tip when it comes to branding and logo design is this: be consistent. You can spend hundreds of hours and thousands of dollars creating a beautiful visual identity for your brand. However, if this doesn’t affect all of your printed and digital content, then all of your resources have been wasted.

Consistency applies to different axes – horizontally along your content items, i.e. H. In your fonts, spacing and color combinations, and vertically in your content areas; H. Between your social media, emails, websites, and print materials. Create a style guide to encourage everyone to stick with your new branding. Here is the HubSpot Style Guide as an example.

Here, learn the key elements you need to build a strong brand by downloading the Essential Guide to Branding Your Business.

UI and UX design tips

Note: UI and UX design are considered two different types of design. However, because they are so similar, we’ve put together a few tips that can apply to both practices.

1. Adjust a user’s perspective

Always adjust a user’s perspective whether you’re designing the user interface or the experience of an app, website, or online tool. Why would someone use your website? What would you hope to achieve? What could your challenges be? It is important that you research your user base and better understand how they approach your website or application. Consider doing user research firsthand through a focus group or through conversations with current customers.

design-14 source

2. Anticipate failure

No matter how much you talk to users, there will always be a handful (or more) of people stumbling across your website or application. Anticipate these mistakes by incorporating foolproof mechanisms, such as: For example, not to allow someone to submit a web form if they skipped a box, or to let a user confirm that they want to quit the program if they accidentally clicked from the screen. These mechanisms can help prevent mistakes before they happen and let your users know that you have your back.

3. Don’t neglect standards and trends

Designers love to break new ground with their designs and reinvent the wheel. While this can create something unique and memorable for the user, it can also confuse them if you’ve gone too far. Adhere to known design patterns, standards, and trends such as: For example, a navigation bar in the upper right corner or contact information at the bottom of the page. This can help your users to already subconsciously know how to navigate your website without explanation.

4. Be mobile friendly

Responsive design is non-negotiable for websites and applications. However, is your design mobile friendly? Take into account the spacing of your buttons, the size of the text, and other navigational or organizational elements that may be impractical in a responsive design. Also, see how your website can change when viewed on a desktop, tablet, and different types of smartphones.

Web design tips (front-end)

1. Look at the fold

On a website, the crease is considered the bottom of the screen – where your page would “fold” if it were a physical item such as a newspaper. The most important information on a website should always be placed “above the fold” (as in newspapers) so that a visitor doesn’t have to scroll down to see it.

2. Use the white space to draw the focus

In web design, less is often more. With a lot of information to share with visitors, it can be tempting to clutter everything above the crease for people to see right away. However, less crowded websites are easier to read, navigate, and digest. Keep your visitors on your website by putting lots of white space around your content. It will be easier for them to focus on reading and understanding your content.

3. Use color to control the action

Color psychology plays a big role in marketing. Without our even knowing it, certain colors can encourage us to do certain things, such as: For example, click a button or move to the next page of a web form. Use colors to control the same types of actions on your website. Make all of your CTAs bold to make them stand out.

design-15 source

4. Avoid generic images

There are many ways to use images in your marketing, but the only way to avoid is to use generic images. Generic, cheesy images make a brand appear lazy and detached from its buyer personality. The images on your website should be a representation of your target audience. If you can’t get a grasp of your actual target audience, then you should work hard to find images that do. Tip: A great way to collect audience pictures is to run a UGC (User Generated Content) campaign.

Download our free guide to growth web design for even more web design tips.

Time to design

Design comes in all shapes and sizes … in the truest sense of the word. From websites to prints to office space design, it plays an important role in marketing our companies and brands. Even if you don’t consider yourself a designer, we encourage you to familiarize yourself with the elements and types of design. You never know when to consult on a project or come up with your own design.

Leave a Reply

Your email address will not be published. Required fields are marked *