Haiku UI Mockup

#1

Over the past day or two I’ve been looking at some of the mockups posted in this section. While I think that some of them were nice, none of them really felt quite right to me, so I decided to see what I could cook up in Photoshop. After some amount of time and effort, here is the result:

It’s not quite perfect (a few things are a couple pixels off, for example), but it’s a fair representation of how I think the Haiku UI should look. Instead of reinventing the wheel or “stealing” UI elements and appearances from the “big guys”, I’ve tried to focus on simply improving what was already present in R5 and bringing it up to current standards (alpha blending, shadows, HQ text antialiasing, etc).

I have another mockup that contains more UI elements in the works, but I figured I might try to get some opinions on what I already have done. What do you guys think?

#2

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.

#3

I’m impressed! I like it very, very much. It’s really what I imagine a descreetly modernized R5 theme should look like. Not going crazy with much too rounded corners everywhere. I like how the window itself stays square.
Maybe the gradient of the yellow tab is a tiny bit too dark. And I like the scrollbar arrows on top and bottom.

One thing to consider is the possible font that Haiku can come with.

If you do a detailed list view I’d love to see how alternately white and oh-so-slightly tinged light grey rows would look. Maybe the sorted columns could also so be delicately pronounced.

Anyway, you obviously know what you’re doing. I’m excited to see what you will come up with. Thanks for your work!

Regards,
Humdinger

#4

I very much like your efforts. You’ve done the same kind of take on the general look of the OS that stippi and crew have done with the icons and it looks fantastic! My only gripe is the scrollbar changes. The buttons should be arranged like they currently are in Haiku and the buttons themselves have suffered from the same problem that R5’s do, which is that they look disabled even when they are not. If the arrows on the buttons were somehow filled in, this wouldn’t be a problem anymore, either. Your efforts have definitely paid off and I hope that Haiku’s look is tweaked to resemble yours (even without the drop shadows :slight_smile:

#5

I love it! The font rendering looked odd, but that should be a seperate issue. The buttons could need some refreshing, and they should be placed like they are in Haiku now. Otherwise I love the mockup! It looks clean and not too “shiny”, but still crisp and attractive. It has a Haiku feel I think. I really look forward to seeing more of this, keep it up!

#6

Thank You for Your work John! I like it. Can we get H-Snake?

#7

What’s “H-Snake”? Anyway, I really look forward to seeing more of this. I can’t wait to see what you do with buttons, tabs and other widgets!

#8

Thanks for the praise, all! To be honest, I’m bit surprised that everyone likes it so far, because I’m nothing more than an amateur. Even though I’ve been doing this kind of thing for six or seven years now, I’ve never had any classes on it or anything of that nature; I haven’t even attended college yet (just a high school graduate). But anyway…

Since so many commented on the scroll bar and its buttons, I guess I’ll have to change it. I initially used the both at bottom model because 1) it was what was being used in the old R5 screenshot I based this on (well, except it was double scroll buttons on both ends) and 2) it eases scrolling for those without a scroll wheel (for example, I use a trackball without one).

The font used in the mockup is the open source Bitstream Vera Sans. I made use of OS X’s font smoothing to better simulate that of an actual OS since Photoshop’s antialiasing and rendering at smaller sizes is absolutely atrocious.

And forgive me, but what is H-Snake? A Snake clone for BeOS? I haven’t run BeOS or any of its variants for a very, very long time now (coming up on 5+ years), so I’m a little lost. Mind providing me with a screenshot?

#9

I think H-snake should really be a Z-snake which is a visualisation of current menu path implemented in unreleased builds of the last BeOS version:

zsnake.png1280×1024 52.6 KB

#10

Hmm, that’s an interesting idea, but I don’t really like how it overlaps all the other menus with its own “layer”. My implementation would probably put it on the background level of the menus underneath the menu borders.

#11

Well, show us your idea then. :smiley: And no need to worry about you not having education. The result of your efforts are still the best I’ve seen so far! Ok, I am too impatient, sorry…

#12

I think this is really beautiful and it’d be amazing if Haiku was like this.
+1

#13

Bulls Eye, John!
110% good stuff!
Except the menufont your mockup looks like a worthy replacement for the UI of the patriarchal BeOS™!

greets,
prOSy

#14

It’s really nice! I wanted to see a similar mockup which retains the same crisp nature as the original Be theme but modernized with TrueColor palette…

I agree with others - something must be done about the buttons and scrollbars. In the original BeOS interface, scrollbars and buttons had a “flat” look to them - this made them quite clean to my eyes; can you try something along those lines?

#15

Generally I like the direction. But at the moment I think it feels a bit too “sharp”… this probably stems from the 1px black borders and the small font (which also has severe usability issues).

Don’t let hat dissuade you though. But it might be something to take into consideration for your next revision. :slight_smile:

#16

[quote=Gavin]Generally I like the direction. But at the moment I think it feels a bit too “sharp”… this probably stems from the 1px black borders and the small font (which also has severe usability issues).

Don’t let hat dissuade you though. But it might be something to take into consideration for your next revision. :)[/quote]

Well I could see maybe increasing the font size of the menu items, but I don’t think doing the same to the actual menus would work very well for two reasons:

  1. The menu section of each window would be taking up far too much real estate. I personally dislike having a menu attached to each and every window and prefer the Mac menubar model for its reduced redundancy and guaranteed location, but I’m not so sure others would feel the same.

  2. If it’s the same size or larger than the titlebar text, it will feel unbalanced and look odd.

I’ll definitely play around with it and see what I can change, though.

#17

IMHO all the font sizes could do with a nudge upwards, including the titlebar/tab text.

I wouldn’t be overly concerned with screen real estate. With desktop (and laptop) resolutions continually on the up it’s a highly available commodity these days.

#18

[quote=Gavin]IMHO all the font sizes could do with a nudge upwards, including the titlebar/tab text.

I wouldn’t be overly concerned with screen real estate. With desktop (and laptop) resolutions continually on the up it’s a highly available commodity these days.[/quote]

I see what you’re saying, but even so, it’s a good idea to wisely spend your pixels. It’s the same as programming; having memory, CPU, and HD space in no shortage is no excuse for being a lazy programmer and not optimizing as much as possible before shipping the product.

That said, I’ll see about slightly increasing font size in the next mockup.

#19

Wow!! Looks very impressive

it’s too hard to implement this in the actual source code… :frowning:

#20

Can you expand on this notion - I’m curious to hear what exactly you’re referring to exactly… (perhaps you replied to a specific post in the thread?)