What's New in Mäd.com v3.1.

At Mäd we’re always looking ahead. Looking for ways to enhance our projects through design, technology and innovation. One way in which we’ve been pushing these boundaries is during the latest release of the [Mäd website].
Here’s a little look behind the scenes at what we have been up to and the improvements we have made in version 3.1.


A key update in the latest version has been the introduction of new and improved animations, more specifically microinteractions.
In present-day web design and development, micro interactions have become the industry standard for enhancing and enriching digital experiences on web and mobile. Alongside this, with ever-improving browsers and mobile processors, animations can be strategically used to better present information in intuitive ways.
All of this contributes to a better user and brand experience, using the microinteractions to give feedback, create focus, and hierarchy within your digital product or service.  

Mäd 3.1 mobile navigation interaction

Information Architecture and Navigation

Another key update in Mad 3.1 was the new and improved IA and navigation. We thought in- depth about what would be the best way to display our ever growing number of pages in a way that is best for our users.
Using the innovative Webflow platform, we easily developed some subtle micro interactions to create a navigation that was both functional and intuitive to use.

Mäd 3.1 navigation redesign

The new navigation, combined with re-thinking our information architecture, will help our users easily navigate the site and find the information they really need.

New Style Guide and CSS Management

Even though Webflow does a lot of the heavy lifting when it comes to CSS, good management of CSS is key to creating a site that is easy to change and update while maintaining excellent performance. To solve this problem, we introduced a living style guide for Mäd.

While most style guides live in a hard to update PDF document, the best is live on the web in the form of a living style guide.

Other traditional agencies tend to use large PDF documents that are difficult to track, update and work with. As they are constantly being updated, teams face a big productivity block when it comes to deciding exactly which version of the guide to work with.  

To solve this issues, forward-thinking companies such as IBM, MailChimp, and SalesForce have taken their style guides online. At Mäd we have taken things one step further thanks to Webflow.

Now our style guide lives within the Mäd website, it’s inherently up to date, always live and accessible (or password protected), and it’s visual (as a style guide should be). Take a look at ours here.

Performance enhancements

Alongside our design and UX improvements, behind the scenes we have been working hard to engineer our site to be as fast as possible.

In v 3.1 we have reduced the website size by nearly 14mb. This has been made possible by a combination of image loading, compression and file minification techniques that have significantly improved the site's performance whilst maintaining quality and providing an excellent UX.

Final notes

Overall, the release of Mäd 3.1 has been a great turning point in pushing the boundaries of the latest web design and development tools, techniques and processes.

As a result of the success of this release, what’s been tried and tested during the process of this release can now be used in other projects to provide cutting-edge solutions to modern day web and mobile problems. Building from this, we will continue to tweak and refine our processes to continually improve each and every project we work on.

Kieran Glover

Kieran Glover

Frontend Web Dev @ Mäd. Kieran loves exploring new technologies and bridging the gap between design and development and is a Webflow fanatic. He also made this website :)

Read More
What's New in Mäd.com v3.1.
Share this