Web Aesthetics: The Short and Sweet Guide to Memorable Design
11.4 min read | Published On: January 13th, 2016 | Categories: Design, Tutorial |
Anyone can create a WordPress website in less than five minutes. However, if you don’t have a background in web design, you will probably end up with a jumbled and chaotic aesthetic that is unappealing to viewers, causing them to leave a website forever.
The truth is that creating a functional, consistent, and visually appealing design leads to more engaged viewers and engaged viewers are more likely to take action and return to a website.
With the above in mind, in this article we will cover the significance of an engaging web aesthetic, and how to support an aesthetic by choosing quality photos and fonts to bring it all together.
How to Choose a Memorable Aesthetic
When you first setup WordPress, the natural tendency is to begin filling in the blanks right away.
However, if you begin adding photos and selecting font combinations without having chosen an aesthetic, you’re going to choose things you like, but not necessarily things that go well together.
There’s an obvious difference between a well-designed WordPress website and one that, well, isn’t.
For example, this:
Deciding on an aesthetic beforehand will enable you to make cohesive content choices, creating a more functional and appealing website that will engage viewers.
Even if you’ve already created a website with WordPress, that’s okay – you can use these tips to evaluate and tweak what you already have in place.
Why Web Aesthetics Matter
“Attractive things work better.” Right? The testing of this claim began in Japan in 1995 when researchers Kurosu and Kashimura conducted a study to see which would be easier to use: an “attractively” designed ATM or an “unattractively” designed one.
Guess which won?
Skeptical of their results, Researcher Tranctinsky conducted the exact same experiment in Israel only to come to the same conclusion.
Expanding even further on their research, Donald Norman went beyond determining that, yes, attractive things do work better by answering the most important question: Why?
Norman concluded that human emotions affect the decision-making process. When we view something that is appealing or well designed, it triggers a positive response that “broadens our thought processes and facilitates creative learning.”
Photo by Erik Jepsen
Still not fully convinced, five researchers collaborated on a study in 2003 to determine the connection between perceptions of aesthetics and product functionality. They concluded that a user perceives something as more functional if it is attractive. In coming to this conclusion, they call their own readers to action:
As users take aesthetically pleasing interfaces as an indication of usable systems, designers must take the two seemingly unrelated phenomena as being equally influential in design, to ensure success.
Practical Ways to Choose a Web Aesthetic
When you hear (or read) the word “aesthetic”, you may already have something in mind – perhaps a favorite website or logo or even a poster that sticks out to you.
Or you might be drawing a blank. Either way, it’s clear now that implementing a visually appealing aesthetic is vital to the success of your site. Here are some practical suggestions to help you find an aesthetic:
Pull up your favorite websites and blogs.
Look up sites in a field similar to yours.
What do you like/dislike about the site? (Think layout, colors, fonts, photos, etc)
What consistencies do you notice between different websites in the same field?
Are there a lot of “buttons” or tabs on the page?
Does the page look clear and well-organized?
(For example: if I was launching an e-commerce website, I would pull up the four well-designed e-commerce websites from this Shopify post and ask myself the questions listed above.)
Now that you have a clear idea of what you like in other sites, choose a few keywords to base your own aesthetic around (“minimal, whitespace, black and white”, “vibrant, loud, clear”, etc.).
Choosing Fonts, Photos, and a Layout
Now you know that choosing an aesthetic is key to a visually appealing website. How do you apply it to your site though?
Your aesthetic moves from an idea to the page when you choose the fonts, photos, and layout to express it.
How Fonts Elicit Emotion
Just like design affects the perception of usability, fonts elicit subconscious responses from viewers. When you choose a font, you choose how a reader will engage with the text.
For example, take a look at the font used for the “Toys R Us” logo.
Now take a look at US Bank’s logo.
What kind of response do these two logos elicit from you? Is your response to US Bank the same as “Toys R Us”? Of course not. Your responses to each of these logos is very different – and with good reason.
Font choices vary from site to site and will depend greatly on the type of company you are creating the site for. If you are creating a website for a children’s clothing boutique, your font choices will likely be a little more playful. On the other hand, if you run a financial services company, your font choices need to be professional and evoke trust.
Head over to Stepto and Son for their top ten great web font combinations. Here’s a little sampler:
Also, check out this article from Tuts+ for advice on what fonts to use for optimal readability and legibility, and head to this Piktochart post to read more about combining fonts!
Choosing Images by Quality and Color
Images are just as important to implementing an aesthetic as font choice: they both elicit a subconscious response from viewers affecting the way they interact with your site.
When it comes to images it is all about quality and color.
A number of studies have been conducted on the effect that colors and color saturation have on viewers. In a recent study that evaluated the colors present in “most pinned” and “least pinned” photos on Pinterest, researchers noted that “(colors) have remarkable power to move us emotionally.”
Some practical advice on choosing quality photos for your site:
Choose to help your audience visually understand or engage
Be relevant (i.e. if you’re going to choose a photo of a man using a cell phone, make sure it’s not a flip phone!)
Be consistent (with size, content and colors)
The Layout Brings It All Together
When a website is cluttered with too many photos, ads, and different text boxes, you’ll have a harder time engaging with the content. On the other hand, content is easier to read when a website has fewer and well-organized photos, ads, and text boxes.
Just take a look at the subtle differences in these two layouts. It’s obvious which is easier to read and more visually pleasing to engage with.
One rule of clean, readable layout: Space it out. Allow for some white space between your headline, images, and body text.
In yet another study on design and layout, researchers concluded that “people exposed to the well-designed layout were found to have higher cognitive focus, more efficient mental process, and a stronger sense of clarity.”
Memorable design is an absolute necessity for a successful website today. By creating a site that is visually appealing, you ensure that your viewers will be more engaged with your content, making them more likely to return to your site and purchase your products or services.
The quickest way to get started is to choose cohesive fonts, photos, and a layout that work well together, which Avada has built in from the beginning with sleek and modern design schemes.
Have you personally found it difficult to pick the proper typography for your site? Ever had problems matching website layout with color schemes that work well together? Let us know in the comments below!
Subscribe To Our Newsletter
Receive all of the latest news and updates fresh from ThemeFusion!