Responses by The First The Last.
Background: This site’s purpose is to create an online presence for Moralia, a Canadian furniture design firm that manufactures luxury, contemporary furniture solutions. Our goal was to present its product line and new collections in a way that corresponds to Moralia’s minimalist aesthetic and love for innovation. The site’s target audience is architects, designers and consumers with a taste for luxury.
Design core: We considered it important to make the main focus precisely on the products displayed on a simple grid; however, this is not in our style, so the main page has a built-in slider. Upon entering the website, the user’s attention is focused on it—nothing else grabs their attention other than product categories. This was our main goal. We are very proud of the slider because, in addition to its bright solution, it looks modern, solves the task and is easy to navigate.
We folded minimalism into the layout, combining photography, color, and a mix of small and large typography. Animation is also significant as it makes the site interesting for the user. It is always important that the content responds to interaction, so we pay great attention to the animation on all our websites.
Challenges: As mentioned above, we paid great attention to animations. Transitions, hovers and the appearance of photos all played essential parts in our work on this site. The greatest difficulties arose during working on them at each stage of the website’s creation, from design to development. The designer spends a lot of time and effort to select exactly those animation effects that make the content as interactive as possible for users. Developers faced considerable difficulties at the stage of creating animations as well. We have worked hard to achieve the softness and smoothness you see on the Moralia website.
Navigation structure: First of all, we always proceed with our design from the client’s requests. In this case, the client came to us and listed a number of functional points that he would like to see on his new website, which is how we came to the navigation solution that you can now observe.
The category navigation structure is built in two ways: After the site loads, users land on the introductory page, where they are acquainted with the brand and can read some brief information. A video plays in the background. By scrolling, we go to the main category slider and can no longer go back to the introductory screen. Here is one of the main ideas: on the main slider, you can scroll through all the categories of the Moralia website and go to the page at any time with a click.
Through the menu, you can go to another page of categories with a simplified slider. Access to all other site pages can also be carried out through the main menu.
Each category also has in-page navigation between the categories. Each category comprises multiple collections. There is also internal navigation between collections within a category. Everything is implemented intuitively, so the website is easy to use.
Technology: Nuxt.js is a JavaScript library based on Vue.js. In most of our projects, we use Nuxt because it makes the website’s pages load faster in the browser. Moreover, one of the main differences between our agency’s sites and others is the interesting animations—we pay great attention to their creation and emphasize their softness. Nuxt handles this task much better than other software; it makes animations smooth and easy, which is why we have been using it for many years.
There is a complicated structure and navigation between pages on the Moralia website. To give the client the ability to manage content easily, our back-end developers wrote an admin panel to meet his requests. Using the Laravel admin panel, we have an advantage over other website builders in terms of development speed and API customization for the client’s tasks. To make the Moralia project’s management process optimized and convenient, we created a convenient, easy-to-use admin panel with a website-style design. Thanks to the additions that we developed, creating additional fields and blocks requires less time and effort.
For each project with an API, we created convenient documentation using Stoplight Studio, enabling us to save the time it would take to write it to improve our products.