#StopWarInUkraine Save the children
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
29 Collect

Case study: MOHEIM by baqemono.inc.

Article by baqemono.inc. in Web Design -

MOHEIM is a brand that creates new standards, its products share a minimalist, simple design that remains timeless. MOHEIM has been providing the world with various items for living spaces, from tableware to furniture, striking an elegant balance between a quiet appearance that fits into the lives of its owners and a presence unique to MOHEIM's products.

opening animation
Moheim opening animation

What we did to bring out MOHEIM's design concept on the website

Our initial approach was to work with the client's production team to verbalize the brand identity. We began verbalizing the customers' brand image by applying Jennifer Aaker's dimensional framework. We then presented the client with image boards and benchmark sites based on the keywords generated from this process, and discussed the future direction of the design.

dimensional framework
Dimensional framework

About the Design

To express the client's concept of simplicity with presence in their designs, we needed to introduce eye-catching elements that would draw the viewer's attention to the site and create a lasting impression. Through trial and error, we devised the strategy of adopting a website layout with an intriguing yet well-organized design, unlike any other competing site.

We needed to introduce eye-catching elements that would draw the viewer's attention

About the grids used

We repeatedly adjusted the design's grid positions to give a well-organized impression, while offsetting the website's elements to the left and right.

We used a total of 7 grids. To find the optimum balance, we repeatedly tested where to place the four lines, other than the center grid and the grids displaying the left and right content widths.

dimensional framework
Grid

About the photos used

Because of the limited budget for this project, the visuals had to come from the client's existing stock, and we spent a great deal of time retouching them.

Retouch
Retouch

About the animations

We placed interactive elements and animations that would surprise and delight users in places they would not notice at first glance, such as mouseovers on banners and 404s.

In our past projects, our developers often took the initiative in creating those staging elements. However, this time, the designers created the video and path animations as a new approach for our team. Our developers used animation libraries such as GSAP and Lottie to output these animations to the browser, creating a unique presentation.

As users casually browse through the site, they will encounter slightly unconventional effects they have never seen before. Thanks to the impact of those presentations, we adopted a simple presentation that followed the site's general tone and feel for the other aspects.

We did not use special techniques to manage the performance of the animations but spent a lot of time adjusting the easing/seconds, etc. (This was very enjoyable for us, and we considered it essential to maximize the site's quality.)

404page
404page

Tools used

Animation: GSAP, Lottie Web, Three.js

Page transition: Page.js

Service Worker: Workbox

Company Info

baqemono is a creative studio based in Tokyo, Japan.

Click here to learn more about our work.