Go to content
The Codest
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2016-08-02
Product DesignSoftware Development

SHADES OF EXPRESSION - MONOCHROMATIC WEB DESIGN

Klaudia Migacz

SHADES OF EXPRESSION - MONOCHROMATIC WEB DESIGN - Image

Colour theory in the psychological field is used to determine the impact of a certain form on a person. It is well known for designers that shape or content can be misunderstood when their colours are wrongly chosen.

It’s common knowledge that warm colours go with positive, stimulating and alarming emotions or impressions, like feeling energised, young, cheerful and playful, while cold ones epitomise professional, safe, calming and reliable adjectives for the design.

What I want to approach is another bunch of colours, which elicit different emotions depending on the context in which they are used, and in themselves they are elastic and associated with - in fact - nothing when they are used in design. The colour itself of course has its own meaning, like black is strong or murky, but can be used as depressing or powerful, chaotic or sophisticated. White, in its clearness and innocence, can create a feeling of emptiness, but it probably has the most important role of all colours - creating negative space. Something we never see unless it’s gone. White space can play a huge role in web design, indicating what is more important or creating the sense of order or chaos. 

Monochromatic how to

Monochromatic design is perceived as minimalistic, and sometimes modern, as it’s actual and popular in today’s flat, material and vector-illustrative design (although it has its sparks all over visual art history). On one hand, using one colour can be seen as an easy way out for a designer who can’t juxtapose colours in interesting and powerful palettes, but on the other - this style in the hands of an expert can create a really stunning effect, exposing the form and the content. Using only one colour can be a blue sky or a total failure for the end product. There are a number of ways you can plan the monochromatic or bichromatic palette:

  1. Choosing one colour and several lighter and darker shades, adding white and black or a complimentary colour when mixing;
  2. Choosing one colour as an accent for a greyscale composition;
  3. Making the design only in greyscale (achromatic).

Emotional effects of the methods mentioned in points 1 and 2 are absolutely dependent on the chosen colour, and in the second instance also the relation to the greyscale, that’s why I’m going to focus on point 3 - using the greyscale.

Why black and white?

Using no “real” colours creates a possibility for the designer to work with shapes - their sizes, contrast, texture and position, which are the only “something-is-happening” for the viewer. The range of available means lets the designer sculpt, just as in clay, to make users discover the real point of the matter, focus on the content without any redundant distractions. That’s exactly why designers start with black and white wireframes, painters sketch their compositions with a raw pencil and photographers make black and white portraits to show a person’s emotions. As material design is an illustrative metaphor of real objects, the greyscale can be a symbol of the thought. It helps to represent, therefore see, a clear story, it’s honest and steady and needs the creator to know the art of balancing on emotional lines. It’s the reason why it’s so difficult to create something really tasteful and expressive - it’s a combination of design skills, emotional intelligence and some sociological wisdom.

Monochrome in greyscale is a means to express anything. It draws attention to the detail, to totality, as you tell it to. It’s an all-purpose tool to achieve any goal, but clearly it can also make the website or different form simply uninteresting, depressing, unimaginative or give it this obsolete feel of the Windows 95 era, if you can’t be the master and keep it in check.

Building a relationship

Creating design forms with only black and white colours consists of at least 6 things:

  1. Shapes - not only geometric elements but overall composition, the borders that every physical element closes in.
  2. Contrast - high contrast is gaudy just like bright colours, while low contrast creates a calm and professional feel. This can be a real ambush for the designer in the matter of usability.
  3. Position of elements, which can have an overwhelming or adverse impact.
  4. Typography - letters, font sizes and icons draw more attention now.
  5. Luminescence is the real key for atmosphere together with contrast.
  6. Collision of all these aspects - it’s important to keep the leitmotiv based on the project brief in every decision about the design.

If you are in need of design being described as simple, even condescending, artsy, minimalist, content-focused, getting straight to the point, it is wise to take monochromatic design into consideration.

Examples

Werkstatt Wundersite

Giorgio Armani - Frames of Life

Nua Bikes

Frères d'encre

Related articles

Product Design

10 UI/UX design trends for 2020. What’s new?

The new year (as always) brings new trends related to UI and UX design. Striving to meet the needs of users, present each product in the best way possible and increase conversion - these are the goals of every Product Designers...

Katarzyna

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

The Codest – International Tech Software Company with tech hubs in Poland.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.