Haiku UI Mockup

Actually haiku has already implemented most of this … It does not yet have rounded windows but I believe this is a planned feature it may get pushed to R2 however

When you are getting things done the UI appearance matters little. However the Haiku UI has been recently updated with gradients and a generally smooth uncomplicated appearance that many people like. As features are added to Haiku the UI will change and improve to reflect those changes as long as they allow the system to remain lean and fast. I think that is the general sentiment of the developers and long time users besides you kind of get attached to a cool different UI like BeOS/Haiku’s after awhile.

i am more than happy to help out with the UI while you work on core stuff, if you need me im there. Also im not saying i dont like how Haiku looks heck BeOS is what got me into computing as a passion in the first place! you dont need to lose what makes the UI great, just update it with some nice new desktop effects (vector stuff, shadowing, rounding etc). i talk about haiku all the time to any one who i happen to be talking about computing with! (ok not that many) but when they say things like “id give it another year tops” or “whats the point of developing Haiku?! stick with linux!” it sadens me :frowning: please let me help prove the nay sayers wrong, and move the os into and beyond the 21st century!
P.S Sorry for that passionate outburst, HAIKU has become quite the hobby for me outside of my day to day OS

It’s OK, a lot of us are passionate about Haiku :slight_smile:

I think for now the UI of Haiku won’t be changing much. Given the capabilities of Haiku I think we are doing pretty well. Thinks like non-rectangular windows, shadows, and transparency will come eventually. But if we incorporate those things they will be done to improve the usability, and not just for looks. I like a cool looking system as much as anyone, but we must not forget our primary purpose is to help the user get things done.

In the meantime sabianadmin I think there are plenty of graphical and UI-related things you could do:

  1. Read the Icon Guidelines, learn how to use Icon-O-Matic and make some Haiku vector icons. We still need a few in Haiku itself, though I’m working on some of those at the moment (Touchpad preferences icon for example.) But even icons for the web-site which are in the Haiku style are useful.

  2. Use Haiku and suggest UI improvements for the system itself and for the included applications (not just looks but usability.) Any obvious bugs and even suggestions for improvement (enhancements) can be logged at the Haiku bug tracker.

  3. If you have ideas for a nice, simple, streamlined “Haiku style” web browser interface, I’m open to suggestions. I’m developing a new browser for Haiku that will use WebKit and I want it to be top notch. I like to fancy myself a good UI designer (and I’m getting ideas from other browsers of course), but I’m always open to suggestions. I’d especially enjoy looking at mock-ups.

I keep having the feeling that the scrollbar is lacking contrast so i edited your mockup a bit (i hope you don’t mind) to add that.

It’s not perfect, just for the idea.

6 Likes

That looks a lot better. Now, what would it look like if the the scroll arrows were filled in with black?

As you wish, also made some other little changes and added comments to those i already made before:

7 Likes

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.

The end result would be modern and similar to how Google Chrome handles tabs on Windows, only more consistent and useful as it would be completely built into the OS.

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.
[/quote]

+10000000

I really hope to see this implemented.

That looks a lot better. But do you think widgets like the scrollbar could stand out more? I’ve always liked how macos 9 widgets were able to stand out even without all the fancy effects we have today.

[quote=halo]

For the web browser, I think instead of the UI implementing tabs, the Stack functionality of Stack and Tile should be finished up and implemented into mainline Haiku.

The end result would be modern and similar to how Google Chrome handles tabs on Windows, only more consistent and useful as it would be completely built into the OS.

[/quote]

At first I was resistant to this idea, but the more I think about it the more it makes sense. My only concern is some of the niceties present in web browser tab interfaces, such as favicons (at least in Chrome), right click menus, and just the general ability to customize such code. I could probably hack the app_server decorator code to allow for favicons and other customizing, but in general this will need to be experimented with a bit before I can say for sure it is a good idea. But I will definitely give it a try.

It also allows for “simulating” the Chrome multi-process tabs since it is easy to have windows in different applications, and the grouping would just happen because of the stacking.

We’ll see how this goes in a few weeks maybe.

Well, I recently posted some ideas in <a href=http://forum.syllable.org/viewtopic.php?t=1490>this 3ad @ Syllable forum.

I believe that an horizontal compact & clean upper dock could be an innovation for Haiku too.
Here’s an example: http://www.antagonism.eu/_priv/files/other/new_dock.png

It’s a <a href=http://www.skyos.org/?q=node/404>SkyOS, Litestep and <a href=http://www.sharpe-shell.org/e107_plugins/autogallery/autogallery.php?show=User%20Screenshots%2FcubeIX_white_theme_[by_captain_herisson].jpg&newwindow=1>SharpE ideas/graphics mixup.

There are also other interesting ideas about windows/colors in <a href=http://forum.syllable.org/viewtopic.php?t=1490&postdays=0&postorder=asc&start=20>this post.

Hope that inspires !

It seems that the black-filled arrows look much worse. Maybe light gray filling will be better?

Anyway, last mockup version looks very pretty and much better than current Haiku UI. I’ll vote for it! +1

UPD: [quote]1. Right-top menu corner no longer rounded[/quote]
How about context menu? It will be looks little bit strange.

Has anyone tried taking a look at Enlightenment? Not for global design adivce per se…but IMHO it has some of the best UI design out there. I could really see some awesome things happening with haiku if there was some sort of union with the EFL (Enlightenment Foundation Libraries) project.

[quote=Duv]That is something… rather nice. And hey, rounded drop-down menus… that is different. The colours are crisp. I would say that you might want to do something with the scroll bars, yet another thing that I see scream “Mac-like” to me.

But yes, not bad. I like it.[/quote]

I think you could rock out the NeXT style scroll bars which has the mac style button grouping at both ends.

I added some school-bus yellow to the scroll bars and arrows and put a drop shadow around the window. What do you think?

I quite like the school bus yellow because it adds interest to the window, but did you notice the original mock-up already had drop-shadow?

There is many people (including me) who think that OSX’s over-the-top style of drop shadow is ugly and gives the UI a very cheap feel. The only good thing about having that OSX style drop-shadow is to make the very flat style window “pop” so you can see the window easier as there is no titlebar to identify the location of Windows.

Keep the drop-shadow modest.

Man, this design is PERFECT. Kudos to you! How can I get this onto my Haiku install?

I also like the last mockup! Should be a R2 theme :slight_smile:

Personally I like the Mac OS X style drop shadow but that is just a personal preference. I did not notice the drop shadow in the original image.

Make the drop shadow gratuitous.

1 Like

The arrows weren’t quite right so I switched to more traditional style arrows with school-bus yellow background on the top and bottom of the scroll bar. Also added a more high-contrast scroll bar background. Comments?