The basics of web design - part 3: design and color scheme
In the first two parts of our three-part series, we covered planning and user-friendly design. In part three, we lay 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 appearance. 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 website builder from IONOS
MyWebsite is the turnkey solution for your professional web presence, including a personal consultant!
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.
With 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.
With 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.
Related articles
The basics of web design - part 2: user-friendliness
The layout and use of a website is often quite intuitive, even upon your first visit there. Conventional design patterns ensure quick usability and are not employed without reason: these common practices and standards guarantee smooth functionality for a website. Every web designer should be familiar with what exactly these practices entail and how to optimally integrate them into their web…
The basics of web design - part 1: planning
Those looking to create a website should always have both the purpose and range of function of the site in mind before getting started. Only by paying close attention to these two criteria can one guarantee clarity and uniformity throughout the entire design process. Planning should always remain in the foreground for any web design project. Important tips on what to look out for when designing…
The most popular web design trends for 2023
In 2023, web designers will leave their creativity free reign, from nostalgic and maximalist designs to smart technical features like parallax scrolling and chatbots. The main challenge here is to incorporate selected components as naturally as possible into your own project. We reveal which web design trends you can expect in 2023.
Branding: how effective are the best-known logos
We are constantly surrounded by company logos: but just how closely do we actually look at these graphics? A study titled ‘Branded in Memory’ has gone ahead and tested this: how well can people draw a well-known logo from memory? Over 150 men and women, young and old, attempted this and in part managed to achieve very good results. The main take away was that basic structure and strong colors are…
RGB – three colors for (almost) everythin
RGB, which stands for red, green, and blue, is a system used to create all the possible colors that can be displayed on a screen. The physical principle at work here is called additive color mixing and involves mixing the different components of the visible light spectrum. Different color spaces reflect human perception of color to varying degrees.