Branded Cuppa – Website Design & Development, 2D Web Animation

The Client

Branded Cuppa is a UK based company that provides all manner of teas with branded packaging to suit your specification, making the tea your own. When Branded Cuppa came to Painting Pixels they were looking for a bespoke website that incorporated a 2D Animation, explaining the business and what they do.

The Deliverables

2D Animation – To produce an educational and informative 2D Animation that will be visible on the website and play in real-time.

Website Design – To design a high quality and bespoke website that complements the company’s existing branding and further enforces it.

Website Development – To develop the designed website on a content management system to allow for the easy addition, removal, or editing of content without any required coding knowledge.

The Process

2D Animation

For Branded Cuppa the 2D Animation aspect of the project was quite different to any other forms of 2D Animation people are used to seeing. The client was looking for a 2D Animation that could be embedded on the new website without it being a video and therefore requiring third-party plugins. As such our approach to making this animation had to be radically different. It began in the same way most 2D Animations do, with the creation of a style and assets. Our designers were able to put together a style and assets that resonated really well with Branded Cuppa’s existing branding, helping to shape and define it even further. From this point forward we were required to create the animation entirely from scratch in a web supported coding language. This process was quite different to creating a video and required the collaborative efforts of both our designers and developers to achieve the desired results; a fluid real-time animation that could be seen on any device due to its lack of dependency on plugin support.

Website Design

Branded Cuppa - Website Design & Development, 2D Web Animation 1 Branded Cuppa - Website Design & Development, 2D Web Animation 2 Branded Cuppa - Website Design & Development, 2D Web Animation 3 Branded Cuppa - Website Design & Development, 2D Web Animation 4 Branded Cuppa - Website Design & Development, 2D Web Animation 5 Branded Cuppa - Website Design & Development, 2D Web Animation 6

As we had already put together the animation style our website design centralised around this; adopting the existing Branded Cuppa branding in a way that drew the users attention to key website elements. Clean, sleek and modern, the design our artists put together made use of a complementary colour palette and presented information in a clear and easy to understand manner.

Website Development

The final stage of the project was the website development, with the site being built from the ground up on a content management system by our professional developers. This enables to client to take complete control over their website content, making edits, additions or removals as and when they see fit, all without the requirement of coding knowledge. This helps to ensure that the client can keep their website up to date and relevant at no additional cost, something that can help with promotion. The development of the Branded Cuppa website in particular required the inclusion of the previously developed 2D Animation as a feature on the home page.The Result

Once finished, Branded Cuppa were really impressed by the flexibility the system offered them without it having to be at the cost of style. The 2D Animation was a very unique addition to the website and is one of the most like features of the website to this day.