Topic: My "Techno" style GUI...babylon...

[Technocrat]

I've been trying to make an improved, cleaner, more functional version of the GUI style I've been using for the last few games I've made, and I just wanted to see a) what kind of feelings it evokes from people, and b) whther you lovely folk think it could be improved somehow.

The impression I'm going for is, surprisingly enough, futuristic - like a PDA or holographic terminals of the future. Because of this, the blue part of each of them is partly transparent. The menu at the top-left is for Options, Save, Load and Quit Bottom-right will contain all of the inventory items. As the mouse moves over each, they slide out on to the screen in a smooth, accelerate/decelerate motion.





I'm unsure about the style of buttons at the top left I've got here, so I've got an alternative that might fit better.

[Frito Master]

IMO

This look nice but you need more contrast between the ui elements not to much since it has that circuitry look but it almost looks washed out. (Still good though)

x1 x2 x3 x4

Slide out menu looks nice but with the shape hexagon ui elements it gives the look of them being angled floating platforms (Which could look cool but not a pda look imo.)
As above needs more contrast with the circuitry

x1 x2 x3 x4

This looks way more pda like and a better setup and it looks awesome.
Same contrasting issue as above

x1 x2 x3 x4

All in all I get the futuristic pda look with a holographic screen, The inventory screen looks very functional and the button screen looks nice.

[Shane 'ProgZmax' Stevens]

I think I prefer the top one because the buttons are symmetric; however, I'm not against the idea of asymmetric buttons if they are implemented in a fashion that makes sense.  Currently, the way you have your GUI arranged they don't make efficient use of the room or warrant their strange shape.  If you were to redesign the gui to look more like a computer panel with different-sized buttons then I think that would be fine so long as the buttons are all large enough to identify and click on.

I do like your existing GUI design overall, though, so I think you should consider going with symmetrical buttons for it, that way you can make more efficient use of the space which should be a design consideration, like so:

1.  Redesigned the buttons to stand out more and to better conform with the shape of the gui and for efficiency while still leaving room for effects.

2.  Made the close button slightly smaller (may or may not need one at all but it's a good way to show some functionality).

x1 x2 x3 x4

You may or may not want the buttons to look like physical buttons; while I like the idea of virtual buttons, as Frito Master pointed out you are going to want to make the buttons more obvious (which is what I did).  As you can see, I've made more efficient use of the space while still leaving ample room for flashy stuff.  In this case, I thought it might be cool to add some digital marks next to each button that would light up when you mouse over the button (4 is lit in this case).  This adds more visuals to the interface without cluttering it up, but you could also remove the center area and add even more buttons if you wanted.  As it stands, the gui will support at least 6 buttons and they could all be symmetrical if you either reduced their heights by 1 pixel or the size of the surrounding gui arch.

Hopefully this helps and take this opportunity to really experiment with guis.  While a clean, easy to figure out design is extremely important, you can still have a lot of fun being creative with various aspects of the design, especially with futuristic or steampunk stuff where your imagination is the only bottleneck!

[Frito Master]

@Prog's Post.

What he said is 100% correct, The idea for the lighted circuit for the selection is a awesome idea to add details without removing functionality.

[amateurhour]

I like what prog did as far as the circuitry lighting, but I prefer your original asymmetrical four button display, I think it would work well with a glowing white text overlay.

I'm a fan of the slide out PDA inventory, but if you're going for a true holo display feel I'd consider changing the direction to a wide bottom and have the transparent blue extend up, but without the cap on the top. So it's just the dark greyish base and the transparent blue that extends up from it.

just my .02 though, it looks very well done.

[Technocrat]

I seem to be getting different restults depending on which computer I'm looking at it on, but I've got a sneaking suspicion the grey part of them might be too "light". Or, perhaps that's what people mean by it needing more contrast?

ProgZmax's idea of symmetry looks like I good idea, I've been experimenting with my first button layout, and somehow it doesn't feel right from a control point of view - I think if the buttons took up more space within the menu, it'd be easier to use. Maybe something like ProgZmax's, but with only four buttons...hmm...

[Frito Master]

Post what your coming up with

[Moresco]

I also like the four button display, but specifically that alternate version you posted.  This looks more interesting to me, the idea that they're flat, like a label on a circuit-board that you push as a button but it doesn't go down.  The changed colors and attempt to make the buttons pop kinda ruined that look as well, favoring more traditional "buttons".  So I'm in favor of the alternate, and not anything that looks like buttons or any modern styled tech.

[Monsieur OUXX]

Redundant to everything above: More contrast, pleeze :-)

[Technocrat]

I'll be honest - I've never understood what is meant by "contrast" when it comes to drawing. The internet isn't being particularly helpful in aiding my understanding in this case. Is it, for example, like changine the colours of the detailing on the grey parts in order to make them more different from each other?

x1 x2 x3 x4

Here's a newer iteration, with a slightly different arrangement of buttons, designed to use more space

[Shane 'ProgZmax' Stevens]

Using your latest gui design, an example of high contrast would be the difference between the interior button color (dark blue) and the lighter gui background.  Low contrast would be the aliasing along the inside top left corner of the LOAD button.  So essentially, high contrast is colors that stand out next to each other while low contrast is colors that tend to blend together or be almost indistinguishable from each other.

As for the design itself, the buttons could use more consistent aliasing; some of the corners around the buttons are actually using darker colors than either the outline or the background use which is jarring, and the same applies to the aliasing around the nodes going to each button.  Remember, edge aliasing is an effort to reduce the 'jagginess' of a sprite by mixing colors between an outer and inner surface until the result looks softened.

The alaising is also inconsistent in that it is applied almost randomly to the buttons (the top left corner of the LOAD button has inner aliasing but none of the other buttons or corners do, for example).  Aliasing all the way around the outside of each button and inside will help as well as adding some along the edges of the letters and fixing the too dark aliased bits.

[Monsieur OUXX]

for short: "more contrast" = "the light colors should be lighter, and the dark colors should be darker"... so that it doesn't look like a flat painting on a wall, but an actual 3D object.

Alternatively, you can achieve more "contrast" by having cast shadows, coming from the ceiling (for example, on your GUI, the upper grey areas are above the blue areas, and standing out, so they should cast a shadow, or at least have their lower part quite dark)

PRO TIP : temporarily turn your GUI into grey shades, and see if they don't look all flat and monochrome, now that you're not distracted by the colors anymore.