Table of Contents
How great would it be to know how to create beautiful minimalist design on the first try? Imagine you would know what it takes to achieve that. The foundation of minimalist design stands on six fundamental principles. In this article, you will learn about the last three of them. These fundamentals are bold colors, large photography and embracing simplicity. Today, we will take a look at each of them. We will discuss both, theory and also how to transfer it into the practice. If you ever wanted to master minimalism in design, today is your lucky day.
Fundamentals no.1-3 are in part 1.
Fundamental no.4: Using bold colors
The fourth fundamental of minimalist design are colors. When you have the knowledge, you can use colors to take your design to another level. Colors can help you communicate the message of your design in different and stronger tones. Colors can also help you evoke different moods and emotions in users. Just by using the right color, you can transform design that was boring into something bold and fresh. I saw this effect in action when I worked on design for Harley-Davidson.
My initial idea was to use only black and white colors. This didn’t work. The result was still lacking something. There was no spirit and no energy. The layout looked lifeless. No, that’s not truth. Let me be completely honest with you. That design looked like a piece of crap. My initial idea was to delete and start from scratch. Then, I decide to run a small experiment. I changed all the buttons in the layout from almost black to bright orange (#f6600). I also used this color for dividers between headings and paragraphs of text and few links. The result was mind-blowing.
Just this “small” change brought the design to life. It almost looked like a completely different layout. After this experience, I finally understood how powerful colors can be. Yet, with this power also comes a big responsibility. You may want to give it a try and infuse your design with a dose of colors. Unfortunately, that can do more harm than good.
This is probably a waste of time. Yet, let me tell you that knowing how to choose the right colors for your color palette is crucial. The same is probably true about saying that you should have some knowledge about color theory. Psychology of colors should be part of color theory.
Color theory and minimalist design
Every designer who is serious about this craft should learn these concepts. You will not be able to survive in any design discipline without learning color theory. At least, you will be there for a long time. Put simply, color theory has undeniable place in the theory of design. However, you may not need to master color theory to create great minimalist design. One of the benefit of minimalist designs is that it uses everything in small doses.
Color palette for design project usually contains at least three colors. These colors are background, base and accent. When you work on project embracing minimalist style of design, you may need only two colors. Well, we can argue that you can choose just one color. For example, you can choose to use only black. However, you would probably need to use white as a background to make the text visible. This means that you will still need two colors – background and accent color.
Let’s assume that you decided to limit your color choices to two colors, like I did with my portfolio. As a result, you may not need to know as much about color theory. Big part of color theory is focused on how to use different color schemes to combine colors. If you use only two colors, this will probably not be so important for you. You will be fine with knowing just a bit about how colors works. In case of minimalist design, many designers stick to simple color palettes.
They like to use colors like simple black, white and/or some shades of gray. However, this is not what minimalism is about. Minimalism offers enough room for any color you would like to try. The question is, then, how can you choose the right colors?
Meaning of colors and cultural norms
If you want to make sure your color palette contains the right colors, you should do these two things. First, you should learn at least something about colors and psychology. In every culture every color has certain meaning. Also, some colors work are better choices for certain industries. If you are designing something, you should know what effect will colors have on users. For example, many people think about white as symbol of purity and simplicity. White is also a good choice for designs related to weddings and similar events.
Well, this is not true for all places in the world. In Chinese culture, white color is also a symbol of mourning and it is used in funerals. Therefore, white will not be the best choice for wedding website located in China. Another color with different meaning is red. In western culture, we use associate red with action, energy, assertiveness, passion, drive, courage and strength. We also associate this color with aggression, dominance, anger, ruthlessness, rebelliousness and violence.
In Chinese culture, red is very positive. It is a symbol of good fortune, enthusiasm, celebration, vitality, creativity, wealth and joy. These are just two simple examples. In the worst-case scenario, both of these colors can cause a lot of problems. On the color spectrum, there are many colors that can have different meaning. This is why I recommend that you learn at least the psychology of colors if you don’t want to learn the whole color theory.
Colors and your perception of yourself
The second step is to decide on what mood or emotions do you want to evoke with your design. Every color conveys some specific emotion. Some colors evoke happiness. Example of such a color is yellow. Other colors, such as violet and grey, may evoke sadness. There are colors that will fuel you with energy. Orange, red and also yellow are some examples. Then, there are colors that will help you calm down and relax. Pastel blue and green are probably the best for this.
Your choice of color will be also determined by the way in which you want to be perceived. Let’s say you want to be perceived as someone who is bold and innovative. Then, you will choose different colors than someone who wants to be perceived as someone who is conservative. This means that you should make crystal clear on what’s your goal. When you use certain colors they will determine users’ expectations. These expectations are formed quickly and are hard to change.
This means one thing. You should double-check your color palette with your goals before you move on. What if you don’t have any specific perception in mind?
Colors and personality
In this case, your choice of colors can be based on one of two factors. First, you can choose color(s) that play well with your personality. For example, if you are enthusiastic, full of energy and restless, calming or colder colors will probably not be for you. The same is true for calm and reserved people and warm colors. Chances are that there will also be colors you don’t like. For me, these colors are brown, pink and grey. I would never choose these colors for my portfolio.
The problem with choosing colors by personality is that it is hard to quantify. There is no precise step-by-step process or scale you can use. The only thing to find out what works is by trial and error. You have to experiment and let your intuition solve this puzzle. In other words, you have to trust your gut and wait until you will feel it is right. What if you want to let your personality speak while playing according to rules cultural or industry norms? You can combine these three tips. I think that this may help you achieve the best results.
Combining colors in minimalist design made simple
Let’s now discuss how to combine colors without immersing yourself in color theory. To make this feat a little bit easier, we will stick to just two colors. One background and one accent color. The safest way to combine two colors is by dedicating one choice to neutral color. Examples of neutral colors are beige, black, brown, grey, ivory, taupe and white. For the sake of simplicity, I would suggest that you stick to black, grey or white. Then, you can use almost any color you want.
This is what makes neutral colors easy choice. These colors can be combined with almost any color you can find on the color wheel. Whether you choose pink, yellow or violet, you can’t go wrong. All these choices will work well with black, grey or white. This is one of the reason designers often like to use neutral colors in minimalist design. If you stick to just two colors, and one of them is neutral, there is nothing more we can talk about. What if you want to choose contain thee colors?
In that case, I would again suggest that you start with two neutral colors. Then, you will choose one arbitrary accent color. This is, for example, how I approached color palette for my portfolio. I started two neutral colors – black and white. Then, I chose my favorite color (red) as accent. Since my first two colors are neutral, I couldn’t go wrong. You can do the same. Someone may want to argue that this is almost the same as the previous example with one neutral color.
At least white is almost everywhere. Therefore, you shouldn’t count it as color choice. My answer? I think that you should count any and every color in the design.
Using monochromatic color palette
Many designers embracing minimalist design also like to use monochromatic color palettes. What are monochromatic colors? Simple definition of monochromatic color can be something like this. Monochromatic color starts with a single hue. You can choose anything from red or beige to purple. Then, color palette for the design is created by using derivatives of that color. In other words, you will use a single base color along with shades, tints and tones of that hue.
Whether you use color wheel for your initial color choice is not important. At least this is what I think. It also doesn’t matter whether you will increase the lightness of the hue or decrease. It is also not important what color will you start with and which color will use for what. All these decisions will depend on the design you are working on.
What does matter in monochromatic color palette is contrast. You have to make sure that colors will not blend together. If so, nothing will stand out and design elements will hard to recognize. As we discussed, monochromatic palette is based on single hue (or color). This will be one of your color choices. Then, your second choice will be either darker or lighter variant of this hue. If you want to use three colors, you will choose two variants instead of one.
The principles of working with monochromatic palette are the same as with any other color palette. You have to decide how do you want to use each color variation and how it will appear throughout the design. Especially in minimalist design, you should use color strategically. Use it to create visual interest or direct users’ attention without adding any other design elements. Doing so will help you make color palette more noticeable and increase its impact.
Current use of colors in minimalist design
Should you use only one color? Or, should you use monochromatic color palette? These questions depend on you, your goals and your project. For now, let me quickly give you couple of numbers about colors and minimalist design. Maybe, these numbers will help you decide how to use colors in your project. All these numbers are from one analysis of 112 minimalist websites. Around 95% of these websites used either limited or monochromatic color palettes. Limited color palette means sticking to only one or two colors.
After taking a closer look, I found that around 50% of the websites used strict monochromatic color palette. Almost the same amount of websites used one or two accent colors. Otherwise, these websites used some variation of monochromatic color palette. Another interesting thing is that the majority of these monochromatic sites used greyscale colors. In other words, these websites used only black, white and shades of grey.
Crash course in color terminology
I know realized that we were using terms from color theory you may not be familiar with. Let’s fix it. Base color is the most dominant color in your color palette. You use this color as your starting point to come up with additional color choices. Next is hue. This is one of the 12 purest colors you can find on the color wheel. These colors are called primary, secondary or tertiary. Third term was shade. This is a color after you added black to make it darker.
Another term we briefly used was tint. This is, on the other hand, a color after you added white to make it lighter. The last term was tone. Tone is a color after you added grey to decrease the intensity of the color. One last thing to remember … monochromatic palette is based on one hue and its lighter or darker variants. This is I think the absolute minimum you have to know if you want to work with minimalist design. Do you want to learn something more about colors?
Another important terms from color theory are primary, secondary and tertiary colors. Primary colors are blue, red and yellow. Primary colors can’t be created by mixing any other colors. And, all other colors are created from primary colors. Secondary colors are green, orange and purple. These colors are created by mixing the primary colors. Tertiary colors are blue-green, blue-purple, red-orange, red-purple, yellow-orange and yellow-green. Tertiary colors are created by mixing one primary and one secondary color. These are the colors that make color wheel.
This is not all. There is more you have to know to master color theory. Yet, these information will be enough to give you a better starting position. Now, you have to practice and experiment, a lot.
Fundamental no.5: Large photography
In the last few years, use of large photography became a one of the leading trends in web design. And, it is no surprise that this trend appeared also in minimalist design. Minimalism gives you limited space and resources to work with. You want to make the most with the least. Large photography is a great way to convey message with big impact. Using photography in your design can also help you avoid one common problem with minimalism.
Many people think that designs embracing minimalism often lack any emotions. Sometimes, minimalist websites can seem to be emotionally distant. This may cause some problems when you want to create emotional connection with users. One of the potential “fixes” is using large emotionally charged photographs. Doing so can help you add a little bit of familiarity without causing any imbalances in the layout. However, you still have to make sure the photographs are not too dominant. Otherwise, your design may start to suffer.
How to use large photography in minimalist design
Large photograph can be the most prominent element in minimalist design. If you done it right, you can transform this visual asset into the form of artwork. Anyway, what are the best places to use large photographs? The best choices will probably hero headers and hero images. Using large photographs above the fold will help you capture users’ attention almost immediately. However, this doesn’t mean that you should limit your placement options only to fold.
As we discussed in one of the previous articles, there is no fold in great design. Therefore, you can use photographs virtually everywhere you want. For example, I like to use this visual element as an attractive insert to divide the content in the layout. Beautiful photograph can be a nice complement to otherwise text-based layout. In this case, the photograph will stand out even more because it will be unique. Yet, I don’t want to suggest that you fill your website with these inserts.
Another great place for large photograph will be area dedicated for product demonstration. For example, let’s say that you want to design a landing page. Then, you can use minimalist design to emphasize the product or service the website will be selling. Again, text-based layout with a couple of beautiful images can look amazing. If you work on website that contains about page, this is another good choice for large photographs.
One or two photographs can help you create connections with users unlike any other design element. Photographs can also help you communicate more clearly. If you can, it might be better to show it than just talk about it.
Choosing the right photographs for the right design
Let’s say you found a perfect place for large photograph. What are some tips you should keep in mind? The first step is to always choose photographs that are directly to your design and its message. What this means? Let’s say you are designing a minimalist website for internet provider. In that case, using photographs featuring cars, nature, or animals don’t make any sense. You should look for images featuring servers or computers.
I know that this may seem logical to you. Yet, it is relatively easy to find examples of websites that are doing this mistake. So, make sure every photograph you want to use is directly related to the design. It is also a good idea to ask other people. Chances are that you are quite immersed in the project. Then, it will be possible that you will see even the most subtle connections. You may see connections between the design and photograph where other people will not.
Choosing photographs with the right resolution
Second, make sure to choose photograph that have high resolution. Every photograph used in the layout have to look amazing on every resolution and device. If you don’t have some photograph in resolution you need, I would suggest replacing it. In any design, minimalist design especially, every detail has to be perfect. Blurry or pixelated photographs and other images can cause significant damage. Bad visuals can decrease the experience by several levels. If you ever wanted to reach the top Maslow’s hierarchy of web design, say good-bye to that goal.
Related to the second tip and web design, you should have every photograph in a number of versions. Excellent experience is not just about creating beautiful design. You also have to serve the right assets at the right time and on the right device. This means one thing. Do not decrease the website’s performance by serving large photographs to mobile users. Instead, you will make sure to use smaller version of your visual assets. Never force mobile users to wait because your website has to load some 6MB photograph.
How to use large photographs in web design
If you are working on a web design, I would suggest having at least six variants of every large image. These variants will be mobile, tablet, small desktop, average desktop and HD desktops. In the terms of resolution, I like to use 480px, 768px, 992px, 1400px and 1920px. These numbers are widths of photographs. Implementation through CSS media queries is simple. You start with mobile, or the 480px photograph. First media query is set to 480px. At this point, you will switch to photograph for tablet – 768px.
When the screen reaches the resolution of photograph for tablet, you prepare second media query. This media query (768px) will replace the photograph with version for small desktops – 992px. At this resolution (992px), the third media query will be triggered and it will replace the image again. As you can guess, the fourth media query will be triggered at 1400px. The fifth and last media query will be triggered at 1920px. At this point, you will serve the photograph with the highest resolution. I should note that you will be using media queries with min-width feature.
Keeping in mind composition
The third and last tip for finding the right photograph is focusing on composition. The right photograph for your layout has to contain all characteristics of minimalist design. What this means? Your photograph should contain significant amount of negative space. Extensive skies, white walls and panoramic scenery will work great. It should also contain only small number of objects. Photograph full of distracting elements will negate the benefits of the minimalist layout. Therefore, either remove everything unnecessary or choose different photograph.
Next, think about visual hierarchy in the photograph. If there is a higher number of objects examine the distance between these objects. Think about how you can use it to your advantage. Remember that objects that are close to each other appears to be connected in some way. If your photographs feature people, consider where are the people looking. If people in photograph are not looking “on” the user, they should look at the right direction. When we see someone we have a tendency to look at the same direction. This principle applies to real people and also photographs.
If people in the photograph are looking at certain direction, you can use it to your advantage. You can put you CTA or something important in that direction. Then, chances are that people will be more likely to look at it. In the terms of composition, also make sure the objects in the photograph are at the right place. We tend to scan the layout in two ways. We use F or Z pattern. In web design, F pattern is more prevalent. Therefore, top/left is the most important area. If we apply the Gutenberg diagram on the photograph, primary area is in the top/left. Next are top/right, bottom/left and bottom/right. If you can, arrange the photograph in the right way.
Note about the use of large photography in minimalist design
If you decide to design in minimalist style and use large photography, think twice about your design decisions. Just like with everything, it is easy to go overboard with use of large photography. Unfortunately, the consequences of doing that are much bigger. When you use higher number of these assets, it can significantly impact websites performance and usability. The result of that is often worse user experience. To avoid this, optimize all your visual assets and design with mobile first approach.
Fundamental no.6: Embracing simplicity
This is the last fundamental of minimalist design. I know that this may look like a no-brainer. However, I saw a lot of minimalist websites that were still filled with some type of clutter. When you decide to design something in minimalist style, every detail of the concept has to follow the suit. In case of web design, your navigation should be simple. You should merge related content and remove unnecessary links. Your website will not look minimalistic with 20 links in navigation.
My second tip is to trim down visuals. When you design in minimalist style, prefer quality over quantity. Go through all visual assets and remove everything that is not excellent. Set quality is your primary metric. Next, remove everything that is not related to the design. Everything has to be connected to your design in some sense. Everything in the layout has to have some purpose. Don’t stuff it with elements or objects just to fill the empty space. Instead, embrace the negative space and use simplicity to your advantage.
This principle goes beyond just visuals and website’s structure. You should simplify the content as well. If you can say something in two sentences, don’t waste the whole paragraph. If you can present your product or something else with two short paragraphs, don’t write whole essay. My third tip is to simplify your color palette. As we discussed in the beginning, you can create great designs with just two colors. Try this instead of overwhelming users with flood of colors.
My fourth tip? Simplify your typography palette. You don’t need to use three or four fonts. There is no one saying that design has to use more than one font. Give it a try. Play with different weights and you might be surprised.
Simplicity and client projects
Let’s say that you are working on client project following minimalist design style. The problem is that you think that client’s recommendations are not appropriate. Let me tell you two things. First, you might be right. You are the designer, not your client. You are the expert with years of experience. Therefore, you should be able to review client’s recommendation from professional point of view. And, you should be able to say whether they are congruent with his business goals.
Second, talk to your client. If you think that recommendations of your client are not right, you have responsibility to do that. It doesn’t matter whether your client will agree with you. You have to make sure to let her know about your doubts. For example, if you think the content is too extensive, suggest shortening it. Chances are that smaller amount of high-quality content will benefit him than the opposite. This is true especially in minimalist design. If you think the assets are not right, ask her for different ones.
Don’t be afraid to raise objections. If you are, remember that you are not confronting your client in a bad and harmful way. Instead, you are trying to help her, her business and her project. If you are right, your ideas and objections will benefit the project. If you are wrong, admit it to your client and move on. Remember that everything is an opportunity to learn and focus on delivering the best services to your client.
Closing thoughts on minimalist design
Congrats! With this article you know all seven fundamentals you must know to master minimalist design. Now it is up to you to use what you’ve learned in this mini series and turn it to practice. Remember that hands-on experience is the only way to truly master any skill. And, working with minimalist design or style is a skill. Therefore, don’t neglect it and practice deliberately. Sooner or later, you will see the results. Trust me, the results will be worth it.
Let’s quickly recap what we discussed today. First, minimalist design can allow you to use colors in a relatively safe way. You can create great design with very simple color palette composed of just one or two colors. Just make sure adjust your color palette with cultural or industry norms. Otherwise, you may risk some problems. You can also create color palette based on your personality or the perception you want to create. If you are designing a website for yourself, keep all colors authentic and in harmony with your personality and brand.
Second, large photographs can a be powerful tool to get attention and convey a message. Make sure all photographs are connected with the design. Also, use only visuals of the highest quality. It is better to choose fewer great photographs than more average ones. When you use any large assets, make sure it will not negatively impact the performance. The overall experience has to be more important. Third, embrace simplicity. Remove all clutter from the layout. Whether it is navigation, content or anything else, keep it simple. Remember that everything has to follow the style of minimalist design. Otherwise, the design may not work as it could have.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
