Taking Inspiration for UX Design: Functionality and Aesthetics
Design must be functional, and functionality must be translated into visual aesthetics without any reliance on gimmicks that have to be explained.
-Ferdinand Porsche
Websites for design inspiration don’t always provide the answers we seek. There is a major issue with the way most designs are exhibited for inspiration. It is challenging to find solutions that function in the real world because of how simple they are to use and how simple it is to upload attractively designed screens.
This has the effect of drawing all the attention on attractive screens and interesting animations while undermining the value of solid UX fundamentals by leaving numerous issues unresolved, which is bad for designers. This has an impact since it causes many novice UX design portfolios to place more emphasis on solutions than on how they were developed.
As shown in the image below, when I searched for the word “UX,” all I could find were screens with aesthetically pleasing designs. They just shared the fact that no one had a project description in common.
Furthermore, this simplicity ignores the intentional design process that goes into why something appears the way it does and instead focuses on “what looks nice.”
There is nothing wrong with making cool-looking apps or websites, but it’s crucial to ask the proper questions while looking for inspiration to gain a comprehensive grasp of key UX processes that can then be converted into workable solutions.
How can we reduce this bias while also sharpening our sense of beautiful, useful design? Here is an approach:
Next time you’re scrolling through Pinterest or another website, try this fun activity.
Find the components of any app or website you come across, and then try to determine why each component is present in that particular region of the website.
Dissect each page or screen into its component parts and try to determine how they relate to the website’s overall concept. For instance, identify the buttons, picture placements, navigational features, social media symbols, and other elements.
“Why did the designer decide to scroll to the next page using a parallax effect?” Why is it important to know how many downloads there are?”, “Why is the information written on the top left and not at the bottom of the screen like in other similar examples?”, “Why are the social media buttons on the left and the navigation bar up top?”, are some of the questions that can get you started.
It’s critical to consider the problem these solutions are intended to address in light of the aesthetics, as a significant number of Dribble shots and Pinterest posts are focused only on aesthetics. Some of these designs don’t even include a description or background that would aid viewers in understanding the problem they claim to solve. An example of this is a webpage animation shot on Dribble which only says, “Work we did a while ago”.
In all likelihood, you might not discover the right responses to every query. It’s also true that you might get a variety of reasonable responses if you show the same design to other people.
Is this, however, equivalent to having no answer at all? Is that comparable to simply enjoying a static screen with thousands of micro animations set to “after delay”, without knowing why?
The answer is no.
This exercise aims to make you more aware of the reasoning behind design decisions. It is intended to instill in you the habit of realizing that good design is the result of a harmonious coexistence of beauty and utility. Its sole purpose is to improve not just visual design skills, but also storytelling. Every website or app represents a user’s journey, and the effectiveness of each is understood by the successful outcome the design tries to accomplish.
Consider it as a clock. Numerous gears in a clock each spin on their own axis. The clock only functions when these gears lock in place at predetermined intervals. In a similar way, aesthetics and utility are two different gears. They each contribute in their own unique ways to the design, but only when they work in unison can one recognize a design’s actual function as a problem solver.
In conclusion, we can only fully comprehend what a page means and how it contributes to the success of a website or app when we can recognize the elements on it and their functions.
So next time when you gather inspiration for making a functional app or website, focus on the harmonious co-existence between aesthetics and functionality instead of relying solely on how beautiful a screen looks.
