The Mountain Base

As a follow up of the MRM Projects my clients at MRM asked me to develop a custom website for their new venture, The Mountain Base. The Mountain Base is a mountain sports firm that offers all related to mountain sports. The website is designed to be simple and easy to navigate, with a focus on providing information about the services offered by the client.

Technologies

• Webflow
• Mapbox
• JQuery
• CSS Grid

Design

The Website was designed from scratch using Figma with the clients. The design is aimed to be cohesive and modern, with a focus on modern design trends. The color scheme is simple and professional, with a neutral palette of anthracite, orange, and white.

Challenges

Making a custom site with lots of interactivity, maps and infoboxes with Webflow is a challenge in itself. The client had specific ideas about the design and functionality of the website, and it was important to incorporate these ideas while also ensuring that the website was user-friendly and accessible. Webflow is great at visual web designing but not so great when it comes to custom out of the box experiences like maps and infoboxes and interactive elements. That is why we had to use Mapbox and JQuery to make the site work as intended. If I were to do this project again I would probably use AstroJS or SvelteKit.

Issues with Webflow

One main issue was the heavy use of CSS Grid for the layout. Webflow does support grid but the implementation seems to be really buggy and not as performant as it should be. This resulted in a lot of custom CSS and JS to make the site work as intended. Also everytime my client updates the CMS content, I have to go and refresh the deployment in order for the grid layout to work properly.

Design

As stated prior we used Figma to design the website. This was the first project, where I really tried to use all the principles of web design, layout and typography to make a cohesive and astethic design. The design is clean, modern and minimalistic, heavily inspired by bauhaus and swiss design.