Web app prototyping

When presenting designs to clients early on in a project, I've always found that producing a low-fi web application has been super effective. The sooner clients can get something in their hands to use and play with the better. Many of the prototyping tools out there work well but there is usually a learning curve associated with them. I often think that it would be as quick with HTML, CSS and little JS.

Some of the benefits:

• users can play with a real application in the browser immediately, desktop or phone from a single URL

• it can cover some of the initial development work

• you can leverage existing skills rather than learning a new tool

• applying a layer of polish, later on, brings the application to life

• you can use local data to simulate an API and it can help with the model design

• it's a central point that clients can return to see the work progressing

Some things need to be in place first for this approach to be effective:

• you must have a quick launching point. It can be a starter kit you take from project to project or something open source. It needs to be something you can spin up at a moments notice.

• it needs to be as low-fi as possible, almost dulled down. Colour and visual treatment can be kept up your sleeve for a big win later on. It also makes it clear to the client that this is not the final product. You don't want to be discussing visual treatment at this point

• you'll want to utilise a CSS framework like TailwindCSS or a design system like Material-UI to handle the heavy lifting. Next-JS if you are using React so that routing is handled out of the box

• you need to become familiar with your web app and the underlying frameworks. You want to be able to move quick

• you need the means to deploy your web app. Netlify is great for this. You can have your application deployed in a few clicks. Branch deployments allow you to test alternative solutions on different URLs

• don't forget to create your documentation for easy knowledge transfer

This approach may not be appropriate for all projects. It can take some trial and error to get the process working. If you can get your web app established outside of the constraints of a real project first it will be a smoother introduction. You don't want to eat up project margins by taking a week to produce something. However you get it done, give it go. Your clients will love it!