Odaka Pioneer Village | Framer Landing Page Design

BRIL .

Web Designer
UX Designer
Framer Designer
Figma
Framer

The Client

The Odaka Pioneer Village is a small complex of coworking spaces, guesthouses, and makers' spaces in Odaka Ward, Minamisoma City, Fukushima Prefecture. It is located in the area affected by the Great East Japan Earthquake in March 2011, close to the site of the accident at the Fukushima Daiichi nuclear power plant, and where residents were ordered to evacuate until July 2016.
It functions as an idea and innovation hub where people visit to experience a Scenius.

The Goal

When I first came across pictures of the Odaka Pioneer Village, I was fascinated by the extensibility and sophisticated minimalism of the structure.
The extensibility of the structure was achieved due to the non-existence of dead ends between the interior sections. This allows each section accessible to one another, thereby making it effortless for users to move freely and communicate between sections. It reflects the metaphor of the potentials for ideas to flow freely when placed in an uninhibited environment.
The sophisticated minimalism of the structure is demonstrated in the clean light brown wooden furniture, the maroon metallic beams and the polycarbonate laminates of the building elevation facing the road. The polycarbonate laminates illuminate the interior in the daytime and the city at night.
These fascinating characteristics I discovered about the Odaka Pioneer Village aroused my desire to conjecture a landing page for it. Moreover, upon visiting the official website of the innovation village, I realized a little more motion design could make its interaction design embody a sophisticated minimalism aesthetic.

The Process

Consistency with The Current Brand Language

I made it a priority to ensure that the landing page is consistent with the current brand identity of the innovation village. This involved:
Utilizing the color palette of the pioneer village
Maintaining a minimalistic aesthetic throughout the design
Utilizing an optimistic and inviting tone of voice in the copy I create.
Collecting high resolution images of the structure

Embodiment of Extensibility

The extensibility of the structure was one of the features that caught my attention. So it was important I deciphered a way to portray it in the landing page design. I figured since the free movement of users between the different sections of the interior was one of the experiences offered by the structure extensibility, it would be clever to portray it in the navigation of the landing page. This motivated the following choices I made in the design of the landing page navigation bar:
Dynamism: The navigation bar size is small, but can be extended by the user to see the various sections of the landing page.
Swiftness: The navigation bar allows users to freely move to any section of choice without the need to scroll just by clicking on the particular section.

Embodiment of Sophisticated Minimalism

The incorporation of motion in digital interface is one of the crucial contributors of a sophisticated aesthetic. It was also important that I implement motion in the interaction design without truncating the minimalistic design language of the innovation village. So the motion design had to be intuitive, subtle and blend perfectly with the landing page minimalist aesthetic.
To achieve this, a subtle scale up and down motion effect was implemented on a circle to represent hover actions and arrival at some sections of the landing page. The scale up and down effect also portray the metaphor of the potentials of an idea grow big.
Blur effects were utilized in the footer of the landing page to reference the polycarbonate laminates of the building.

The Result

The landing page for Odaka Pioneer Village reflects the extensibility and sophisticated minimalism of the structure.
Partner With BRIL
View Services

More Projects by BRIL