I’ve written about APP prototype documentation: the interactive documentation of an APP from authoring to delivery
This time, I want to write down the content of the APP design specification document. As a matter of fact, most small and medium-sized companies do not have the demand for this aspect, nor have the energy to make such a systematic thing, so the article is not long.
But the design code itself is a great way to keep the brand together.
A few years ago to write design specification documents, are pages of handwritten design specifications, low efficiency, mainly tired ~
Recently, I began to write design specifications for new product projects. As time goes by, so does production technology
So I found a very effective design specification creation tool: Mockplus design system.
It’s a prototyping tool in itself, and in the age of the mobile Internet, people who do interaction design or PM should use Mockplus regularly or know it.
But instead of talking about prototyping, go to the official website and download the client, and get started in 10 minutes. It’s a zero-barrier prototyping tool.
The main thing I want to talk about is making design specifications with it, first of all, it’s an online production system;
Why use Mockplus’s design system to create a design specification? There are two reasons:
The system itself provides an outline of the design specification.
Standard colors, standard fonts, ICONS, layouts, and so on outline almost everything a design specification document should have.
You only need to customize the corresponding content under the corresponding tag;
Because it is an online tool, you can also share links or directly export PDF files after production, which is convenient and liquid.
(2) There is a corresponding Sketch plug-in, you can directly call the design specification library created by yourself in Sketch.
That is, after you create the design specification, download the Sketch plugin; When designing in Sketch, you can directly use the library of design specifications. The corresponding colors, standard characters and so on can be used in Sketch with one click.
That’s one of the things THAT I really care about, the design specification is there to be used, it’s not like I’m just going to put it out there for people to see, it’s one of my favorite features.
Both of these will be mentioned later, but here is just the reason for choosing it first.
Of course, it has been emphasized many times in previous articles:
Tools are only a means to improve efficiency, and the focus is on the idea of design, so don’t let them limit you.
Let’s talk about some conceptual things first
Part 1 Overview of design specifications
What is a design specification document?
The simplest way to understand it is to make a systematic arrangement and agreement on product design and experience.
Including the color used in the product, font size, various control styles, layout styles and so on, all sorted into a circulating document, this document for the subsequent product update iteration guidance.
(The picture below is from JINGdong wireless vision specification, deleted)
① Writing time of design specification
When should the design specification be written
Design specifications, must be the product of product development to a certain stage, will begin to write the product;
Usually when the main interface is complete and the overall progress is about 50% complete, it is time to try to clean up the design specification.
On average, most small and medium businesses have an entire department with a UI designer who does everything;
At this time if you need to make a specification document, you can simply do it, basically standard font, size, color value, control and so on can be quickly recorded as the content of the specification document;
After the completion of the project, the specification document will be completed as the guidance manual for subsequent versions.
In some large companies and departments, there may be more than one designer. For example, my current design team consists of 7 people: 4 UI, 2 UE and 1 plane.
At that time, experienced designers are needed as the leader of the design specification production project to standardize each module, and others are required to help unify a relatively comprehensive design specification document.
② The role of design specifications
Based on the design specifications I’ve written so far and my experience with other people’s design specifications,
The most common and useful functions are the following two:
1. For designers: provide guidance for subsequent iterations and multi-party collaboration to maintain product unity;
A project to upgrade from V1.0 to 2.0, 3.0… In many cases, even if the same designer makes things in different versions, the visual style may not be unified because the version is long and can not be remembered.
Sometimes, several designers will participate in a project together, and even participate in the project in different periods of time. The design style of each person is different, which is easy to cause the disunity of visual interface, resulting in poor experience.
Therefore, a unified design specification can keep the visual style of the product consistent between subsequent versions and different designers.
2. For development: provide standardized component styles and reduce development repetition time
Many standardized page controls can be made into standard component styles specified in the design specification, so that the designer does not need to annotate them every time.
It also avoids the development carelessness of writing different styles of components of the same type on both pages.
③ Content of design specification document
There are many design specification documents of well-known products on the Internet, almost all of which can be found on the Internet.
I’ve seen hundreds of product design specification documents so far, and they can be summarized as follows:
Standard color: product color, font color, background color, line color, and the use of various color values of the scene;
Standard words: font, size, word spacing, line spacing, and various use scenarios;
ICONS: icon size, position, style, and various use scenarios;
Common controls: hierarchical navigation styles, title bar styles, input boxes, pop-ups, buttons, lists, toast, loading, loading, blank pages and other controls that can be used as design specifications;
Layout: Page layout style
Module: Function module style
Almost all design specification documents contain, but are not limited to, the above, so if you are feeling clueless, consider starting with these areas.
④ The applicable group of design specification documents
Like the interaction document written previously, the design specification document should be distributed to everyone on the team; It’s not just UI designers who write it and use it.
These people include but are not limited to PMS, interaction designers, UI, development, operations, etc.
⑤ Update and iteration of design specification documents
Design specification documents are designed to help designers and developers do their jobs, not to limit them;
For people:
Designers sometimes design things based on new business requirements that don’t fit with the content of the original design specification document;
Development In the actual development, there will be some documents specified in the situation that cannot be achieved;
For products:
As versions are updated from generation to generation, content in the design specification becomes increasingly inappropriate for existing design styles and technologies.
At this time, according to the actual situation, the content of the design specification document should be updated and iterated reasonably, rather than unchanged.
Part 2 produces a design specification using Mockplus’s design system
Here’s the Mockplus design system link, sign up for an account and use it:
Mockplus’s design system ds.mockplus.cn/
The system itself is very simple and straightforward, with no learning costs.
Here is a screenshot for you to see, after a quick understanding of the official website can go to experience to write a design specification.
① After registration, enter the design system
The following figure is the page after entering the design system, including a DEMO provided by the system and a function button to add their own specification resource library.
② Check the DEMO content
Here is the DEMO design specification style:
On the left is the navigation bar, which contains the content of the design specification, that is, the content of the specification document.
You can customize the small labels under each category according to your own needs, and then fill in the corresponding content;
The upper part of the right side is the introduction of the project, which can be edited freely. You can write the project overview, use method, rules and so on.
The lower right is the display area, and the left to the navigation bar content echo, is also the content editing area;
③ Create your own design specification repository
Click “+” next to DEMO to create your own product specification repository;
The library is empty and you have to start from scratch to edit everything;
The sample library is the content of the DEMO, you can edit the content of the sample library;
After creating your own repository of design specifications, the rest of the design process is to continue to fill the repository with the corresponding content.
When all the content is edited, click the export button on the right, there are three options, export as required;
Or click the Share button to share a link to the design specification.
After downloading the Sketch plug-in, when using Sketch design, you can directly call the compiled design specifications in the resource library, which is very helpful to maintain the brand unity of products.
In fact, there is nothing to say about the operation of the system itself. What is important is the emergence of such a tool that can greatly improve efficiency. Because RECENTLY I began to write a new design specification document, I feel that the efficiency is still very high after using it, so I share it with you.
Part 3 Mockplus Design system competition
I think this activity is quite interesting, the activity time is from July 20, 2018 to September 5, 2018.
Details can be found at this link:
Guest design system competition ds.mockplus.cn/summer/
Choose one of the 10 well-known apps provided by their official, use their design system to sort out a set of design specifications, you can participate in the competition.
1. It is not a competition of design ability, but of organizing ability and meticulous ability.
Many design competitions are not very friendly to newcomers, and some friends with weak design ability have no chance to participate in them.
But I think this competition is also quite good for newcomers, the design experience itself is not too high requirements.
As long as you are careful and logical enough, the competition is very attractive.
2. This design system can be used to practice the writing ability of design specifications
The design system itself Outlines the design specifications, and you need to sort out the pieces of the product.
Even if you don’t participate in the competition, you can use this design system to practice your ability to write a design specification. You can effectively understand how to write a design specification and what a specification contains.
It’s a lot of personal help.
Those are some of the design specifications
This article is reproduced with permission from the author.
The original address: www.mockplus.cn/blog/post/1…
Original author: Fine cent young halogen big wet
Is an interactive, love design, programmable full stack designer; I am currently working in a software technology enterprise as UI designer and interaction designer. In communications, security, smart TV, enterprise management, live broadcasting and other product areas. Like to summarize and share their work experience and perception, if you like, you can pay attention to big wet, UI China ID: fine points youth Halogen big wet.