1. Web Design
  2. UX/UI
  3. Design Theory

Color for Attention and Depth in 60 Seconds

Scroll to top
Read Time: 1 min
This post is part of a series called 60 Second Video Tutorials.
Three Local Site Preview Methods in 60 Seconds
Troubleshooting WordPress in 60 Seconds

The colors you choose in your designs can give the illusion of depth, making important things seem closer to the viewer and more likely to catch the eye. This video will help you learn how to use color for attention and depth in 60 Seconds!

Focus on Color

Generally speaking, something closer to the eye seems brighter or more vivid, while something further away seems darker or more subdued. You can use this effect in your designs to create clear points of focus so the visitor knows where to look right away. 

Start by deciding what you want your visitors to pay most attention to and then give that thing a nice vivid color. Surrounding elements can still be colorful, just make sure that they're not as bright as your main point of focus.

Now add gradual changes in color brightness and saturation, to add layers of depth pushing important things forward, while less important things get pushed further back. 

Further Resources

Learn more about using color on Envato Tuts+.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.