Across many of my projects one of the biggest issues was that most the time the backend wasn’t complete. Compounded by pseudo-agile approaches (waterfall development meant to more agile-like) stakeholders often expect to see templates built out one-by-one and in pixel perfection.

Although this seems like a great logical way to go, it requires everyone to be in perfect sync. Not only that, it requires everything to be locked down.

Design must be pixel perfect and final.

Front-end must be pixel perfect and final.

Then finally you can code out the backend and build out that final template.

As you might imagine, if designs are not final, this can ripple throughout the entire process. Causing delays, duplicate work, and increased lines of communication.

A better strategy is to understand these cycles and make your deliverables more granular.

My suggestion, have design should complete wireframes.

These should resemble the structure of the pages with some rough in-progress work of the layout design.

In short: not-pixel perfect.

This could take the form of some whiteboard sketches, rough navigation, and basic ideas of graphic treatment. The goal here is that the visual treatment might change and be further refined later.

Once done, a Design Systems Engineer can build out the scaffolding.

The scaffolding is front-end code with basic styling. My favorite approach is to use a framework like ZURB Foundation. Your goal here should be to define the basic layout, grids, colors and spacing.

Additionally, you want to lock down CSS classes names. You should be thinking about what types of modules you might need, but leave them largely un-styled.

What you should end up with is a rough working idea of your site or app.

Now, once the scaffolding is ready to go, you can send your backend team to start work on getting the templates implemented. Backend should be purely focused on functionality. They should not touch any of the visual layers of the front-end code.

Using this different method, the roles have been more clearly defined. This makes it possible to move through the project quickly.

Moving forward you can have one phase of going to pixel perfection or many stages of refinement until you are ready to launch.

The key point is having deliverables that allow each member to work independent of each other.

By doing so, you allow each person to focus on what they do best.

This results in faster timelines, less mistakes and less miscommunication.

Design Systems Engineering provides a solid design translation so the backend team can focus on building a solid product.


Also published on Medium.