For me I usually design a bunch of high fidelity mockups to see what looks best and then start adapting the components to a style guide. Are there people here who actually design the system beforehand? I'm curious to hear about how you guys handle this process.
1
-
There are definitely projects (even though they may be rare) when you know the development framework that you are going to be using (e.g. Bootstrap, Material Design or Fluent Design) and you have a very good set of requirements that provide a fairly complete picture of the scope of UI design work involved. Those are good reasons why you can start by designing the design system first and then apply them to the application interface design process. Otherwise, you generally try to put things together in a design system when it become more efficient to do so - no hard and fast rule here.– Michael Lai ♦Oct 28, 2019 at 8:14
Add a comment
|
3 Answers
I think there are 2 different answers for this question:
1. if you are using a UI framework like Material design or Bootstrap: In this case usually I read the documentation and choose what UI components are useful for my project. After that we need an edit on that framework. This is where I usually start sketching new components and ...
2. if you are on your own: In this case I do what you said. Design some pages to show my taste on this project. After that I start completing components while designing pages. In this case you are creating a UI kit. Pages Determine how should components be designed. After designing some pages, your kit is ready to use for the rest of the project! but It's not the end and kit will change while project goes on!
In my experience if you're starting from scratch i.e. there are no technical limitations, existing patterns that you're using (material design) then its something that I tend to do in tandem with designs.
As im creating pages im simultaneously creating a design system - if you're using Sketch correctly using symbols alot of the legwork is being done for you in the symbols page when you create buttons, colours, components etc. This can be the foundation of your style guide.
A style guide is a living entity and changes a lot with the development of the product so creating it in tandem helps in my opinion. There will be continued work on it after to finish it off no doubt.
In my case, I design the templates with 2-3 options and get it approved by the stakeholders (Creative Head, Marketing, Business and Developers Team),
once that gets ana approval, I create a Design System for the business and then we will use the same components to create the other screens.
