Menu
Menu
Client: Unifer digital agency
Role: Product lead
Date: 2023
Tools: Clickup, Asana, Figjam, Adobe XD, Adobe Photoshop
The main goal was the necessity to maintain consistency and set rules for their website. The decision to create a design system stemmed from the need to streamline processes, encourage collaboration between designers and developers, and speed up the development of new landing pages
We embarked on a 6-month project to build a comprehensive design system that involved understanding the agency’s needs and translating them into a practical tool.
The style guide was constructed to be a single source of truth for designers, providing clear, easy-to-follow guidelines to maintain consistency.
Our typographic work began by establishing a clear hierarchy that included all the required text elements, from headings to body text. For clarity, we chose 1,250 typescale and together created a range of 6 headlines, 3 display texts and 9 additional texts.
We created a color palette according to the characteristics of the IBM carbon color system. The palette consists of primary and secondary colors, gray palette, error and success colors. At the same time we took care of the correct contrast according to the new APCA standard.
We have created rules for desktop, tablet and mobile devices. Except for a few differences, we based our rules on the Material Design 3.0 standards. This was key to our design system’s versatility, enabling designs to adapt seamlessly and maintain functionality across diverse devices.
We have created universal components such as buttons, tags, text boxes, forms and many more. Each component was carefully designed with aspects such as states (normal, hover, active, etc.) and context in mind. For example, buttons had different styles according to their priority and usage. All elements were carefully prepared in 8 px system.
The aim was to build an extensive library of reusable, scalable and adaptable components, reducing redundancy and accelerating the design process.
After building the components using the style guide, we created more than 15 sections that an agency can use to build a complete site. We chose the sections based on the highest priority of the agency, focusing on the highest efficiency
