Mention”
The design specification“This is a word that many UI designers, not to mention those who are new to UI design, find baffling. This seemingly “strange” word in the eyes of Chinese people has been popular abroad for a long time. What exactly is
The design specification? Why do design specifications? How do you build a design specification? This article will be helpful for beginners in UI design.
1. What is the design specification?
In order to determine whether domestic designers really understand the “design code”, xiaobian specially posed a question in each major UI design group: “What is the design code?” These normally active groups fell into silence. Only a few of the old UI leisurely gave a response, as for the specific definition, no one finally said a reason.
So, what exactly is a design specification?
“Design systems provide libraries of visual styles, components, and other resources written and published by individuals, teams, or businesses. It creates a bridge between development and design to be more efficient and cohesive when designing products.” – Nathan Curtis
In short, the design system is to standardize a certain number of reusable design resources, quantified and constrained in the design project of multi-designer collaboration. From a visual point of view is a material library, the product has what kind of visual presentation and element definition, there are standards to follow.
2. Why build a design specification?
Now that we know what a “design specification” means, why should we build a design specification? Is it just to build a corporate brand image? Of course not! The reasons for building a design specification vary from team to team or organization to organization. Xiaobian is summarized into the following aspects after finishing:
Reduce design mistakes – Establishing common standards for design details can reduce the number of mistakes made by novice designers
Reduce debate – No wasted time revisiting design decisions for the same component
Quick reuse – Helps team designers quickly reuse basic components
Copy guest design system online! Three big welfare send ceaselessly!
Convenient collaboration – To improve remote and remote office cooperation design dilemma, to achieve fast collaboration
Reduce communication costs – Reduce product and development communication costs
Unify the product – helps unify the UI style and user experience of the product
Focus on USER Experience – Using uniform design specifications gives designers and product managers more energy to focus on user experience design
Help product optimization – Design specifications promote continuous product optimization while contributing to excellent design
3. How to construct a design specification?
The importance of design specifications for teams and enterprises must be understood. So as a UI design novice, how to master the skills of building design specifications? Xiaobian to copy the use of guest design system as an example, for you design novice to make a simple introduction.
(PS: This is a copy of the design system just launched recently, personal feeling relatively simple and easy to operate, suitable for UI design novice and designers to use.)
Construction idea:
A. Be familiar with the designed products and establish the direction of design specifications
B. After the main interface and grid are finalized, sort out the main modules
C. Establish specifications for basic controls and define usage scenarios and styles
D. Standardize the basic size, spacing, position and other information of the size, color value, icon size, etc
E. Establish a design-R&D comparison table
F. Establish design resource output specifications
Construction steps:
Step 1: Create a design repository
Open the design system platform, click New Resource library, there are custom resource library and sample library to choose from. After selecting the resource library, set the resource library name and click Create.
Step 2: Identify the main modules of the repository
After entering the resource library, determine the main sections of the resource library according to the main interface design of your products. Common colors, fonts, logos, components, and metrics can all be added to the specification. In addition, the platform provides nine design resources, including images, shadows, and more.
Step 3: Establish a basic resource specification
Click the “+” button on the design platform to add resources as prompted. For designers who are accustomed to using Sketch, you can edit resources in Sketch and then open the Mockplus X plug-in and click Add Resources to sync with the Mockplus design platform’s repository in real time. Other resources are created in the same way and will not be repeated.
(PS: Friends who use Mockplus, a prototyping tool, can also upload and design resources in Mockplus.)
Step 4: Share the design repository
After completing the design resource library, you can open the sharing function to share the results with your partners. Or share some ideas with experienced designers. Click the share button in the upper right corner of the design platform, set the share password, and select “Enable this share”. Then copy the share link and send it to your friends. Enter the password to view your design specification.
Export the style code to help developers understand your design.
Click the arrow button in the upper right corner of the design platform to export the style code. The platform supports CSS, SCSS and LESS code style export.
Export the PDF/ image
After completing the above steps and uploading the design resources, it’s time to show off your work. Click “Export Image” or “PDF” to share your design specification anytime, anywhere.
conclusion
As the design industry continues to evolve, design specifications play an increasingly important role and even become a must-have skill for UI designers. As a UI design novice, how to master the design specification? You have to understand what a design specification is, understand how important it is and how to build it. Master these three things and you have the design specification!