Ah yes, the age-old form vs function battle, a battle older than digital design. As designers, we are sometimes confused about which to prioritize in our designs. Let’s delve into it a bit.

The Dilemma

Picture yourself going to a store to buy a lawnmower. You’ve been having a problem with grass growing at faster rates because of the rain. You get to the store and see a lawnmower that looks like a racecar.

Of course, this piques your interest and you buy it. Everybody wants to look like Lewis Hamilton while mowing grass (killing two birds with one stone). You get home and try using it to cut grass and the blades don’t work. Would you keep the lawnmower or return it to the store? Of course you would return it. You bought it for a function, which was to cut grass and it couldn’t perform that function.

When you buy something to perform a specific function and it doesn’t work well, you would most likely return the product, no matter how beautiful it might be. Also, if you don’t like how a product looks in the first place, you won’t even buy the product at all.

A Love Story: Graphic Design, UX Design and Me

I started out as a graphic designer and while I always knew at the back of my head that my designs needed to be functional, I usually sacrificed most of that functionality for visuals. It took me some time in my career to realize that I was not just displaying art but also using art to communicate. Graphic Design is about passing messages to people through logos, banners, or brand asset overall; it leverages their emotions using colors, shapes and typography. The success of graphic design depends completely on its audience’s ability to comprehend the meaning.

A few years into my career, I delved into UX (User Experience) and UI (User Interface) Design. Coming from a graphic designing background, it was easy for me to understand some of the fundamentals of UI. With UX Design, on the other hand, it felt like going to a new planet. During the first few months as a UX Designer, I used graphic designing techniques to design mobile and web screens. While this didn’t totally yield bad results, I felt the need to take a few steps backward to intricately learn about UX Design which required more in-depth research, critical thinking, and problem-solving skills. It required being able to create functional designs to reinforce interactions. UX Design measures success based on user behavior and how easily they can carry out tasks.

So what are Visual Design and Functional Design and how do they affect our designs?

Visual Design

Visual design is all about how well a design or product looks. It focuses on improving the aesthetics of a design or product by implementing suitable images, typography, colors and other visual elements. A good visual design does not reduce the functionality of a product. It enhances it.

With visual design, users appreciate the art and aesthetics and get drawn to it based on the message it passes across. The nerds call this branding. In order for the designs to stand out, designers should focus on doing them differently rather than doing them best.

Basic Characteristics of Visual Design:

• Clarity
• Credibility
• Uniqueness
• Iconic
• Relevancy

The Pros

1. Capturing Attention

   Visual Design is basically what the user/audience sees first. First impressions always last longer. This means that good visual design can be more appealing to people who see it. Customers tend to go back to products that spark their attention.

2. Standing Out

   Visuals that integrate different designing aspects differentiate themselves from other brands in the industry. In simple words, trying to look nothing like the competition.

3. Evoking Emotions

   “A picture is worth a thousand words” - Some Guy

   We as humans have become somewhat lazy/lazier. Nowadays, more people prefer reading visuals to reading reading bulky lines of text. Typically, we instinctively make decisions based on what we see and what sparks our emotions. Using visual elements, designers can trigger different emotions like joy, sadness, pity and even proactiveness. This improves interactions with designs.

The Cons

1. Over-complication

   Excessive use of visual elements in a design can lead to it being over-complicated and hard to understand. The designs fails to communicate with the audience the moment they fails to understand them.

2. Distraction

   Designs that deem too busy may be distracting and potentially hinder the message it’s trying to communicate, which totally negates the whole point of visual design. Make sure the message is loud and clear.

3. Loading Speed

   While most of us love good aesthetics, some of these visuals can cause websites or apps to load slowly. Faster loading speed equals happier customers. Studies show that visitors tend to spend less time on sites that take too long to respond due to certain animations, illustrations or resolution images.

Functional Design

Functional design is about how well a design or product works, it is a method of design aimed at solving problems and not just passing across information. Functional design is related to science. For a design to be functional, it has to work. And no, if only designers can use it, it is not functional. Designers have to be objective when designing for functionality since they are also designing for a target audience and market.

Functional design ensures that all parts of the design work well, including the visual aspect, without sacrificing any of the basic requirements. With functional design, there is always a goal for the users: to click a button, to place an order, to get information about an event, to leave a review, to add money to a wallet, and so on. And it has to be easily achievable.

The Pros

1. Conversion Rate

   Most of the time, less visuals and more functionality equals more clicks and better conversion.

2. Navigation

   With functional design, the process of carrying out tasks is more straightforward, it keeps users away from rough roads and stormy weather.

3. Simplicity

   Clarity is the key to functional design. Functional designs provide what the users are looking for without a hassle.

4. Mistake Handling

   Functional design anticipates mistakes and deal with them. For instance, the colors of the primary CTA button web/mobile app design are always different from those on other buttons - this is to capture users’ attention almost instantaneously and prevent them from clicking the “wrong” button.

The Cons

1. Nothing Too Special

   When functionality is strictly prioritized over visuals, there is no wow factor. Your design might not attract younger users because of a lack of good aesthetics.

2. No Stand-Out Features

   With less attention to visuals, it might be hard to separate a brand from their competition.

Factors that Affect which Design Method Should be Prioritized

1. The User/Audience (Who)

   Always remember that your designs are not for you, so keep an objective view while designing with colors, fonts, tones, images, etc. The target market greatly influences your design choices.

2. Platform (Where)

   Where will the design be? Is it meant for mobile, web, or both? Keep in mind that the more visual elements on a design, the less it will visible on a mobile screen because of the smaller ratio. Always take into consideration the platform for the design before starting the design process.

3. Goal

   What is the objective of the design? Are you designing a carpooling app for puppies and their owners? Are you designing a logo for a law firm? Are you aiming for crypto companies who are looking to bolster their legal standings? Whatever the end goal is, use it as a foundation to consider which design methods to use, whether the design is for informative or interactive purposes.

4. Brand Consistency and Recognition

   Does the design follow brand guidelines? Is the design a major or minor product of the brand? Does it require recognition at first glance? Consider how much of the brand the design presents.

5. Content (What)

   What exactly is going to be the main subject of the design? Will the design focus more on illustrations or text? Answering this will help you arrange the design elements to effectively function. The architectural hierarchy of the content is an important factor.

Balance between Visual and Functional Design

The good news is you can still have nice-looking designs that look and function great. This applies to every design. From icons to logos to banners to fully functional websites.

Both visual and functional design add different levels of value to projects.

If you focus on only one design method, you might be sacrificing the other. So the takeaway is to balance both depending on what you are designing for.

If you are designing a brand identity for a food company, you need to focus more on visuals than functionality because their users are usually influenced by what they see in the food industry. If you are designing a mobile app for that same brand, the goal is to convert users to customers. Hence, more focus on functionality. Both methods need to be weighed in most design processes, depending on the aspect of design being done. Functional design needs visual elements to capture user attention. If the design is visually appealing but not functional (and vice versa), the design is almost always bound to fail.

Come to think of it, the title of this article might just be clickbait because, in reality, functional and visual design go hand-in-hand.

Always, remember that good design should be result-driven.

Let me end with this popular quote from Steve Jobs:

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

Thank you for coming to my TED Talk.