Sustainable website design theme applied in less than 30 minutes

Screenshot of the Navillus Print Gifts websiteWebsite Brief

We’ve updated the website’s global template with a new primary colour palette to align with Navillus' "Sustainable Products" printed brochure for 2024. Each category now features eco-friendly colours, managed through a mix of manual graphic updates and dynamic CSS variables. Given the success of the category colours, we need to investigate ways to improve the management of the colour palette, streamlining future updates.

 

Project Deliverables

Rework the Global Header Area

We introduced new graphics to the website that reflect the sustainable theme, creating cohesion with the printed brochure’s visual design. We addressed responsive issues with the 'ribbon' design for the header area which varied in height significantly. We hope to have settled on a balanced solution that aligns with the print design.

Update the Category Colours

In our last major production, we applied custom colours to relevant product categories using a method that managed the colours dynamically. This approach allowed us to update the product category hexadecimal values quickly, taking approximately 30 minutes. However, agreeing on the finer design details, especially colour matching, took about two weeks. After investigating Figma, a new collaborative website design tool, we used it to agree on an extensive 23-colour palette, ensuring consistency with the printed brochure.

Update the Primary Colours

Ironically, rebranding the rest of the global template styling took longer using traditional CSS styling methods. While styling variables seem like an obvious mechanism for managing global style changes, this would require an upgrade. This project served as a great use case for managing an extensive colour palette on a more granular level, potentially with light/dark versions for each category. This would extend the management to approximately 60 colours, offering greater design opportunities.

 

The Result

Consistent Branding

The website now closely reflects Navillus’ new printed brochure for 2024, ready for the start of shipping the printed version.

Performance Optimisation (Tech SEO)

Through ongoing progressive enhancements to the website, we aim to maintain or improve the current website performance. We are pleased to report that the PageSpeed score for print-gifts.com remains exceptionally high: 97 for mobile and 100 for desktop.

 

Conclusion

We often take for granted how rapidly technology progresses. Managing colours dynamically through the global template would require an upgrade to Bootstrap 5, but it would be a great progression for the category colour palette, which seems to be here to stay. This upgrade is on our development wish list!

 

Visit the Navillus Print Gifts website >

SolvIt has proven to be a fantastic asset to our whole business and have not only aided a massive leap forward for our company's web profile, but also changed the way we view our company and helped us to thrive in a highly competitive industry. 

SolvIt's business planning and forward thinking approach has proved impeccable and delivered over and above our expectations with the same enthusiasm as we have which in turn invigorated our whole strategy for web marketing.

Richard Sullivan
Business Owner

Navillus Print Gifts

Related

SolvIt home page

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies. Find out more here