Web Aesthetics: The Short and Sweet Guide to Memorable Design

, TutorialWeb Aesthetics: The Short and Sweet Guide to Memorable Design

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:

Or 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.”

Don Norman

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.”

      Conclusion

      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!

      By |2018-10-31T21:14:40+00:00January 13th, 2016|Design, Tutorial|

      2 Comments

      1. Ray January 16, 2016 at 1:01 am

        I completely agree. However those shoplify site designs are not that good IMO. First site colossal – Too confusing in my opinion. Raj Artasian – looks like my room – a mess. Pencil – think with your hands – the catch phrase reeks of YODA – but attractive layout – only the catch phrase needs modification imo. The KUTOA site. Words are lost in the image. Need some photoshop skills rather than just copy picture and slap it down.

        FONTS:

        With regards to font selection i have found that serifs work well when trying to convey an element of control – ie legal, lawyers, libraries, regulation, newspapers. I think that sans work better when trying to convey simplicity, imagination.

        My advice on choosing photos for your site?

        1: Pick matching colors to your logo and a subject which properly represents the image you are trying to convey. This is critical. You can spend a whole day just thinking about what properly represents your corporate image. Try to (if appropriate) some how humanize the image. IE if your selling phones a picture of a phone might be appropriate, but what might be more appealing is an attractive girl smiling while using her phone, blurring backgrounds, blending sections of the photograph to make sure text overlays stand out.

        2: LEARN PHOTOSHOP and ILLUSTRATOR: dont just do the basic stuff, learn how to really use photoshop to customise your image and personalise them to suit your site. Vectors and SVGs for logos require knowlege in illustrator.

      2. Kelly January 17, 2016 at 11:37 am

        Great article, but I am struggling. I really wanted more design features rather than a standard web builder so went with WordPress and chose Avada to work with. I’m not sure if I’m in too deep. I guess patience isn’t a virtue i hold and came from working with a web builder that was very easy to use. I am wondering if anyone can recommend a beginners manual to get started. I’m good at formatting and design, I know what i like, but i’m having some trouble with understanding the terminology used like, tags, widgets/sliders etc.. and think that would be good place to start as this is new to me. Any assistance, a link to somewhere/advice would be great. Thanks. Kelly

      Leave A Comment

      Recent Posts

      Recent Tweets

      For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
      I Accept