There is something compelling about a simple yet compelling website design. Your eyes just simply navigate through the website with ease. The beauty of simplicity can be achieved through the choice of typography, minimal use of colors, or using powerful imagery.
- What kind of grid was used? How many columns were used?
- What are the subtle animations used when users are interacting with the website?
- How was the content segmented?
- How strong was the brand identity? What do I like about the chosen typography?
- What was the mini pleasurable user feedback that sparked joy?
For the first case study, we will be looking into the website of Waka Waka — The production of seating concepts, utilitarian objects, and interiors by Los Angeles-based Japanese designer, Shin Okuda. The website is designed by one of my favorite design studios, MOUTHWASH Studio. If I were to describe their studio in 3 words it would be — Strong, clean, and compelling. I’m an absolute fan of their work.
The website is helmed by a powerhouse of 3 individuals, designer Ben Mingo, photographer Abraham Campillo, and developer Tim Roussilhe. The brief for the website was to create a functional yet playful e-commerce experience to house Okuda’s full range of products. The result not only aligned with the client’s philosophy of ‘minimum design, conscious proportion’, but it also brought forth the personality and beauty of the collection and brand.
What I like about the website design is how the designer allows the photos to take center stage. Paired with a contemporary San serif typeface, you can see how the different weights of the typeface are used tastefully throughout the website.
- TYPOGRAPHY
The heaviest weight of the text ‘Waka’ is used for areas where the brand name is at the center of attention and to highlight the main types of furniture. Whereas for the secondary typefaces — We have the Sans Serif in caps. Although the same typeface was used, once the different font sizes are applied, you can already tell the hierarchy between 2 entities. (N°00212 STORAGE SOFA) Although I was slightly taken aback by the sudden appearance of the serif font used, I thought it still gives a tasteful touch to the overall branding. It’s almost as if the designer has decided to apply the Sans Serif typeface only to the ‘storytelling’ aspect of the brand, e.g. the description of the furniture pieces and the story behind the founder.
The designer demonstrated the strength of utilizing lowercase and uppercase from a single typeface to create a hierarchy.
2. RHYTHM AND GRIDS
Something I’m always curious about — is how designers decide on a grid and utilize it to their advantage. As I was scrolling through the website, my eyes navigated effortlessly through the pages with ease which I love.
My eyes were so pleased.
3. INTERACTIONS
Before I gush over how beautiful this website is again, I wanted to know exactly why I enjoy the design so much. One of the highlights of the website is how smooth the interactions and website animations were.
- As you hover over the images, there is a pop-up panel to show a close-up of the furniture pieces.
- Moving image slideshow — Allow users to enjoy a nice walk-through of the wonderfully documented shots.
- Slideshow scrolls as users scroll down with their mouse.
- For usability — you’re able to click on the ‘Pause’ button to view the photos in static. What’s more? To view the photo in close-up, the user can click on the photo and the photo will scale up to full-screen. The way the image zooms in and out as it scales… stunning!
- Imagery as the main character — once you fully savored the image, users can click on ‘Info’ and the pages push down to reveal more information about the furniture piece. Love the smooth transition!
- A thin stroke was used sparingly throughout the website to segregate content as well.
From the interview done with Brand Identity — I found out that the designers drew inspiration from print media, which they attempted to apply to the web.
The designers did a wonderful job in marrying all the core disciplines of photography, visual design, motion design, and web development — creating a beautiful masterpiece of experience.
MY THOUGHTS
Moving forward, I hope I’m able to helm a distinct brand identity and create a beautiful digital experience for my future clients. Something this simple but yet so compelling. Excited to also apply a good structure of grid system for my next web project as well.
And with that, I’m closing my very first case study, hoping to keep up on this!
As always,
Stay uncomfortable.
Qian