HMI interface design

1

Where is a really good source for learning about GUI design, interface design, etc? Buttons and shapes, colors, fonts, all that stuff.

I’ve seen lots of HMI designs here and online, but they’re mostly as ugly as .

2

You can check out my OS. It’s called mdOS.
I have realized a lot of things which consider and design and functionality. It is open-source and everyone can modify it.

Goto: xwintkeme.epizy.com/projects.html
I often release updates so you can have the latest and greatest.
Note that it only supports Intelligent 7 Series.

3

I don’t know if you consider my design as ugly or not, but I gave my best to create a functional and modern GUI. Here’s a (crappy) video of an earlier version. In case you want to have a look, here’s the file. I have to admit, it looks a bit “simplistic” but all in all I’m pretty happy with it.
If you run it without the microcontroller attached to it, you need to execute the following commands on startup:

page 1
click b0,0
click bOK,0

One of my learning sources is iOS. I know that many people don’t like Apple, their policies or the (missing) features in their products and software BUT I think they are pretty top notch when it comes to design. If you know iOS, you’ll likely find some familiar elements in my design.

Things that I try to follow:

  • Stay consistent. Don’t reinvent the wheel for every single page. If the user has to learn “from scratch” how to use every single page of your interface it’s at best time-consuming and probably pretty confusing and annoying.
  • Thin look more modern than thick. This is true for lines and fonts. Although fonts really are chapter on their own.
  • Speaking of fonts… Serifed fonts aren’t used for UIs. For some reason Chinese programs often use serifed fonts and - at least for me - this looks weird.
  • Add a little radius to the corners of your buttons and look what a difference this makes.
  • Don’t use 3D button effects, don’t use photos or in general: Don’t try to make it look “real”. It’s not. And unless you have some really good 3D rendering capabilities, it looks rather old and cheap than modern.
  • Keep the background in the background. it shouldn’t distract you from the actual GUI.
  • Do not use the basic colors like R255G0B0, R0G255B0, etc (= do not use the built-in colors of Nextion). They might be good for an 80s style terminal application. But not for a 2020 GUI. If you have no idea, use Word. It has quite a few color palettes with “matching” colors.
  • Maybe one of the most important things: Less is more. This is true for so many design aspects and is one of the best ways to follow the first point: stay consistent.
    • Very classic example: less different animations are better for a PowerPoint presentation.
    • You do not need a lot of colors. My UI uses 3 colors: white, blue, dark blue. Ok, the sliders use a grey line, making it 4 if you count it as color. Maybe your application needs another couple colors but try to keep it down. The more colors you use the more you risk to make it confusing (remember the first point: consistence).
    • You do not need X different button styles.
    • You do not need 10 font sizes. Again from my UI: A big one for titles, a normal one 90% of all text and a small one for notes, hints, etc. That are 3 (!) sizes.

There are probably many more and maybe some design experts will disagree on my points. That would be good because then I can learn something, too.

Edits:
1. Typos
2. Added note about serifed fonts and font sizes.

Kind regards,
Max

4

I don’t know anything about UI design but holy cow your Syntherrupter project is rad as heck my man!

1 Like
5

Hi luma,

Thank you! And sorry for the following OT…
I have to admit, your reaction comes a bit surprising. For some reason I didn’t expect a member of the tesla coil community here - and even less do I expect someone who has no experience with tesla coils to understand what this thing is good for.

Kind regards,
Max

6

I’m definitely in the latter group! I think it’s fair to assume most of the people that would find themselves here on this forum are probably going to be some variety of turbo nerd. You’ll find much love for ridiculous shit like singing Tesla coils :stuck_out_tongue:

Always love seeing what others are doing with their projects, thanks for sharing (and don’t forget to post updates)!

7

Hah, yeah that sounds reasonable. And yes I’m curious about other peoples projects, too.
I won’t start posting updates here, since I’m already maintaining the GitHub repo, posting in two forums and on youtube. But I’ll keep those up to date for sure! Feel free to have a look over there. Spoiler: someone wants to test it soon for the first time with two real tesla coils (which I haven’t been able to do for months).

Kind regards,
Max

1 Like
8

tbh the UI design is not that bad just make the startup splash minimalistic too

1 Like
9

Thank you! Yeah, that screen was too much. It’s now a single line with only the device name (“Syntherrupter”). The linked HMI file is up to date :wink:

Kind regards,
Max