People crave beautiful things. For many years, artists and designers have created beautiful art, products and works to tell stories and shape the view of the world. Beauty can connect people physically and emotionally. Most importantly, Beauty can increase the functionality of a design, a product. And can make our lives better.

The visual design has been underrated. Many institutions exclude visual design courses from the studies of UX design and product design as if it was an unrelated subject. In the business world, where business value and efficiency become the main focus, beautiful visual design usually gets categorized as “Nice to have”, a luxury and seldom one of the priorities. There is also a common misconception that beauty and function are at the opposite ends of a scale and having a beautiful visual design sometimes can cause a misunderstanding that functionality and data are compromised.

Unlike the printed medium, Visual design in the web world has been considered to be much more limited. Design on the web has not been developed long enough to allow much freedom of creativity and thus, seems to be stuck with limited styles and layouts.

Getting Out of The Ruts

In a design talk by Jen Simmons in 2018 - Modern Layouts: Getting Out of Our Ruts, She started her talk with “We are stuck in a rut, it’s a rut that’s shaped like this:

Image from the design talk by Jen Simmons - Modern Layouts: Getting Out of Our Ruts

In recent years, designers have increasingly found more and more freedom in expressing their design creativity in the web medium as more tools and technologies for design become available and more visually related protocols and components are supported consistently by the majority of the browsers. Thus, this is a great time to be creative and experimenting.

There are many reasons to pursue a beautiful and creative visual design. A good and beautiful visual design could improve the functionality, form a much more intuitive, consistent experience and make people feel happy.

I have been practising visual design persistently, with a goal to experiment and explore possibilities on visual design on the web medium; using “beauty” to improve functionality and create a much more intuitive, consistent and pleasurable experience - hoping to challenge the misconception that visual design on web is purely decorative.

Visual practice - Social Cataloging

One of my projects involves re-designing a social cataloging web application for books. I conducted interviews with users of one of the more popular social book cataloging web apps with a focus on emotions. I picked the key adjectives my interviewees used to describe their experience, then used these words as a starting point to create some “visual personas”.

Experiment with style tiles

Three different style tiles were created with my interpretations of the adjectives.

The three style tiles

Style tiles could be very useful to initiate early discussion and alignment about visual directions and can be used as a starting point for the following design process.

I reconsulted the users I interviewed previously, asking about their preferences for three of the style tiles and their reasons. Most of them thought that style tile number #3 (the right one) was closest to their expectation based on their experience with the application. However, the rounded shapes in style tile #2(the middle one) looked friendlier and could be a great balance to alleviate the intense feel of efficiency from style tile #3.

Therefore, I took style tile #3 as a starting point, along with the suggestion to balance the visual direction with a more friendly look.

From Experimentation to Structure

My first few iterations on high-fidelity mock-ups were mainly to explore and experiment with the layouts and the best way to visually present the content. Experimentation could go on endlessly to a point where things start to be difficult to be managed and reused. Visual consistency is important as a product requires coherent styles to successfully deliver a strong visual message to the users. Thus after gathering sufficient styles and components through experimentation, some structure and rules are needed to extrapolate and create even more components or designs deductively to maintain consistency.

How the profile page evolved from the first iteration to the last

Selected final design mock-ups

Visual practice - Pregnancy Mobile App

Building style tiles could be driven by different goals and purposes. Another project I embarked on was designing a social app for expecting parents. This round of creation focused on exploring shapes, fonts and colors that could generate a playful and informal visual direction to relax the customers.

The three style tiles

Based on interviews with expecting parents, a recurring theme I picked up was their vulnerability to feel stressed, anxious and overwhelmed. Therefore, one of the main goals when designing this application was to take care of their emotional needs - hence the visual direction to create something relaxing, and fun.

With the results of multiple rounds of interview and feedback, I decided to move forward with the style tile in the middle, where organic shapes, bold colors and playful fonts work in concert to construct the desired visual direction.

A Little Bump in the Road for the Bumps

The first iteration of my design mock-ups did not exactly achieve my intended result as I was unable to fully apply the essence of the visual direction from the chosen style tile. People told me that the app looked too professional and enterprise-ish. The rectangle card styles, the design on typography and spaces seemed to all contribute to a much more formal look and feel.

First iteration of the visual design

At the time when I was working on this design, I was also a full-time designer for an enterprise product and it became a challenge to get out of my daytime design mindset, where I was focusing on different goals and directions.

With the advice from my design mentor, I tried to get out of my comfort zone by conducting a speed design exercise - by limiting only 15 mins on one design and then moving to another once the time was up. The idea was to keep repeating this process until I feel comfortable thinking outside the box.

Selected outcomes from the speed design excercise

This speed design exercise indeed helped me and eventually led to the creation of the foundation for the later designs. In later versions of the mock-ups, I iterated the styles and components to form the shapes that could easily be achieved technically and can be reused for consistency.

Selected final design mock-ups

Documenting the rules and structures

As mentioned before, structuring consistent visual language is critical after the stage of experimentation. Building a style guide or a design system is a great way to document structures and manage the rules.

Style guide to document the reusable styles and rules

Visual Practice - A Choreographer’s Portfolio

In my recent work designing a website for a dance artist. I was able to be much more creative on the visual language and layouts. You might say that it was easier to lose the connection in-between pages when layouts were different. However, It serves the idea of the dancer’s continuous movements and the desire to be unique and free, which was the priority goal for the design.

Selected final design mock-ups

Keep practicing

Nowadays there are still many limitations when it comes to visual design on the web. However, efforts on exploration should be ahead of technology; And creativity should not be stopped because of the limitations on tech and resources. Design can drive and lead to more innovations in technologies when a great number of designers are willing to work together, share and discuss our stories about our practices and explorations.