HMI Design Process – from sketch to device

29th July 2022

At Veethree we have a bespoke design team that is dedicated to ensuring our clients have Human Machine Interface (HMI) Systems which address all of their requirements, as well as being functional and attractive. The HMI system is an important element in any machine as it is the main communication between the machine or device, and the end-user and therefore has to be clear and efficient.

Our design process comprises four clear steps, but before we even start this process we engage with the client, and spend time getting to understand the critical elements of the situation, what their objectives are, what they want to capture, how the finished project will be used (e.g., hard-wired HMI systems are preferable for the rail industry), by whom (does it need to be inclusive?), and how it will fit into current systems and devices (e.g., being aware of any industry standards in place).

Our Design Process chart

However, there are other aspects of the project that should be discussed and agreed upon before the design process starts:


  • Process values and labels – Understanding the process values will guide how prominent certain labels and descriptions are. This dictates what draws the eye and what will be the focus of the display. For example, identifying which readings should be on a higher-level label, or how many decimal points should be added to a readout of live values. It is also important to identify which are the key alerts and the labels and information required.
  • Navigation – Most bespoke HMI normally have more than one display screen. It is important to identify how the navigation between screens will be used, what screens should be next to each other, and what method of navigation will be preferable across all screens. By understanding fully how the system will be used as well as the type of environment makes it easier to reduce the number of steps needed to navigate through the screens, and to choose the right method (e.g., touchscreens are not great for environments with oil, condensation or excess dust).
  • Color – Color can be a key feature of an HMI design, not only for aesthetic reasons but also for ease of use. Black is more commonly used as a background as all other colors contrast well with it. However, when colors are used for certain commands, or for alerts they need to be consistent, and readable.
  • Layout – With bespoke HMI designs the layout is dependent on what the client requires and how they plan to use the finished product. However, the layout needs to make sense, be navigable and simplify the use of the product. By reducing what is on each screen, and ensuring it makes logical sense can enable correct usage of the system.
Stage 1 - Concept Sketches

(Click image to enlarge)

  • Sketches – Taking the information we have from the client we are able to produce roughed out ideas and hand-drawn concepts which reflect these requirements. Once these have been agreed they are transferred to the UI design software.
Stage 2 - Wireframes

(Click image to enlarge)

  • Wireframes – Using the initial sketches we are able to create wireframe concepts which demonstrate screen use and user-flows, on-screen animations and user-interactions as required. They should be consistent throughout the screens in regard to color, labelling and navigation.
Design concept image
  • Design mock-ups – Taking the low-fi wireframe concepts we are then able to create high-definition graphics, exploring specific designs and color themes.

    These final UI layouts integrate on-screen controls to help convey to the client how they will function on the display in the live version. Before the final design is created any technical constraints are highlighted by the engineering team and discussed with the clients to ensure they are happy with the final mock-up.

Stage 4 - Final Design images
  • Final Design – The final design is created and then presented to the client to sign off and hand over assets to the development team.

Throughout the process the development team liaises closely with the client to ensure that all elements of the project line up with what they want to achieve with the HMI.

If you would like to find out more about bespoke HMI projects then contact the design team here at Veethree.