It has been a long journey till now. This is the last stage we need to finish before our product moves to the development stage.
Here, we will have to do the development, but our main focus is on the development of the UI, not including backend functionalities, servers, or databases.
In this chapter, we will start explaining the process of how to hand over the product design to the frontend development team, what kind of assets should be provided to them, and what kind of tool we can use to make the process easier for both sides, that is, for design and frontend development.
After that, we will explain the frontend development discipline—what languages and tools they use, and what areas of development they cover.
Similar to the UI Design process, where we needed information such as client requirements, clear planning documentation, research, user personas, wireframes, and prototyping for building user interfaces, when it comes to frontend development, developers need to know how you think the user interface that you designed will work, alongside the assets that are included on your user interface design, layout, grids, and UI components and all other required documentation, so that they can start the user interface development process.
The best way to provide all the required assets and data to developers is by having a proper handover process from the design stage to development stage, and to achieve that we need to involve the development team in the design process from the beginning.
Before I move on and explain the steps for handing-off the UI design, let me first explain the product development process in a classic way; a simple product development process involves the following three stages:
- Design Stage: Where we do the complete UX research; build wireframes, user personas and prototypes; and design user interfaces
- Frontend Stage: The stage where we convert UI designs into code and connect the design with backend services
- Backend Stage: All the functionalities of the product are built here, including the data that gets stored on the database, the services provided to the frontend team so that they can interact with them, server configurations, and everything that is happening behind the scenes with product functionalities:
The frontend is the part that connects the designing and the coding sides of our project. To get good results for the final product, frontend developers need to be involved on both sides, the design and backend, from the beginning, so that when it comes to connecting these two areas, their expectations will be clear:
We will discuss details for the frontend in the next section of this chapter—I just wanted to give you a clear idea of what a frontend developer's job is.
To have good results for UI implementation on the frontend side, there needs to be great collaboration between the design team and the frontend team.
In the preceding chapter, we explained the process of designing the user interface, and now we need to hand over these designs to frontend developers so that they can start implementing and coding these screens.
To make the process of handing over the designs to frontend developers smooth, you need to follow these steps:
- Start communicating with the frontend team from the early stage a of design
- Explain to the developer how you expect the design to work
- Share the mock-up/user interface that you designed
- Share the prototype
- Share the design specification, assets, and the design system
- Status checklist
![]()
Right from the first stage where you start planning, it's good to involve the developers as well, because they will be the ones who will bring your idea to life through their coding skills.
Having a frontend developer involved from the early stages of the design process will help you understand what can be done in the coding stage and what not to do in the UI design that you will now create.
Moreover, both designers and developers will better understand the ins and outs of the product, which will allow them to avoid mistakes that could happen through the product design and development stages.
Getting insights into the product from the early stages will give frontend developers time to research different kinds of frameworks that they can use through the development process, such as Bootstrap, Skeleton, Material Design, or Foundation. They can also easily prepare the workspace for the development process by deciding on different tools, such as CSS, preprocessors such as Sass or Less, automation tools such as gulp or grunt, and even JavaScript frameworks such as Angular, React, or Vue.
So, always involve the developers from the beginning stage of the product design to achieve better results and avoid mistakes that could happen later on the development side.
![]()
It's best to explain to the developer how you expect your design to work, not just when you finalize the user interface design, but from the time when you do the wireframes or even sketches on paper.
This will help you get a better idea of whether the specific design or animation that you are trying to achieve is doable in the development stage or not and whether it will take too much time for the developer to achieve it or not.
Moreover, developers can easily explain the good and bad things to do for a specific design, so they can help you improve it.
Involving the developers at this stage in the design process will make them understand the user goals better, and they ca...
