Documentation

The documentation stage is the part where you realize that after all these long processes, it is time to create the full documentation to finally start developing our product.
In this part, we will create all the style guidelines to help our development team, especially the frontend one, to have a clear idea of our design elements, the colors that we should use, the design layout, fonts, assets, and other elements that we create during all those phases, especially on the visual design part.

This documentation will include other assets as well, for example, what animation will happen on a specific area of our product when the user interacts with it and what should or should not be visible to a specific range of users.

Having all these things documented in a very clear way will help the developers to clearly understand the product we are going to build. Also, then they can decide on the different frontend frameworks that they will use during the development stage.
For example, for CSS frameworks, they may choose bootstrap, foundation, skeleton, material design, or even create their own from scratch.
Based on the complexity of the project, they can also decide which JavaScript framework to choose, such as Angular, ReactJS, and VueJS, or even–if the product is really simple–the jQuery library.

Designers nowadays upload their complete work via tools such as Zeplin, Sympli, or InVision Appare after finishing their design.

By uploading your final design in these kinds of tools developers will have a much easier life, because they can access all the main things in one place. It doesn't matter what it is as long it is related to that visual design. They will be able to access all the different colors, even customize whether they want HEX colors, RGB, or RGBA, download all the images or other assets, have specific measurements that they need, CSS styles, and tons of other features.

Refer to the following screenshot to have a better understanding of what a developer will be able to get from designing with the Zeplin tool:

After this phase, we are ready to go on to the development of the product. You have come a long way, but things are just getting more exciting here, so let's dig deeper into all those product-design creation parts.