MB Web Homepage Design & Build Case Study – Friendly, Fun, and Functional
Table of Contents
New branding means a new website, which can be a daunting prospect for any company. And with such a vibrant and different new look, it was no different for us.
If anything, it was doubly important, as our website isn’t only a showcase of our work, insider blogs about the industry, or even just a company profile. MB Web makes websites (it’s in the name, right?), so we knew we needed to create something special.
Having recently completed the stunning MB Brand Communications rebrand, we wanted to build a contemporary and complementary website that brought the fun and creativity of the new design to life, but also maintained effective and fluid functionality. It had to be a harmonious marriage between style and service.
So it was important for us to leverage cutting-edge technologies in order to achieve a seamless user experience, but also showcase some of the features and techniques that could be used for your very own website.
And here’s a deep-dive into how we did it.
Web Design – Colourful Creations
The new branding has a high-impact, visually appealing colour palette that brings a sense of joy and creativity to the brand. This colour story needed to be ever-present in the design, from thoughtful application of gradients to effective colour blocking that would maintain the innovative look and feel of the brand, but also lend itself to traditional website structure and interfaces.
That’s one of the reasons why our team utilised the power of Gutenberg, a revolutionary WordPress editor, to build the website tailored to suit our own brand needs. While WordPress is already an excellent coding, design, and content-management platform, Gutenberg allows for even more flexible content creation, enabling us to design pages with precision and efficiency on the fly with instantaneous and satisfying results so we could quickly and reliably see what did and didn’t work. We also added a dynamic latest work carousel showcase to show off our work in a visually appealing manner, allowing users to explore and discover our most recent projects effortlessly.
Site Structure – Thinking Outside the Box
One of the main elements of the new branding is softer lines, waves, and a general departure from boxes and rectangles. Lines and shapes like these lend themselves to a more fluid motion, and so we knew we needed to create this sense of movement, without sacrificing functionality or the traditional sense of website structure.
To support this, we implemented parallax scrolling effects to add depth and immersion, offering users an interactive and visually stimulating browsing experience that created the sense of movement, without letting content get lost. It allows for an additional layer of subtle movement behind the animated elements on the site and horizontal parallax motion was applied to the wave effect, further enhancing the site’s aesthetic appeal.
Animated Elements – Adding Character to Characters
One of the cornerstones of the new branding are the delightful characters we use to add an additional layer of fun to the work that we do. We knew we wanted to incorporate some of these drawings into the design, but didn’t want to overburden the site with hefty images or too much movement.
Incorporating Lottie animations added a dynamic flair to the website, helping to captivate visitors with engaging motion graphics that enhance user engagement and storytelling without sacrificing speed or space – they’re more seamless than video and less bulky than GIFs.
We created the animations in After Effects and upon export were able to add the subtle animations to the site that really help to bring the new brand to life. And they’re undeniably cute.
Blog Article Writing – Big on Blogs, Bigger on Speed
Our blog is a great source of information and inspiration on how you could develop your own online presence, and we wanted it to be as accessible and simple to use as possible.
With so much blog content being created we needed a methodology that would quickly bring up articles without sacrificing speed.
By integrating Ajax loading functionality, we optimised the site’s performance in order to fetch blog articles dynamically, reducing page load times and improving user accessibility to content.
Mobile Optimisation – Online On The Go
Over 60% of online traffic comes from mobile phones and devices, so it’s little wonder that mobile optimisation is more important now than ever. To enhance the mobile browsing experience, we employed SVG masking on the iPhone scroller, to deliver a sleek and seamless navigation interface tailored specifically for mobile users.
We also wanted user interaction to be implicit, without being imposing. We use strategically placed call-to-action (CTA) popup contact forms to encourage user interaction and streamline the conversion process, making it easier for visitors to engage with the brand without it being annoying.
The Results
We hope that the results speak for themselves, and we couldn’t be more thrilled to showcase our new branding in such a brilliant way. We’re so proud of the team and what they’ve achieved.
Through meticulous optimisation and adherence to best practices in web development, we achieved an exceptional Google PageSpeed performance score of 99%.
Aiming for a high speed score ensures swift and seamless browsing for all users across devices. A benchmark to be proud of among many:
- Enhanced user engagement and interaction.
- Improved brand visibility and credibility.
- Increased conversion rates and lead generation.
- Positive feedback from clients and website visitors.
- Sustainable and scalable web solution for future growth.
In conclusion, not only is the website the perfect realisation of our new branding, but we feel it also shows our commitment to pushing the boundaries of web development, latest technologies, and delivering unparalleled digital experiences and designs.
The website we crafted not only meets but has exceeded our expectations, setting a new standard for excellence in web design and functionality, and if you’d like to learn more or talk about how we can do the same for you, don’t hesitate to get in touch.