Generating a LabVIEW UI 2: Color Scheme
LabVIEW, unlike other languages, draws non-traditional developers or rather people who aren’t developers at all, so when challenged to create a user interface, they may be starting from less than scratch: “I don’t even know how to begin to begin”. I think with this process, someone who is at least semi-proficient in LabVIEW can generate a functional and visibly pleasing user interface. I’ve used this exact process throughout my career in interacting with stakeholders and providing deliverables. This series seeks to provide a four step process to create a UI: (1) Wireframe, (2) Color scheme, (3) Control scheme, and (4) Functional prototype.
For context, the application being built is the lv-build (https://github.com/antonio-alexander/lv-build) which is a pocket CD (continuous delivery) which can be used to create one-click installers for certain LabVIEW applications. As you’ll see in the youtube video (below); i make heavy use of the Paletton (https://paletton.com/) tool to generate color schemes since it does the job so well.
Disclaimer(s)
- This isn’t the only way to generate interfaces, but it works really well for LabVIEW and interacting with other parties (especially to provide deliverables)
- This isn’t a super-complicated application, and in my case what it needs to do is well understood (it’s my application); so take it with a grain of salt
- A lot of the decision making in this article is driven by what is the most efficient method that uses the least amount of time; although the interface sells, the functionality should take all of the budget (including UI functionality)
- Some companies have whole teams for this kind of effort
Color schemes are SUPER important, not only because they’re like the pupils (as in eyes) to your interface, but it’s what stakeholders are often most focused on; it’s what they can see, sometimes it gets more attention than the actual functionality; and its true: the interface sells, not its functionality.
Colors aren’t terribly complicated, but there’s a lot of math and science behind why certain colors look good together. I’m not going to dig into color theory, but here’s a link to an article I found helpful:
I’ll dumb it down and describe how to create a monochromatic color scheme with a complementary color. I think more colors create more distractions and take significantly more time to edit than not. To create a monochromatic color scheme, choose a color you like, and then choose the color opposite it in the color wheel to use as a complimentary color (add ~128 to the RGB value).
Complimentary colors can be used to draw attention as they contrast from the primary color. I think any color scheme should involve four colors total: primary, complementary, dark shade and light shade (these shades have the same RGB values), where dark and light are used to organize space and color fonts. Brighter primaries should use dark text and decorations while darker primaries should use light text and decorations. I use Palleton (www.palleton.com) to make it easier for me to do this.
I’ve provided some guidelines below that try to simplify the with the assumption that you DO NOT have a very in-depth and descriptive guide on how stakeholders want you to skin their application:
- Try to choose a monochromatic color scheme: primary, complementary, dark shade and light shade
- Choose primary and complementary colors that are equidistant on the color wheel
- Never use absolute black (#000000) or absolute white (#FFFFFF) because they’re too stark/jarring, they almost never look good on any interface
- Try to only have one complimentary color
In addition to the above, DO NOT skin the interface (or the wireframe) if stakeholders haven’t chosen a color scheme, it’s a really easy way to create extra work for yourself and an easy way to have useless discussions, this is re-visited during the control scheme section. Also don’t do anything clever with fonts, I’d suggest sticking with Times New Roman or Arial (some fonts require extra effort to make them portable).
In terms of deliverables, images with the color scheme are more than enough , and communicating with stakeholders to figure out what they do and don’t like also can help you document their decisions (I want color scheme 1) and provide feedback to tweak the color schemes in real-time or have multiple rounds. Providing choices can reduce the tension in the decision making (for them it’s a big deal), they can have contrasting schemes to know what they don’t want, or if they feel comfortable enough they can go onto Palleton, choose the colors with you and export the colors they want.
For developers, a color scheme markdown document like the one below, can help document stakeholder decisions:
## Colors
original is black and gray, I want something dark, but a wee bit more colorful. Want to go with two primary colors
### initial layout (light blue…cornflower blue)
Palette URL: [http://paletton.com/#uid=23H0u0kllllaFw0g0qFqFg0w0aF](http://paletton.com/#uid=23H0u0kllllaFw0g0qFqFg0w0aF)
Primary color:
* shade 0 = #2D4671 = rgb( 45, 70,113) = rgba( 45, 70,113,1) = rgb0(0.176,0.275,0.443)
* shade 1 = #7689A9 = rgb(118,137,169) = rgba(118,137,169,1) = rgb0(0.463,0.537,0.663)
* shade 2 = #4D658D = rgb( 77,101,141) = rgba( 77,101,141,1) = rgb0(0.302,0.396,0.553)
* shade 3 = #152C55 = rgb( 21, 44, 85) = rgba( 21, 44, 85,1) = rgb0(0.082,0.173,0.333)
* shade 4 = #051838 = rgb( 5, 24, 56) = rgba( 5, 24, 56,1) = rgb0(0.02,0.094,0.22)
Complement color:
* shade 0 = #AA8239 = rgb(170,130, 57) = rgba(170,130, 57,1) = rgb0(0.667,0.51,0.224)
* shade 1 = #FFE1AA = rgb(255,225,170) = rgba(255,225,170,1) = rgb0(1,0.882,0.667)
* shade 2 = #D4AF6A = rgb(212,175,106) = rgba(212,175,106,1) = rgb0(0.831,0.686,0.416)
* shade 3 = #805A15 = rgb(128, 90, 21) = rgba(128, 90, 21,1) = rgb0(0.502,0.353,0.082)
* shade 4 = #553700 = rgb( 85, 55, 0) = rgba( 85, 55, 0,1) = rgb0(0.333,0.216,0)
Although I think it’s boring, here’s a video of me putting together the color scheme:
This article should have provided you with the ability to pick a color scheme and through proxy provided you with an idea about the color wheel and what makes colors look better under certain circumstances. In the next article, we’ll tackle control schemes to show one way to generate controls to put together a user interface/experience.
All efforts/code for this entire series is available at: https://github.com/antonio-alexander/blog-lv-interfaces-and-experiences
