Exploring wireframing
Wireframing is a simple yet vital concept for any type of UI development. Generally, this is a practice that isn’t carried out much in the automation world, but when it is, it can greatly benefit the overall HMI design. So, what is wireframing?
In short, wireframing is a design practice where you lay out UI/HMI designs on either paper or some type of rendering program before you start the development process. For example, a wireframe may look like Figure 11.2.
Figure 11.2 – Wireframe for mock HMI
As can be deduced, this is a simple diagram of the mock HMI in Figure 11.1. However, in the diagram, there are labeled components such as the LEDs and so on.
Generally, you don’t have to wireframe in any particular software package as you can simply draw them out on paper or a whiteboard. You usually want to wireframe on a whiteboard or paper during things such as brainstorming sessions. If you’re using an...