Call us! 512-349-0334 or (877) INDUSOFT

InduSoft Symbol of the Week – Minimalistic High Contrast Symbols, and Tips for Designing a Minimalistic Interface

This week, we have a collection of minimalistic high contrast designs. These symbols are ideally suited to embedded HMIs, and designed to be easy to read on small displays. More importantly, this stylistic approach to interface design is a trend we expect to grow as more manufacturers embrace “smart” technology. Minimalist designs are already becoming prevalent in devices such a smart watches, because the high contrast and minimally designed graphic elements make the information the key focal point of the screen, but still offer enough visual elements to read it quickly.

Here’s this week’s symbol, Minimalistic High Contrast Symbols , and a few tips for creating applications using this design theme.

minimal

Use Color Sparingly and Mindfully: While an application may rely on a mostly monochrome interface, it is occasionally necessary to introduce colors. When using colors in a minimalist design, choose one color that communicates the same message consistently throughout the entire application. For example, red might indicate an alarm that requires manual action or acknowledgement. Be aware that some percentage of the population is color blind and may not be able to distinguish certain colors, and some displays that use the increasingly viable e-ink may not offer color options.

Text and Images should not Compete for Hierarchy: When designing a monochrome or minimalist interface, high contrast lines are the main form of communication to the users. If text and graphics compete, the design will quickly become unreadable. For that reason, we suggest giving graphics their own line weight, and text another. This should be consistent throughout the application.

Clear Navigation that Stands out from the Information Presented: It’s important not to let navigation be caught up in the information being presented on screen. For this reason, minimalist displays should find a way to differentiate navigation buttons by ensuring that they have a shape, color, or high enough contrast from the background to be visible without getting lost in the information on the screen.

Design Applications for the Smallest Display Size: This is one that applies to most applications, but it is especially relevant on HMI applications designed for embedded devices. Design applications for the smallest size screen they will be displayed on. It is much easier to enlarge an application to fit a bigger resolution than it is to shrink it down and maintain easy legibility.

Good luck with these symbols for InduSoft Web Studio!

Download these Symbols for InduSoft Web Studio

Name: BlackButtonOnOff.sym, BlackMeter_01.sym, BlackSliderLarge_01.sym, BlackSliderLarge_02.sym, WhiteButtonOnOff.sym, WhiteMeter_01.sym, WhiteSliderLarge_01.sym, WhiteSliderLarge_02.sym

Range (if applicable): +/- 1000 (maybe more)

Description: This symbol set provides 8 different symbols, that have a simple, “Minimalistic” design. These symbols are meant to be used when high contrast, extreme visibility is necessary. Embedded HMI or even Internet of Things (IoT) devices are perfect for this type of visual interface.

Notes:

  1. These are made of 100% native InduSoft Web Studio object, no pictures.

Ideas for improvement:

  1. Add color, maybe red, when in alarm condition
  2. Make different sizes.
  3. Add a variation that implements a set point slider

Unzip and copy the .sym files into your Symbol folder of where InduSoft Web Studio is installed. This is usually “C:\Program Files (x86)\InduSoft Web Studio v7.1\Symbol” or similar. Either create a new folder or copy it into an existing one, such as “Minimal”.

Got better ideas for this? Let us know!

Want to let us know what symbols you need, or offer some good ideas on how to use the ones we’ve shared?

Tell us in this short survey

Comments are closed.