UI UX Tips: Coloring Your Interface
We got a lot of clicks on our last UI UX blog article so we decided to delve deeper into the topic! Whether you’re an aspiring web designer or a back-end programmer, everyone can benefit from implementing better interface and user experience into their project. This blog will be focusing solely on color and how it can greatly affect how your users perceive your site.
Use One Main Color
A common trend for modern websites is to go monochromatic with colors. Most websites will use one main color for their web branding and perhaps a few other similar shades of that same color for buttons and links. Take a look at Facebook’s interface, nearly everything is in blue, white or grey. Some websites can get away with being more vibrant with their colors (check out East Side Games) but for most business websites, it’s safe to stick with this concept. Too many colors may stress out your users’ visual receptors in making it harder to find certain things. That’s why most websites have a really popping call-to-action button while the rest of the page is dulled down. Take a look at the examples below:
Use Lots of White Space
Erik D. Kennedy, creator of the LearnUIDesign course, says that UI with a lot of “breathing room” makes the user feel more relaxed and at ease. When text, pictures and other content are condensed it can give unnecessary stress to the user (you don’t want this!). Imagine Wikipedia and its dense paragraphs of text – which no doubt contains a lot of useful information but may feel overwhelming at first sight. Good, generous white space can make the messiest interfaces look inviting and simple. Here’s Wikipedia redesigned ,which may not be as efficiently functional but definitely looks more visually inviting than how it looks now (below).
Never Use Black
Black overpowers all the other colors, no matter how vibrant your design is. Always go for a charcoal or darker grey instead of black, it will make your UI look way better. Even for text, dark grey generally looks better than pitch black. Look at the two interfaces below and tell me which one looks better.
Light Comes From Above
Just like it does in the real-world, lighting when applicable to gradients should come from above. When making your buttons, imagine how the shadows would look like if there was a lamp hovering over your interface. All the curves and bevels would adjust their lighting/gradients accordingly. It’s easier to show what we mean so here’s a few examples below: