Client
Dairy farmers of Canada
Industry
Agro-Food
Role
Art Director
Year
2018
The task was to build a design system to easily scale multiple website versions with the same structural information. The use of design systems made the work lighter and easier to maintain.
The digital redesign included three new websites, the solution was to create a components-based design system, same markup was used to skining each property and redefine the specific look with CSS.
(For the UI, overwrites were used in sketch to swap elements and to produce different layouts)
A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI.
Rather than designing and building individual pages, we focus on the individual components needed to meet the demands of our pages. The result of this is a pattern library, a set of reusable interface components that document both behavior and implementation.
Doing the work with Pattern Lab allows us to create pages and templates, as well as a pattern library / pattern playground.
Elements of style. The building blocks of a brand
DFC digital style guide makes sure its robust identity — logo, colors, typefaces, shapes, and all the other little things — will continue to shine through consistently in every situation across their online prescence.
Empowering front-end developers to be a key element of the design process to build a more collaborative and cross-disciplinary procedure.
I have collaborated with DFC internal team to break the many properties of Dairyfarmersofcanada.ca down into separate, more specific websites to better serve their users. My role was to help with frontend production code while also sitting down with my creative team -designers and developers- to help them work together. I focused mostly on the site for the Corporate brand, building modularly to create the foundation for a design system to use for their other brands like Dairy in Canada, Canadian Goodness and Teach Nutrition.
The power of design systems and patterns
The point of a design system is to scale designs without having to reinvent the wheel or invent new interfaces from scratch every time. The use of atomic design allowed us to build LEGO-like pieces that would create more complex components. Atoms became molecules, molecules became organisms, and when organisms are created, we can build complex layouts.
Do you have a creative idea and want to work with me?
Let's talk