Modular Utilitarian Illustration System Project by Jere DibertoModular Utilitarian Illustration System Project by Jere Diberto

Modular Utilitarian Illustration System Project

Jere Diberto

Jere Diberto

Verified

Creating a Modular Utilitarian Illustration System for Enhanced Functionality

Overview

When the client sought to elevate their visual identity, I was excited to collaborate once again, this time to develop a cohesive illustration system steeped in Utilitarian Design principles. The goal was clear: to create 80 fully editable vector illustrations that are not only functional and minimal but also showcase a refined aesthetic, moving away from the previous 120 pixel-art designs.

Design Principles

Guided by the ethos of Utilitarian Design, prioritizing clarity and functionality over embellishment, this project centered on creating a clean, industrial look. Key strategies included:
Black & White Palette: Utilizing a striking black-and-white color scheme, I leveraged contrast, line weight, and density to establish a clear visual hierarchy.
Grid System: A 32px grid provided structural integrity, ensuring consistency across all illustrations.
Standardized Frame: Every asset was crafted within a 1024×1024 frame, maintaining uniform scale and proportion.
Dynamic Stroke Weights: I employed a primary stroke weight of 3pt, adjusting as necessary to create varied “grays” within the palette.
Functional Typography: The use of Inter in predefined styles (H1, H2, H3) reinforced the system's functional design.

Workflow & Process

To ensure the system's longevity and ease of use, I followed a meticulous workflow, including:
Figma Creation: Each illustration was individually designed in Figma, utilizing clean and organized layer structures for seamless navigation.
Editable Deliverables: All assets were provided as fully editable SVG files, with elements broken down into distinct layers for client customization.
Flexible Design: The illustrations were crafted for easy modification, empowering the client to adjust colors, stroke weights, or text freely.
Component-Based Design: This approach not only guaranteed coherence across the 80 assets but also minimized the client's future reliance on my support for updates.

Client Collaboration & Outcome

Our established partnership allowed for effective communication and a shared vision. The outcome was a set of 80 modular, functional, and visually cohesive utilitarian-style illustrations ready for various applications. By introducing a system that balances precision and flexibility, the client is now equipped to independently adapt and expand their visual identity. This project has reinforced our collaboration and showcased the transformative potential of a modular approach in enhancing operational efficiency.
Like this project

Posted Dec 8, 2025

Designed a cohesive 80-piece utilitarian illustration system in Figma, enhancing visual clarity and modularity for versatile use.

Likes

6

Views

77

Timeline

Nov 10, 2025 - Dec 6, 2025

Clients

Wasai