When building an app, mockups are one of the most – if not the most – useful, but at the same time, a dangerous tool. If they are properly used, they will dramatically improve your time to production and enhance the code quality. When not, the team will spend more and more time trying to make them to look like the final product. They will use everything but the kitchen sink – animations, rich user interactions, complicated color schemes – to mimic the product. It’s like an addiction. You start small, but before you know it, you went too deep, too far.

Balsamiq is a great tool to organize your initial thoughts, but, as a personal opinion, it takes you only that far. When you see those pages, you start aching to click on buttons. You can do that – Balsamiq gives you the opportunity to link pages to controls – but it’s not the real deal. You need more.

During my career as a software developer, then as a coach, I tried every mockuping (is this even a word?) product that I could lay my hands on. My goal was to achieve the feeling that the users will experience when using the real app, as fast as possible. Finally, I chose HTML and CSS as my favorite tools With just Visual Code, some decent CSS knowledge, and a reusable boilerplate, a team can build the mockup for a medium to complex app in less than three days. Yup, that’s right! Imagine going from zero to hero in just three days. Today you have nothing, just words and ideas, and by the end of the week you can interact with the app’s outer shell. Damn awesome!

When coaching a team, right after we create the very first Balsamiq mockup, we continue with the layout mockup. It’s simple to develop, fun, and it involves the whole team. We grab our laptops, go in a shared space, and start working together. I use this opportunity to brainstorm the customer journey, the flow’s usability, and how the app will behave and look on different devices. For the time being, the team feedback is recorded as simple HTML paragraphs

…

. Later on, they will be transformed into nice and unintrusive comments, but we are not there yet. Before anything else, we need to establish the layout, how the content will be structured, then presented to the final user.

Links:

danradoiu.ro – the layout mockup

Resources:

danradoiu.ro-the-layout-mockup.zip