New design / colors

[ocornut]

I don't want to attract too much attention on that because it probably won't happen until at least a month or two, but eventually I would like the UI visuals to be redone.

First, we want anti-aliased shapes to be available (see #133). In fact they are already available in a branch with only few problems to fixes. The main issue I have at the moment is that I don't want to reduce performance. So I would probably like the ability to use texturing for rounded corners, switch rendering to use indexed vertices, Etc. over the existing version.

Secondly, the current design doesn't look appealing enough to a lot of people. In addition, there's too many color variables and even with them it is actually difficult to create a new theme. So this has to be reworked and we can perhaps employ a scheme where ImGui create new colors by manipulating a smaller of input colors.

I am happy to improve visuals but I have a set of requirement in mind.

• Performance should stay high (this has some impact on design).
• We should be able to have interfaces that take the same amount of screen real estate (down to zero-padding). They may not look as good (remove rounded shapes, etc.) but it should be possible.
• Visuals should be improved in a way that doesn't put too much burden on the programmer who want to do "quick and dirty" ui. The core pillar of ImGui is to enable programmers to create tools easily and visuals needs to not get into the way of that.
• Preferably the visuals should be compatible with being transparent, work with no background or translucent background.

Mikko ( @memononen ) submitted this mockup.

It looks evidently awesome :)

But we have to keep in mind that this sort of mockup is overlooking a lot of lot of subtle problems and parameters. So the mockups are really useful to help set a direction and a bar but there's lot of design/programming in order to make it a reality. It won't happen overnight and when it does it won't look the same because on the way we'll find out lots of things probably don't make sense. Still, there's many ideas we can borrow here.

Prior to redesigning work happening there's a few things I would like to sort out

• The anti-aliased rendering.
• Add variants of widgets and the possibility to select among them e.g the different sliders on that mockup
• Redesign the internal so all the big "value - label" widgets can also be displayed as "label - value", "label value", "value" and include variety of settings.
• Add a better and more flexible system to adjust the size and alignment of widgets.

This will be a big iterative change part of a general spring cleaning. This will be also done with the consideration that we want to open more of the innards of imgui.cpp to allow people to create widgets and share them. When those things are done I can probably start looking into the main visuals!

There's also a few things like shadows which could make it into trunk easily and earlier.

[rupertsteel]

It could be possible to use geometry shaders to make the rounded corners as shown in the mockup. An advantage of this approach is if for any reason you don't want rounded corners, just skip the geometry shader. This allows imgui to be used with OpenGL 3.1 and earlier.

This could be the vertex shader input.

in vec2 Position
in vec2 UV
in vec2 roundCenter
in float roundRadius
in vec4 color

[ocornut]

That's not ok

• it creates portability issues.
• adding 12 bytes of extra vertex data is unacceptable. the reason of replacing the rounded vertices with a textured quad to reduce the vertex data footprint in the footprint.

Also using textures isn't a hard problem to solve, it's a rather easy one, it will be fast and portable.

[thevaber]

Just a thought about custom widget support in light of possible design/theme changes - it would be nice to have an API available to render "primitives" such as frames, rounded frames, slider handles, combo/tree arrow buttons, etc. in addition to current lower level ImDrawList, in order to allow custom widgets to look more "native". Also, access to SliderBehavior, ButtonBehavior, DragScalarBehavior and such would help even further - I guess these don't necessarily need to be as clean API-wise as the rest of the library, since custom widgets are probably a much less common use case.

[ocornut]

Yes i agree. This is the sort of thing that goes as part of the clean-up, there will be a low-level set of calls (that may be less supported). Right now the way to do it is to include your code in imgui_user.inl.

[ocornut]

I have added a ShowMetricsWindow() function to help looking at the vertex count and generally looking at the command-lists so we can compare the branches, the effect of rounding (currently and if we change it to use textures), etc.

Also that's the current imgui by trying to quickly tackle some of the color above, and with AA enabled:

[extrawurst]

aa and rounding looks very nice!

[unpacklo]

Those graphs! drool...

I personally don't have much of a problem with the current theme, but I'm sure having better support for it would be welcome. The AA on the other hand... pretty significant improvement in terms of how pleasing it is to look at!

I definitely agree with your requirements (performant, priority given to ease of programming, etc). These are the main reasons why your library is so kick-ass!

Something that I remember trying, but couldn't figure out if I could do was saving individual theme/style settings out on a per user basis. I know right now you have the imgui style struct which holds a lot of the parameters which control how imgui looks, but it doesn't look like there's any way to save the settings out to disk? I was going to write my own serializer/deserializer in my game to save out some of these theme settings, but I never got around to it... but seems like something everybody would welcome the ability to do? Just save the style out in the .ini file?

[ocornut]

The AA is great for lines and non-axis aligned shapes but otherwise there's no visible differences. In the shot above note I am using the DroidSans.ttf font - AA here is part of the font rasterizing, so you can use this sort of fonts already! One benefit of enabling AA will be that we can use border on rounded items without them looking terrible.

I'm reluctant to encourage people to save persistent data. Persistent data = maintenance, versioning, breakage. Obviously every software deal has to deal with those issues all the time, but it is nice that you don't have to do it so much in the ImGui world. That said, it's valid to want to save a theme but the other reason I haven't pushed that so much is that the styling system is still very britle. When imgui gets a makeover perhaps the data structure will become more stable.

[ghost]

Of course it is a question of personal preferences, but I've found this one that should be flat and keep the performance. Maybe there are some interesting ideas for the futur :+1:

http://designmodo.github.io/Flat-UI/

[green-zone]

Update: imgui example screenshots added to Improving border #447

[bkaradzic]

I just want to bring up here new look of Blender 2.80. In many ways look of their new UI is closer to ImGui's look, and can be used as inspiration.

[axd2201]

Sorry for asking, but this is issue is old, and the design looks really awesome, is there any intent to still make it happen or did you give up?

[bkaradzic]

@axd2201 I think plan is just incremental improvement over time in alignment with stated goals above...

[bkaradzic]

ImGui-Spectrum https://github.com/adobe/imgui/blob/master/docs/Spectrum.md#imgui-spectrum

[stonedreamforest]

awesome design !!!

[phicore]

Is enhancing of the layout possibilities and styling still something on the horizon for Dear Imgui ?

I don't think it is yet possible to reach even remotely something as smooth as the mockup from 2015.

Maybe the current sponsors of the project don't care as the lib is mostly used for in house debug ui.

[Zingam]

I just want to bring up here new look of Blender 2.80. In many ways look of their new UI is closer to ImGui's look, and can be used as inspiration.

Modern Blender has really neat UI design (old was horrendous). Even tiny things like the triangles in rounded angles look so much better than what is on the current imGUI screenshots. I guess a dot here and there a slight change in color tone makes all the difference. Blender seems to have hired this time people who actually know what they are doing. So copying them would be beneficial :)

The submitted mockup is also good but a bit too flat.

Is enhancing of the layout possibilities and styling still something on the horizon for Dear Imgui ?

I don't think it is yet possible to reach even remotely something as smooth as the mockup from 2015.

Maybe the current sponsors of the project don't care as the lib is mostly used for in house debug ui.

I think that even in-house tools don't need to look ugly :) Aesthetics and ergonomics are actually always important for productivity.