Interface project stage 1: colour scheme

The interface, modeling, 3d editing tools, import/export, feature requests, etc

Moderators: jesterKing, stiv

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Interface project stage 1: colour scheme

Postby matt_e » Thu Feb 27, 2003 3:07 am

I have started a project to experiment with and improve Blender's interface. Because UI is often a contentious issue, I have approached this from the point of view of designing it for myself, and if people like some of the changes I've made or ideas I've had, then hopefully they can commit the code to tuhopuu or something. Having said that, I'm not just doing things randomly - I have been putting quite a lot of thought into this, and will give reasoned rationale for everyting I do.

The first thing I've done is changed the colour scheme, and implemented some of the changes talked about in this thread: http://www.blender.org/modules.php?op=m ... opic&t=799 .

Image
click for full size

Download the windows exe


I can forsee some people not liking the dark colours, just as I can forsee people liking the dark colours. It would be nice to have some sort of user preference, like in 3DS MAX, though I don't know how to add it (I'm not really a programmer!). However, I do think the inset number/text buttons are a worthwhile addition, whatever the colour scheme.

Here's a description/rationale for some of the changes I made:
  • Darker colour scheme is less visually distracting and tiring on the eyes. I much prefer using a darker colour scheme if I'm going to be working for long periods of time, as it strains my eyes less.
  • Less contrast and lesser number of colours on screen at a time helps make the interface less distracting and 'in your face' and lets you concentrate on the work at hand. A smaller set of more harmonious colours also looks better from an aesthetic point of view, rather than a rainbow soup of salmon, green, blue, purple, etc.
  • Changed the buttons to square edged. This is more of a personal preference of mine. In my opinion, the rounded buttons look too 'puffy' and childish. The rounded corners also disrupt potential visual alignment - If a number of buttons are placed aligned to one edge, the impression of spatial alignment is reduced by not having clean, straight edges.
  • More visual differentiation between different UI controls, which helps to communicate their function better.

    - Like dcuny suggested here, text and number buttons are now inset like most other text entry fields usually are in other programs/OS control sets. which communicates that they're used for entering information and not executing some sort of command, in which you would 'push a button'.

    - Reduced the use of colour so that it describes different button function types. I have used coloured buttons to show 'action' buttons that perform an action when pressed, rather than the other buttons which are used to toggle settings.
Notes:
  • Some of the icons in the headerbuttons have messy edges and specs of grey, which probably wouldn't have been noticed against the previous light grey background. I'll have to get around to cleaning up those buttons, once I find out how.
  • As it is right now, I have only changed the button colours in the renderbuttons window, as more of a proof of concept type thing. I'll end up extrapolating the guidelines I used for colouring the renderbuttons window to the other windows, but I thought I'd at least put this up for some comments first.

    Please keep in mind that the layout of the renderbuttons has not been designed with this colour scheme in mind (and also things like the inset text/number buttons) so it may look a bit messy. The next thing I'd like to do as part of my project is to re-organise the renderbuttons (and I guess some of the others too) into a cleaner and more logical and task-oriented layout. The current layout is rather arbitrary and incoherent, which is expected since it's evolved to be that way over a number of years of incrementally added features.
  • I chose the blue colour for the buttons etc. from the blue colour in the Blender logo. (The orange looked horrible - it turned out to be a dull brown :P). Blue also looks relatively good when it's at low saturation, (eg. in the inset text buttons) so by using slightly de-saturated blue, you can avoid having a really bright and distracting UI.

    Now, there may be a problem in that the blue is rather similar to the blue used in Discreet's compositing programs. Perhaps this would open the way for people to accuse this UI as ripping off Discreet's UI? I don't know. Any ideas?


Well, let's hear some feedback!

Pablosbrain
Posts: 356
Joined: Wed Jan 28, 2004 7:39 pm

Postby Pablosbrain » Thu Feb 27, 2003 4:15 am

I agree with pretty much everything you've done so far... I agree that having less contrast is good. I work a lot late into the night.. sometimes morning... and that grey is very bright and hard on the eyes over long periods...

HiNMity
Posts: 23
Joined: Thu Oct 17, 2002 11:01 pm
Contact:

Re: Interface project stage 1: colour scheme

Postby HiNMity » Thu Feb 27, 2003 4:53 am

This is nice :) It is a Discreet feeling...which they use in Max , Combustion and the other editing apps ,,so much better !! To make this even more beautiful we could apply smooth colored buttons ..as seen in xsi...(Maybe a contest/challange for best design of buttons)And if it would be possible to change all the objects basic grid line size...that would give amore solid feeling to everything..i think 1.5 times the shape would make more consistent impression. If you worked in Houdini you know what i mean..houdini have the largest grid line size in the industry but it really feels solid!! 8)

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Re: Interface project stage 1: colour scheme

Postby matt_e » Thu Feb 27, 2003 6:09 am

HiNMity wrote:This is nice :) It is a Discreet feeling...which they use in Max , Combustion and the other editing apps ,,so much better !! To make this even more beautiful we could apply smooth colored buttons ..as seen in xsi...

Well yes, actually many graphics programs these days are using darker, more subdued colour schemes, such as the Discreet programs, Shake, Final Cut Pro, DVD Studio Pro. I think they're realising that the standard Windows light grey and blue, or the OS X aqua bright white isn't such an ergonomic or practical (colour correction problems etc) solution for graphics work.

Personally, I don't like XSI's buttons much. I think they're a bit too superfluous and unnecessarily distracting. I don't even think they look that good, especially with the yucky dark pixelly text on top of them (example here and here).

I'm still a bit worried about those blue buttons and how people may see it as a Discreet ripoff (maybe I'm just paranoid :P)

Here are a few screenshots that have been hue-shifted in Photoshop to see how different colours would look. I still think the same 'blender blue' as in the logo is good though...

http://members.optushome.com.au/br-blen ... _green.png
http://members.optushome.com.au/br-blen ... orange.png
http://members.optushome.com.au/br-blen ... purple.png
http://members.optushome.com.au/br-blen ... k_teal.png
http://members.optushome.com.au/br-blen ... violet.png

muropaketti
Posts: 2
Joined: Fri Dec 27, 2002 3:01 pm

Nice.

Postby muropaketti » Fri Feb 28, 2003 5:12 pm

Great work! But I think changing the color scheme should be easier. :?

Mario1981
Posts: 10
Joined: Thu Oct 17, 2002 10:43 pm

Postby Mario1981 » Fri Feb 28, 2003 6:48 pm

Really interesting and nice !!
I like this "theme" :)

phase
Posts: 110
Joined: Mon Oct 14, 2002 1:59 pm

Postby phase » Sat Mar 01, 2003 3:14 pm

I think the new colourscheme is *way* too dark for happy old Blender...
It would be nice if the user could select a scheme he/she likes.
The squared buttons are nice tho !

Btw, in the userpreference window there are three buttons where the
text isn't really visible.

Rob

Jamesk
Posts: 239
Joined: Mon Oct 14, 2002 8:15 am
Location: Sweden

Postby Jamesk » Sat Mar 01, 2003 6:23 pm

I think I like this! Will have to give it a couple of hours straight first, to see what happens, but it feels rather comfortable. But of course it won't be OK until those button icons are cleaned up... =) They are messy!

Nice going!

Pablosbrain
Posts: 356
Joined: Wed Jan 28, 2004 7:39 pm

Postby Pablosbrain » Sat Mar 01, 2003 6:26 pm

It be cool to have a default color sceme like this.. and possibly the ability to read an external XML file to customize it?

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Postby matt_e » Sun Mar 02, 2003 2:25 am

phase wrote:I think the new colourscheme is *way* too dark for happy old Blender...
It would be nice if the user could select a scheme he/she likes.
The squared buttons are nice tho !

Yes, I agree. I think an approach like 3DSMAX would be nice, where the user can choose 'light colours' or 'dark colours', since by this thread, it seems I'm not alone in wanting a darker scheme too. Unfortunately I'd have no idea how to make such a preference. Any willing coders?

Btw, in the userpreference window there are three buttons where the
text isn't really visible.

Oh yes, I only bothered changing the colours of the renderbuttons window, as a proof of concept. The other windows still have lots of colours, and some buttons are still too light and unreadable.

wavk
Posts: 255
Joined: Wed Oct 16, 2002 9:58 am
Location: The Netherlands
Contact:

Postby wavk » Mon Mar 03, 2003 10:10 am

Ah I was finally able to download the exe. Great start, broken! I think you overdid the darkness a bit, though. And the colours of the buttons are a bit too saturated and still too contrasty for my taste. But I know this is just the start.

I'm just thinking about skinning the buttons, and how much slower it would be. The buttons in my material editor are skinned and it's extremely simple to do. All it takes is a 16x16 alpha tga and 9 textured rectangles to draw. The colours can be set with a glColor4f() call before drawing the button. These values could be easily set from the preference menu.

Don't know about the square buttons, maybe something in between, a tiny bevel.

I LIKE the inset text boxes!!! Great work, looks great.

I think if the shadow in the top of the buttons window was to be fixed, it would look a lot better, it looks like it's inverted now.

LukeW
Posts: 64
Joined: Mon Mar 03, 2003 1:14 pm

Thumbs down for the colour scheme & inset number boxes

Postby LukeW » Mon Mar 03, 2003 2:53 pm

I think the text basically has less contrast in your version - so it is harder to read...
The darker colours look more sophisticated - but they're harder on the eyes.
I think the reason why discreet has a dark grey interface is partly because they're trying to avoid the colour of the interface interfere with the person's perception of colours. Or maybe it makes things look more industrial.
Anyway, I think makes it harder for the user to see, and therefore less-user friendly...

I think that inset number boxes are a bad idea. I think the number boxes should have a < and a > on both sides or triangles pointing left and right instead... e.g. "< End: 250 >"

That way, the < and > are a clue that the person can click there (on the left or right sides) to change the value. The actual value of the number could be different too:
e.g. "< End: 250 >"

And if it has editable text, it could be similar, except that it wouldn't have the arrows - e.g.
"OB:Plane"

The backgrounds where the type-ins are should be a different colour too (like how Windows text-fields are)

I think it is counterintuitive to have entire number and text boxes that are sunken. In standard Windows programs, only the part that the user can type in or press as a standard button is sunken - the title of the text/number field isn't sunken. If it is sunken it implies that it can pop-up again - or that the whole field - including the title can be edited.

Also, the colours of the toggling buttons (100%, Gamma, RGB) is too bright - it stands out too much and makes it harder to read the other text. In the original interface, the text on the pressed in buttons has a similar contrast to the other buttons so they don't stand out quite as much.

I like what you did on the top-right corner though - you made it say "Vertices" and "Faces", etc, rather than just Ve and Fa - plus included other interesting data - that would need to be abbreviated when viewed at lower resolutions though.

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Re: Thumbs down for the colour scheme & inset number box

Postby matt_e » Tue Mar 04, 2003 1:31 am

LukeW wrote:I think the text basically has less contrast in your version - so it is harder to read...
The darker colours look more sophisticated - but they're harder on the eyes.

I think the reason why discreet has a dark grey interface is partly because they're trying to avoid the colour of the interface interfere with the person's perception of colours. Or maybe it makes things look more industrial.

Well, yes, less contrast is what I wanted to achieve. I can see it may be harder to read for some - it's fine for me, so that's how I made it :). I disagree with the dark colours being harder on the eyes. The main reason I wanted darker colours is because I was doing a lot of work late at night in a dark room, and the light grey was just too bright for me. It made my eyes tired with such a bright screen shining at me all the time, when I wanted to concentrate on what I was working on.

I think that inset number boxes are a bad idea. I think the number boxes should have a < and a > on both sides or triangles pointing left and right instead... e.g. "< End: 250 >"

I think subtle arrows (or some sort of visual indicator) would help a lot with the number buttons, however I don't think they should be raised up on buttons. There must be a visual distinction between controls to edit values and controls to initiate actions (typically, a button). I've seen so many people get confused by numbuttons when they click on it, attempting to 'press' the button, but then all that happens is that the value inside the button ends up increasing or decreasing. It's very counter-intuitive an unexpected.

The backgrounds where the type-ins are should be a different colour too (like how Windows text-fields are)

They are, aren't they? It's a lesser saturated shade of that blue.

I think it is counterintuitive to have entire number and text boxes that are sunken. In standard Windows programs, only the part that the user can type in or press as a standard button is sunken - the title of the text/number field isn't sunken. If it is sunken it implies that it can pop-up again - or that the whole field - including the title can be edited.

That's true to an extent. However the problem with making the controls 100% like Windows is that Blender's controls don't work like Windows' controls. Not only would it be confusing for the user (controls functioning in a different way to how they usually expect), but there are also utilitarian concerns as well. For example, if the actual button area is reduced to the size of just the number, with the text label sitting beside it (like the Pics, Ftype, Set labels) then there's a lot less room to use Blender's 'click or drag to increase or decrease the value' function, which I'm sure most people would agree is very useful. It'd be a lot harder to click the different sides of the control if it was very thin. Perhaps it's time to invent some new sort of control which visually communicates this behaviour well?

Also, the colours of the toggling buttons (100%, Gamma, RGB) is too bright - it stands out too much and makes it harder to read the other text. In the original interface, the text on the pressed in buttons has a similar contrast to the other buttons so they don't stand out quite as much.

Mmm, yes now that you mention it, I can see what you mean. They do stand out quite a lot. This should probably be changed.

matt_e
Posts: 898
Joined: Mon Oct 14, 2002 4:32 am
Location: Sydney, Australia
Contact:

Postby matt_e » Tue Mar 04, 2003 1:57 am

wavk wrote:Ah I was finally able to download the exe. Great start, broken! I think you overdid the darkness a bit, though. And the colours of the buttons are a bit too saturated and still too contrasty for my taste. But I know this is just the start.

Well, yeah that's the idea. Everyone's happy to hang out on this forum and talk and talk about interface stuff, but nobody really seems to be trying to get anything done. So I decided to at least make something for myself that I perfer working with, and hope it spurs people into action to either integrate the changes, or modify them, or whatever, but at least do something to try and fix up the UI.

I'm just thinking about skinning the buttons, and how much slower it would be. The buttons in my material editor are skinned and it's extremely simple to do. All it takes is a 16x16 alpha tga and 9 textured rectangles to draw. The colours can be set with a glColor4f() call before drawing the button. These values could be easily set from the preference menu.

Don't know about the square buttons, maybe something in between, a tiny bevel.

It's pretty much all in interface.c. I didn't actually write the code to make hhe buttons square (I wouldn't know how to!) - I sort of cheated by reusing the same code that draws the square buttons in the fileselect window ;) In any case all the buttons (buttonswindows, fileselect window, etc) should look the same anyway.

I think if the shadow in the top of the buttons window was to be fixed, it would look a lot better, it looks like it's inverted now.

Ooh yes, good idea. That must have slipped past.

LukeW
Posts: 64
Joined: Mon Mar 03, 2003 1:14 pm

Postby LukeW » Tue Mar 04, 2003 8:48 am

broken wrote:...I disagree with the dark colours being harder on the eyes. The main reason I wanted darker colours is because I was doing a lot of work late at night in a dark room, and the light grey was just too bright for me...

Well I often use it late at night too and I simply use a light in my room! Most people would have a fairly well-lit room - rather than a dark one (and this program should keep the majority of users in mind). To make it darker you could just turn your screen brightness down, and screen contrast down too if necessary.
It's good that you're putting in some effort to do this all, but if your interface is worse than the original interface, yours shouldn't be chosen simply because you've done a lot of work on it. What other people (who would represent the majority of users) matters.
I'm planning on starting a new topic about the number boxes.


Return to “Interface & Tools”

Who is online

Users browsing this forum: Yahoo [Bot] and 0 guests