Not all websites or mobile applications require design specifications. Your cousin’s blog may not be necessary, and the small e-commerce website built by your neighbor to sell cat grass is not so necessary. Of course, it depends on how much he can sell and how large it can be.
Usually, only those products that need to maintain a professional image and brand consistency really need design specifications (or style guides). Don’t think about it too easily. Design specifications in the true sense require you to spend a lot of time and cost to create and continue to maintain. So before you decide to do it, it’s best to confirm whether your product really needs design specifications. Whether the required investment cost can be accepted.
What is a design specification?
Before confirming whether a design specification is needed, we should first clarify what a design specification is. Simply put, it is a document composed of many examples (electronic documents, printed documents or HTML files, etc.) to describe and show how your product should look and interact. It is a guide to let you know where and what style standards to use when creating and updating a website or application. Design specifications can help you understand some typical questions including “What kind of color scheme should I use here?”, “How big is the font size for the H1 title?”, “Should this part of the text be aligned on the left or on both sides?” and so on.
Do you need design specifications and when?The answer depends on the type of your product, and who will be the users of the design specifications. The users mentioned here include designers, developers, content creators and other roles. It’s very important to figure out “who are the users of the specification”-many managers or designers will tell you that if we create a design specification, it will help the team save a lot of time for a long time. But the actual situation is that after you have invested a huge amount of time and labor cost to do this, you find that the content of this specification is not very important for any type of function in the team. Great reference value; the worst-case scenario is that no matter designers or developers, they will not look at it at all.
“Time” is also an important factor. If you are currently busy with the design and development of new products, then obviously you cannot spare enough time to do standard things. Design specifications are a long-term investment. If you are not sure that you have enough resources to invest in, don’t do it, but you can prepare for it from now on and pay attention to those possibilities during the design and development of new products. Write all aspects of the design specifications, collect them as materials, and organize them when the specifications are created.
You can also try to answer the following questions. If most of the answers are yes, then you can consider creating a design specification:
Do you want to save brain cells?
Do you want to implement a good user experience in your product?
Do you think it is necessary to maintain consistency in product design?
In addition to the current website or application, will your brand and products be sustainable and expandable in the future?
Are there any third-party collaborators who will use your brand elements?
Are there frequent and regular content updates in your product?
Is there a third-party content provider outside of your team?
Does your product provide API interfaces for third-party designers and developers?
Are you going to maintain current products for a long time as a company or continue to develop new products?
Do you work for a large company?
How to create design specifications?
If you are sure you need a design specification, how do you start creating it? As mentioned earlier, this also depends on the actual situation of your product and team. It is possible that you only need to create a design specification for yourself. At this time, it is more like a memo or summary. Then you don’t need to be very meticulous, and you don’t need to spend too much time on the form of expression; in most cases , The design specifications are for product series and large and medium-sized teams. At this time, you must go deep in all aspects while ensuring the necessary details.I made two checklists, “What is included?” and “What else is needed?”.
The first list lists the content that usually needs to be involved in the design specification, and the latter includes the content that you may need to perform additional processing. Of course, these two lists are not standard templates. You only need to consider these points in combination with your actual situation when creating the specification.
What’s included?
Brand elements. Give the definition and examples of the official logo and standard color scheme, introduce the use of the logo in full color, black and white or different background colors, provide the HEX and RGB values of the standard color, and also provide the download of the logo file, including .png, .jpg or even .ai or .psd files.
Text. Normatively define page headers, paragraphs, quotes, tags, form titles and other places where formatted text may appear, including font, font size, line height, word spacing, etc.
layout. Define the position of different blocks and elements in the interface, as well as the relationship between them. Rules such as margins, paddings, and grid patterns that are generally applicable in the global scope should also be explained; in addition, some elements will change accordingly depending on the interface environment. It needs to be explained in the specification, and it is best to display it with pictures.
Links and buttons. Define the visual style of links and buttons, and provide color values and legends for links in different modules and buttons in different types of forms. This process may also help you simplify some overly complex interfaces.
navigation. Define the visual style and interaction methods of navigation at all levels, especially for those navigation items with hierarchical relationships, to fully display the nesting relationship and expansion method.
Visual inheritance. Define how the page headers, titles, paragraphs, pictures and other elements maintain visual relevance, provide necessary legends, and use text to describe the effect of visual inheritance on the appearance and temperament of the entire product.
Pictures and icons. Define the pictures and icons in the content and interface elements, including file type, size, file size, ratio, style, etc. Will there be any featured images in the content? Are the pictures in the text floating left and right or centered? Is there a set of specific icon materials?
UI standards. Define the interaction modes corresponding to different UI elements and their visual manifestations, for example, in which cases check boxes or radio buttons are used. You can try to display all types of UI elements involved in the website, and provide legends and front-end code.
Forms and validation. Define the overall style and element layout of the form, describe the functional flow involved in the form; define the validation rules of the form and various possible error prompts.
What else is needed?
Diversification. Sometimes you may need to create different versions of specifications for different users. For example, for certain types of websites, the most effective way for content creators and managers with different levels and permissions is to provide specific specification guidance for different roles; of course, you can also target the full version of the specification to different The functional personnel are customized and simplified.
Target task. In order for the relevant cooperation departments to reach a tacit agreement in the general direction, you may need to describe the overall product goals and phased tasks in the design specification in combination with specific content. This can also allow everyone to fully understand the necessity of the specification and understand the agreement. The promotion of product strategy by the personalized expression style and user experience.
Code. According to the actual situation of the range of personnel targeted by the design specification, front-end code standards and best practice models can be considered to be displayed with legends, including HTML, CSS, JavaScript, etc.
File specification. You may need to formulate file usage specifications for all content creators, including file type restrictions, naming rules, and version number update methods. From a long-term perspective, this can avoid many trivial potential problems.
Content standards. For content creators and managers, you also need to format the artificially generated content in the specification, such as the length of the body content, the number of characters in the title, and so on. In addition, the keynote of the content, the process of submission and editing operations, the copyright handling method, etc. should also be explained with practical guiding significance.
Comments and forums. If your product provides users with a comment function or opens a related forum, then you also need to regulate the management of these aspects. For example, what are the review criteria for comment content, how to respond to user comments, how to deal with negative content, and under what circumstances need to turn off the comment function, and so on.
Downloadable and printable. If you create a design specification online, try to ensure that relevant personnel can download or print it out for offline use. However, there is also a problem here, that is, the offline version in the hands of others cannot be synchronized when the specification is updated. In this case, you can try to make up for it through email notification.
Do it beautifully. Since it is a design specification, its own appearance is also very important. When time permits, try to use as many examples of pictures as possible to ensure that the content is rich in form, and it can also be a more intuitive reference value for designers and developers. To some extent, design specifications are also an integral part of the overall quality and image of the product. Of course, if the specifications involved are only for internal design, development and use, and third-party cooperation is not involved, then it is reasonable to have sufficient control over resources and costs. For example, an internal wiki system can meet the most basic needs.
Reference example. Finally, we look at some practical examples of design specifications; these examples mainly show the role of design specifications in the use of brand elements.