Front-end development process

Wireframes

When a project or task includes the development of one or more components, we create a low-fidelity wireframe, to provide some guidance for the subsequent development.

Methods of wireframing

There are a couple of ways in which we do wireframing:

• If a project or task is relatively small, one front-end developer does some preliminary sketching, and asks for feedback on it from one or more colleagues.
• For somewhat bigger projects or tasks, this sketching is done together, in a session of two to four people (ideally including the project stakeholder). In the first part of this session, before getting to the sketching, the participants think about, share and discuss their vision of what the project or task entails.

Optionally, the details of the wireframe can afterwards be filled in a bit more in a design tool. Currently Figma is our design tool of choice.

Benefits of wireframing

The benefits of wireframing include the following:

• It helps in quickly unearthing potential pitfalls and blind spots.
• It helps in bringing the most pressing questions about the task, or differences in interpretation of the task, to the table instantly.
• It encourages internal deliberation before the commencement of development.
• It provides some guidance when it comes to layout and hierarchy among and within components.

---