To design a free nice looking quiz for your site, hop on over to tryinteract.com
So, not all of us are designers. And often times we try to create things for our websites, personal lives, or blogs that we would like to look good, but just don’t quite make the mark. We get pretty close, we have the right content and layout, but something isn’t quite right. Well nearly 100% of the time, there are two simple things that are making it that way:
Typography and color.
If you can figure out how to deal with both of those aspects successfully, you’d be surprised at how much better your work will look by tweaking a few simple things.
Typography is its own animal, so we’ll talk about that later. For this post let’s take a look at color.
Often times we want to follow the brand of our company, a simple style guide or a single color that we’ve decided to follow in our work. Using a few tips I have below, you can easily create a quiz with a nice color scheme that not only matches the look you’re going for, but is super simple to create.
I’ll start out talking about this with a single chart, which has some great examples of multiple colors that look well together.
Now there is one thing I’d like to point out about what you see above that is particularly important – the color of the text.
If you are doing a colored background, I always recommend staying away from any colored text, especially if you don’t know what you are doing. You should use either black or very dark gray text, or white text.
Now if you’re working with a white background, obviously you can use a darker shade of any color and it will be fine. But with color backgrounds, you want to stay clear away of using another color as the text, as it is very hard for the eye to read and is a strain. Sometimes content will simply stop being read solely because it is to hard to read, even if the reader doesn’t acknowledge it directly. In the user experience realm of things, we always want to make sure that we are pleasing the user in the best way we can, and when it comes to content being read we have to make sure there is no strain on the eye. And the easiest way to do that is with picking either black or white text, depending on the background color.
Let’s walk through making a quiz for a company I made up the logo for below.
So taking a look at the logo we see that the primary color is a darker blue, and it has an accent of green. So if we want our quiz on our company website, we want it looking similar to the branding that the company has. How can we design our quiz to be mainly blue, but maybe accent the green as well? Or do we even want to try to use both colors? Let’s explore a bit.
So there’s no doubt that blue is the primary and base color of the branding. Let’s use that as our color and see what we can do.
Here’s a a stock colored version of a quiz:
If we go in and tweak some of the colors that we are able to and change them to our company’s blue, we can get subtle yet great looking results.
By just changing the color of the title and the button to take the quiz, we have successfully yet subtly made the quiz our own.
A lot of people will often make the mistake of feeling like they have to overbear the color in their design to make sure it matches, but in reality much more subtle changes that match the brand are stronger.
Now again sometimes you’re being called to make things a more dramatic way, in this case we could be called to really make it blue. Well how should we go about doing that?
If we are looking to make the background the darker blue color, we’re going to have to figure out a couple things.
First, the color of our text. With any sort of darker color background, you have to have white text. It’s the only that can look good and be really legible to read, so I always recommend white text on any sort of colored background as I mentioned earlier.
With the background being blue, we really have that color out of the way, so it in turn allows us to be able to try to accent that green somewhere. The button that allows us to take the quiz is the perfect place to do that, so let’s add it there.
Since the background is now blue and so is our logo, we need to have that changed. I placed a background behind the logo so it can still be used and is visual. You have to keep something like that in mind when you’re looking to use a background that might affect how the logo would appear on it.
So when you wrap all of those things together, you get something that looks like this:
We were able to implement a nice looking background color and even accent the green from our logo to make a quiz that completely matches our brand and looks great as well.
So understanding basic uses of color and how we can implement them properly, we can easily make a good looking quiz that follows our style guides. Understanding these simple concepts can help you immensely in creating beautiful quizzes.