The psychology of Web design: How colors, typefaces and spacing affect your mood

Web design is an art that goes beyond producing content. Those in the industry know that a good web layout can invoke both positive or negative feelings from its users.

Web designers have begun to employ psychology-based designs in their web pages, in order to fully capture the attention of viewers. Web designers that wish to be successful must address basic human nature if they wish to maintain consistent interest and web traffic.

Web design can be divided into four basic areas that need to be adequately addressed to ensure an engaging experience for visitors of the website.

Content

Content is the basic foundation of successful web design. Visitors to a web page are typically in search of specific information, and if a web designer can include important information, while also making it simple to find, visits to the website will increase exponentially.

During the internet’s early days, it was not uncommon to see long essay-style blogs often cramming over 10,000 words onto one web page. The issue with this, is the majority of people want quick access to their information, and having to search through pages of unrelated information is an easy way to drive visitors away.

Thankfully, these days are long behind us, but any aspiring web designer must remember to keep their info concise and to the point to avoid this detrimental mistake.

Making content hard to find, or burying it in an unnecessarily long passage is one of the easiest ways to drive away visitors and potential customers of your website.

Additionally, how the information is presented can impact the business your website generates. Aim to keep the information as clean, concise, and organized as possible to guarantee that visitors associate your sight as a place to quickly and accurately locate important information.

If you need more help at mastering this, check out this article by Tuts+ for more tips on the perfect way to add engaging content to your page.

Space

Organizing content on a webpage is arguably just as important as what content is written on your site. One of the most important concepts that new web designers must keep in mind is “white space.” White space provides a form of psychological “rest” to visitors, who might be overwhelmed with information otherwise.

Web minimalism is one of the most popular trends in web design. These web pages aim to have as little unnecessary text and images as possible, conveying only what’s needed. An example of this design can be seen on Squarespace.

On the other hand, if your site is lacking in white space, visitors can easily feel overwhelmed and agitated trying to find the information they’re looking for.

Taking the time to organize content in a way that is visually appealing and not overwhelming is an important step to designing a successful website. When in doubt, keep things short simple, and to the point, and make sure to include white space for your visitors.

There is an excellent article written by Smashing Magazine for those wanting to learn more about proper white space usage.

Color

A web page’s colors are another important factor to consider when designing. While there may be certain constraints due to a company’s logo color choices, the color of a web page often sets the tone for visitors.

Most modern websites choose to use neutral color schemes in their web pages. This usually consists of different shades of white, black, gray, and beige.

A website that features “eccentric” colors like blue and yellow, may choose to use white as its background to give a neutral contrast to the rest of the page.

These neutral colors play a similar role to the concept of white space discussed earlier, and it would be wise to pay attention to the color scheme of your site if you wish to keep your customers happy and engaged with your site.

“Cooler” colors like blue, green, and purple can also be used strategically to give websites a more professional look. However, these colors can also be interpreted as “cold” and unsympathetic to the customer. On the other hand, warm colors can be used to evoke feelings of passion, however, this can also lead to anger and stress if not used in the proper setting.

While neutral colors are useful for providing rest space for web page viewers, too many blacks, whites, and grays will also give an unfeeling vibe and appear generic.

As you can see, color has an important function in the overall design of your webpage. If you want your site to be inviting, make sure you adjust your page to colors to convey the proper message and make visitors feel welcome. If color schemes still confuse you, check out this article by Vandelay Design on the effects of primary and secondary colors on viewers.

Typography

Not many people are aware of the importance of letter fonts in a web page’s final design. With advances in modern web design software, designers have a wide range of fonts to select for the perfect effect.

Typefaces all have different functions, and specific fonts can convey certain feelings. Serif fonts with extra strokes on the ends of letters are often associated with professionalism, an example of this is the Times New Roman style. Fonts like Helvetica, called sans serif, are often associated with a more modern feel.

New sites, for example, typically use serif fonts to portray an image of tradition and trustworthiness.

via Fonts.com

On the other hand, social media sites often use sans serif fonts to showcase a more modern, streamlined image to their users

If you need help picking the perfect font for you, Super Dev Resources has two great infographics that will point you in the right direction.

Other aspects of typing like leading (space between the lines) and kerning (space between the letters) are also important. Adequate leading, with lots of white space between lines, makes the copy easy to read; too little gives a crowded feeling and makes reading difficult.

Other important aspects include spacing between paragraphs and around images. These passages will make the reader feel claustrophobic trying to make it through each paragraph.

Adobe’s TypeKit and Google Fonts are both great resources for ideas on the possibilities of font design.

Conclusion

Understanding the basics of human psychology will help your design, and help you produce great content, ensuring it is clearly structured and visually inviting to customers. In addition to web design, these tips can also help aspiring creators make appealing logos and choose appropriate company colors.