In This Lesson You Will Learn
How to create a color scheme based on the already present colors on your website.
How to choose the right color for your SleekBoxes.
How to choose the right color for your SleekBox teaser.
How to Choose the Right Color Palette for your SleekBoxes
Choosing a color for your SleekBox may sound like an easy decision at first. But when you are standing in front of a color palette with unlimited options, it might not be as easy as you initially thought.
In this post, we will look into which color scheme to use for a SleekBox, and which one to use for a SleekBox teaser, to best fit your website.
You have most likely already chosen the design scheme for your company’s website. Therefore the next step is to match the SleekBox to your brand and to make it attractive to the visitor’s eye.
There are many tools out there that help you to create a color scheme based on the already present colors on your website. These tools are referred to as palette generators. You can, for example, use Adobe Color CC. It gives you various options to change the color harmony in the programme.
Let’s imagine that your website is styled in the color blue, and you are not sure which other colors would best go with it.
At first, you are looking for something moderate, something to blend in well with the already set design. The choice of a monochromatic color harmony will in this instance give you the most beneficial solution.
Once adding the color code of the blue your website is designed in, you will get a palette with other shades of blue that will best match your design in a non-intrusive way. Having colors that blend well together is highly relevant when creating SleekBoxes.
On the other hand, if you are seeking to see what other colors will stand out with your blue, use the complementary color harmony.
Colors for SleekBoxes
One of our customers is the Danish mobile service company called 3. They style their website in three different colors: black, orange, and light grey.
As the SleekBox appears in the middle of the screen, it should not be forceful and intrusive. Therefore, 3 is using the same colors as in the background, to engage their visitors in a polite way.
The SleekBox is blending in with the light grey colors while still being visible with the orange font. To personalize the SleekBox, the company’s mascot has been added on the top. This definitely makes it more fun, and gives it character!
If your website does not use neutral colors but is more colorful, there is nothing to worry about.
Let’s take a look at Højmark, a travel agency specializing in skiing vacations. They are mainly focusing their website design on the color blue and mixing it with green and white.
Their SleekBox is adjusted to the background colors, including an image with the same visual design as the rest of the page. The image is breaking the large amounts of blue with shades of red and black. Not only is this helping with the adjustments of the colors, but it is really bringing out the winter atmosphere.
Are you still considering to make your SleekBox very visible, using complementary colors?
Then I would say that most of the times this does not work very well.
Gorgeous SleekBoxes should be simple and non-intrusive. You want to engage your visitors in a polite way, and not give them a color shock the moment they visit your site.
The SleekBox should be eye-catching and consistent with the look and feel of your website. Your aim should be to convert your visitors into subscribers, without hurting their user experience.
But remember! This is just a general rule. It all depends on the message you want to send to your visitors.
Colors for SleekBox teasers
Do the same principles apply to SleekBox teasers? Let’s look into this with a couple of examples of how companies implemented teasers to their websites.
With the first example, we will take a closer look at Bang and Olufsen. What else other than the speaker caught your attention? The SleekBox teaser.
As the teaser is not located in the center of the screen, we encourage you to use darker or more visible colors. This will make the teaser more noticeable, and grab the visitor’s attention. The SleekBox teasers gives you the opportunity to go full on crazy with bright and dark background colors.
One more example is the online retail store focusing on horse riding equipment called Horze.
Their website is designed using black and white colors, with hints of red. They have used beautiful and bright red background as the color for their SleekBox teaser.
You do not need to be a designer to create a pleasant color harmony on your website. With the tools given to you today it just a matter of understanding the principles.
Here are three tips from us, that you should keep in mind when choosing the best color for attracting your visitors.
- Generate a color palette to see which colors will best match your existing design.
- When creating a SleekBox, try to adapt it to the background colors. Your aim should be to approach your visitors in a polite way.
- Use visible colors for SleekBox teasers. You really want the teaser to stand out.
If you have multiple designs in your head, but can’t decide which one to use, we have good news for you. Our editor allows you to A/B split test. This means that you can create multiple SleekBoxes/SleekBox teasers and test them against each other.
You can test anything from colors, headlines to the images you want to include, and much more!
If you want to see and read about how others implemented SleekBoxes and SleekBox teasers, visit the success story section on our website.