From client briefing to final website. How we effectively use an iterative approach without separating the parties.The designer
starts to create different website mockups in photoshop while relying on the client specs. The main goal is an overall look & feel without getting into technical details (placeholder images and texts are heavily used here).
A first review with the client is initiated to decide which design best fits his needs and personal taste (sic). Now the designer needs to rebuild the static mockups into valid HTML pages. We heavily use Webflow
for that. It's a powerful and intuitive WYSIWYG Tool to build responsive websites from scratch.At this point, we got a fully functional website (let's call it designer preview version) without writing a single line of code! The developer
is able to set up the data-model, server logic, and necessary data bindings in parallel.
The model can be external data of any kind. Be it an SQL database with customer data, a spreadsheet with dynamic content or data fetched through 3rd-party API's.
These sources are normalized by creating an endpoint serving static JSON for the data and allowing dynamic requests for user actions.Let's glue those pieces together!
We evaluated numerous data-binding frameworks. It turns out that the best way to inject data into Webflow-generated html is by using KnockoutJS
. The data-bind
tags allow us to connect the static design to dynamic data in a nonobtrusive way. Even complex repeating patterns and master-detail views are no problem.The website is now ready to be reviewed by the client. The client feedback
leads to minor layout adjustments and a completely new color scheme. The clear separation between frontend design and data-logic instantly pays off:The designer is able to integrate all changes (no need to bother the developer with confusing emails) and has full control over pixel-perfect results. Conclusion:
This degree of freedom gives us the ability to instantly react on future design changes (let's embrace iteration).