Diana de Sousa

Qt Creator flat style UI design + new Light theme

Published Monday February 9th, 2015
87 Comments on Qt Creator flat style UI design + new Light theme
Posted in Design, Graphics, QtCreator | Tags: , ,

We have been thinking about the idea of updating the Qt Creator GUI with a more contemporary flat style design, and adding a Light theme in addition to the current Default and Dark themes. Moreover, all the icons in the UI would be simplified and become consistently unified under the same style.

Down below are a couple of screenshots with examples of what these new designs would look like. They are an early concept, so it we’d love to get useful feedback from you to take this forward!

And here are a couple of PDF documents with further examples of the new designs:

Qt Creator Flat style Default theme – PDF
Qt Creator Flat style Light theme – PDF

 

Default theme

QtCreatorThemes_DesignA_DefaultA1

Design mode

QtCreatorThemes_Edit_DefaultC1

Edit mode

 

Light theme

QtCreatorThemes_DesignA_LightA1

Design mode

QtCreatorThemes_Edit_LightC1

Edit mode

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Design, Graphics, QtCreator | Tags: , ,

87 comments

Papierkorb says:

Will this change be optional, in the sense that I can switch back to the current/old non-flat icons?
Flat icons just lack any personality. Additionally I’m working on TrueColor monitors, the UI doesn’t have to downgrade my visual experience to the one of the remaining three monochrome users… On top, I have issues actually seeing them.

Please, make it optional. Thank you.

Will Stokes says:

I’m a fan of the flatter shading but dislike the smaller icon labels, smaller icons, and great icon spacing in the side toolbar.

Maxim Gnidak says:

I like current style more, than flatten from images.

But if you change the colors for context, parts it will look more interesting. I mean buttons which is belongs to debugging, with more light color and so on.

quick says:

I like it. Looks modern and fresh and not so old-school like the current one.

But still no tabs 🙁

annamest says:

https://en.wikipedia.org/wiki/Qt_Creator

Qt Creator is a cross-platform C++, JavaScript and QML integrated development environment […] The editor’s features include syntax highlighting and autocompletion, but purposely[4] not tabs

Ali says:

yeah, and the guys at Qt Creator never heard of the word “optional”, like e.g a “View->Tab bar” checkbox. Nopse, users being used to, *and liking*, tabs is waaaaaaaay too much for them to grasp

Ali says:

At least if they’d fix this https://bugreports.qt.io/browse/QTCREATORBUG-10567 , but unfortunately it’s set on “low”, and from the replies i got i don’t even know if they’ll actually implement something which will provide the re-arrangeable tabs functionalities

Leena Miettinen says:

Our reasons for not using tabs are discussed at the end of the FAQ of the Qt Creator Manual: http://doc.qt.io/qtcreator/creator-faq.html

Just saying says:

It’s always interesting when you see a user base that repeatedly makes a reasonable request for a new feature that competitors have and the company or project basically replies “You’re wrong for wanting that, we know what’s best for you.”

More often than not, it’s a sure sign of a company or project in trouble. Hope that’s not the case here.

Jared says:

You are wrong. Tabs are stupid in this context. Qt creator is right. ctrl-k is your friend.

Damien Courtois says:

The said Faq entry makes me really irritated. It’s full of assumption as to how people work, it’s a one sided view clearly subjective.

I’m sorry, but having tabs doesn’t prevent you from keeping the current set of functionalities mentioned in the Faq (and sorry, but all the “points” saying otherwise in said Faq are biased)

I’ve been working on Visual Studio (which, guess what, has tabs) and Qt Creator for quite a long time, and I’m always frustrated as how cumbersome it is to work in Qt Creator.

I wont go into details as to why because I know that I probably wouldn’t be very objective (like the person(s) who wrote this Faq)

It would be a really good idea for this kind of things to do a survey. And not one where you only focus on your current Qt Creator users that rarely use another IDE (and so are used to not having some features, and think “I don’t need it, it’s useless”, and then go on, telling you why …) but also focus on people coming from other IDEs.

Jared says:

The little bit of learning curve necessary in qtcreator is worth not having tabs to satisfy those who can’t be bothered.

Having used qt creator daily for the past few years, I really can’t see why anyone would want to replace the current interface with cumbersome tabs…

Murazaki says:

Great idea. I think the icons might need to be a little refined (icons too flat can be boring).
Also, can you add a mode without text for the left buttons ? I think they’re already quite explicit :).

reznorms says:

Please make it optional, or even default but with the old style available. Flat may be the “new” cool thing everyone wants to slap on user face, specially on Win8+ but meh, lot of people don’t like it and looks alien on other OS with no flat theme.

jbgoode says:

These look nice. I like the flat, light theme.

thanks.

Murazaki says:

Here are more thoughts from me :
– The Welcome button felt more explicit with the Qt icon IMHO
– The current tab (Welcome, Edit, Design,…) could be highlighted with borders or Google Style tab (a neon color on one side) to remind the user it changes the work environment

Diana de Sousa Diana de Sousa says:

Thanks for the suggestions! Yes, the side tabs could be worth trying out 🙂

Mark says:

Looks ugly, like all flat designs (and that is using the word “design” very loosely).

I’d switch to another IDE rather than using the theme.

3DH says:

I like it, too.

nik says:

Does this serves only different tastes or is there also some real added value (scientific?) of flat designs which I can’t see?

Ali says:

I’ll give you an answer which i actually received from the Creator guys (when in a rather similar situation, they just changed something and then “take it or leave it”): “We can only accommodate a limited number of users, we can’t make everybody happy”. Duh!
Unfortunately, Qt + Creator is the only available open source toolkit on the market that can actually be used to write real cross-platform code, so i guess at the end of the day we’ll just have to play their game… “take it or leave it”

Andre' says:

The style looks good, but I would not like to switch to it.

I don’t want to use productivity tools that change fundamental aspects of their user interface every other year. This invalidates muscle and eye memory, and decreases productivity.

If this is meant as a contribution of an optional feature without any noticable impact on normal use of Qt Creator – fine. If it is meant to replace the current UI, or requires resources from the development team to implement – not fine.

Please let Creator concentrate on functionality and ease of use, not on ever-changing trendy looks. There is enough room for functional improvements.

Diana de Sousa Diana de Sousa says:

Hi, those are very good and valid points. The intention is not to move the buttons and icons away from their usual places. We’re keeping things as much as possible in their original positions and even keep the same visual metaphors for the icons – except for only a few where the current metaphors don’t make much sense anyway. I also expect to conduct usability tests before releasing the new themes, to make sure that we are not in any way harming our users productivity.

AAS says:

Dark flat is great, but please add an option to change foreground and background colors of all panes (list of open files, find results, app output, etc) as well. Right now it’s pretty contrasty – dark ui and white textareas/list.

Also, +1 for optional labels for left toolbar buttons.

Flavio says:

My advice is dropping the dark theme and focus on the light one which is the “standard” color for most OSes.

Darko says:

My advice is dropping the light theme and focus on the dark one which is the “standard” color for most Developers.

That being said, please make a low-contrast dark-only theme that is dark everywhere (instead
of dark on some widgets and light on others) so as to ensure an eye-friendly UI that allows to work for hours without having the any bright white areas that hurt the eye.

Flavio says:

I’m not aware of a popular IDE defaulting to a dark theme. Not XCode, nor Eclipse, nor Visual Studio…

HGH says:

I am defaulting to dark themes every time.
Light themes kill my eyes!

Mitch Curtis says:

This! A dark theme should not have blinding white parts. 🙂

Ariel says:

I like the modern look, and, as in every design, many will like, many will dislike but this puts QtC on par with modern applications. This has an implication on newbies’ initial perception of Qt, it looks polished and fits the rest of the ecosystem.

However, please take a look at the size considerations others are commenting.

Murazaki says:

Trolls, FYI : Qt Creator UI as stayed the same at least since 2009. Also your precious buttons haven’t change place at all, and newcomers (and designers) would really like to have a modern interface.
So I will advise you to take 30 seconds to adapt to this new interface for the sake of all the rest of the community.

Fritz says:

I really don’t care what the designer wants. What you get when designers get their way are things like RibbonUI, Windows 8, GNOME 3, Unitiy. Basically things that are worse than they were before.
So please, keep Designers off QtCreator. Thank you.

Taylor Braun-Jones says:

I like the flat design. Aesthetically it is pleasing to me, but more importantly my brain is able to interpret the meaning of the imagery more quickly and easily with the flat, minimalist style. And studies show that this is the case with most other people as well.

I also like the option of having a light and a dark theme.

aportale says:

Great that after such a long time a skilled and motivated designer deals with our beloved Qt Creator. Thank You, Diana! And also the feedback so far is very helpful. It was foreseeable that face-lifting our good old Qt Creator would be a polarizing topic 🙂

Regarding the implementation details: We will try to implement as as possible of this design via the theming capability (new feature since Qt Creator 3.3). And since here and also inside the Qt offices there are many voices for having it optional and and keeping the old theme, it is most likely what we will do.

Some of the technical benefits from my POV of the new theme:

– Finally, we have a consistent icon set. The current one grew organically and has different styles (colors, shadings, etc.)

– All graphics will be checked in the Qt Creator source tree as svg. Versioning-friendly text format with change history. The pngs will be generated from the svgs

– We finally *own* the source graphics and can work with them later. The source graphics of the current icons are/were Photoshop files which may or may not anymore exist on Mac-harddisks around the planet

– We can easily create standard and high-DPI “@2x” variants. Many of the current icons look just sad on high-DPI systems

– The flat backgrounds are easier to maintain for different DPIs. The current one with gradients & co. shows many off-by-1 glitches on high-DPI systems

– We can apply consistent svg effect filters in over the whole icon set, if we want to try out a few refinements (e.g. a very decent 1-pixel drop shadow or whatever)

Viktor says:

What’s the point to have dark ui with light backgrounds?

Diana de Sousa Diana de Sousa says:

Hi, let me just clear up this misunderstanding, as many other people have also posted their concerns about the “dark theme”.

The latest release of Qt Creator already includes a dark theme in addition to the default theme. We are *not* re-designing for now the dark theme. What we are working on is the default theme, plus adding a new light theme that did not exist yet. This is what our mockups are showing.

But it is true that the default theme has a bit too high contrast, so it may be that we invest instead our effort now to improve the current dark theme and make the default one optional along with the “old” non-flat icons. Let’s see…

Viktor says:

Thanks. Your new light theme looks much better than current Qt Creator default theme, it is not as contrast and finally don’t have any gradients. And I personally don’t see why people complaining about icons, they looks good.
But still I am looking forward to see new proper dark theme for Qt Creator. I hope it would be something like Darcula style in Intellij IDEA.

Algirdas says:

Have been waiting for this to happen for a while. Awesome!

Donald says:

This new design looks very appealing and functional.

Robin Burchell says:

Nice changes! I like them quite a bit. I’ve never felt quite comfortable in the current look — I’d love to give this a try instead.

xavier says:

The Edit and Design button in the tool bar should be merged into one button. Each time I need to update UI, I need to click the Design button, it’s not needed.

Indrajit says:

Thanks for involving everyone 🙂 I like the fact that the UI theme is more consistent. However, I like the current set of icons much more and not the flat ones.

Also, I am not sure if I would ever switch to the light mode; the darker shades are more soothing when you have to look at the screen for hours while writing code and debugging. I would rather like it a lot if the projects, open documents, Application output etc could also be themed in shades of gray (so that the edit mode screen looks more like the design mode screen).

Keep up the good work!

mabc says:

1. I think that flat-style fits with plasma 5 and win10, its ok for me.
2. Use colors (remove text) to identify tasks (eg. green run/debug, orange build, blue project config, and so on.)
3. Saturate the color of the icons, eg. in the light theme the colors are weak.
4. optional, themeable, easily modifiable higly appreciated.

Shortcuts in qtc3 are very good, i really appreciate if the dev team can add support to deal with:
* c++ doc easily (win/linux),
* and better support to deal with project and -subprojects- app plugins, libs, and so on. (aka medium to large projects)

Best Regards
🙂

fonzi337 says:

Looks great! Nice and modern, minimal and sleek. I think many would appreciate a refreshed look.

Carel says:

I like the new Light + Dark options but with the flat buttons the style looks like it is coming too close to the Windows 8 style which I was never a fan of…

Guy says:

I love it!

Pascal says:

Looks great !

Good work 🙂

Tobi says:

I like the new design, actually!
Especially the new navigation and start/stop controls look good with the overall theme!

maour says:

Looks like Visual Studio but i like it anyway

Volki21 says:

I can’t understand who decided that flat design would result in a great user interface. It’s totally unintuitive to the user as it does not make any obvious (without having to move around the mouse to search for hover events) distinction between UI-enabled elements and non-interactive elements. So please please make it optional.

Diana de Sousa Diana de Sousa says:

It’s been really exciting to keep up with all the comments, thanks for the useful feedback and interesting suggestions! We’ll keep posting to the blog once we have new updates. Meanwhile do keep sending your thoughts and wishes 🙂

sacha says:

is it made using a stylesheet ? In this case, could you share it with the community ?

Yan says:

The person who designed these themes is clearly characterized by an utter lack of taste. Light theme is particularly ugly. If you insist on using them, at least get rid of excessive borders in the light theme.

Janis says:

NO NO NO please no. Flat style is probably acceptable within mobile applications or simple apps, but not with professional development software.
Visual identification is really important, so that your eye catches necessary item as fast as possible.
In flat style, everything looks the same and you have to “think”, which button to choose.

Dennip says:

I don’t know why some are so strongly opposed to this.
Been waiting for this for ages, I’ve never much cared for the current themes and thing the screenshots look very nice!

Sure they might need some tweaks here and there to address the legitimate concerns other comments have raised.

Would theme themes replace the existing themes or be additions? I think everyone would be happy if they were additions…

didesous says:

Yes, they are meant to be additions. All current theme options would still remain.

Diana de Sousa Diana de Sousa says:

Yes, they are meant to be additions. All current theme options would still remain.

HGH says:

I’d like to see improved features like better multimonitor support rather than themes.

Anyway if we are on the topic of themes: These buttons on the left take too much space.
It would be great to have – small/big buttons option and a button to hide/show the mode selector.

Also I’d like to have the currently selected kit and mode debug/release visible at all times – possibly in the titlebar on Windows next to the menu – doesn’t really matter as long it won’t take any extra space.

Also all UI components should take minimal space to make more space for the code editor and watch windows. Some developers have to work also on smaller screens.

After all IDEs best selling point is functionality and not beauty. That’s why I am using Qt Creator. It is better than the most!

gordanio says:

+2 for the smaller mode bar.
The current one is just a waste of space.

Jared says:

You can hide it now! It’s pretty great.

Diana de Sousa Diana de Sousa says:

Jared, how do you hide the mode bar now? Should there be a visual cue, an icon that can be clicked to hide it?

Jared says:

In my binary it’s in the menu under:

Window > Show Mode Selector

Diana de Sousa Diana de Sousa says:

Yes, found it! Thanks 🙂

Danny says:

Please dont forget about the form Designer. Not all of us are drinking the Quick cool aid and still make heavy use of it. It could certainly use a facelift and new widget icons at the very least!

Ferit Cubukcuoglu says:

I love it! Fresh, modern and very aesthetic. The light theme remembers the design of visual studio to me 🙂
But I would definitely use both themes.
Themes manager/selector will be the right way, in my opinion.

TheBootroo says:

I already love the new Dark theme preview in latest QtC 3.3 !
It only has some inconsistencies and the old icons are not fit into it, some of them are barely legible…
So I’m waiting for a more polished Dark theme in QtC 3.4.
And for the new Light Theme and flat icons, only one question : “When will I have opportunity to test it ?”
Anyway, thanks for your work !

TheBootroo says:

That said, I highly dislike plain square bordered buttons…
It look too Win8-ish to me and I hate the look of that OS…
That’s what I call “ugly flat design”,
please take example of the Google Material Design or other forms of flat-ish designs, that have slight drop shadow and small roundness on clickable elements, and don’t make a 2px border on them, please…
If you need some SVG buttons material, just PM me !

TheBootroo says:

IMHO, the Reply button on this blog is much more beautiful, and it has the Qt colors so it would fit beautifully in the new QtCreator UI !

Damien Courtois says:

I really like those themes. Much clearer, easier to read. I also like the font used for the labels.

And this leads me to my only thing I would change / update : the fonts used elsewhere. Especially in the code editors and the output of the compilation, debugging, etc. (page 3 and 5 of the PDF, for instance)

On those pages, the code editor versus the rest of the interface feels odd. It’s not “coherent” (sorry english is not my mother language, and I don’t know how to express that in a better way)

Again, appart from that, it’s a really nice relooking !

Diana de Sousa Diana de Sousa says:

Hi Damien, it’s already possible to choose the font used in the code editors from the Preferences panel, and that is a feature that of course will remain 🙂

Musta says:

Yes, the style generally looks nice.

But I wish the button bar on the left were smaller, like in the current version.

Not everyone has a huge screen. And not everyone who does uses it all the time. Screen real estate is valuable. Please don’t make the buttons bigger than they currently are.

Diana de Sousa Diana de Sousa says:

The size of the left menu bar has not been changed at all from the current version 🙂 Maybe it just appears bigger because the icons are now smaller and more spread out.

Nejat says:

Good to see finally a new look for Qt Creator after some years. I like it. Specially because it looks great in KDE 5 Plasma desktop.

Goncalo says:

While I love the overall look of the new themes, I believe we all agree the default theme with dark menus and light backgrounds makes no sense.
Please consider scraping the Default theme, making the Light theme the new default, and also making a proper dark theme with low contrast.

Other thing that always bothers me is the unnecessary hugeness of the mode selector bar. I hate it that a bar with less than a dozen buttons takes like 10% my screen width. Can we please have a option to make the bar collapse, or make it thinner?

Overall I am a fan of flat themes, the new themes already look better than the current ones, and I hope they are improved even further.

Jared says:

You can already collapse the mode bar!

I used to hate the mode bar so much I edited the code myself to do this before they implemented it in newer versions. So I feel your pain.

Jan-Willem says:

I like the idea for the new flat theme, although for myself I have to agree with Goncalo that I would like a proper dark theme.

Is there any chance that the theme would also affect for example the project browser?

cbruner says:

In my opinion, I really like buttons that have shading so they look like they are physical objects. Flat buttons were a new fad when windows 3.0 came out in 85, and going back to the flat image really feels to me like a giant step backwards.
If anything, how about context sensitive buttons, for instance when a button is enabled and the mouse goes over it, it becomes “excited” and hops up and down a little bit like it can’t wait to be pushed. Or when a button is pushed it brightens like a little sparkler went off. I know it’s gimicky but I’d rather use some of the opengl then hide it away.

Gris says:

Please make it optional with the old style by default. Qt Creator is a good IDE because it is good at the moment. Do not try to reduce the quality.

Pasi Keränen Pasi Keränen says:

I like the light theme like so many others, but the use of colored icons seems a bit random to my eyes in the screenshots. I’d suggest keeping the grayscale look in the icons (including the “run the app” and “debug the app” buttons) and only highlight things in colour on mouse over or when they are activated.

Diana de Sousa Diana de Sousa says:

On an earlier sketch I had all icons grey as you are suggesting. But then I thought that people are used to a certain way of buttons appearing and behaving, so maybe keeping some buttons consistent with their current appearance (apart they now being designed flat) would facilitate the transition between the old and new UI. It’s an interesting point, thanks for the comment.

Berk Demirkır says:

I was really getting annoyed by the same look over the years. Your direction is very good in my opinion. Only thing i can complain about is icon colors. What a horrible choice is that orange! (Just a personal preference)

Zaps166 says:

Can I switch back to non-flat icons? It looks very ugly, like… Windows?

Adam says:

I like this kind of design.

Some points:
dark design should have all backgrounds dark, make teh flat icons a bit bigger so that they are not lost in background. I would apreciate the possibility of dockable sidebar, like being able to dock it to top/down/right border of IDE, and please never implement tabs they are useless.

And thank you for developing this awesome IDE!

Scorp1us says:

I abhore all flat style.

It kills the UI paradigm. Things should hint that they are uncertain elements. Flat style, at best, gives a shadow. The previous generation has a 3d gloss and shading to hint at a interactive element. You don’t percieve flat with shadow as easily as gloss and shading.

For simple mobile apps with only a few interactive UI elements this is tolerable. For something like Creator, there is a ton of UI and if flattened usability will suffer. Also What about group boxes? Impossibe to do in flat style.

The only sin of curved buttons was they got too glossy at times.

I don’t expect this Flat style to exist for long. It’s go the way of the hamburger menu which is already on the way out.

stendy b. sakur says:

this is great and i loved, so this themes is building?

Bogdan says:

I really like it. Finally you made it flat and beautiful. Really integrates with your new Qt5.4 redesign and restructure. Abandon the old ways and make something better 🙂 (Looking forward to this redesign)

Hossein says:

I think it’s clear why MSFT, GOOG, AAPL, etc etc are imitating each others’ platforms’ cold, dead, colorless flat designs; kinda reminds me of browser version-number wars. Now I don’t understand why Qt should involve. Does everybody else love the “modern” “design”?

In addition, the only major Desktop platform that has ‘gone flat’ is MSFT’s one so that’s the only, ONLY place where ‘modern, consistent UX’ makes sense, if anything.

Judging by Qt’s recent FoT (Flattening of Things ) wave I don’t think any user’s comments would change that decision. Sigh…

PS Look at the spacing between the sidebar buttons…

Commenting closed.

Get started today with Qt Download now