Wireframes, mock ups, Lo- & Hi-Fi prototypes and Paint nightmare

Image of login form prototype

During my career in tech as a developer I’ve encountered several ways how to make a web site or app. Let’s talk about different formats that you can get.

Wireframes

Wireframes are the simplest way to present a structure of a site/app to someone. They usually aren’t refined, so there’s rarely a relevant color that will make it to the final stage of design because colors are used to mark important or action points. Most of the time it’s sketched with hand or in tools like Balsamiq.

Wireframe with notes

In the example above there’s a bit misleading title that it’s a high fidelity which is a relative to what I had before. In my process as a first step I do rough sketches with blocks where everything goes to get an idea how it will look as a whole. As a second step I create these “hifi” wireframes with notes how things should behave.

This example has everything that is important and it’s all you need for a developer to start working if you or your team use a design system (or component library such as Bootstrap). When you don’t have a design system you need to create mock ups that will show how the final1 product will look.

Mock ups

Mock ups are a bit more complete than wireframes as the designer added color and sample copy, especially short texts should be stabilized by this time.

It is important for developers to be able to see the sizes of fonts, margins and paddings as well as being able to extract colors from design. So relevant output is either file which designer used during their process or some kind of export file(s) that keep all this readable for a person who doesn’t use same software as designer (I’m looking at you, Sketch).

Login screen mock up

In the example above is a login form designed for my side project which is a single user app at least for the time being.

Lo- & Hi-Fi prototypes

Both, mock ups and wireframes, can serve as a base for prototypes. They are mainly used for validating ideas and workflows and can be both, analog and digital.

If you choose to start creating a LoFi prototype from wireframes you have evaluate your cutting skills with scissors. In case they are good you “just” need to cut wireframes to proper sizes and you can start testing. But in case your skills with scissors are similar to mine, there’s an app called POP for iOS and Android which will help you create digital prototypes from sketches on paper.

HiFi prototypes don’t mean coding necessarily, you can if you have a budget for it. Modern UI design tools like Figma or Adobe XD allow for prototyping from mock ups created in those apps. These prototypes act like an app would without transitions between screens (and other visual details) and with limited content. Both Lo- and HiFi prototypes are enough to validate your idea and decide it is worth it to continue with development.

Paint nightmare

It is a reality that some developers don’t have a designer to collaborate with because design isn’t valued in some B2B situations. In two projects so far I haven’t worked with a proper designer but with analysts or a product owner. In both cases people took screenshots and then edited them in Paint.

In the first case I couldn’t do anything but accept that the project will end. In the second case I upskilled with figma and whenever there’s a UI work I take charge by creating a rough mock up which will I discuss later with at least a Product Owner.

As a side effect of Paint nightmare I found design more interesting than code and I am slowly transitioning to design role.

  1. Take this with a pinch of salt as this depends on developer-designer workflow.