Basic Design Principles

What is a Brand?

Brand is a unique design, symbol, words, or a combination of these, employed in creating an image that identifies a product and differentiates it from its competitors.

Why is it Important?

A good brand can help in many ways, including:

• Being immediately recognizable

• Increasing business value

• Attracting new customers

• Improving employee satisfaction

• Building trust

• Supporting advertising

How to design branding

• Define business goals and brand personality

• Market and user research

• Logo design

• Visual elements of the brand

• Corporate brand style

• Create a style guide

Every stage of company growth requires a new identity and the faster you grow, the faster you need to redesign it

Redesigning your logo is a sign of growth. Don't expect it to be an easy process - people are resistant to change. But after the growing pains it will help drive the business forward.

Choose Complimentary Fonts

• Try to limit yourself to 2 fonts

• Consider how your fonts can reflect your brand. Fonts can impart elegence, strength, sophistication, playfulness, and more.

• Look for inspiration from other sites in your industry. What types of fonts are they using and why?

Font Hierarchy

• Titles should get progressively smaller as you go down the page or deeper into page sections

• Paragraph text should be smaller and have less weight than heading text

• Create contrast between sections of text with variation in text color, weight, and font type.

• Use white space to break up different sections of text.

Color Palette

You'll need to define a primary and secondary color for your site. The primary color is the main color in your site's theme. Consider your site's purpose and audience when choosing the primary color. Should it be bright and playful or dark and subdued? Once the primary color is chosen, match it with a secondary color that provides contrast while continuing the theme that you determined for the primary color.

Choosing Media

The images, videos, icons, illustrations, and animations that make up a site play an outsized role in how your audience views your brand. Low-quality media conveys a lack of professionalism and even decreases trust. If you are collecting media from a client, make sure to set clear expectations around media quality, and provide pro-active feedback if the media that they are providing needs to be improved.

Goldilocks images

You don't want your images to be too small. You don't you your images to be too big. You want them to be just right. We suggest using images with a width of 1920 pixels. When images are smaller than 1920 pixels wide they can show as pixelated on your site. If they are much larger than 1920 pixels wide then it can take a long time to load the page.

What types of images will you use?

When you're looking for the images that you'll use for a site, think about how the images will be used and what types of images you need. Whenever possible, your hero image should show people. If you're displaying products or services, make sure the images that you use have consistency in subject matter, colors, and types of backgrounds.

Using video

Video can create high-impact, but should be used thoughtfully. Too much video on your site can be chaotic. Video is also a very heavy asset which can affect your page's loading speed.

Using Icons

Icons can be used to visualize products or services, as well as provide UI direction. The most important thing to consider when choosing icons is visual consistency.

Will your icons be...

• Stroked or filled?

• Monochrome or multi-color?

• Thick stroked or thin stroked?

Sourcing Icons

There are many options for sourcing your icons. You could:

• Design them yourself with a tool such as Adobe Illustrator (remember to save using the .svg format)

• Use the icons available in Duda's Icon widget

• Source from a library such as The Noun Project

Illustrations

If your site will contain illustrations, pick one animation style and stick with it. Just like all other elements of your site, you want your illustrations to have consistency. Are you noticing consistency in our advice? There are quite a few animation trends that you can choose from. Some include:

• Flat

• 3D

• Line art

Animations

Animations can add dynamism and interest to a site. However, just like with video, too much animation creates chaos. If you have a few spots you'd like to add animation to your site, you'll either need to build them or buy them. One place to find animations that are easy to integrate with Duda is LottieFiles.

Give your elements some space

Make sure to allow some space between elements on your page. Vertically, it's a good idea to leave about 70 pixels of space between elements. Horizontally, leave about 4o pixels of space. Also make sure the line height of your text makes it easy to read.

Consistency and contrast

Use the contrast that you built in to your site's color palette to highlight key elements on the page. A button that includes an important call-to-action should be immediately noticeable.

Maintain the look and feel

Each page on your site should use the same colors, fonts, media styles, and so on. Duda's Global Design settings make this easy - rather than styling images individually from page to page, you can create global style rules that are used on all pages of your site.

Ready to go?

Before you can start building your site, make sure you have:

• Branding (logo, colors, font styles)

• Homepage structure

• Content ready to be copy and pasted

• Images in the right sizes and format

• Icons & illustrations in the right format (.svg or .png) and colors (monochrome)