The Journey to Forming Mohwab: A Client-First Approach
In the ever-evolving world of digital design and development tools, staying ahead can be a daunting task. As a budding low-code developer and digital designer, I found myself caught in a whirlwind of design software choices and frameworks, constantly struggling to keep up. In this case study, I'll take you through my journey from the initial frustration to the creation of the Mohwab Design System, a Client-First based framework designed to streamline the design and development process in Webflow.
Navigating the Design Tool Maze
Over the last few years, the design community has been buzzing with debates about which design tool was the best. It seemed like every week, someone would post on Medium or Dribbble, and a new tool would gaining popularity. Ever since entering the workforce I've felt compelled to learn them all (Figma, Adobe XD, Photoshop, Canva, Sketch, etc.). After all, change can be a good thing, and knowing these tools can't hurt! Every company has different needs, so apply the skills to the tool. (But the tool is also a skill 🧐)
This constant change has left me overwhelmed and frustrated, hindering my entry into the industry. Just pick the standard and learn the rest later!
Embracing Webflow for Real Product Development
I was tired. How can professionals not make up there mind for a tool? While everyone decided to argue on twitter for bloggers, I searched of a more stable and practical solution, and found Webflow. Its ability to bring my designs to life was a game-changer. I already knew HTML and CSS. not even close to decently, but I knew enough. A visual designer for my designs? And it uses actual HTML and CSS practices, not just letting me slap things wherever I see fit? I have to actually apply real-world development standards?
It was a dream come true! Now I just need this for Swift and Flutter! (Which is a thing now too).
However, I soon encountered a similar dilemma within Webflow itself, as different design systems and frameworks emerged. Each was:
the Best.
Scalable and easily manageable.
Achieve... without overwhelming the person working with it.
Enable speed and flexibility.
🙄
Forming Mohwab
To avoid falling into the same cycle of confusion, I decided to build my own framework – the Mohwab Design System. My intention was not to compete with existing frameworks but to create a system that catered to my preferences while maintaining simplicity and clarity. A framework for me.
Challenges and Choices
The world of Webflow frameworks presented a multitude of choices, each with its strengths and weaknesses. I already knew Client-First, I'm part of the Board of Directors. I explored other frameworks too, like Saddle, Lumos, and Relume, each offering unique advantages and challenges.
Every Webflow Framework seems to start with Client First: it’s simple, it’s great. But it’s bloated, and class names can be long. Every div seems to have a name, even if it has no styles. But that allows you to organize pages, and classes, really well. But not everything is easy to find. Luckily Finsweet’s Chrome extension has a folder section to manage and organize your classes easier.
But wait… sometimes I don’t use a Chrome based browser to build with Webflow. Also, does the client need to install the extension to manage it too? I guess a different framework is needed. Saddle is great cause it pretty much guarantees that only the Developer knows what’s going on, while maintaining the simplicity. Lumos is awesome, but it’s got a major learning curve, and still in a beta process. How about Relume? Again, it’s amazing! It’s based on Client First, and if you pay their subscription it’s even better.
All of these Frameworks share a number of commonalities, some being perfect for clients, and some being perfect for developers. If you’re like me, it’s outrageously overwhelming. Since Client First seems to be the base, just use that and get over the long class names.
The complexity of choosing the right one became overwhelming.
No. F🤬 that!
A system is needed for both Clients and Developers, no matter what browser you use.
A Window for Visual Development
Recognizing the need for a framework that caters to both clients and developers across various browsers, I started with the Client-First approach as a base. I integrated ideas from different frameworks, added custom components, and aimed to strike a balance between organization and flexibility.
Mohwab is a unique fusion of simplicity and complexity. It's organized, yet flexible; simple, yet sophisticated. Designed by and for ADHD, so it's half-baked! Honestly, I might rename it to Half-Baked. Mohwab Design System is a unique fusion of simplicity and complexity. It's organized, yet flexible; simple, yet sophisticated. Designed by and for ADHD, so it's half-baked! Honestly, I might rename it to Half-Baked.
To ensure accessibility for those without extensions, I consistently update and reorganize classes, include detailed notes, and plan to create a change log and documentation site.
What about the Client First Certification
Recently Finsweet announced that they’ll be certifying websites and developers for using Client First.
What’s the point of using anything else then? Especially if you want to be a certified Client First developer.
I’m already on the Client First Broad of Directors, and I get to vote on serious changes. The fundamentals of CF are:
- To create an organization system for our project
- To enable speed and flexibility when using Webflow Designer
- To define a strategy for class usage in the project
- To standardize a core structure shared across all pages
- To create a Webflow build that is scalable and easily manageable
- To help developers, clients, or anyone understand the project
Incorporating these same fundamentals, Mohwab follows the Client-First approach to streamline classes, class naming, page structure, and more, offering a straightforward yet scalable structure for both developers and clients.
A Humble Offering to the Webflow Community
In creating the Mohwab Design System, I don't expect everyone to adopt it. I respect the work of other Frameworks and their dedicated designers and developers. My aim is to share a solution that has worked for me, in the hope that it might alleviate the frustration experienced by others in the ever-evolving tech industry.
By organizing my journey into this case study, I aim to shed light on the challenges faced by newcomers in the field and offer a unique perspective on creating personalized design systems. The digital design landscape may continue to evolve, but with adaptable tools and a Client-First approach, we can navigate its complexities with confidence.
Soon there will be a Figma File for you to start in. It is only me developing this, and I have ADHD. Things can be half-baked, forgotten, or taken longer than expected. But I will do my best to provide updates as much as possible, cause it's fair to you.