Importance of Light and Color in Front-End Design: Part 1
Design and composition have had a special place in my heart even before I began my journey of software development. I have been an avid photographer for quite some time now, and a wedding photographer specifically for the past few years. One of the habits I developed was to always look for two things when I enter a room:
- Light
- Color
Why does all of this matter to web design? Because we as developers want our websites to look beautiful AND engaging! We don’t want people to squinting their eyes to read text or getting a headache from the multitudes of color. Creating with these factors in mind falls into the realm of creating accessibility.
Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services. — Web Accessibility Initiative (WAI)
As stated from the WAI, the web is designed for everyone. With a little purpose, web developers can use light and color to their advantage in order to make sure their applications can be enjoyed by everyone!
Now back to a small photography lesson. Light can affect your photos in many ways! With too much light, the photos will be too blown out and you won’t be able to make out any of the details. With not enough light, everything will be dark and you lose the details again! With the right amount of light, there’s some contrast, shadows, and highlights, all of which allow you to emphasize what you want and de-emphasize what you don’t.
Let’s translate this to web design.
In this example, the contrast ratio is being emphasized via the text. If you make your text a bright color and the background a bright color, the text would be hard to read. The same goes for darker colors as well. Now here is an example of a bad contrast ratio:
I am always the first to point out my own mistakes. In one of my early projects, I made the navbar you see on the left. At first, I saw nothing wrong with it. It was a cute color, so what’s the problem? It wasn’t until I showed my mother the project that I understood why it was designed poorly. I was switching between different pages in the application and my mother asked how I was doing it. “I am using the navbar, can’t you see where I am clicking?”, I said. She looked at me with confusion and moved her face closer to the screen. “Oh!” she exclaimed. It hadn’t even occurred to me that it was hard to read. My mother didn’t even know I have a navbar in the first place! This is analogous to letting in too much light into a photo. Everything becomes blown out and you can’t see the details aka the text. While to some the navbar buttons may still be visible but the point is that it should not be difficult! These buttons are functional so the purpose should be to emphasize them. There are three ways you can emphasize them: color, box-outline/shadow, and hover action. Above, I showed you how color can make a difference. Now here is an example of how shadows can create a more visible effect.
In the above photo, there are two buttons. On the left button, there is a contrasting font and background color along with the box-shadow around the button. The shadow really makes the button “pop” more, like it’s on top of the background. This shadowing is a part of many designers’ tools, as it creates this 3D effect that’s pleasing to the eye. This can also be seen in the painting on the left. Artist Wood uses his shadows deliberately to emphasize the face and make the features really stand out. It’s the shadows that make it more realistic, right?
To conclude this part on light, I’ll leave you with this. Our goal as front-end software developers is to always make the product pleasing. Now some companies have entire UI/UX departments focused on this, while others don’t. Even if it’s just for a personal project, it’s important to keep this thing in mind. We should strive to be better and to make sure everything we make is accessible and pleasing to everyone.
In the next part, I’ll go over color theory and how colors can affect how people look at websites!
