Banner Design Process

banner-header.png

Here is the process I usually do when I design different banners

Overview

In a lot of companies, operation banners are often completed by different operation teams. Even in some multinational enterprises, banners are made by operation teams from other countries. So how to ensure that we output the operation banner in the guarantee of visual impact simultaneously, but also efficient output and reflect the unified design language? Can banner components be easily replaced without even a designer? The best way to solve this problem is to design the banner component library. The four advantages of the banner component library can perfectly solve the above issues.

component.png

I built a library of banner components for myself and improved my work efficiency. I make it into a project template and provide it to the rest of the team. They only need to make a few changes to the related content to publish the project.

component2.jpg

If I want to make a good banner design, I figured I need to understand the essential composition and design principles first. No matter what kind of banner component library is, everything starting from the underlying logic to build the banner component library, I create the banner component library ideas mainly based on the following points:

Banner Hierarchy

• Background layer: it can replace the background color and background style

• Copywriting layer: replaceable context

• Embellish layer: replaceable element and color

• Product illustration: replaceable with project pictures or illustration elements

• Label layer: can replace the label, display hidden label, label color

BannerH.png
sample.jpg

Banner Component Layout

Banner Design Principle

I followed the five principles: alignment, unity, contrast, space, and composition balance.

Alignment

Standard alignment methods include left, right, and center alignment. I usually use only one of these alignment methods for a template. If multiple alignment methods appear on a small banner page, the content is scattered in users' eyes, which is hard to read.

Example:

EX1.png

Unity

I usually use 1 or 2 types of fonts and colors to keep the content's design styles consistent. Too many fonts and colors can easily lead to the messy range and unnecessary interference to readers if there are too many fonts and colors.

Example:

EX2.png

Contrast

When designing anything, I also consider the weight of each information, the important information should be highlighted of the project, and the project can weaken the secondary information.

Example:

EX3.png

Space

 

Leave a certain amount of space for the banner and let the banner breathe more so that it is easier to focus on important information.

Example:

EX4.png

Composition balance

 

Don't use too many fonts, colors, or overly complex graphics in banner design. This constant "multiplication" behavior is increasing the "noise" of users' perceptions.

Example:

Layout.jpg
EX5.png

Design Policy

Before making each type of banner, I will consider how to make it have strong adaptability. Therefore, the same kind of product design specifications, such as uniform font and color. This way will make work more accessible and more efficient.

DesignPolicy.png

Non-Designer Teammates

It is also necessary to consider that non-designers will use this template, so I need to standardize the overall size, spacing, and layout.

EXAMPLE-UOS.png
EXAMPLE-L3P.png

Non-designers can use the template to replace the corresponding content to publish the project that needs to go online. This way will save time when tasks are heavy.

WeChat Screenshot_20211107140359.png

Some replated banner work:

sample works.png