Coffeehouse Thread

24 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Which toolbar looks better?

Back to Forum: Coffeehouse
  • User profile image
    vesuvius

    I'm developing an application using the Expression Dark/Light themes but am a bit torn (icon fetish) between choosing whether the icons should be colour or not.

     

    Which do you think looks better?

     

    Generic Forum Image

     

    Or this one

     

    Generic Forum Image

  • User profile image
    Dexter

    I'd say that the colored ones don't work too well with the dark theme. The colored one might work better if you tone down the color saturation a bit.

     

    And sorry but that so called Expression Dark theme doesn't actually look like the real Expression theme. The real one is a million times better.

  • User profile image
    vesuvius

    Dexter said:

    I'd say that the colored ones don't work too well with the dark theme. The colored one might work better if you tone down the color saturation a bit.

     

    And sorry but that so called Expression Dark theme doesn't actually look like the real Expression theme. The real one is a million times better.

    I agree with you about the theme, once things are finalized, I will buy the expressive theme from reuxables that is a pretty faithful copy.

  • User profile image
    Dexter

    vesuvius said:
    Dexter said:
    *snip*

    I agree with you about the theme, once things are finalized, I will buy the expressive theme from reuxables that is a pretty faithful copy.

    Dunno, that one looks just as bad. The menu items are too large, the toolbar style is incomplete (see the drag gripper background for example), the ListView's border color doesn't match the rest of the theme and so on.

  • User profile image
    TommyCarlier

    vesuvius said:
    Dexter said:
    *snip*

    I agree with you about the theme, once things are finalized, I will buy the expressive theme from reuxables that is a pretty faithful copy.

    I think the gray buttons look a bit like they're disabled. Either way, I don't like buttons that are too glossy (a little gloss is fine, if it's subtle). Especially if there are a bunch of them next to each other. I really like toolbars that are lightweight, where you only see the icon (and/or text), and that show a border/background when hovering the mouse over them.

    What I also do is make the icon a bit brighter when hovering, and a bit darker when pressed. If you want to see this effect (but in WinForms), you could download a little tool I created a while ago: for-i-repeat (a tiny portable .NET 2.0 WinForms app). Here's a screenshot, but unfortunately you can't see the hover/pressed state:

    for-i-repeat

  • User profile image
    GamlerHart

    I prefer the second icon-set with the colors. It has way more contrast so that the icons are easy to find. This makes it real easy to find out what is a something you can click one.

     

    In the grey icon set everything looks very similar and hasn't much contrast between controls and the rest.

  • User profile image
    vesuvius

    Dexter said:
    vesuvius said:
    *snip*

    Dunno, that one looks just as bad. The menu items are too large, the toolbar style is incomplete (see the drag gripper background for example), the ListView's border color doesn't match the rest of the theme and so on.

    I think it's the same people that have made the WPF themes on codeplex, but I had liked the fact that the selected item fro example is a flatter (more faithful) style.

    I agree that the menu items are too large (in fact I've had to modify my buttons is the resourcedictionary because the default was MinWidth=70 I think). I also would like the toolbar buttons not to stand out at all, except when you mouse over them.

     

    All in all, the only themes from reuxables that I like are the Paper 2010 one, and [possibly] the Odyssey one. XAMLTemplates seem to be the only other option, but that killer theme is evasive at present.

  • User profile image
    vesuvius

    TommyCarlier said:
    vesuvius said:
    *snip*

    I think the gray buttons look a bit like they're disabled. Either way, I don't like buttons that are too glossy (a little gloss is fine, if it's subtle). Especially if there are a bunch of them next to each other. I really like toolbars that are lightweight, where you only see the icon (and/or text), and that show a border/background when hovering the mouse over them.

    What I also do is make the icon a bit brighter when hovering, and a bit darker when pressed. If you want to see this effect (but in WinForms), you could download a little tool I created a while ago: for-i-repeat (a tiny portable .NET 2.0 WinForms app). Here's a screenshot, but unfortunately you can't see the hover/pressed state:

    for-i-repeat

    I must say that I agree completely with you.

     

    The only ssue is I did not decide on the theme, the client did, so I have to go with what they want.

     

    In Winforms you have got some third party companies that come close to Office or improve upon things, but WPF is still rather vacuous wen it comes to killer themes. Microsoft expression blend has a great toolbar  that displays all of the characteristics you mention, but it is impossible to find

    1. A comparable theme quality wise
    2. A comprehensive icon collection that complements number 1

  • User profile image
    blowdart

    Frankly I hate you. And Expression. I choose my Windows UI colours because I like them and they're easy on the eye. Then along come applications that think they know better and think I want some trendy grey/black crap that is hard to use.

     

    *SPIT*

  • User profile image
    vesuvius

    blowdart said:

    Frankly I hate you. And Expression. I choose my Windows UI colours because I like them and they're easy on the eye. Then along come applications that think they know better and think I want some trendy grey/black crap that is hard to use.

     

    *SPIT*

    A man after my own heart!

  • User profile image
    TommyCarlier

    blowdart said:

    Frankly I hate you. And Expression. I choose my Windows UI colours because I like them and they're easy on the eye. Then along come applications that think they know better and think I want some trendy grey/black crap that is hard to use.

     

    *SPIT*

    You sound like W3bbo. Although I don't think W3bbo would spit.

    But I do agree with you. Like you see in the screenshot above, I try to always use system colors. Although my ToolStrips and MenuStrips are a little glossier (just a little), they still use the system colors. That way, they integrate well with the OS. Going even further, I check if the user has enabled high-contrast mode. In that case, I don't use my custom ToolStripRenderer but a ToolStripSystemRenderer, which doesn't use gradients when in high-contrast mode.

  • User profile image
    TommyCarlier

    TommyCarlier said:
    blowdart said:
    *snip*

    You sound like W3bbo. Although I don't think W3bbo would spit.

    But I do agree with you. Like you see in the screenshot above, I try to always use system colors. Although my ToolStrips and MenuStrips are a little glossier (just a little), they still use the system colors. That way, they integrate well with the OS. Going even further, I check if the user has enabled high-contrast mode. In that case, I don't use my custom ToolStripRenderer but a ToolStripSystemRenderer, which doesn't use gradients when in high-contrast mode.

    I just recorded a small screencast that demonstrates the hover/pressed effect: http://www.screentoaster.com/watch/stWU5SQ0VIR19cQFhfWVhbUlBT/hover_and_pressed_effects_on_toolstrip_buttons

  • User profile image
    blowdart

    vesuvius said:
    blowdart said:
    *snip*

    A man after my own heart!

    I curse your client! And their children! I hope the fleas of one thousand camels descend upon their testicles.

     

    And don't get me started on the SteamUI or anything that pretends to be on MacOS

  • User profile image
    figuerres

    blowdart said:
    vesuvius said:
    *snip*

    I curse your client! And their children! I hope the fleas of one thousand camels descend upon their testicles.

     

    And don't get me started on the SteamUI or anything that pretends to be on MacOS

    Yuck!  that just sounds very evil and welll ...... crawlly.... all them fleas Expressionless

  • User profile image
    figuerres

    first set would be OK if the colored parts where a bit smaller AND the buttons were larger so that you had visual space around the each icon. but i would also tone down the shiny ness of things.  so close they just look crowded and busy.

  • User profile image
    Cannot​Resolve​Symbol

    The second fits the Expression theme better, although they're not quite right (take a look at Blend or Design if you need some good examples).

     

    The first is horrendous, even if you were just using the default Windows theme.  Too much gloss and too much clutter.  Take a look at the Windows icon design guidelines for some icon advice if you need it.

     

    Also beware:  the Reuxables Expressive theme doesn't look to be much more of a replication of the Expression theme than what you've already got Smiley.  Toolbar buttons should be flat, buttons (all buttons, not just toolbar buttons) should not have a gradient (same with drop-down widgets and things).  Tabs in that theme are wrong, as are tree views and listbox items.

  • User profile image
    W3bbo

    TommyCarlier said:
    blowdart said:
    *snip*

    You sound like W3bbo. Although I don't think W3bbo would spit.

    But I do agree with you. Like you see in the screenshot above, I try to always use system colors. Although my ToolStrips and MenuStrips are a little glossier (just a little), they still use the system colors. That way, they integrate well with the OS. Going even further, I check if the user has enabled high-contrast mode. In that case, I don't use my custom ToolStripRenderer but a ToolStripSystemRenderer, which doesn't use gradients when in high-contrast mode.

    With application designs such as these, I'm finding it harder to consider using WPF for any kind of project in the future. There are diamonds in the rough, like FrogDesign's demos, but they had a tier-1 design agency behind them, which isn't something the other 99% of developers have.

     

    I agree with Blowdart and Tommy's sentiments (or rather, they agree with me). Generally speaking: developers can't do usable and aesthetic UI right, and when it comes to something as important as this it's better to not do something (i.e. not making your own UI style) than get blamed for something you did do that turned out to be atrocious.

     

    My advice to you:

    • Ditch the white-on-black. It rarely looks good. If you're trying to imitate "pro" applications like Discrete Flame or Lightwave you'll see they don't actually use too dark colours in their UI, and it's dark (or rather: close to neutral) for a reason: to make the colours of the subject appear as natural as possible.  I know you said you're following what the client said, but your clients aren't going to know any better than you. As a professional developer it's your responsibility to tell your client to their face that they're wrong, why they're wrong, and what a better alternatives are available.
    • Those coloured icons are awful. They're using strong primary colours with cliched gloss effects and contrast sharply with the main window (which is too dark in comparison). The greyscale icons in the second screenshot are a dramatic improvement and better fit in the visual style of your program (even if it is misguided) but as Tommy said it makes it hard to identify if a button is disabled or not.
    • Question your use of WPF. Your application doesn't seem to be taking advantage of features unique to WPF and I get the feeling someone could implement something similar (and better looking) in WinForms quickly enough.

     

  • User profile image
    vesuvius

    TommyCarlier said:
    TommyCarlier said:
    *snip*

    I just recorded a small screencast that demonstrates the hover/pressed effect: http://www.screentoaster.com/watch/stWU5SQ0VIR19cQFhfWVhbUlBT/hover_and_pressed_effects_on_toolstrip_buttons

    That is really simple and elegant.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.