In this section, we’ll discuss:

  • Design
  • What is a brand?
  • Branding Concepts
  • Brand Design Elements
  • Create a Gravatar

Design

Before we delve into official branding, it’s useful to understand some basic design principles. There are six principles of design and they work together to influence how we interact with the visual elements around us. Also, read 8 Effective Web Design Principles You Should Know, which explains design principles when applying them to websites.

After viewing those sites, here’s an example of what your website should not look like.
musites_bad_website_design
 

When you open the example, your eye doesn’t know where to go. There is no clear hierarchy or order. The chaotic mix of colors and images are distracting and ugly. Using caps for emphasis is difficult to read and shouts from the page. There is not an effective use of white space. There is no balance of harmony.

Here’s an example of what your website could look like.
musites_good_website_design
 

There is a clear focal point — the man’s face; the page draws your eye across and down as it takes in the information. The colors and fonts used were carefully chosen and correspond very well together. The use of images is effective — they exist with a purpose, not just to fill space. There is white space so that your eye can rest and breathe, the hierarchy is very obvious.

What is a brand?

A brand is a feeling. Successful brands are created through the design elements, services, products, and physical ambiance. Close your eyes and think of your favorite brands. Disney, for example, may evoke within you a feeling of excitement and happiness — the rush of wind on a Disneyland roller coaster and the magical happily-ever-after sensation at the end of a good movie. Think of The North Face — suddenly you are outside viewing the rugged beauty of nature outfitted in durable gear. The Apple brand evokes the feeling of smooth touch screen, modern innovation, and the excitement of using technology to change the world around you.

The website Behance collects examples of branding. By clicking a brand, you can enter an in-depth view of how a brand is created and translates into many different design elements. These elements may include packaging, menus, interior design, and products. Notice the brands use common design elements to tie the brand together. The fonts, colors, use of pictures and shapes, use of white space, and textures all contribute tot he creation of the brand. The branding clearly communicates the use and feeling of the product or service.

Branding Examples

Compare these two brands. Click a photo to see an in-depth view of the brand.
musites_brand_example_1
 

From the actual product design tot he design elements used in its presentation, the Embrace smartwatch conveys sleek design and innovative technology. Notice that in all the photos, the adult models are wearing professional attire. The watch itself is sleek and minimalist. These kinds of choices are deliberate and convey a sense of the product.

musites_brand_example_2
 

Look how primary colors and tinker toy images are used to communicate children’s education. The same colors and toy-design style are used to create cohesion between all the elements. Every piece in the collection belongs.

Branding Concepts

You can do the same thing these designers do by turning your website into a brand. Designers first decide what they want to communicate. What is your message? What is the purpose of your website? Once you decide on a message, you can translate it into a concept. A concept is used to describe the design elements you’re going to use to convey your message. A concept will translate your message into design elements that tie your website together into one cohesive whole. These concepts may extend to product packaging, letterheads, and stationary.

Type of Website Message Concept Design Elements
Freelance editing I offer professional editing services. Edited words falling out of a book. Design: Header has a book photograph with words falling out. Other webpages have red pens or words circled in red pen.

Font: Old style book font.

Colors: Black, white, red pen

Business portfolio I am an experienced business professional. Professional looking black and white New York skyline. Design: New York skyline in the header.

Font: Old style body text and a professional sans serif for the title text.

Colors: Black, white, gray

Churro shop I see the best and most fun churros on the Web. A parade of cartoon churros. Design: Cartoon churros having a parade in the header. Other headers have churros dancing and swinging, or engaged in other fun activities.

Font: Cartoony title font, old style body text.

Colors: Churro yellow, turquoise

Used clothing exchange We trade interesting and unique clothing. A stylish yet chaotic mix of textures, buttons, and fabrics with many different fonts and design elements. Design: Headings have a somewhat chaotic but beautiful mix of fabrics and clothing elements like buttons and zippers.

Font: Many different fonts, including script, old style, sans serif, and decorative fonts that convey style but also chaos and uniqueness.

Main colors: Light pink, lavender, and light blue

Secondary colors: Pastel yellow, gray, sage green, turquoise, and jade green

Brand Design Elements

You can use your concept to tie your brand together on everything that you produce for your website and products.

Colors

Unless you want your website to feel chaotic, simplicity is key. Keep a consistent color scheme. It is easiest to stick to two or three main colors. Too many colors can be overwhelming. It is also difficult to find a large number of colors that coordinate well. Once you choose your colors, you can make ensure these colors are the exact same hue by using color codes.

Fonts

Fonts come in several styles.

Reading Ease
Old style fonts are the easiest and fastest to read. Generally, use these for the body text of your website, especially if you body text is more than a paragraph in length.

Generally, you want to keep to just two or three contrasting fonts. Too many fonts can seem chaotic. Unless you want your website to seem chaotic. You can always use your concept as a measuring stick. Does a large number of fonts fit into your design scheme?

Images

You can use photos and graphic designs to communicate with your readers. Oftentimes, visual elements communicate must better than text. Confirm the images you use were obtained legally.

Create a Gravatar

A gravatar is an online identity that is linked to a WordPress site. A gravatar is an image that appears next to comments on blogs or forums. It helps people identify who you are as an online entity. If you use WordPress, follow these instructions to create a gravatar.

1. Visit https://en.gravatar.com/, and click Create Your Own Gravatar.
musites_create_own_gravatar
 

2. Complete the form, and then click Sign up. You may be prompted to log in using your WordPress account.
musites_signup_gravatar
 

3. If you’re a new user, a confirmation is sent to confirm your account. Confirm your account, and then return to the Gravatar website.
4. After logging in, your gravatar images appear. To create a new image, click Add a new image.
musites_add_image_gravatar
 

5. Click a photo source. For this example, upload an image from your computer by clicking Upload new.
musites_gravatar_upload_image
 

6. Click Browse. Keep in mind your brand as you choose an image. Will your gravatar reflect your brand?
7. Click Next.
musites_gravatar_browse_images
 

8. Crop your image to fix in the gravatar icon box. Click Crop and Finish, when finished.
musites_gravatar_crop_finish
 

9. Click a rating for your gravatar.
musites_gravatar_rating
 

10. Your gravatar is created!

« --- »

About The Author

Leave a Reply

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