Having the right color and design scheme for a website goes far in identifying a type of business, setting the tone for the business and establishing an online business style. Tips and Tricks for Colors, Graphics, Fonts and Website Design Layout.
Colors can stimulate and excite people, increase their appetite, make them feel warm or make them feel tranquil. Colors are also known to affect website purchasing – click here to see infographic:
Your choice of web design colors and layout also could mean the difference between someone staying on a website longer, quickly leaving, or taking part in a desired call to action, whether it’s a purchase, completing a form, or signing up for an e-newsletter. For some businesses, deciding on an online style is easy because they already have an established brand identity or corporate colors. But for others, the appearance of their website will serve as an introduction to online visitors. The look and feel of the website should be in sync with the type of business and the color scheme makes this happen. For example, with a professional service business, such as an architectural firm as shown in the image above, the web design colors might be hues of reds, blues, greens, or grays to depict a modern, business-like feel. On the other hand, for a business that is lively and upbeat, such as a cafe, a bright color scheme will get that look and feel across. If you’re going for a more luxurious and stylish business appearance, consider a rich, dark color as the primary color and silver or gold as secondary accent colors.
Additionally, Amberblue Media & Design tends to design sites of a responsive nature meaning they are automatically optimized for all digital experiences. To learn more about responsive design, click here:
Here are a few tips for consideration when designing your website.
1) FUNDAMENTAL RULES OF TYPE
Type designers have spent the past five thousand years perfecting text design, and there are a few golden rules that all websites should adhere to:
For headlines:
Make them bold and easy to scan
San serif typefaces are great for headlines because they are stark and easy to read at larger sizes
For body text, you want to maximize legibility:
For lots of text opt for a serif typeface
Make the font-size much larger than you think is necessary
Lines should never be more than 50 characters long
Fonts also play a huge role – check out Google web fonts: http://www.google.com/fonts
2. LIMIT COLOR USAGE
When it comes to the number of colors used in a website design, the saying “less is more” is a good rule to follow. Too many colors on a site look amateurish and unprofessional. Conversely,
using color in just the right spots will actually grab the attention of the eye more so than a web page that’s popping with lots of different colors. Good chromatic harmony is best achieved
with three to four different colors.
3. KEEP IT SIMPLE
This is the number one rule of any design, whether you work in digital or print media. There’s no need for extra bells and whistles on a website. They don’t attract more traffic and they
don’t help your bottom line. Don’t include flashing animations, auto-loading sounds or scrolling text. All you need are crisp photos or images and simple text that are well balanced on each
page, with a few hyperlinks and a few buttons to navigate to other pages on your website.
4. DON’T BURY THE MAIN POINT
Put the most important information on your homepage and secondary information only a click away. That is, don’t bury information three or four clicks from the homepage. If it has to be that
far from the homepage, it isn’t important. Eliminate it.
5. USE WEB-FRIENDLY COLORS
Certain colors look very different on the Web than on a computer. That’s because the various browsers register colors a bit differently. And colors may vary between PCs and Macs and on
different mobile devices, depending on the screen resolution. To avoid any issues, use web smart colors. These are colors that will display consistently across all monitors and operating
systems. A good resource for web smart colors is the 4096 color wheel.
6. BEAUTIFUL IMAGERY ADDS COLOR
The perfect colors for some websites might not be a color scheme at all, but a collection of colors designed in a collage of images, graphics, or illustrations. This design technique works
perfectly in the above example and also lends itself nicely to other businesses in the travel and tourism, automotive sales, or fashion industries. If a business sells an experience or a
certain feeling, using color images might be more effective for the website.Images also add great depth to a website design.
7. USE COLOR FOR CALL TO ACTION ITEMS
Prominent items on a website are things like the Shop Now, Enroll Today, Sign-Up Now buttons or elements that you want visitors to notice first and take action. The use of color is the best
way to attract attention to prominent items on a web page. For example, an Order Now button might be bright red and placed against a white background. Or you might use a bright pastel
button against a dark background. Take inspiration from color strategies on the web and in traditional marketing materials that get you to take action and translate it to website design.
8. WHITE SPACE IS A GREAT THING
Don’t be afraid of white space; it’s crucial for enhancing colors on a website and making content easier to read. There are two types of white space: active, which is used between elements
to separate them, and passive, which occurs as the result of the design, such as the space between letters. Use white space to focus attention to a particular element, to group similar
design elements, to separate different elements and, as the above example shows, to create an uncluttered, relaxing navigation. White space also gives the eyes a place to rest. Despite the
term, white space doesn’t have to be white. It can be whatever color the web page background is.
9. KEEP CULTURAL COLOR MEANINGS IN MIND
The expanse of the Web means customers with diverse cultural backgrounds from all over the world may visit a website, even if it’s not a global business. The last thing you want to do is
offend a culture with your color choice. Certain colors have significant meaning in different cultures. For example, black is symbolic of death in western cultures, but in eastern cultures,
the color white denotes death. For many people, red denotes danger or passion, but in India it stands for purity and in South Africa it symbolizes a person in mourning. Green is considered
by many countries to symbolize rebirth, but in China it represents unfaithfulness and even exorcism. And in many traditional cultures, pink is considered an offensive color. Depending on
the business, color symbolism may be important to its customers and extra care and consideration might be worthwhile.
10. YOUR BRANDING COLORS
Make sure you consider brand guidelines and use matching or complementary colors throughout your website.
11. TRY A LITTLE OPACITY
If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the
colors. This will achieve greater contrast for the text in the foreground.
12. DO YOUR COLORS FIT YOUR THEME OR TARGET AUDIENCE?
Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site
heavy on hot pink might look a little bit odd.
13. PAGES
Limit your page length to just one page scroll. Blogs and articles can be longer, but no one likes to scroll down a page too far to find the information they want.
14. HOMEPAGE LINKS
Include a home button on every page. This way, your visitors won’t need to click the back button on their browsers ten times to get to your homepage.
15. CONTACT LINKS
Put a contact link on every page. It can be frustrating to search for contact information and not find it. Keep yours in plain sight on all pages to make it as easy for your visitors to
find. After all, you do want to be contacted.
Looking for a new website or a redesign on your current presence? Let’s Talk!
