The Basic Principles of Web Design: The Colour Psychology + Moodboard Tutorial

The Basic Principles of Web Design: The Colour Psychology + Moodboard Tutorial
0

Hello coders :slight_smile: I hope everything is well and good at your end.

For those who are not aware of what the topic of web design principles is about and why, please check out the introduction page for more information.

In the first part, we will focus on how colours play a vital role in human emotion and how each colour can provoke a reaction in both positive and negative meaning. It may not seem it, but non-designers need to know about colours, and that is because they play around with people’s emotions without them realising it. Also, when a person with no knowledge in design principles create a design layout, the common mistakes they are:

  • Using the wrong and inappropriate colour for specific circumstances. For example, using s cheerful colour for an event of mourning.

  • Using far too many colours, which can confuse the audience.

Then, we will get into the final and (hopefully) fun part, which is to create your mood board of colours. I will stress that creating a mood board does hold a vital role in the professional design flow, especially with clients. We will look into mood boards in greater detail in that section.

I like to advise that this is a very long post. If you want to learn this, I would recommend getting a paper and pen and write down the keynotes as they will be useful for you in the future. Now, let the fun begin!

The Colour Psychology Session

TIP
There is one important information that you must be aware of. In every country, some colours represent a different meaning in their culture. For example, in Greece and Italy, people wear black when they are grieving. However, this is a big contrast where in India and China, the people in mourning wear white. Therefore, if you are designing a product that will target a different geographical location, it is strongly recommended to do some research on how the community viewed colours.

First, I will go through the colours at its purest form. That means the colours are not dark or light, nor the colours with warm or cool tones at this stage (there will be a section for them).

The colour Red

Whether the atmosphere setting is positive or negative, the vivid colour is known to increase your heartbeat rate and pump the blood around the body system faster. Therefore the colour represents that dynamic and energetic flow, and it can send a strong, powerful message. Red is also one of the colours that can quickly grab the attention of a user.

Thus, It is a popular choice to apply red as a base colour in consumer products. For example, Coca-Cola can mainly is red, and it is hard for a consumer to miss out when seeing it sitting on a shelf with other products. It is because the colour is vibrant, it sends out the vibe of its energetic personality. Note: Coca-Cola company initially were selling syrups in pharmacies to help the user to boost energy.

But, red can also be associated with danger, conflict, war and even death. This concept is mostly to do with blood - something you are likely to see in dangerous situations. That can work well when using red with black in the layout as both colours together come across as sharp and powerful.

So, think the danger sign in this way - Warning! If you do not act now, you will face danger right at this moment. When a user sees that, adrenaline will hit them, causing them to respond immediately. However, in stark contrast, the colour red can also represent the form of desire and love since we associate love with the body organ, heart.

10 Keywords that represents the colour red
Alert, anger, danger, dynamic, energetic, love, passion, powerful, stress, vibrant.

Two websites using red as one of its core colours
bear-on-unicycle

The colour Orange

The colour orange also gives out an energetic vibe in most circumstances. It is a bright colour because people usually compared orange to summer and the tropical environment and when the sun either sets or rises, the surrounding scenery goes bright orange. Also, some people feel better in the summer season, hence it is considered as an uplifting and joyful colour.

The colour orange plays a vital role with children as it holds many benefits. It is a gender-neutral colour that most child can connect to because they both share a common ground of being playful and creative. Hence, the colour orange is used often in healthy-eating packaging such as fruit juices. That is because the colour has connections to fruits and vegetables, food that would improve health and energy. For example, the shape and colour of Robinsons Fruit Shoot (orange flavour) resemble the traits of a child - bright and playful.

On the other hand, in comparison to the colour red, orange is less powerful to send a negative message. It does not associate with anger or death. Instead, it is used mostly in cases to sends out a warning to be prepared and cautious. For example, the red weather warning symbol states that actions are needed to be taken a step right at that moment. Where the orange warning symbol is more appropriate to say that there could be a problem, be prepared to act on it soon.

Designing a web layout
If you apply orange as a base colour, use light and bright colours to work with it if the branding identity is supposed to be playful and cheerful. If it is the opposite where it is more of a serious approach, orange will work best with very dark colours as it would feel heavy.

10 Keywords that represents the colour orange
Bright, creative, flamboyant, fruity, happiness, hazard, joyful, playful, summer, tropical.

The colour Yellow

It is the brightest and notable colour, to the human eye, out of all in the hue circle. The colour yellow holds many kinds of positive meanings. For example, yellow can mean warmth and glow because, in the hot summer, the sun is at its brightest. It also can represent growth because, in spring, it is when the flowers like daffodils bloom. Having mention sun and flowers, it can also have a relation to nature like sand, wheat and animals.

Yellow also plays a role in creative thinking. One prime example is the product - post-it notes. It is yellow because it symbolises the light bulb, where there is a saying that the light bulb goes on in someone’s mind when they came up with an idea or thought.

However, even though there are positive meanings in the colour yellow, it can have a negative effect from a different perspective. For example, yellow is so light that it is airy and open with plenty of space. On the other hand, that space could be too loose that it feels empty and isolated, possibly triggering fear. That also applies the same to yellow being a friendly colour, but it could come across as weak as it lacks security.

That is not to say that the colour yellow cannot be used in a design that sends out a powerful message. It just means it may have to rely on other strong colours to help it balance stability and strength.

10 Keywords that represents the colour yellow
Fear, friendly, glow, growth, innovative, isolation, open, spring, warmth, weak.

Two websites using yellow as one of its core colours

The-Wisdom-of-Bees

The colour Brown

I think some people tend to focus brown as a dull colour. However, it can play a vital and positive role when it comes to creating a product with a story behind it. For example, nature has many elements that are brown - Earth, wood and branches, the soil, rock, animals etc. It also has an association with the countryside and farming setting. Hence, brown resembles a down-to-earth character that brings warmth and stability (think of being in a beautiful log cabin and relaxing by the fire having a sweet hot chocolate).

When people think of food and beverages that are brown, there is a wide range of them such as chocolate, cakes, brownies, cookies, coffee. Therefore, we symbolise brown food as warmth, comfort, soft, and tasty. Brown also boost our appetite, as well. For example, a close-up video of warm melting chocolate being stirred can gain a consumer’s attention. (Mmmm yummy! :heart_eyes: )

Another case example of using brown in design is creating retro and vintage styles in a product. That is because people associate the colour brown with elements in olden times such as paper bags, sepia-tone photos, fashion trends like clothing, typography, and so on. Therefore, brown is more of a gentle tone that doesn’t stand out as much. However, it could feel like a lonely colour because it does not get the attention of others (especially if surrounded by strong colours).

Designing a web layout
To prevent brown being a weak colour, use it as a base colour and work with other strong colours. Luckily, almost all the colours work well together with brown. Another bonus is bright colours, along with brown as a base colour, can make the website stands out so well. Also, despite its strong connection to historical styles, brown can work well with modern design as well. The key to using brown in web design is to create the perfect palette of other colours that have a big contrast to Brown.

My personal experience
For my final project at college, I have created a fictional chocolate company. I have used mint green, warm pink, and honey yellow together with brown in my branding identity. I did this because the bright colours represent the flavours of the chocolate, while brown is to notify that this company is focused on chocolate. It was definitely fun…and starving!

10 Keywords that represents the colour brown
Earthy, lonely, nature, retro, rural, rustic, sad, stability, support, tasty

The colour Green

Some people automatically perceive green as a positive colour. That is because, in media and culture, we have been taught to see that the colour gives us stability, direction, and permission to go ahead. To explain this better, remember that when we look at red, it would send our heart beating faster and possibly become stress. Green does the opposite. It does not cause our body to go into stress mode; instead, it reassures us and makes us feel more relaxed.

That is why you would see the tick symbol being green and the cross symbol being the colour red. That concept is the same for traffic lights. Red means you must stop; otherwise, there will be danger ahead, green states everything is safe now, you can move along.

Therefore, green is used widely in places such as health (hospitals, pharmacy logo), and finance (paper cash, stock exchange). But importantly, the positive perception of green is all down to nature. In nature, the green element would be leaves, trees, grass, stem, plants, and so on. They represent stability, strength, air, freshness, cleanliness, growth (they are the growing trees that help us to breathe the fresh air). Thus we compare the colour green to those meanings of eco-friendly, relaxing, tranquillity, peace, friendly.

When the colour green is used in designing a product (such as web or app layout) that aims to send out a positive message, it works best when green is used with white in the palette. That is because they both share similar characteristics, therefore using two colours together bring more power.

However, the colour green could also mean sickness, greed, jealousy and envy. Therefore, in media, some witches are seen with a green face, which is to express those personalities. This concept originates throughout history from the Ancient Greeks to Shakespeare, which I will not go into. However, do take it into careful consideration of using the colour green in the design product.

10 Keywords that represents the colour green
Clean, eco-friendly, envy, fresh, greed, growth, jealousy, peace, strength, tranquil

Two websites using green as one of its core colours

the-fruit-box

The colour Blue

It is a known fact that when a person’s body parts like hands or feet go blue, it is to do with few underlying reasons. Either their heart is having difficulty to pump blood, which results in poor circulation, or it is related to being in the cold temperature. Therefore, we reference the colour blue to the cold and also relate it to the sea and the sky. Consequently, we symbolise blue with being cool, confident, and poised. However, it can be confusing because there are a variety of understandings of what blue could mean. Here are some examples below.

Blue is one of the most popular colours in branding identity that is to be used in political campaigns, corporate businesses. It symbolises power, and they want to show that they are in control. Even though blue shows its strength and security, It could come across as cold, intimidating and unfriendly. That is because it can feel like you are being controlled, especially if the environment is overwhelmingly blue, it can make you feel trapped.

But, when using the colour blue in the interior or graphic design in places like cafes, restaurants, hotels etc. by the sea, blue is also considered to be a relaxing colour due to the sound of the sea waves. Therefore these places aim to make the environment feels refreshing and relaxing for users.

Designing a web layout
When the base colour is an intense colour blue, it needs to be carefully balanced. Otherwise, using it as a background colour for a notable element could feel too overpowering that you are almost drowning in it. Try using lighter shades of colour such as white to work with the blue.

10 Keywords that represents the colour blue
Cold, confident, control, cool, corporate, firm, power, strong, restful, unfriendly

The colour Purple

It is the colour of elegance and purple is often expressed with royalty. In ancient times, it was challenging to create a purple dye, that only the royal family wore purple clothing. It was to show that they were in power, and they will look after the nation and provide them with stability. In modern times, creating purple dyes are now more accessible and frequent to make. The colour purple still kept its traditional association with luxury, wealth, and sophistication, dignity, and goodness. Purple is also described as a colour of sensitivity and spirituality as well. That is why it is one of the colours widely used in bereavement and counselling services as well as other organisations that handle sensitive matters.

However, overusing purple can change its meaning. The colour could come across as arrogant because it can be seen to try showing off too much of its wealth. So, it is essential to balance the shade, especially when dealing with a project that holds a sensitive matter.

My personal experience
When I was at college, we had a local bereavement organisation for children requesting a new branding identity and web design layout. What I have done was using the colour palette of dark purple, yellow-greenish and white for branding. When I used the purple in the web layout, it was used to its minimum, and it was only applied on navbar and subheading text. To keep the layout balance, I have used white as the main base. It was risky (considering it was a sensitive real-life project), but it works out due to the colour balance.

However, that does not mean we can’t use purple as a base colour in uplifting circumstances. Some people recognise purple as a colour of creativity and fun. For example, look at the branding of Cadbury. Its distinctive colour was a tribute to Queen Victoria, whose favourite colour was purple. Cadbury added a twist in its branding by portraying its identity as playful and imaginative. They did this by creating elements that resemble those characteristics to work it with purple, and that results successfully into giving consumers a fun and luxurious experience when using their products.

10 Keywords that represents the colour purple
Arrogance, dignity, elegance, nobility, rich, royalty, sensitivity, spiritual, wealth, understanding

Two websites using purple as one of its core colours

The colour Pink

It is seen widely as a feminine colour. However, pink can have its vast use and play a key role when adding the colour in a design element that will attract users regardless of their gender. Some culture portrays pink as a gentle, sweet, kind and loving colour, and they often compare the colour to flowers like roses. It can boost one appetite when seeing the colour, and since pink represents sugar and sweet, it can also be associated with food and beverages such as cakes, exotic fruits, milkshakes, smoothies, and so on.

It has been said that pink has come across as a weak colour as it represents vulnerability and tenderness. That is because this concept has a connection to how femininity was perceived in the olden days. In design, that can be somehow true. For example, if the background is either black or white, and all the subheadings’ colour is soft medium pink, the subheadings will not be seen as a dominant element. That is not a bad thing because not everything can be powerful. But it is terrible if you, as a designer, want them to be!

That weakness can be changed when using the right amount of saturation, shade and size. For example, vivid shades of pink are seen as energetic, playful and lively. Therefore, if you want pink to stand out from other elements, give it a boost on its saturation, shade, and brightness levels. But, don’t overdo it as it could be straining to our eyes.

Designing a web layout
No matter what, medium and bold pink always work best with black and white, and that is because they help each other to be seen. For example, if the background colour was either black or white, you can still read the pink text. That goes the same if the background colour was pink and the body text was black or white.
However, be careful with other colours as some can drown in the pink. For example, a webpage background colour is vivid pink and there with a small link button at the top corner, which is a not-so-bright orange. That is very likely that users will struggle to see that button (and probably will become frustrated if they have been instructed to press it).

10 Keywords that represents the colour pink
Caring, dainty, delicate, feminine, gentle, nurturing, loving, sweet, sugar, vulnerable

Black, White, and Grey

All three colours may not be vibrant and colourful. However, they are the most used colours in design application as they work so well with any shades in the palette. Each one of them has its meanings and personalities, and despite its good relationship with others, it can make a big difference in how the design will be overall perceived. What I mean by this is the colour scheme of red and black send out a different meaning in comparison to red and white.

Black
The darkest colour that is seen to have its serious meanings. It represents fear, feeling lost (you are not able to know where you are) as well as feeling claustrophobic (lack of space and it feels closed up). But it also could be seen as evil because of its association with the darkness. It is also a symbol of death and grief.

On the other hand, black is considered to be an appealing and attractive colour as it is referred to as elegance, prestige, power, and wealth. This concept based on the black felines (black cats are amazing!) such as panther, jaguar etc. where their personality can be mysterious and playful.

White
In comparison to black, the white holds the concept of positivity. It is often symbolised with air, purity, faith and innocence. As well as being the lightest colour, it represents the light, guidance and direction. White has also been seen as a colour of cleanliness and perfection. (Now I am starting to see why Steve Jobs have used this colour in Apple branding).

Also, it has a strong association with the concept of a fresh start, where everything is blank and new. However, that could also be seen as a bad thing where that space is too spacious that could make you feel lost and isolated.

Grey
Some people view grey as the dullest and emotionless colour, and it is considered to be one of the least favourite colours. It has its association with depression and negativity. However, it also has its good moments and useful purposes as well.

Grey is also considered to be a timeless colour, which it never goes out of trend. Thus it is handy because it prevents continuously having to update design over time. It is also both modern and futuristic as it has the feel of metal and technology. But also, the colour can be associated with nature because of the shades in stones and rocks. The greatest thing about grey is it can go with any colour scheme as long grey has the right tone. For example, warm grey works well with cream, green and brown when creating a product to do with nature. Cool grey goes nicely with blue, black, red, white, and even green.

Dark Colours

Dark colours have richer, deep, and sensual meanings. For example, some have compared a rich red to red wine and berries. The colour blueblood is often associated with royalty and aristocracy. Therefore, some would visualise that darker vibrant colours fit more in the formal and prestige scenery. Niche and up-market brands often adopt dark colours into their branding identity and then to use them heavily while light colours would play a minor role.

Other meanings of dark colours:

  • Purple - magic, mysterious, secretive
  • Red - seductive, leadership

Dark colours are best to use if you are creating a branding/web design, and they are:
Aims at adults, Elegance, formal, luxurious, serious

Light Colours

Pale and pastel colours have an uplifting and down-to-earth mood. There is more freedom in using light colours as it is appropriate for all age groups. People see them as friendly colours, and that is because the colours are open and airy. They feel more included and connected in the environment. The meaning of light colours are various, they can be playful, but they can also be relaxing too. Some colours could be a sign of love and healing, but others could also mean loss and weakness.

Some of us perceive light purple, blue, and green the environment of tranquillity. Because, people compare purple to the herb lavender, which is known to make us relax. Light blue encourages relaxation as it resembles the blue sky. Nature is what light green symbolised in because it brings the feeling of freshness and rejuvenation. That is why pale colours are seen widely in brandings of spa therapy and spiritual healing services.

Warm and Cool base Colours

It is not widely understood that colour with warm tone makes a big difference to the same shade with cool tone when it comes to expressing meanings and moods. You will have a better understanding of colour temperature when you learn about the colour wheel (which will be discussed another time). But for now, I will give you some necessary information to start.

Here is one example, using a red colour

Pure red
As already explained above, pure red means nothing has been added to make it lighter, darker, warmer, or cooler. It is red in its original pure form. I have already explained what meanings symbolised the colour. But it does make a big difference in what temperature of the colour it is.

Cool Red
Sometimes, we referred to as ‘bluish-red’. That is because, in the colour family circle, that side of red leans toward more to blue. It is still an energetic colour but in a less stressful way. Remember, blue comes across as calm and relaxed. Therefore, cool red would associate more to love, passion, and being playful, and it is more of a positive colour in comparison to ‘orangey-red’.

Warm Red
It is sometimes known as ‘orangey-red’. Again, it is a bold, dynamic colour, but some could see this colour having a negative effect such as increasing stress levels. However, that could change, depending on how warm red will work with the other colours in the palette.

I will not be going through every colour in both warm and cool tone (otherwise this will never end!) But, make a note of this.

If the colour has a cooler tone, its meaning could be calmer and confident. But, it could also mean hostility and unemotional.

If the colour has a warmer tone, its meaning could be energetic and playful. But, it could also mean stress and fear.

Memorising the meaning of Colours

In case you feel so overwhelmed by this long list. Please don’t. Designers may know the meanings of the basic of some colours by heart, but even they do some research on colours now and then. It is like coding. We do not memorise everything. Instead, we learn the concept to get a better understanding of what this specific colour shade do and don’t. But when we do need to know something, well, Google is your best friend!

So, for example, if I need to create a branding and web design layout that needs to be dark and mysterious. Well, the word dark does help with the hint lol. But, if I ask myself what dark colour associated with mystery, I could search in Google:

  • “Colours that symbolise mystery.”
  • “Mystery Colour scheme.”

After checking out a couple of articles, I have found that purple was one colour to symbolise mystery. Then, I went to google the colour schemes and have found some to give me ideas of what would work in branding.

Another way to save you a bit of time to research is to draw a spider diagram and add colours with their meanings. This also includes light, dark, warm, and cool colours too. Of course, if you find any more meanings to colours, add them! However, quickly re-read the list of colours and their meanings and find any keywords from there and add to the spider diagram.

TIP
If you are really feeling creative, how about getting a small A5 sketchbook and add everything you learn inside? It could be the spider diagram of colour meanings to colour wheel image to typography illustration. That way, you keep this sketchbook by your computer, and whenever you need something, you can always go back to it. Oh, do not forget to decorate your front cover with the title “How to be the greatest web designer” :wink:

Mood Board

First of all, a mood board is a big board with a collage of contents. What we do is when we have a project, and we want to find ideas and inspirations for it, we add creative visual contents to the board. These contents normally include colour palette, patterns, the imagery of related objects, typography and many more.

To give you a better understanding and example, I have a project, and it is to make a web design layout for a safari park. To get creative ideas, I would look for images of objects that are related to the safari park such as the scenery and environment, animals, nature etc. I would also look for colours where some are based on what you see the most when you are at the safari park. Then, there are patterns and textures which could resemble the animal fur prints. I hope you have got the idea. If not, google for examples of a mood board.

There are two ways of doing a mood board. One way is to get a paper board in A3 or A2 size. Then, you add physical contents, whether you printed from the computer or they are actual objects (fabric swatches, colour paint etc.) Another way is to do it is to create a mood board in electronic format. It tends to be a preferable option because it is less time-consuming, easier, and it saves storage. Also, whenever in the future you have another similar project, you can always go back to that file of that mood board and use it. But, it may feel less creative because you will not get that physical feel and experience of the content that you have found. I personally do the mood board in electronic format; however, what is your preferred format is entirely up to you.

Mood board are actually vital for both designers and clients. It is important for designers because it helps them to build up creative ideas for building a successful branding identity. But, once they have finished creating the mood board, the designer would meet the client again to show the mood board and explain what is the designer’s aim to create the branding. This is important because the designer can go ahead and move onto the next stage of the design process if the client is happy with what has been done. However, if the client is not happy, this would mean having to go through some part of the initial stage process again and discuss what the client’s vision in their project is.

Don’t forget. We use the information that we gathered and created from the initial process - meeting the client, brainstorming, and market research. But, because we did not go through all of that, I will do a small tutorial on making an electronic-format mood board on images of colours where it represents their meanings.

Mood Board Tutorial

Normally, I do my mood board in Adobe Indesign. But, then I thought it would not be appropriate as the software is not free; thus, it is not accessible to everyone. So, I have come across this online web tool called Adobe Spark. I think this is a great tool because there are ready-made templates and guidance to help you to create not just mood boards, but also social media content, videos and many more. There is also a mobile app where you can create content on the go, but this tutorial is for desktop only.

Make an online Adobe account

Go to the Adobe Homepage and create an account by going to the sign-up link.

After creating the account, we clearly want to use the app. However, I think this site is not very navigational when trying to find the app. There are two ways of doing this. Download the desktop app or google search Adobe Spark, which there should be a link to take you to the app page.

When you do, it will ask you for a pricing plan. Click on your preferred pricing plan.

Getting Started

You should be at ‘your projects’ page. At the top-centre of the page is the blue plus sign button. Click this button to start a new project.

There are ways of creating a mood board.

One option is to create a project from the beginning. That is done by clicking the dropdown list - ‘Start from scratch’ and click on the option - graphic. This dropdown list is displayed on the top right corner.

However, as this is for beginners, I will be creating a mood board using a mood board template.

On the top-centre page, there is a search bar that says ‘Search Spark templates’. Enter the word ‘mood board’.

As you can see on your device, there is a wide range of templates that you can use to make a mood board. They already have content such as the heading and images on the board, but we will be changing this. You can pick any template you prefer and once you have found the one you like, hover over and click on the link ‘create from’.

This is where the fun starts! I have chosen this template because I like the grid layout and style. On the right is the tools panel that you will be using to make changes to the board.

Play around with the tools. If there is any particular tool that you are confused by what it meant to do, post a comment below.

The mood board project mission

Our mission is to create a board that focuses on one colour and find all the meanings that represent that colour.

While the choice of colour is up to you, I am going to do a mood board on the colour blue. Then, we will find all contents that are blue and represent its meaning. They can also be objects as well that has an association with the colour. For example, the sea plays a role because it is both blue, and its meaning is tranquillity and coolness.

If your board have text, double-click on it and change the heading content, I will call it ‘Feeling Blue’.

Note: On my board, it technically has two text headings, and I have changed both. If you only want just one text, click on the targeted text and click the trashcan icon above the board to delete it.

You can also move the text around and resizing it. To resize the text is by dragging the corner point of the text as shown above.

I also want to change the font of the text ‘Blue’ to a different one. Go to the right-hand tool and in the font-family dropdown list, choose any font you like. This is optional, but it helps you to get the feel of using the tool. I may change the text colour, but this will be done after we added the images.

Click on one of the images on the board, on the right in the tool section. It will give you options to do something about that content. Click on the button ‘replace image’.

There are ways of adding images.
When we clicked on ‘replace image’, it will take us to the image panel and show free images that you can use. It shows a search bar when you can type in a keyword, and it will find you relevant images. I have typed in ‘Blue sea’, and I have found an image that I thought look refreshing and cool.

The other way is if you can add your own image. In the tool panels, there is an ‘add’ button, click it, and there will be options popping up. Notice that you can also add text, icon, and logo as well. Use this when you need to add one of these contents.

I will be sticking to adding free images as this is for demonstration purpose. Repeat all the steps to add the images in. If you are doing the colour blue, think of objects that are blue and have an association with the meanings of the colour. This could include putting in the search the blue sky, calm blue, blue sky. Or even just put the meanings alone and find images that have the most blues in it (or even just the blue can be good enough).

After adding all the images, I have decided to change the colour of the heading to white, so it works well with the background. To do this, click on the text and go to the colour panel in the tool to see the colour swatches.

After adding all the images, I have gotten rid of the white box and change the text headings to white to work with the background.

I feel it might look nice if there was a white border surrounding the images like a photo collage. That is my opinion, but this could be better because there are not that many images. To add a border, go to the layout panel and change the level of the border. But when I did this, my border was blue (your border may be a different colour).

Since this is not the colour I wanted (I thought this was rather odd), I went to the colour panel to change the colour of the border. However, there was less control over that, which is disappointing. But, I have solved this by changing all the colours in the ‘current colours’ palette to white. To do this, it is the first palette with a bunch of random colours. There should be a slider icon button on top of the palette. When you hover over it, the text that popped up should say ‘change colour’. Click on that button and make all the colour white. This may not be the right way, but that is how I have solved my problem.

And there you have it, folks! For some of you, this may be too basic (?) However, just remember this is to help you learn to make your first mood board in its most simple form when you feel like you could do more, research for mood board tutorials and try them out. I don’t know any at this moment, but if I do come across one, I will update this topic with a link.

I hope this was helpful to you. If you think there could be an improvement, please post feedback, and it would be greatly appreciated. This goes the same for if you have any questions.

Until next time, enjoy the weekend!

Handy Tools

*TBA*

Extra Readings

The psychology of colour: how Coca-Cola captured hearts around the world

Mood board inspirations

Essential guide to mood boards

11 Likes

Wow! I didn’t know how important color was. You must’ve done a lot of research on it. Colorblind people can mostly see blue so do you think they will see blue as a positive feeling?

1 Like

Thank you for your comment and also taking interest in this. :slight_smile:

It is so much important than people think. Sadly, too many people think the subject is so irrelevant to design theory and principles because it involves too many about ‘touchy-feely stuff’ and less the practical when actually colour psychology is practical.

That is a very interesting question! As I know very little about Colourblindess, I did a bit of digging to know what it is exactly.

First of all, here is an article for everyone who wants to know a bit more about the condition. I have learnt that there are different types of colourblindness.

So to answer your question, apparently they have special glasses to help them to see the colours as least to the best it can do. So we would think they would know since there is a tool to help them right?

But, what has caught my attention was that I have read a snippet of a paragraph stating 40% of children leaves school without realising they are colourblind. Considering children learn both themselves and at school about recognising colours and reference them to certain emotions without realising, I am yet to find the answer to how people with colourblindness feel about colours.

It would be really great if an FCC member with colour blindness could see your question and answer this as we could learn from this. :slight_smile:

2 Likes

Color blind people with deuteranopia (red-green color blindness, the most common kind) can still see red and green, they just look equally brown-ish is all. Blue is still a “cold” color no matter what.

I used to write little web app utilities for my department and one of the three or so primary users of those apps was color blind. I used a light yellow background and italics to mark stuff invalid/warning while also keeping the text red. I also had a couple Chinese co-workers, for whom I know red is a “positive” color, but they both told me to not worry about it and just keep making errors red.

2 Likes

Oh, I didn’t know that they could see them. Thanks for telling me.
Now that I come to think about it, as you have said it, I never noticed that red could be a positive and “dangerous” color.

1 Like

Thank you for explaining this in greater details. However, if I am correct, this means red would not come across as a bold, striking colour for a person with deuteranopia, am I right? Luckily most hazard signs come with word or symbol to indicate warning or danger, but as I have mentioned in the topic above when a person sees the colour red (especially as a base colour), our heartbeat rate would increase, and in this case of hazard signs, it could automatically make their stress levels go up, and that is how a person would take action or make decision immediately. I just wonder what are the perceptions and reactions toward the colours red and green for people with deuteranopia.

When you say you have used light yellow and italics, is this is something that they have been taught to recognise this style as a warning or invalid??

Pretty much all colours have their positive and negative meanings. It is about using the right shade and tone of that colour to express that feeling.

But also, for example, if you wanted to create a product using only one colour that will send a message to people saying that this is dangerous. You would look at the swatches of colours and see what colour stands out and is more powerful to symbolise danger.

Now you are more aware of colours and their meanings. I am going to ask you why do you think most sale signs in stores are red and white? You don’t have to answer if you don’t want to. :slight_smile:

1 Like

I think some people do not know how much important color is and how it impacts the readers. This is a good article to read and to spread awareness in choosing the right color for your site.

1 Like

This is a fantastic resource :astonished:
I pretty much couldn’t design myself out of a paper bag so this is going to be ridiculously helpful. Thank you so much @Madalena.design for putting this all together!

1 Like

I’ve really no idea whether color-blind people have different autonomic responses to colors, or if there’s even been a serious study of it. I’d hazard (har har) a guess that one’s response to hazard signs is largely a matter of conditioning anyway.

As for the yellow/italics thing, that was just the UI metaphor I picked, and my users got used to it. The error messages themselves were still red, so they stood out pretty well as errors to people with normal vision anyway.

1 Like

First of all, welcome to the FCC community! :blush:

What you have said is just right on point. I think because colour psychology can be complex if one is not taught about it, so they tend to go for colours that are appealing to their eye rather than the users and sometimes they can go too far.

I know it is not a website, but this reminds me of the time when I was visiting my relative in the hospital where he has his operation. Most of the time, I was dumbfounded by the interior design in the ward because the wall was bright red, and the flooring had a shade of brownish-red. In the corridor, there was a big, modern-looking ornament on display that supposed to be a heart. I can definitely say from my experience; it was like being inside a body, which may not be great for those who are squeamish! :woman_facepalming:

You are very much welcome :slight_smile: I am very happy to hear that this has helped you.

Remember that anyone including you can design, but to be a good designer is to always practice and how you your mind (and heart) to it. If you stick to by what you have learn of the basic standards of design principles and practices, this will be enough to create good design. :slight_smile:

1 Like

I’m not really sure why, but I think the signs are to catch someone’s attention.
A color that stands out in the midst of a colorless city.

1 Like

Ah, my bad, sorry if I overloaded on you with my questions! :grimacing: However, now you have mentioned it, I wonder if there have been any studies in this field at all. I have barely found any resources, but I have come across a couple where it states that some people with colourblindness condition feel “handicapped” and that they are not allowed to drive as well as certain careers.

Well, I think this is a great idea of what you have done and it should sort of be part of a web accessibility standards (that if it not have been implemented). :slight_smile:

Accessibility for color-blind people is part of quite a few a11y documents, including usability.gov but I don’t know if WAI covers it explicitly. It’s always been a staple of good UI design in general to not distinguish error/warning/invalidity conditions by color alone.

Never heard of a state that didn’t allow colorblind people to drive. It’s something like 9% of the male population (colorblindness is predominantly a male thing), so that’d be a pretty huge deal. They can’t be fighter pilots of course.

1 Like

In a way you are right. Red is a striking colour that will catch anyone’s eye when you are either in the street covered in grey concrete or an e-commerce website where the background colour is normally white or black.

But, there is more to it…That big red sign is to cause stress and panic for shoppers. In the shoppers’ mind, it is like the advertisement are saying “Quick! Everything is 75% off! Get those favourite shoes you kept your eyes on or they will be gone! get it NOW!”

When actually, the sign is saying “Up to 75% off” with the words “up to” in small print. I know this from my personal experience when I use to work in a department store and have dealt with so many customers who were in panic or stress mode and complained: “that red sign” indicated that it is 75% off, not up to. Crazy what colours can do to us, right? :stuck_out_tongue:

1 Like

Neither did I. But, when I was doing some research on Colourblindness, I remember coming across some explanation that it could affect them and may not allow them to drive and have a career in either the police or firefighter force and being a pilot. Maybe, this is for the severed condition types such as monochrome colourblindness? :woman_shrugging:

Great job, Madalena. This is a detailed and inspiring essay about colour, why it’s important for web design and how it should be used. I’ve learnt a lot about the characteristics, psychology, target groups of colours and the use cases for websites. Also, the 10 keywords for each color are super useful, and they clearly show that one colour can have very different meanings. I will try to create such a mood board of colours by using Adobe Spark. Sounds like a good idea. Though it’s not clear to me if using Adobe Spark is free or not.

On a side note: Goethe, the German poet, was highly appreciated for his novels and plays, but he himself regarded his “Farbenlehre” (color theory) as the most important part of his work. This may indicate what pivotal role color plays in the visual world.

1 Like

I am pleased to hear that you have found this to be detailed and helpful. Thank you! :smiley:

I am glad that you have mentioned this because I was hoping that by doing the techniques of 10 keywords would be helpful to others since the meanings of colours are complex, my concern was I would only confuse everyone. So, thank you on this one as well. :slight_smile:

It is free. However, it would mean there are limitations on features that are included in the starter plan. I think Adobe Spark is a handy tool for a mood board at a basic level. But if one wants to have more control and go beyond the basics, I am not sure if the premium service of Adobe Spark would do the job? Another free tool that I have heard is useful for making a mood board is Canva, which I have yet to try it out.

Also, if you do try out making a mood board, I hope my instructions are clear and helpful. If not, please let me what I need to do to improve :slight_smile:

This is interesting, and I will do some research onto Goethe’s works on “Farbenlehre” at one point. Although I am not sure if I have learned about Goethe at school, his name somehow does sound familiar…:thinking:

Apropos bold colors: There’s a great new post by Andy Clarke who demonstrates how magazine ideas of the amazing Brazilian art director Bea Feitler can serve as an inspiration for web design (Flexbox and CSS Grid). In the 60s Feitler shone with her intensely colorful magazine covers: https://www.smashingmagazine.com/2019/10/inspired-design-decisions-bea-feitler/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_219

1 Like