The basics of web design - part 3: design and color scheme

In the first two parts of our three part series, we covered both the planning and user-friendliness aspects of web design. In part three, we are laying out the most fundamental objective of web design: the actual look of a site. Logos, designs, and colors strongly influence how users perceive a web presence. In addition to content (text, pictures, videos, etc.) and how it is arranged, high importance should also be placed on a website’s looks. The entire design process contributes to the overall perception of your site, content, and the company or brand. Adhering to the following design guidelines will help you find the right look for your website.

The requirements for a good design concept

When dealing with questions regarding your website’s appearance, it’s important to first have a precise vision of what basic content you wish to include. This step is crucial, for content largely influences the design of a site. Make sure to clarify exactly how the information, services, or products that represent your website should look and feel. Just what is it exactly that your company or brand is trying to communicate? What separates your product or brand from the competition? Relaying an image to your target audience that is tailored to your desired appearance is vital for a successful design. Companies should furthermore ensure that their website reflects their respective corporate design.

Corporate Design

The overall image and appearance of a company is known as corporate design. Institutions, organizations, clubs, and brands also often maintain a unified corporate design. The look and feel of logos, advertising materials, products, and websites are all defined by a corporate design scheme. Belonging to such schemes is an array of creative constants (e.g. certain colors, shapes, and fonts) that appear in the various products and communication tools of their respective company.  Essentially, websites comprise only one aspect of corporate design. When creating a site for a well-established company, designers are often able to draw inspiration from the coloration of the logo or the typeface of marketing materials, such as brochures, ads, or press releases.  

Those who do not have access to any such templates or wish to augment the look of previous design motifs should start carving out a new corporate design by this point at the latest.

Guidelines for corporate web design

Corporate design always aims to convey a certain image. By ensuring a unified and easy-to-grasp look that all publications and means of communication adhere to, a solid corporate design is able to provide a high recognition value for the company or brand it represents. In this sense, corporate design remains true to the principle “form follows function”. Individual design elements should offer more than recognition value— they also need to be functional. Incorporating logos and fonts that are both easy to read and, as an added value, visually appealing is an example of this principle.  

The following paragraphs break down the most important components of corporate design.

The logo

A logo is a graphical character and the centerpiece of corporate design. Logos have a prevailing influence on the appearance of all subsequent publications for a given design campaign or scheme. The logo’s coloring can be found in most, if not all, of a company’s marketing material. Often single elements or parts of lettering schemes make up a pictorial element or symbol of a logo. Sometimes logos are composed solely of icons or features taken from the company’s lettering. Uniquely styling icons and the appearance of company lettering can produce a truly distinctive design. 

An original brand or emblem is essential to separate your company’s image from the conventional pack of corporate design. Logos should be visible on every page of your web presence and are generally found in each header. The graphic should be succinct and should strive to establish a brand’s image. Bearing the following points in mind when conceiving a concept for your logo should help you better fulfill the aforementioned criteria.

  • Intelligibility: the logo serves as a proxy of sorts for a brand. It should always remind the viewer of the brand and somehow allude to the brand’s values. Featuring stylized depictions of products or services in the logo can increase its intelligibility.

  • Uniqueness: A good logo is easily distinguishable from those of other companies. Simply appropriating the design of a competitor’s logo for your brand significantly decreases the chances of establishing an independent identity. This may also encourage the copyright owners of the original design to pursue legal action.

  • Memorability: Logos shouldn’t be too detailed or overly playful. Simple logos are often easier to remember.

  • Reproducibility: Logos have many different applications. Whether it be business cards or stamps, it is essential that they are just as recognizable in smaller formats as they are on larger ones, such as posters or billboards. Drafting a high-resolution logo is advisable in order increase scalability. Furthermore, logos should be available in multiple formats (e.g. JPG; PNG, and PDF) so that they can to be universally applied.
Tip

With 1&1 IONOS’s logo maker, create your own logo for free in just a few steps. Try it out now!

Corporate font, imagery, and color scheme

In addition to the logo, there are further corporate web design elements that should be considered when drafting any concept. Here are some of the most important ones to think about:

  • Corporate font: A corporate font is a typeface that is used by a company or business. Fonts can be partially implemented or used almost exclusively. Not only do they need to offer high recognition value and be easy to read, they should also help promote the desired image or company philosophy they seek to represent.

  • Imagery: There are many cases where it is necessary to incorporate images into a website. Pictures add extra diversity into designs and awaken emotions in viewers. Various media forms such as pictures, photos, movies, and symbols compose the basis of imagery. Just as is the case with font, all forms of imagery should be uniform and displayed in a consistent manner. The content and style of the applied pictures should underscore the image or philosophy the company is strives to project. Unprofessional pictures with low resolution should always be avoided. These may appear amateurish and make the viewer question the reputability of the site.

  • Color scheme: Color use also needs to be thoughtfully and carefully employed. Color schemes should generally incorporate the various shades that are used on the subpage of your web site. The logo design, picture elements, and backgrounds should all be based on a previously agreed upon color scheme.

The aforementioned color concept presents a wide range of practices to take into account. Certain colors have different effects on their content. And given that various colors are representative of a variety of moods, images, and feelings, it is possible to specifically target the desired characteristics that you wish to have your company associated with. For this reason, a thoughtfully implemented color concept is indispensable for any corporate web design scheme.

Tip

With 1&1 IONOS’s website builder, choose from a wide range of pictures and themes to customise your web project and make it your own!

Colors for web design

It is important not to underestimate the significance of a carefully construed color scheme. Whether one is aware or not, colors often create a connection to various contexts and emotions. Colors can be broken down into two distinct groups: warm colors, like orange, yellow, or red, or cold colors, such as green, blue, or purple. Brown, grey, white, and black are considered to be neutral colors. 

Every color tone produces certain associations for the viewer. Red, for example, is often positively associated with love, warmth, attention, energy or bravery. It’s also, however, a signal color and can carry negative connotations with it. Danger, fire, violence, blood, arrogance, or rage are another set of feelings red keeps in its company. In general, red commands lots of attention from its viewers.

There are both positive and negative interpretations for every color tone. Following this, it’s advisable to take a broad approach to color selection, and not simply focus on aesthetical elements.

The effect of colors

How a viewer interprets a color depends largely on the atmosphere and context that’s at play. The meaning of a color also tends to vary according to the cultural context in which it arises. Below is an overview of the most important colors used in western countries. The suggested application of the respective colors has also been laid out:

color positive associaton negative association Preferred application in web design
white minimalist, sleek, neutral, peaceful, modern empty, cold, sterile Given the strong effect it has when combined with other colors, white is generally considered to be appropriate for any sort of website. There are, however, some sectors that seem to use white more than others. These are: religion, medicine, law, science, luxury items.
black professional, elegant, classic, smooth, objective, functional, modern, authoritative lonely, sad, gloomy, evil, illegal As is the case with white, the effect of black’s use strongly depends on which colors it is combined with. Fashion, cosmetics, luxury items, or certain music genres particularly gravitate toward black.
grey timeless, upscale, premium, competent, professional, objective, neutral dreary, murky, clinical, distant, old Grey is generally ideal for business oriented websites or luxury articles.
brown natural, mature, fertile, warm, down-to-earth, snug, cozy. old fashioned, heavy animal, nature, and environmental topics
red Striking, passionate, noticeable, tempting, amorous, warm, dynamic, powerful, brave dangerous, aggressive, loud, arrogant, wrathful emergency services, fashion, entertainment, sports, food industry
orange friendly, happy, young, warm, energetic, inviting, good value unprofessional, pushy, restless, cheap cars, entertainment, technology, food industry
yellow happy, friendly, young, optimistic, cheerful poisonous, pushy, volatile, cowardly Due to its intensity, yellow is not often used. Moderate use, however, may be worthwhile when working with a specific brand or industry (e.g. a taxi company or a beekeeper)
green natural, lively, fresh, happy, hopeful, positive, generous, relaxing, peaceful poisonous, inexperienced, immature, angry, envious animal, nature, and environmental topics. science, tourism, medicine
blue reliable, strong, competent, professional, harmonious, friendly, relaxing, quiet cold, heavy, distant, depressing economy, law, management, science, high tech, medicine and pharmaceuticals
purple Imaginative, spiritual, creative, extraordinary unnatural, artificial, subjective fashion, luxury items, cosmetics

As you can see, the world of colors is quite diverse. Which colors you choose to include and to what extent depends entirely on what color effect you wish to highlight. From a design point of view, it is best to keep your color use to a minimum and not use more than three different colors; too many colors make sites more difficult to navigate.

Further important aspects for web design

Thoughtful and creative web design commands its dues in both time and work. With a little patience, however, you’ll find that creating a compelling website is a manageable task. The basics covered in this three part series are generally intended for implementing a website. For more information on how to optimize a web presence, check out the following articles: the most important SEO tools and a comparison of the five most popular CMSs.