Adventure Game Studio | Forums

Creative Production => Critics' Lounge => Topic started by: Kastchey on Fri 23/02/2018 20:30:33

Title: AGS Awards Ceremony client - GUI
Post by: Kastchey on Fri 23/02/2018 20:30:33
Hi Critics' Lounge!

I am trying to come up with a nicer GUI for AGS Awards client to match the beautiful background by Ali at least somewhat better, and have started with the below.

What I aim for is a GUI with a hue similar to the warm reddish tone of the background image, just slightly brighter to make the buttons stand out better (not sure if this is the right approach though, or if I'd be better off with the exact colour balance from the background).

I originally made the gold set, then upon Danvzare's suggestion I tried a blue version with a hue picked up from the blue cup in the background.
The third version with uncropped icons is a variation of the first one.

Which version fits best? Or if anyone is able to offer an alternative suggestion, please go ahead.

Edit:
Here are the reworked sets:-

1. (https://s17.postimg.org/ealbqao4f/buttons2_gold.png)

2. (https://s17.postimg.org/bt9kj1rdb/buttons2_gold-on-silver.png)

3. (https://s17.postimg.org/fpmwf1k2n/buttons2_silver.png)

4. (https://s17.postimg.org/xfol02i7z/buttons2_silver-on-gold.png)

Previous versions:
https://s17.postimg.org/kd7m1icgv/buttons_gold.png (https://s17.postimg.org/kd7m1icgv/buttons_gold.png)
https://s17.postimg.org/427i56s9b/buttons_blue.png (https://s17.postimg.org/427i56s9b/buttons_blue.png)
https://s17.postimg.org/9dmepwtrj/buttons_icons.png (https://s17.postimg.org/9dmepwtrj/buttons_icons.png)
https://s17.postimg.org/xk68s8rzz/buttons_icons_blue.png (https://s17.postimg.org/xk68s8rzz/buttons_icons_blue.png)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Cassiebsg on Fri 23/02/2018 20:59:46
Ohhh
I like all of them! (nod) (laugh)

But I specially like the uncropped one! I like how the icons burst out of their "cages"... :-D
About the colore gold/blue... well the first one stands out more, the second is more discrete. Do we want them to pop out of be quietly on the BG?

Maybe a 4th version with the uncut icons and the blue BG? ;)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Kastchey on Fri 23/02/2018 21:54:23
Sure Cassie, why not? Original post now updated :)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Tabata on Sat 24/02/2018 08:21:10
Well done! I like all of the variations, too. (nod)

About alternative suggestions you asked for:
How about the background of those icons in the first variation version (the third you showed) with the symbols popping out in one (or two) of those blue shades you used in the second version?
Title: Re: AGS Awards Ceremony client - GUI
Post by: dactylopus on Sat 24/02/2018 23:00:05
I like the color balance of the first 2, but I like the way the icons come out of the boxes on the next 2.
Title: Re: AGS Awards Ceremony client - GUI
Post by: cat on Sun 25/02/2018 09:42:30
I agree with dactylopus.
Title: Re: AGS Awards Ceremony client - GUI
Post by: SinSin on Sun 25/02/2018 19:15:59
Yes the bootom two are styled nicer but the above two are coloured better. White is too much.
Title: Re: AGS Awards Ceremony client - GUI
Post by: Cassiebsg on Sun 25/02/2018 20:23:54
Also, we can use both the blue and the gold... just use the first for normal state, and the gold for hover/pushed. ;)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Kastchey on Mon 26/02/2018 18:13:41
Thanks a lot guys for all your feedback and suggestions, very much appreciated! It seems the blue/silver version is preferred by just about everyone which makes things a lot easier.
I will try mixing the general layout of the bottom versions with the colours from the top versions as suggested and get back to you for more feedback.

Thanks again!
Title: Re: AGS Awards Ceremony client - GUI
Post by: Danvzare on Tue 27/02/2018 13:26:16
Everyone has already said everything that I want to say. But I'm going to echo it anyway.
I like the way the bottom two pop out, but I prefer the colours of the top two. And like Cassie, I think having blue for the default, and gold for when you're hovering over it would look fantastic.
Title: Re: AGS Awards Ceremony client - GUI
Post by: Kastchey on Tue 27/02/2018 21:04:24
Every vote counts Dan! It's even better if I get consistent feedback from everyone, it just makes me more confident this is the step in the right direction.

The main post is now updated with the reworked set of buttons. I think I have covered all the suggestions (poke me if I missed something, though)... thanks everyone!
The uncropped versions and the high contrast are definitely going away, and I suppose we will pick something for the default and the highlighted (when hovering over) version out of these four.

Further comments and suggestions always appreciated :)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Cassiebsg on Tue 27/02/2018 21:13:11
Nice work :)

I would go with 3 (default) and 1 (highlight/pushed). Hands down as my favorites.  :-D
I could go with 3 and 2, but really don't like 4.
Title: Re: AGS Awards Ceremony client - GUI
Post by: dactylopus on Wed 28/02/2018 01:08:09
I would choose the following:

3 - Default
1 - Hover
2 - Selected / Pushed

You could swap the Hover & Selected and it would still work nicely.

If I had to choose just one, I'd choose #2.
Title: Re: AGS Awards Ceremony client - GUI
Post by: Gurok on Wed 28/02/2018 02:32:38
When you decide on a look, can you also share the backing plate and a few guidelines so that in a few years, should we need another button, we can create one?
Title: Re: AGS Awards Ceremony client - GUI
Post by: cat on Wed 28/02/2018 17:51:30
They look awesome and really fit the background. I like #2 best.

I'd choose
3 - default
2 - hover
1 - selected/push
Title: Re: AGS Awards Ceremony client - GUI
Post by: Kastchey on Wed 28/02/2018 19:41:19
Thanks again for the opinions guys, it seems that version 3 is everyone's favourite so let's go ahead with this one as the base. We'll see if the highlighted variants are even needed as the buttons will fade out until hovered over.

Gurok, that's an excellent suggestion. I'll put the base empty button and a short step by step guide somewhere once done with the work.
Title: Re: AGS Awards Ceremony client - GUI
Post by: Danvzare on Thu 01/03/2018 12:14:51
#2 is sooooooo pretty. 8-0

But I'd have to agree with everyone else about #3 being default, #2 being hover, and #1 being for those that are pushed.
Simply because I can't imagine a pushed variant of #2 looking anywhere near as good as it would going from #3 to #1. (Unfortunately that means that #2 probably won't be implemented due to the buttons disappearing when you're not hovering over them, but I'm ok with that.)
Title: Re: AGS Awards Ceremony client - GUI
Post by: Snarky on Thu 01/03/2018 14:26:11
If it's not a big problem for Kastchey to make the different variations, I think there'll definitely be a place for both mouseover and normal versions. There will be cases where buttons are visible even when not specifically hovered over.
Title: Re: AGS Awards Ceremony client - GUI
Post by: Kastchey on Thu 01/03/2018 18:35:24
Not a problem at all, all it would take is a few clicks to swap the layers :)