Brickfit
Process
Define the site IA and wireframing
I start with defining what and how many pages we are going to include in the website. Lay them out in a clear IA diagram so whoever picks it up will understand the scope of the project. Next I create wireframes and a clickable prototype of the website to get feedback and approval from the client before final UI design.
Working with Design System
Because of the vast number of assets available from the brand, a design system was employed to allow elaborate usage over the website design from content blocks to decorative elements, along with the necessary typography, colours, logos and page components, each with their interactive state extensively documented for the developer's benefit.
Custom animations
Some of the more intricate animation requires explanation and animation to communicate to the developer. The key is catering time toward the end of the production phase to build out those animations.
Result
Very satisfied client with a strategically timed launch of the website along with a new version of their product:
- Strong launch across TV, web and social media platforms.
- Strong branding and website setting the tone for all brand related materials going forward.
