Voiceover: Color is probably the most complicated
area of user interface design.
This is because we have a tendency to use colors
that distract and feel completely unnatural.
That can make our design look very messy.
Do you want an example of this?
Here you go.
What do you say now?
This is probably the worst website
I have ever seen in my entire life.
But this is obviously a joke, but you get the point right?
So let's try to avoid messy websites like this one
with the guidelines I will show you in this lecture.
The first thing I want to recommend
is to use a single base color for your design.
And with base color I mean any different color than
black, white or some shade of grey.
If we want to build a clean and simple website
having too many colors in too many places all over a website
is an easy way to completely screw up that goal.
So sticking to one main color is definitely a good idea.
Especially if you are just starting out with design.
The colors you see hear on this slide
are from a tool called Flat UI Colors.
Flat UI Colors is a very cool resource
to choose your base color.
To start out,
I think you can't go wrong by choosing any of these colors.
And beside fixing a base color you can also create a darker
or a lighter version of that color.
Doing so you can create a nice color palette
like this one here.
A color palette shows all the colors
to be used in a certain design.
I use a tool call 0To255 to create that darker
and that light blue tones.
I strongly recommend to create color palette like this one
for your design.
As I said before the grey tones
are not considered base colors here,
and we many times need some of them actually.
For instance for text and for background colors.
Find the link to these two tools that I mentioned
in the course Ebook.
Now if you really want to mix up multiple colors
I recommend you use a color wheel tool
Like Adobe Color CC or Paletton.
These tools make use of color theory
to choose the best color combinations for you.
So for example here with Adobe CC Color
you can create your color palettes using color combinations
that actually make sense.
Just play around with it and see what you get.
You can then use a main color to draw attention
to the most important elements on your web page.
Like a call to action button
and a second or third colors can complement the main color.
That is just what this website is doing.
Their main color is clearly green
but they have this nice orange to draw the attention
to the button.
And that brings us to the next guideline
which is about attention.
When you're in doubt about using colors
and don't know where to use colors and how often,
I have a solution for you.
Just pick a color that stands out and use it
mostly to draw attention to a button
or any other element of importance on your website
Uber's website here does a terrific job
in doing exactly that.
At number four, and this is very simple,
never choose the black color for any part of your design.
This is because black actually almost never appears
in the real world.
So using complete black just doesn't feel natural.
And last but not least I want to say a few words
on which colors you should actually choose for your design.
That's because picking a color for a website means
much more than picking your favorite color
and turning it into a design.
It means picking the right color
in order to get the desired response from your audience.
Color really makes a difference.
This happens because there are psychological effects
behind each color.
So let's see what feelings each color can evoke
and how to use this knowledge.
Red is a great color to use when power, passion,
strength and excitement want to be transmitted.
Brighter tones are more energetic
and darker shades are more powerful and elegant.
Orange draws attention without being as overpowering as red.
It means cheerfulness and creativity.
Orange can be associated with friendliness,
confidence and courage.
Now Yellow.
Yellow is energetic and gives the feeling of happiness
and liveliness.
Also it associates with curiosity, intelligence,
brightness, et cetera.
Green is the color of harmony, nature, life and health.
Also it is often associated with money.
In design green can have a balancing and harmonizing effect.
Next, Blue means patience, peace, trustworthiness
and stability.
It is one of the most beloved colors, especially by men.
It is associated with professionalism, trust and honor.
And that's actually why the biggest Social Networks
out there use the color blue.
Purple is traditionally associated with power,
nobility and wealth.
In your design purple can give a sense of wisdom,
royalty, nobility, luxury and mystery.
Pink expresses romance, passivity, care,
peace, affection, et cetera.
And finally the color brown is the color of
relaxation and confidence.
Brown itself means earthiness, nature, durability,
comfort and reliability.
And that's it for colors in this lecture.
If you want to learn more on this subject,
I included a couple of links in the course Ebook,
where you can read all about color theory,
make sure you check them out.