Exploring visual impact by iterating a restaurant review card
Written on: Nov. 10, 2023
ugly :(
pretty :)
I attended a virtual workshop event (Nov. 10, 2023) that allowed attendees to explore which design elements make the most impact in creating beautiful interfaces. The design session lasted 1 hour and was facilitated by Elizabeth Lin.
What makes this interface ugly?
During the initial segment of the session, we engaged in a group activity led by Elizabeth. She presented us with a single screen and encouraged everyone in the session to propose one element to alter in order to make the screen "less ugly." Subsequently, with each new frame copy, Elizabeth implemented one change at a time. The overarching objective was to prioritize elements that would have the most substantial impact on improving the overall aesthetics of the screen.
These were our iterations.
Which design elements make the largest impact?
In the second part of the session, each participant was assigned the task of identifying design elements that could significantly enhance the aesthetics of an interface. As part of this exercise, we individually crafted variations of a restaurant card.
In my first attempt, I took inspiration from Elizabeth's card and developed my ideal, aesthetically pleasing card design. The result was a deliberately minimal, visually appealing, and straightforward card for a restaurant named Jin Ju. (Card iteration 1)
Card iteration 1
In the second iteration task, the objective was intentionally to introduce an "ugly" element, and I chose to shift the fill color from white to a vibrant purple. This change was deliberately chosen for its big impact, recognizing that color plays a substantial role in visual aesthetics, influencing both accessibility and usability. Additionally, the fill color is usually the first visual cue that grabs the user's attention. The reason behind deeming this as "ugly" lies in the clash and distraction caused by the bright colors, the insufficient contrast, and the lack of readability in the grey text. (Card iteration 2)
Card iteration 2
In the third iteration task, the objective was to introduce an element to make the design deliberately "ugly." To achieve this, I opted to include an excessively thick dropdown, a feature that would be impractical in typical usage scenarios (Card iteration 3). Building on this in the fourth iteration task, I exacerbated the design by further increasing the size of the image, compounding the intentionally unattractive aspects of the overall composition. (Card iteration 4)
Card iteration 3
Card iteration 4
In response to the fifth iteration task, which aimed to enhance the card's trendiness, I revisited my preferred card design and crafted an inspiration drawn from neobrutalism. The key modifications included updates in fill color, a shift in the card style, adjustments to stroke thickness, and a transition from IBM Plex Sans to IBM Plex Mono font. This transformed card not only exudes a more trendy vibe but also enhances accessibility and usability by eliminating distracting colors present in previous iterations (Card iteration 5).
Card iteration 5
In the sixth iteration task, the instruction was to modify an additional element, but I took it a step further by altering multiple elements. Initially, I deliberately created an "ugly" design by employing unfavorable colors and standard fonts. Here, I opted for a more aesthetic color palette with improved contrast and chose a more engaging font. The outcome is a trendy, monochromatic-style card that not only looks appealing but is also user-friendly (Card iteration 6).
Card iteration 6. This is actually the cutest card I have designed :3
Reflection
I found this workshop to be quite fun. Being someone who appreciates visuals, I thoroughly enjoyed exploring aesthetically pleasing UI designs. The workshop provided valuable insights.
Designers possess individual preferences regarding what they consider "ugly" or "pretty." Nevertheless, each designer has an eye for visual appeal.
When assigned the task of crafting a "trendy" card, I initially faced challenges in conceptualizing a design style. Recognizing the importance of staying current in the field of design, I realized the necessity of keeping up with the latest trends and following influential thought leaders in the design community. This commitment to staying informed is crucial for maintaining relevance in the dynamic and evolving landscape of design.
Personally, working on UI is both enjoyable and challenging for me. I constantly grapple with the balance between aesthetics and usability, striving for a design that is not only visually pleasing but also intuitive and user-friendly. Achieving a balance between making it look "pretty" or "cool" and ensuring practicality is an ongoing challenge. "Pretty" can take the form of minimalistic simplicity or vibrant boldness. However, design decisions are influenced by various factors. While we aspire to create visually appealing interfaces that satisfy the designer's aesthetic preferences, we often need to compromise a bit to produce a practical product that aligns with user and business objectives.