Design Democracy were looking for a new Framer website to reflect their new brand look and showcase their extensive portfolio of work. There was a strong vision on what they wanted based on references to other website and features.

I worked in collaboration with Sonia from Design Democracy to design and build a fresh, clean site to highlight their great work.

When working with any creative company, it can be a challenge to ensure you fully understand their vision and how their brand is going to shape the new site. This is also challenging when there is no previous website or brand material to explore.

The size of the website and amount of work meant I had to be careful when it came to optimization and the user experience. As I experimented with different effects, the site load could have become difficult to manage, so a lot of work was needed to find the right balance between design and performance.

This was the first Framer site where I applied a CSS clamp on the font size. Unfortunately not native to Framer and any inline CSS code would not work on the CMS pages due to the cache. So a external stylesheet was used to apply this effect to the headings.

I created a collection of custom components for particular effects, my favourite being the blend color change of the backgrounds as you scroll. This uses a default color value that is replaced by a color hex code that can we set in the CMS on each project. Using a scroll effect trigger to swap the colors as you scroll.

Each page was carefully designed to offer a clean, fun browsing experience, with subtle animations placed around the site.

What appeared to be a simple agency portfolio, actually had some complex challenges. I took a lot of time to ensure each trigger worked across all devices and screen sizes, that the font scaling work consistently and well. A detailed oriented build with depth were you wouldn't expect.

Which made the project all the more satisfying when we could see it coming together and ultimately led to Design Democracy loving their new website.