Website Design and Branding Yourself

Design

Before we get into official branding, it is useful to understand some basic design principles. There are six principles of design and they all work together to influence how we interact with the visual elements around us. This is also a wonderful site that explains design principles when applying them to websites.

After you view those sites, what do you find wrong with the following picture's design:

When you open this page, 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 makes this page difficult to read. There is not an effective use of white space. There is no balance or harmony.

This is what your website could look like:

Doesn't this look so much better? the man's face creates a clear focal point 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. The hierarchy is very obvious.

How you design your site will depend on your own preference, so visit sites you like to get an idea of how this education brand uses design principles to please their audience.

What is a brand?

A brand is a feeling. Successful brands are created through 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 and the Apple brand can evoke the feeling of a smooth touch screen, modern innovation, and the excitement of using technology to change the world around you.

The website behance.com collects examples of branding. By clicking on a brand, you can enter an in-depth view of how a brand is created and how it translates into many different design elements. These elements may include packaging, menus, interior design, and products.

Notice that the brands showcased on Behance use common design elements to tie the brand together. The fonts, colors, textures the use of pictures and shapes, use of white space, and all contribute to the creation of the brand. The branding clearly communicates the purpose and feeling of the product or service.

Branding Examples

See how the brands in the two pictures below use effective branding.

Example #1:

From the actual product design to the design elements used in its presentation, the Embrace smartwatch conveys sleek and innovative technology. Notice that in all of the photos, the adult models are wearing professional attire this helps the user see that the watch is a professional product. The watch itself is sleek and minimalist. These kinds of choices are deliberate and distinguish the brand and product as its own.

Example #2:

Look how they use primary colors and tinker toy images establish a brand made for children. They use the same colors and the same toy-design style to create cohesion between all the elements. Every piece in the collection belongs.

Branding Concepts

You can do the same thing that these designers do by turning your website into a brand. First decide what you want to communicate. What is your message? What is the purpose of your website? Once you have decided on a message, you can translate it into a concept. Your concept will describe the design elements you are going to use to convey your message. A concept will describe the design elements you are going to use and 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 web pages have red pens or words circled in red pen.

Font: Old style book font.

Colors: Black, white, pen red.
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 title text.

Colors: Black, white, gray.
Churro shop I sell 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 then 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 have 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 have chosen your colors, you can make sure that these colors are the exact same hue by using color codes. You can view color codes on this website: http://html-color-codes.info/color-names/.

Fonts: Fonts come in several styles (sans serif, serif, calligraphy). You can read more about these styles in this article: http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications.

Old style fonts are the easiest and fastest to read. Generally, you want to use these for the body text of your website, especially if your body text is more than a paragraph. Examples of old style fonts are Palatino and Times New Roman.

Generally, you want to try to keep to just two or three contrasting fonts. Too many fonts can seem chaotic. Unless, of course, 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 much better than text. However, make sure that the images you use are obtained legally. Read the Copyright and Attribution documentation to learn more about copyright laws.

Create a Gravatar

A gravatar is an online identity that is linked to a WordPress site. A gravatar is an image that will appear next to your comments on blogs or forums. It helps people to identify who you are online. If you use WordPress as your CMS, you can create a gravatar by going to https://en.gravatar.com/. Click on “Create Your Own Gravatar.”

Enter your information on this page and click “Sign up.”

An email will be sent to the email associated with your WordPress site to confirm your account. Go to your email and confirm your account. Then come back to the gravatar website.

When you log in, your gravatar images will be displayed, if you have any. To create a new image identity, click on “Add a new image.”

You can select your photo source here. Select the option you wish to use. In this tutorial, we will upload an image from our computer.

Click on “Choose File” to select an image from your computer. You can browse your files and locate the image you wish to use. Keep in mind your brand as you select an image.

Once you have selected an image, click “Next.”

You can now crop this image to fit the gravatar icon. Crop your image as desired, then click “Crop and Finish.”

Choose a rating for your image.

Your gravatar has been created!