December 9, 2016
18 years ago, most websites looked pretty ugly. The limit on technology and new experience with Online markets gave everyone plenty of excuses to have a bad looking website. Today, thats not the case. Theme plays an important role in the color of your website, this guide will deal with how to use color properly, and show you some examples of how to separate yourself from the competition.
Click to Fast Scroll to parts of the guide.
Lets put these websites into a little perspective. Back in the late 90s, most homes got their Internet through Dial-up with speeds rated at 28.8Kb per second to 33.6Kb per second. Today, the average house hold uses speeds 10MB per second and up. Here is an example of the conversion rate: 1000 Kilobytes = 1 Megabyte. Lets not forget about the technology we had back then to access web pages, Like the Pentium II with a CPU speed of 233MHz.
Here are some 90s Websites that are still up and accessible, from an article on mentalfloss.com
Notice the similarities? For one thing, its easy to read. A White background compliments black text and blue hyper-links. Now Compare those sites with these that use colors, or pictures, as a background with different colored text.
Right away there is a big difference. The websites that use a white background and black text look more clean, and they are easy to read. Which one would your customer prefer? If you want to look at more websites, the last two example are from websitesthatsuck.com
First Lets look at text throughout history. When is the last time you read the book Pride and Prejudice where each page was black with white text? This is, of course, a ridiculous example, mainly because paper has always been white and it doesn't really give prove of readability, but it brings up some articles i have found on the subject.
Uxmatters.com has a great article on Contrast and Legibility, providing pictures of different color text with backgrounds.
"The Following color combinations provide good contract and legibility:"
In the Article, the author also states, "Avoid using gray for text or symbols consisting of fine lines on a color background, because a successive-contrast effect causes them to take on the hue of their background color’s complement."
More Helpful Links
Now lets say you have a color theme in mind for your business website. Maybe its red, or blue, but either way you'll need a guide to figure out the best combinations of colors. Here are some website examples along with their corresponding Colors.
A simple website with 4 colors. Red, White, Black, and Grey. Notice how the background is always a darker color then the white boxes with black text. They highlight the information for you and make it easy for to navigate the page.
Searching on Google for "blue websites", or , "most popular blue websites", yielded some good results. Take for instance the white house website. It uses blue just in the menu and header of the page to mark important events. The rest of the website is white with little variation of text color to highlight topics.
The top bar being black and holding contact and social media icons. The menu is green with white text. In the middle of the page a white background with green and black titles shows you recent articles, while the sides are a tiny bit grayer and display company information and search options. If you want three sections of your web-page all on one page, this is the way to do it.
More Helpful Links