The tale of two frames: Figma and ukiyo-e
There is a strong admiration for all things beautiful. It only takes one quick glance at the Great Wave off Kanagawa by Katsushika Hokusai for anyone to appreciate the majestic display of the use of colours, craft and poetry.
Translated as as “pictures of the floating world”, ukiyo-e is the culmination of the woodblock printing knowledge for over 1000 years. Based on a deep maturing of the process and practice, ukiyo-e advanced technologically via various applications, from the use of the new colours, such as Prussian Blue (the VantaBlack of their times)from European import, to the shift into multi-coloured landscape art.
The same can be said about UX/UI design, as the discipline transits from a world of web, to apps, and now to multi-dimensional virtual worlds. Or how we initially saw UX/UI taking roots in pixel art, then skeuomorphism, then flat design and now to new design genres, such as neomorphism and neobrutalism.
Another parallel is the common principles between both art forms. There is a clear visual hierarchy in ukiyo-e and wireframing with distinct contrasting shapes and colours. UX/UI makes use of familiar mental models, as described in Jakob’s Law, whilst ukiyo-e shows its resemblance in the ordinary recognisable images of daily living.
Even the setup between the 2 practices are uncannily similar: In ukiyo-e, the artist leverages support from a carver, printer and publisher. The equivalent in UX/UI is the software engineer, design system engineer and the product owner respectively.
However, perhaps the most obvious difference whereby UX/UI trumps ukiyo-e lies in the functionality and interactivity of UX/UI designs. Despite both mediums being easily consumable in mass quantity, only UX/UI provides instantaneous feedback upon interaction. On the other hand, the very best of ukiyo-e remains static as prints or in books, partly due to the times where it was at its peak in the 18th century.
Very quickly, UX/UI could be seen as the superior and updated visual expression between the two, leading to the dismissal of an outdated Japanese antiquity art. Yet, there is one specific detail of ukiyo-e which is worth considering: frames.
The word frame is a very complex word as it holds various meanings. The most literal definition is the rigid structure that surrounds something, like a picture frame. Stepping into the world of computing results in an expansion of the definition, from programming language to data networks.
From a UX/UI perspective, particularly in the world of Figma, a frame is a container for your visual design. It is essentially the focal point of any UX/UI designer, dedicated to design around wireframes and usability. As a result, many designers, including myself, are culpable to jump straight into wireframing from user research, as a prescribed formula for UX/UI without considering the context of users. It is the mental shortcut and a particular framing of the mind we prefer to stick to. In psychology, this is better known as mere exposure effect, which is the tendency to stick to familiar things, rather than to embrace new experiences. The danger with this thinking is that we limit our exposure and prevents us to become better at our craft.
What if I tell you that this frame is illusionary, almost like an infinity mirror where there is a frame within a frame? Zooming out of the Figma frame, have we considered the true borders of the device, captured by another frame? Alas, the context transcends user flow, and constitutes the environment, culture and stakeholder coordination. With context, fundamental intents, desires and drivers can be derived. Without context, we as designers design our interfaces void of meaning.
Hence, here’s another definition to frames: a single complete picture in a series forming a cinema, television, or video film. Frames in this context expands the boundaries of the screen, and considers the Mise en scène: the arrangement of scenery and stage properties in a play. But before we get ahead of ourselves, notice that even film directors heavily rely on a story script and artboard to inform their decision before producing the frames.
Back to ukiyo-e. The pictures of the floating world encapsulate the surrounding elements and sceneries of daily living. But through Hokusai, there is one other defining signature element: Mount Fuji. Rather than creating a single piece, Hokusai created a collection of stories depicting life around mount Fuji. He has effectively treated the iconic mountain as the main subject across all of his 36+10 frames. Such a move has also inspired other artists, such as Hiroshige and modern contemporaries like Masumi Ishikawa, Shin Matsunaga and Kiyoshi Awazu.
We too can create our UX/UI version of the picture of the floating world. By substituting Mount Fuji with digital devices, we can apply context directly into frames, and create a collection using modern day ukiyo-e techniques. In other words, the laptop and the phone are our Mount Fujis applied across all of our artboards.
Our approach constitutes the following: Determine the key features to be turned into an artboard (1). Produce a quick sketch (2), especially if it involves multiple designer, and receive feedback to find out if the contextual elements are accurate (3). Then, turn the sketches into high quality images by using vector shapes and outlines (4). Achieve the same consistency across the artboard by determining the right weight and colour tones (5). The finished frames are then used across multiple applications, such as through surveys to test for desirability, through journey map to visualise the key touchpoint of the solution, or through ideation workshop to spark new ideas.
Paradoxically, UX/UI mimics ukiyo-e in an ephemeral transition through enhancements and UI refactoring. As soon as a feature sunsets, another feature re-emerges. It may all seem that we ourselves are metaphorically floating around an abstract world of digital frames, but there’s more to just digital interfaces.
Let us remember the context and the frame beyond the digital frame. Only then can we appreciate more than the Mount Fuji in the Wave of Kanagawa, and see the actual natural environment around our digital experiences.
Further readings and references:
- Know the Artist: Hokusai by Several Circles
- How to make Ukiyo-e by Ministry of Foreign Affairs of Japan
- Ukiyo-e: its artwork and influence on contemporary design by Hailey Spinks
- FAQ: What was the “Floating World” (浮世)? by John Fiorillo
- Two Tips for Better UX Storytelling by Mayya Azarova: The story mountain is an interesting look into how stories are structured using mountains as the guiding metaphor. There are some parallels in this writing, especially with our subject on Mount Fuji.
