Visual Appeal vs. Functionality in Web Design
State of Digital | Industry Savvy

Visual Appeal vs. Functionality in Web Design

on / by Sabina Idler

Good web design. A concept that has become indispensable over the last decade. We all want a website and we want that website to meet the most popular design standards out there. But how much success of a website can really be attributed to good design? And what else is there?

To answer that question, first we need to recognize that design is just as broad as it is popular. There is web design, visual design, graphic design, interaction design, interface design, and of course user experience design. So, it doesn’t come as a surprise that there is a lot of confusion going on between these different fields.

For now, let’s focus on what can be categorized as web design, visual design, or graphic design – the visual appeal of a website.

Visual appeal is what meets the eye. It’s the colors, shapes, pictures, fonts, white- or negative space, and the overall visual balance of a design. Whether a website appeals to us affects how we perceive it, how we use it, and how we remember it.

Obviously, other design fields like interaction design also play an important role here – but that doesn’t mean that visual appeal is any less powerful.

The Role of Visual Appeal in Web Design

Here are some examples of how the visual appeal contributes to the overall succes of a website.

1. Attract attention

Visual appeal can – more than anything – attract attention. This is key to getting your visitors engaged with your website. We like to look at pretty things and if we have the choice, we always prefer a pretty design or image above an ugly or neutral one. Of course, you need to know your target group well in order to know what they think is pretty.

The users’ sight is guided effectively, using different visual cues.

The website of Angry Birds Space does a great job as using visual cues to attract attention. Immediately after loading the website, the visitors’ sight is drawn to the big, shiny moon. From there, the line of sight continues to the bold letters “ANGRY BIRDS SPACE” and on to the image of the different bird characters. Then, a notification with the text “Scroll, grab, or use arrow keys to navigate” flies into the picture, offering simple instructions of how to navigate the site.

2. Creates a first impression

Our first impression when meeting someone face to face can affect our relationship with that person in the long term. It affects whether or not we like someone, if we think we can trust them, and if we intend to meet that person again. Basically, within only a few seconds – maybe minutes, we decide if we enjoy spending time with someone or not. Online, it’s the same thing. Once a website has made negative first impression on us, chances are we will not enjoy our visit much or look forward to coming back. Changing this first impression later on can be tricky, because we are stubborn and don’t like to admit we were wrong.

Pictures can express a lot of characteristics of a person, brand, or company.

The actress Anna Safroncik has a beautiful portfolio website. The power of the design lies in the expressive photography used to showcase Anna’s talents and the different facets of her character. The pictures are very professional, sexy, elegant and sophisticated – and that’s exactly the image you get of her.

3. Build relationships

Visual appeal can build relationships. If you visitors can identify with your website, you are a big step closer to building a long-term relationship with them. There is no need in saying how important this relationship with your visitors is. We like to define ourselves through our looks, our hobbies, our taste in music – and also through the kind of websites we use. Your could see it as a symbol of our lifestyle. If a site doesn’t appeal to our us – or doesn’t fit our identity – we are inclined to keep looking for other sites that do.

Visual appeal helps you to connect with your visitors.

With the project 1948 London, Nike “invited the world to celebrate, explore and interact with the art (…)”. It’s all about the science of feeling, featuring different forms of art. The website that came with this event is just as inviting, exciting, and emotional as the project itself. As visitor, you get drawn in and triggered to explore the site click by click. This is a great way to get people hooked – online and for the real-world happening.

4. Increase tolerance

Visual appeal is a quality itself. This can be a great advantage that you can use to cover other – less convenient aspects of your website. Obviously, it should be the ultimate goal to design and build the perfect website. At the same time, this is very difficult to achieve as there are many different pieces that contribute to the big picture. So ultimately, your website will be great in some way and there will be room for improvement in others. If your visual design is top edge, your visitors will be more forgiving for deficits in other areas.

Visual appeal can make your visitors more forgiving for deficits in other areas.

The website has two different versions. There is the official version with a very clean and rather standard blog layout. Then, there is an alternative version with a more creative and abstract layout. This version is called “the Wired mind” and is “a visualisation tool that provides another way to browse the content on” The Wired mind seems much less clear and therefore less structured at first. Also, it’s somehow difficult to navigate, because menu items open automatically when you hover over them, but you have to close them manually in order to look at a different category. Still, this version looks much more personal, creative, and fun than the standard one. It’s a lot more enjoyable to use.

5. Affects emotions

A picture is worth a thousand words. This phase is so true – especially when it comes to communicating on a more emotional level. Through pictures and other visual elements, you can convey feelings, such as joy and delight, sadness, or even pity. Visual appeal can awake memories and emotions like trust, comfort, hope, or self-confidence. And at the same time, you can create a sphere to draw visitors in and get them hooked.

Images and colors are very powerful to trigger emotions and convey feelings.

The Paypal website knows exactly what it takes to appeal to their visitors’ emotions through visual design. They use lots of images that show personal and familiar settings to create a cozy and comfortable sphere. They use their logo and a cool, serious blue to convey trust. At the same time, they use a lot of other, subdued colors to also create a sphere that make people trust the brand.

The Technical stuff

We discussed the effects that visual appeal can have on your visitors. These can be very big and overwhelming, but also the small things contribute to how visitors perceive, use it, and remember your site.

Now, let’s take a look at what else matters when designing and building a great website. Basically, we now look at the more technical aspects.

First of all, there is the technical framework of your site. No need to mention that – in order for your visitors to see and like it – your website has to work. That means, when visiting your domain, it has to show up. When clicking any link on your site, it has to work. When offering in any kind of interactions, those have to work, too.

A classic example of bad functionality is this 404 error. Something was technically not implemented correctly, causing the site to show an error message instead of the desired content.

Second, your website has to be findable. If people search the web for information, services or products they could find on your site, make sure they get there. Most people use search engines like Google to find stuff online. A good strategy for your search engine optimization (SEO) and maybe even advertising (SEA) is therefore a must.

Big brands like Starbuck usually have their SEO strategy in place for the most important keywords.

Third, ensure that your website is usable. This is where fields like interaction design and information architecture come into the picture. Involve your users in the design process and make sure you of exactly the content your users want – in a way that they can easily find it. This doesn’t mean your design has to be boring or traditional all the time. As long as people can easily reach their goals – and obviously those differ for most websites – you are heading into the right direction.

C-ROOTS is an agency for identity, strategy and creativity, that offers a very out of the ordinary navigation menu. Yet, this site is very easy to navigate.

Last but not least, your website should be accessible across different operating systems and devices. In our mobilized world, users will at some point access your site from a mobile device. Be prepared and make sure they can still get to the information they need without getting annoyed or frustrated.

*The Boston Globe has chosen for a responsive design. This ensures a consistent experience across multiple devices. Especially for news site, this can be a great advantage as it means less maintenance and a much larger reach.

The takeaways

There you have it. The visual appeal contributes a lot to the overall quality of a website. So can you use visual appeal to:

  1. Attract attention
  2. Creates a first impression
  3. Build relationships
  4. Increase tolerance
  5. Affects emotions

At the same time, there are a lot of technical aspects that are critical for a successful website, such as:

  1. Functionality
  2. Findability
  3. Usability
  4. Accessibility

Only a combination of the above will assure that you and your visitors get the most out of your website – This is the foundation for a great user experience.

ebook download Usabilla

| | | | |
Article by

Sabina Idler

Sabina was technical writer & UXer @Usabilla for 5 years before she started her own UX research and consultancy firm; UXkids. With UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for children. You can connect with Sabina on Linkedin or follow her on Twitter.

Share your thoughts

  • Nivi

    Great topic and wonderfully handled too! Enjoyed reading it.

  • Good point on number 4 (that visual appeal increases tolerance for the more shaky parts of the design). A design can still stand proud as long as it doesn’t really get too much in its own way (accessibility-wise). Nice post!

  • Your method of explaining the whole thing in this article is really nice, every one can effortlessly be aware of it,
    Thanks a lot.

  • How I count a paypaly website visitor.

  • Excually i can’t reach Sabina Idler g+ profile but twitter profile is excellent. Especially i love uxkids and always touch regularly.

  • Awesome Share. Thanks Sabina. I’m loving you and your great works.

Pin It on Pinterest