In 2022, web designers will leave their creativity free reign – from colors to typography 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 2022.
In the first two parts of our three-part series, we covered planning and user-friendly design. Part three focuses on the most fundamental objective of web design: the actual look of a site. Logos, designs, and colours 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 ultimate 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.
The overall image and appearance of a company is known as corporate design. Institutions, organisations, 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 colours, 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 colouration 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.
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 colouring 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 website 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 stylised 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 recognisable in smaller formats as they are on larger ones, such as posters or billboards. Drafting a high-resolution logo is advisable in order to 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 colour 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 striving 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.
- Colour scheme: Colour use also needs to be thoughtfully and carefully employed. Colour 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 colour scheme.
The aforementioned colour concept presents a wide range of practices to take into account. Certain colours have different effects on their content. And given that various colours 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 colour 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!
Colours for web design
It's important not to underestimate the significance of a carefully construed colour scheme. Whether one is aware or not, colours often create a connection to various contexts and emotions. Colours can be broken down into two distinct groups: warm colours, like orange, yellow, or red, or cold colours, such as green, blue, or purple. Brown, grey, white, and black are considered to be neutral colours.
Every colour 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 colour 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 colour tone. Following this, it’s advisable to take a broad approach to colour selection, and not simply focus on aesthetical elements.
The effect of colours
How a viewer interprets a colour depends largely on the atmosphere and context that’s at play. The meaning of a colour also tends to vary according to the cultural context in which it arises. Below is an overview of the most important colours used in western countries. The suggested application of the respective colours has also been laid out:
|colour||positive association||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 colours, 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 colours 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, cosy.||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 colours is quite diverse. Which colours you choose to include and to what extent depends entirely on what colour effect you wish to highlight. From a design point of view, it is best to keep your colour use to a minimum and not use more than three different colours; too many colours make sites more difficult to navigate.
Further important aspects for web design
Developing a thoughtful and creative web design takes 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 optimise a web presence, check out the following articles: the most important SEO tools and a comparison of the five most popular CMSs.