Fundamentals of Web design: graphics and color effects

🔊 Listen to this post Now in English

 

The first two parts of this web design article were about planning your website and how you can provide usability for your visitors. This third part looks at web design and the appearance of a website. It is the logos, shapes and colors that influence the way you perceive your web presence. In addition to the layout and structure of your content (text, images, videos, etc.), the visual aspect must be emphasized. Indeed, the design of a website greatly contributes to how people perceive your entire page, its content and the company or brand behind it. To do this, a graphic charter can help you adopt the style that best suits your online presence.

The necessary conditions for a good graphic concept

If you already have an idea of what your website will look like, you probably already know what content you are going to offer. Content largely determines the visual appearance of your site. Get an idea of what makes your featured information, products or services stand out. What represents your company or your brand? How does your offer stand out from the competition? It is essential to adapt the design of your website to the desired image and your content. In addition, you must ensure during the design of your website that the visual identity of the company is reflected in the presentation.

The graphic chart

The visual identity of a company is defined by the term corporate design in English. It’s almost the house style of a business. But institutions, associations and brands also often have a graphic charter. The creation of logos, advertising materials, packaging and websites are clearly influenced by these guidelines and present company specific graphic guidelines (for example, the use of certain colors, shapes and typography). This visual identity can be found in all of the company’s existing products and means of communication. The website is usually one component of this “house style”. If you are creating a website for an already existing business, you can build on the established graphic charter. For example, to define the color of the logo or the typography of marketing materials such as brochures, advertisements or press releases. Even though you may have to rework your website design later or don’t have specific guidelines for your branding, it’s never too early to think about it.

Guidelines for a company’s visual identity

The visual identity always reflects a specific image of a company. This visual identity has a strong power of recognition if it is implemented consistently and there is consistency in all communication media. The leitmotif of corporate design is based on functionalism: “form follows function”. That is, the visual aspect is determined by the content offered. As for logos and typography, these should be easily readable.

The aspects discussed below present the main elements of corporate web design.

The logo

The logo is a graphic symbol, it is at the center of your visual identity and will influence the appearance of all your future media. Usually, most if not all marketing material uses the colors of the company logo. The logo is often made up of one character (or at least one or more letters) and one or more image elements. The shape of the image element or typography gives it a unique appearance and makes it easily recognizable.

To stand out, it is essential to have a logo that is original and that should be present on every page of your website. It is often found at the top of the web page, it must be clear and have an identity function. When creating a logo, certain principles must be observed. A good logo should allow:

A quick understanding: the logo is the signature of the brand. He must put the brand forward and reflect it. The products and services that you offer can be integrated in a stylized way in the logo, to allow better understanding.

Be unique: your logo must stand out from that of other brands. Copying a well-known logo will prevent you from building an identity of your own. In addition, you risk legal action from the copied trademark.

Easy to remember: a logo shouldn’t be too detailed or playful. The logos that we remember best are often simple.

Reproducible: a logo is used on different media. Whether on a business card or a large poster, the logo should be just as easy to recognize. Since pixels are not the only things to consider in operating your logo, it is recommended that you always display it in high resolution. This will allow you to adapt it to media of various sizes. In addition, you must have different formats (JPG, PNG and PDF) to facilitate its use.

Company typography, visual identity and color palette

In addition to the logo, web design includes elements that are also important for the creation of a website, namely:

The in-house font:  The corporate typography (or corporate font) is the typography that is used in the vast majority (or all) by the company. It must be easily recognizable and very readable, even in pictures and whatever the size used. The typography of the company must also reflect its philosophy, its image or at least correspond to the perception of the company that we want to convey. This must be used for all texts, it is often found in the logo.

The power of images: There are many opportunities to showcase images on your website. They help to vary the content and arouse emotions in the Internet user. All images, photos, patterns and symbols determine the visual identity of your website. Just like the font you choose, the language of the pictures should be consistent and put together in a consistent manner. Poor resolution and unprofessional images should be avoided, to avoid an amateurish image.

The color palette:  The chart applied to the colors must also be developed and predefined. This palette should include the nuances that will be found on every page of your website. The design of the logo, images, background and any other component of the page must use the colors that have been defined.

The choice of this palette is essential in web design and deserves careful consideration. Using certain colors can achieve different effects and results. You can forge a unique corporate identity by favoring certain shades over others, because the colors used on a website determine the first impression a visitor will have.

Colors in web design

The importance of choosing the colors used on a website should not be underestimated. Colors are always associated with specific emotions and contexts, whether conscious or unconscious. We distinguish warm colors (yellow, orange, red) from cold colors (blue, green, purple).

Neutral colors are black, white, gray and brown. Each color is associated with a meaning for the observer: red and for example positively associated with love, warmth, energy or courage.

Red is also an attention-grabbing color and can be negatively associated with danger, fire, violence, blood, arrogance, and anger. Generally speaking, red captures the attention of web design.

Colors therefore awaken positive or negative associations in those who perceive them. This is why it is recommended not to base the colors of a website on purely aesthetic criteria.

Color psychology

The association we make when perceiving a color depends on its nuances and the context. Their meaning also varies depending on different cultural aspects. Discover below an overview of the main colors and their associations in the West, as well as the sectors in which they are most frequently used:

White color

• Positive associations:
  Innocent, uncluttered, clean, pure, peaceful, minimalist, neutral.

  Negative associations:
  Cold, sterile, empty.

  Sectors:
  White is generally suitable for any type of website, as it combines very well with other colors. Nevertheless, white is often used in the following sectors: medicine, new technologies, religion, justice, science, luxury items.

Black color

• Positive associations:
  Serious, classic, elegant, flexible, functional, rational, modern, professional.

  Negative associations:
  Sad, scary, dark, illegal, loneliness, emptiness.

  Sectors:
  Just like white, the result depends on the combination with other colors. Black is often used in fashion, music, luxury items and even cosmetics.

Grey color

• Positive associations:
  Timeless, high-end, noble, professional, neutral.

  Negative associations:
  Monotonous, old, old-fashioned, cloudy, dispassionate, distant.

  Sectors:
  Gray is popularly suited for luxury items and shopping websites.

Color Brown

• Positive associations:
  Natural, in touch with nature, ripe, warm, protective, down to earth, comfortable, creative.

  Negative associations:
  Old fashioned, dirty, heavy.

  Sectors:
  Different themes: nature, animals, environment.

Red color

• Positive associations:
  Passionate, visible, attractive, warm, dynamic, captivating, powerful, courageous.

  Negative associations:
  Dangerous, aggressive, arrogant, angry, loud.

  Sectors:
  Health and emergency services, fashion, entertainment, sports, food.

Orange color

• Positive associations:
  Friendly, cheerful, young, warm, inexpensive, energetic, inviting.

  Negative associations:
  Not very serious, insistent, low-end, restless.

  Sectors:
  Automotive industry, entertainment, technology, food.

Yellow color

• Positive associations:
  Happy, sympathetic, young, optimistic, serene.

  Negative associations:
  Cowardly, insistent, toxic, inconstant.

  Sectors:
  Yellow is seldom used as a determining color in web design because it is a color that quickly tires the eyes. But if the theme or the product of the site is yellow (for example a Taxi service), it can be used by keys.

Green color

• Positive associations:
  Natural, alive, fresh, cheerful, bearer of hope, positive, generous, calm, calm, relaxed.

  Negative associations:
  Toxic, immature, inexperienced, bitter, sour.

  Sectors:
  Environment, animals, nature, science, tourism, medicine.

Blue color

• Positive associations:
  Strong, serious, sympathetic, harmonious, reliable, relaxed, calm

  Negative associations:
  Cold, heavy, depressing, distant.

  Sectors:
  Economy, law, science, high technology, administration, medicine.

Purple color

• Positive associations:
  Imaginative, magical, spiritual, extraordinary, creative.

  Negative associations:
  Artificial, synthetic.

  Sectors:
  Fashion, cosmetics, luxury items.

As you can see, the use of color in web design has many facets. It is up to you to determine which aspect of your website you want to showcase. From a design standpoint, however, be careful not to use too many colors. Too much mixing of colors will give an impression of saturation and chaos. Instead, use a predefined palette and make sure it is used consistently.