Hi, I’m a junior UI/UX designer in Indonesia, and still struggling to create a design system, and it makes my workspace sometimes feels messy, because I often dive in straight to mockup phase, designing high-fi design, skipping the brainstorm, wireframing, and design system process…
Can you please share how your design process? Did you create design system first then do the mockup, or do you craft the mockup first, exploring styles then make design system later?
That is not something to answer quickly here. If you want, I can help you. My email is mriccelli75@gmail.com
I built a design system around an existing website and brand. I went through the built website and inventoried the components and created guidelines on how to reuse all of those components. It will be much easier if you are building something from scratch to build it out before the design system but build it knowing that you will want to extract the reusable components to put in the design system. Once you know what all components need to be in the design system, I would just follow an example of one and fill the gaps with what you have. I just referenced ones online.
It’s one of those ‘it depends…’
Currently I like using my iPad (Concepts app) and my own TinyUX mobile app for low fidelity wireframing and visual brainstorming. But in a more formal setting, and a larger team, I used to like to create clickable prototypes with Axure.
Out of specific use-cases, wireframes for a flow that is super important, etc. Certain components seem to make sense to re-use, and a design system sort of emerges from that. It’s an iterative process.
I’d not do high-fi design before having stake-holders (or yourself :)) on board with low-fi wireframes. So the main purpoase of flow, pages, components is clear. If content can fit, what happesn if X, Y, etc.
Regarding your question about whether designers create a design system first or create a mockup first, the answer can vary depending on the project and the design team’s approach. Some designers start by creating a design system, which establishes guidelines for the design’s visual and interactive elements. Other designers may start by creating mockups to explore design directions and styles before creating a design system.
Ultimately, the design process is iterative, and designers may go back and forth between different stages, refining and adjusting the design as they progress.
My design process usually starts with understanding the project requirements and user needs through research, wireframing, and brainstorming. Once I have a basic understanding of what the project is about, I’ll start creating a design system that includes things like color palettes, typography, layout grids, and interactive elements. This helps to ensure that all of the design elements are consistent throughout the entire project. After the design system is defined, I then move onto the mockup phase, crafting high-fidelity prototypes of the user interface. The design system will be continuously refined throughout the project.