Well this is my attempt to create a clean GUI that could be modified easily to fit any game:
(http://img341.imageshack.us/img341/1969/guitestzorz2342432nn2.png)
I think it fell short though. The spacing and lettering just looks off to me. I'm hoping you guys might have a better eye as to what is wrong.
Modified some of the letters(E, K, X and T). Otherwise it looks fine to me.
(http://i192.photobucket.com/albums/z69/space_boy_album/guitestzorz2342432nn2.png)
I guess it's just the dull colors, but as it's a template (right?) it's an easy fix.
I'm planning to overlay an image over it ala Reactor 09.
I was using those little boxes for icons until I realised that I forgot a TAKE action so I had to redesign it a bit. Hmm...
(http://img402.imageshack.us/img402/1612/guitestzorz3nr0.png)
or without the faint bordering:
(http://img402.imageshack.us/img402/6098/guitestzorz3v2ea2.png)
I'd combine Use and Take into just one action, and place it where the Take button is now. I don't like the way USE is vertical, with the rest horizontal.
I'd also buttonise the arrows on the inventory window, as they look a little flat compared with the rest.
The S in Save/Use also annoys me, too. It's a pixel too wide compared with the style of the font.
Yeah, the S annoys me too. But I don't know how to fix it without turning it into a "zigzag".
How about this?
-XX
X--
-X-
--X
XX-
(http://www.2dadventure.com/ags/ssssss.gif)
It's hard to get a decent S in such a small space without gradients :)
I think dkh's S is better, yes.
I wouldn't call this GUI "clean", though. Primarily, the way the "use" button is crammed in-between in slanted fashion is not clean at all. Then, I wonder what those three small buttons next to "use" are for, and I think the black square boxes are unnecessary. They are intended as checkboxes, yes? A better way of indicating which button is active is by using a "pressed" graphic, or recoloring it. Also, I note that the load/save/exit buttons cannot truly be active like the other three can.
How does this look:
(---examine---) (----talk-----) < ,---, ,---, ,---, ,---, ,---, >
(----take-----) (----use------) < | | | | | | | | | | >
(save-) (load-) (about) (exit-) < `---' `---' `---' `---' `---' >
The black boxes are supposed to contain small icons indicating the function of the button without the use of text.
Quote from: Crazy on Thu 27/12/2007 15:44:41
The black boxes are supposed to contain small icons indicating the function of the button without the use of text.
But they are very small, and it will be extremely hard to create good icons in such a confined space. Plus, why having an icon when you already have TEXT- one of both should *of course* be there, but both at the same time, no...
But I must say that the basic outlay, together with the sharp and clean colours, have a certain appeal, especially if you are going to use this as a template. I bet a great many newcombers will appreciate your work!
Edited for manual spell-checking :)
Quote from: Ghost on Thu 27/12/2007 16:06:03
why having an icon when you already have test- one of both should *of course* be there,
I really don't understand what you mean by "test"?
Test = text.
Why even use icons if you're spelling it out right next to it?
That's what he's trying to say, and I agree. It seems kind of over-the-top, really.
Sorry, typo... Got it corrected.
On second thoughts, if you are already going the extra mile- why not include an option to have either TEXT or ICONS- it would require some re-arranging of the buttons (icon buttons tend to be square, text buttons rectangular) but, well, you *are* already putting some effort into the thing...
I was thinking of multilingual convienience. But I suppose that's just retarded now that I think about it.
(http://img171.imageshack.us/img171/8793/guitestzorz3v2sb1.png)
Done to Radients ASCII example. Still more spacing/scaling issues though.
Quote from: Crazy on Thu 27/12/2007 17:09:31
I was thinking of multilingual convienience. But I suppose that's just retarded now that I think about it.
No, not retarted at all. An icon usually needs no translation, because a mouth as a "speak" icon is easy to comprehend in all languages. It's eleganz and economic.
I was just pointing out that a text saying "walk" close to an icon with, say, a footprint seems too much of a good thing.
The new design looks very nice- have you considered to make "examine" "look", to get rid of the one long word?
It'd make sense if I wrote the game text in an uncommon language. Anyone likely to download it once/if released would be able to read English to a basic level.
I suppose with your comments about long words you'd have a problem with:
(http://img135.imageshack.us/img135/3851/guitestzorz3v2ds0.png)
:P
A game involving a long-winded aristocrat-type-person?
Oooh, I like that, nice and pretentious ;D
I do not have a problem with that at all. Why should I? "Procure" is a little masterpiece.
Hm...
Preserve
Initialize
Relinquish
:D
Quote from: Ghost on Thu 27/12/2007 19:49:43
I do not have a problem with that at all. Why should I? "Procure" is a little masterpiece.
I had done it as a joke. But now that I think about it, I'll probably keep it. It adds character to it.
@Radiant's post: "Relinquish"? Nah. Howabout Depart, Retire, Cease, Abandon or Discontinue?
How about vacate? Or secede? Strand? Repudiate? Ooooh... how does abnegate sound?
Maybe Abnegate would be slighly too outlandish.
(http://img443.imageshack.us/img443/5826/guitestzorz3v3oa9.png)
Can't help it, I *like* it. It has style, it reads well, it totally calls for a gilded plate with the text embossed.
PS: I understood the joke- but isn't it funny how a joke can become an idea ;D
I'm getting visions of a bizzare aristocrat robot. If only I could sprite/illustrate anything decently.
Quote from: Crazy on Thu 27/12/2007 21:48:02
I'm getting visions of a bizzare aristocrat robot. If only I could sprite/illustrate anything decently.
(http://img140.imageshack.us/img140/3811/thenoblebotbi7.png) (http://imageshack.us)
Greetingage! Something like... this?
I was thinking more along the lines of a roundish floating thing with a frilly neck collar and a white wig. But hell, a game isn't made of just one character.
I'll see if anything plotwise comes to me.
Needs some colour apart from that i really like it.
"Procure" to me suggests going out and hunting for something. I think "acquire" would be more suitable for picking something up that is already to hand.
One typo: it's "retrieve" ("i" before "e", remember).
Now for some constructive criticism on the GUI design from a software engineering point of view.
The graphical interface paradigm familiar to most computer users is that highlighting at the top and shadow at the bottom of a control means it is a button that can be clicked (the highlighting and shadowing make it look raised). Reversing these gives either a button that is being pressed or is permanently selected, or a text label that is just there to display some information and cannot be interacted with (compare the "CAPS" label that appears at the bottom right of some word-processing packages when you press caps lock). The highlighting and shading on the load/save/quit buttons should therefore be switched round. Swapping them round just to give some variety is a bad move, as it will confuse the user.
Grey on grey can be hard to read. I'd recommend increasing the contrast by using black text on the buttons.
Using "converse", etc, is fun and original, but "talk", etc, are readable at a glance. Using longer, Latinate words means that the user has to mentally "translate" the words when looking for the button they want. (Of course, once they know where the buttons are, that is no longer a problem.) Shorter, simpler words on buttons are immediately understood.
Icons are better still, as has already been mentioned, provided they are clear and can easily be distinguished from one another. If you use icons, you may need to make the buttons bigger so the icons are big enough to be understood.
Space out the bottom three buttons to reduce the chance of the user pressing the wrong button.
Make the layout of the buttons symmetrical so that they line up at the right edge as well as the left.
You can get round the problems of how to draw the letters by typing the text in a font of your choice and then putting this text on to the buttons as text labels in the AGS engine. If the result still isn't good enough, use antialiasing to smooth out the pixels (eg, by typing the text into a word processor, capturing the screen and cutting out what you need in a graphics program). Text can then be made quite tiny and still be readable. I used this technique in Trance-Pacific for some of the text in the Memo GUI.
Reduce the gap between the buttons and the inventory slots. It looks like something has been left out. Either make the inventory longer, or make the whole GUI shorter.
Make the arrows into buttons (with highlighting and shadow) to make it clear they can be pressed and are not just part of the background image.
I hope this is useful to you. Is this going into a real game, or is it just for fun?
Quote from: paolo on Fri 28/12/2007 09:42:56
"Procure" to me suggests going out and hunting for something. I think "acquire" would be more suitable for picking something up that is already to hand.
True. But both really mean "to gain possesion of" (I know that's a typo but I just got up).
Quote from: paolo on Fri 28/12/2007 09:42:56
One typo: it's "retrieve" ("i" before "e", remember).
Ah, trying to spell a word while spriting it isn't exactly my Forté.
Quote from: paolo on Fri 28/12/2007 09:42:56
Using "converse", etc, is fun and original, but "talk", etc, are readable at a glance. Using longer, Latinate words means that the user has to mentally "translate" the words when looking for the button they want. (Of course, once they know where the buttons are, that is no longer a problem.) Shorter, simpler words on buttons are immediately understood.
I'm going to try and experiment with overlaying icons over the buttons later on. This might yield some interesting results.
Quote from: paolo on Fri 28/12/2007 09:42:56
Make the layout of the buttons symmetrical so that they line up at the right edge as well as the left.
... I spent so very long trying to get the spacings perfect and they just come out wrong for me I guess.
Quote from: paolo on Fri 28/12/2007 09:42:56
I hope this is useful to you. Is this going into a real game, or is it just for fun?
While I'd like to keep some of the resultant work and layout for future games, I'd also like to turn it into a proper game.
I like what you're trying to do here because a lot of amateur ags users might not want to or feel confident enough to make all the elements of a gui. Taking this into account, though, the best way to tackle any gui is in parts: backdrop, button sizes, gui style, and then place them in an eye-pleasing way. The nice thing about keeping all the elements as separate parts is that you can rearrange the gui to suit individual tastes. Taking this into account, I made an edit by redrawing each part of the gui separately and then put them together at the end.
1. Here is the default gui backdrop. I changed the colors slightly to something a little less plain but otherwise left it empty. This way someone can add whatever kind of pattern they want to over it.
(http://members.cox.net/progzmax/guicl/guicl.gif)
2. Redesigned the action buttons slightly, adding an up and down position. I also left a blank in case someone wanted an action I did not create.
(http://members.cox.net/progzmax/guicl/guibuttcl.gif)
3. Made an alternate button style that could use either single letters or symbols and made the up and down positions as well as a blank.
(http://members.cox.net/progzmax/guicl/guibuttcl2.gif)
4. Shaded the parser/status line and separated it from the gui.
(http://members.cox.net/progzmax/guicl/guiclparser.gif)
5. Shaded the inventory window and reduced it in size slightly.
(http://members.cox.net/progzmax/guicl/guiclinvdisplay.gif)
6. Shaded the inventory item backgrounds and made them separate from the display.
(http://members.cox.net/progzmax/guicl/guiclinvslot.gif)
7. Shaded the inventory arrows and gave them up and down positions.
(http://members.cox.net/progzmax/guicl/guiclinvbutt.gif)
And finally, I put the elements together in an orientation that looked good to me.
(http://members.cox.net/progzmax/guicl/guiclex.gif)
There is still a good amount of space for three more actions as well as another mini-action (if needed) and it gives people the ability to quickly edit any of the parts.
I'd definitely recommend a more interesting color scheme and some details first, though!
:o
Wow. So much nicer than my pile of crap (as I've mentioned, I can't compose, rhyme, draw, sprite, shade, paint, animated, model or anything artistic not listed).
ooh! ooh! you should use the old word for load, that cost me many a zork game. "restore"
Yeah, the current wording doesn't fit right.
Quote from: ProgZmax on Fri 28/12/2007 16:46:50
(http://members.cox.net/progzmax/guicl/guiclex.gif)
I like the way it looks, but I don't like those tiny buttons stuck away at the right end. They're somewhat confusing and rather inconsistent.
Quote from: lo_res_man on Sat 29/12/2007 03:22:16
ooh! ooh! you should use the old word for load, that cost me many a zork game. "restore"
Instead of 'save'
How about:
'document'
'Archive'
'Sign in'
'memorize'
and instead of 'load'
'recollect'
'recover'
'Log out'
'Remember'
Different sized buttons aren't really inconsistent, they're just design decisions. Many real-world devices use different-sized buttons (my dvd player and my tower are two examples), and it's usually a stylistic decision, though it can be to preserve space as well. As for being somewhat confusing, I just used the more generic Q-quit and i-info labels, though they can be anything and be used for anything, really. I would probably put Save, Load and Quit as mini buttons like that if I were to use a gui like this, personally, since I don't think save or load should be paired with actions, but that's just me. It's just a generic layout and the nice thing is it can be reassembled how ever people would like to see it best within reason. A good add-on would be icons to replace the text buttons and perhaps an alternate gui display.
(http://img153.imageshack.us/img153/886/guitestzorz3v3overlayvv8.png)
That was the original intention for the GUI, taking it's overlaid style from Sector 09. I realise it isn't at all eye pleasing. So I've started to put proper shading into the elements.
Dammit. I'd almost completed it, it was looking great and I tried to import it in AGS and ended up accidentally writing over it with the old version. Dammit dammit dammit.
:-[ >:(
Oh well, no point crying over overwritten milk. I'll upload the work I've remade so far in a minute.
After shamelessly plagurising the style and shading layout of ProgZmax's version, I've gotten this:
(http://img183.imageshack.us/img183/5059/guitestzorz3v4dh4.png)
Definitely still some spacing issues :p The long words definitely don't do anything for me either ;) But perhaps im not your audience!! I really liked your early first design.
(http://img402.imageshack.us/img402/1612/guitestzorz3nr0.png)
I like it because you've kept the menu options away from the controls. I know if I went to hit "procure" I would probably hit menu in your new design. It's far less likely to happen in your earlier versions, where there is a clear left & right seperation between the load & save menu options & the gaming controls. And I think the big "use" button is cool! In a clunky space adventure I would definitely not be worried about its simplicity! Adding a background image onto the gray-box looks quite good; your new versions are much more eye pleasing. I think you should go with the little icon things again though, I reckon it'd look good & the spacing would be teh great. Anyway good luck! good GUI!
Good point. I've modified the layout to better match the original versions, hopefully you approve of the change.
(http://img526.imageshack.us/img526/8585/guitestzorz3v4freakingbhj8.png)
It looks good, but what does "tracker" do?
Also, I think it needs a more aristocratic synonym for menu. My thesaurus turns up "pabulum", how's that? :)
(oh yeah, and please add keyboard shortcuts!)
(you can have M,P,U,T,E,C activate the buttons, 1-5 activate the items, and - = besides the numbers activate the scroll buttons)
Just brings up a little map with a "tracking beacon" indicating your location within the ship/station. More of a space filling gadget than an actual feature.