Garry's Mod - GUI Thread (#1) - Showcases, Questions, and Advice

[dimitrik129]

[IMG]http://puu.sh/qyfuD/6318714d25.png[/IMG]

[b]Welcome to the Garry's Mod GUI Thread (#1).[/b]

Everyone is welcome to ask questions, showcase GUI (in-game or mockups), or share tips. The goal of this thread is to hopefully create a better aesthetic and design sense for GUI across Garry's Mod by helping other developers.

[b]Thread Rules:[/b]
1. Be polite with other developers.
2. When criticizing, do so constructively.
3. Don't be stupid.
4. Use the [t] or [thumb] tag instead of [img].

[B]Old threads:[/B]

[URL="https://facepunch.com/showthread.php?t=1401284"]https://facepunch.com/showthread.php?t=1401284[/URL]
[URL="https://facepunch.com/showthread.php?t=1439021"]https://facepunch.com/showthread.php?t=1439021[/URL]

[dimitrik129]

[QUOTE=Handsome Matt;50869897]5. Refrain from uploading PNGs (large file size)

When showing off GUI? PNG is a must.[/QUOTE]

Normally a background of sorts is used when showcasing GUI elements (be it screenshots or mockups)

I guess I can change that rule in case people wanted to cut out specific portions of their GUI.

[c👌de_g🎷]

Just tell people to use the [t] or [thumb] tag instead of [img]; it auto-sizes any dimension (referring to rule #4).

[Cosmic Seagull]

How's this one looking?
[t]https://my.mixtape.moe/shdjra.png[/t]

I think this is pretty good so far, but maybe I should change the background to red to match my server theme.

[sp]it was joke i swear :([/sp]

[dimitrik129]

[QUOTE=code_gs;50870128]Just tell people to use the [t] or [thumb] tag instead of [img]; it auto-sizes any dimension (referring to rule #4).[/QUOTE]

Thanks! Didn't know about that. Added to the rules.

[sannys]

Working on a new UI for serverguard.

The mock

[t]http://i.imgur.com/GLGetl7.png[/t]

The real deal

[t]http://i.imgur.com/HbY6nMk.png[/t]

The icons aren't final, I'm just working with what I got on hand at the moment. The main menu is a card that will switch out with the card for whatever category you click on.

Mock

[t]http://i.imgur.com/uiOlsXX.png[/t]

Real

[t]http://i.imgur.com/y97Go69.png[/t]

The icon at the top right is supposed to be the bunch of circles looking icon like in the mock, but for now it's just the category's icon. Cards can stack, too. The base card is on the left, and when you click something, another card pops up containing all of its information. There'll be the ability to search and such.

[dimitrik129]

[QUOTE=CosmicSeagull;50870183]How's this one looking?
[t]https://my.mixtape.moe/shdjra.png[/t]

I think this is pretty good so far, but maybe I should change the background to red to match my server theme.[/QUOTE]

What kind of design style are you going for? Retro?

[editline]11th August 2016[/editline]

[QUOTE=sannys;50870196]Working on a new UI for serverguard.

[IMAGES]

The icon at the top right is supposed to be the bunch of circles looking icon like in the mock, but for now it's just the category's icon. Cards can stack, too. The base card is on the left, and when you click something, another card pops up containing all of its information. There'll be the ability to search and such.[/QUOTE]

Looking awesome so far!

I would suggest however that you use the Google-provided vector icons for any sort of vector icons you choose to use in the UI. That way they look more fitting along with the UI, being that it seems like you are attempting material design.
I would also suggest you add drop-shadows to add depth (and finish the "material" look), and add accent colors to brighten the UI. Maybe replace the white you have with more of an off-white so it is less harsh on the eyes.

[t]https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bx4BSt6jniD7aGcyakNwSW1iR1U/layout_principles_papercraft_actions1.png[/t]

Drop shadows normally look like this when following material principles.

[t]https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsOE5zakpUNEtkWVU/style_imagery_principles5.png[/t]

In this example, you can see the designer used two accent colors in areas where they want the user to focus. Any primairy color in the "material" palette can be used together to mimmick this effect.

Material Color:
[url]https://material.google.com/style/color.html[/url]

Material Principles:
[url]https://material.google.com/layout/principles.html[/url]

I hope this helps!

[zerf]

Might want to link to the previous 2 threads of this series in the OP. It's sort of a theme with chain-threads like this so people can refer to the old ones.

[url]https://facepunch.com/showthread.php?t=1401284[/url]
[url]https://facepunch.com/showthread.php?t=1439021[/url]

[dimitrik129]

Someday these will be in-game :((

[t]http://puu.sh/qyknV/18a9fcbcab.png[/t]
[t]http://puu.sh/qyjRU/533f58b128.png[/t]
[t]http://puu.sh/qykFx/77f1e9ab1b.png[/t]
[t]http://puu.sh/qykHy/a2734bd0f6.png[/t]

This is in-game though

[t]http://puu.sh/qykMJ/c548bfa96b.png[/t]

[VeXan]

[QUOTE=sannys;50870196]Working on a new UI for serverguard.
[/QUOTE]

Yes. Please. I love ServerGuard, but there's never support for it.

[MysteryPancake]

This looks like the perfect thread to spam with posts to do with my gMessage addon. It's meant to be a replica of iMessage. It functions using net messages and supports multiple conversations and all the kind of stuff that iMessage does, as well as image sharing. It started off looking horrible, more like the iPad version:
[t]http://i.imgur.com/vU6iMNo.png[/t]
Here's the iPad version for comparison:
[t]http://i.imgur.com/J8lXGpa.png[/t]

And now it looks like this:
[t]http://i.imgur.com/xHsukzj.jpg[/t]
Which looks more like the desktop version:
[t]http://i.imgur.com/9GBs215.png[/t]

It looks a bit different now though, I made it look even more like the desktop version. I'll post newer pictures if I get round to it

[VeXan]

Does the battery on your addon actually reflect battery life of laptops? I'm pretty sure there's a function to do that.

[editline]12th August 2016[/editline]

Yep, [URL="http://wiki.garrysmod.com/page/system/BatteryPower"]system.BatteryPower[/URL]

[kpjVideo]

[QUOTE=sannys;50870196]
[t]http://i.imgur.com/HbY6nMk.png[/t]
[/QUOTE]

A bit smaller icons might be a good idea.

It seems a bit "crammed" especially in that first icon.

[Nookyava]

I think the icon size is fine, but spread them out a bit more. You have so much wasted space.

[MysteryPancake]

[QUOTE=VeXan;50873126]Does the battery on your addon actually reflect battery life of laptops?[/QUOTE]
It used to before it was [URL="https://github.com/Mysterypancake1/gMessage/commit/88d9c8a87d7d47e9aa9d9af889cfba7c7bb6c8f1"]removed[/URL] in the newer version. It even had an animation that played when the battery was charging

Feel free to steal all the stuff in that link so it doesn't go to waste

[editline]13th August 2016[/editline]

By the way, the mac buttons on the new version are vector art so they can be rendered at any size - currently they're rendered as greyscale 24 by 24 pixel PNGs and are colored ingame, it's quite efficient

[editline]13th August 2016[/editline]

Also, it uses [URL="https://github.com/Mysterypancake1/gMessage/tree/master/sound"]sounds ripped directly from my mac converted into WAV files[/URL]

[Rubat]

[QUOTE=sannys;50870196]

[t]http://i.imgur.com/HbY6nMk.png[/t]

[/QUOTE]

[img]http://i.imgur.com/ZLLLqzc.png[/img]

Align your icons :suicide:
( Center them properly )

[dimitrik129]

[QUOTE=MPan1;50871354]This looks like the perfect thread to spam with posts to do with my gMessage addon. It's meant to be a replica of iMessage. It functions using net messages and supports multiple conversations and all the kind of stuff that iMessage does, as well as image sharing. It started off looking horrible, more like the iPad version:

It looks a bit different now though, I made it look even more like the desktop version. I'll post newer pictures if I get round to it[/QUOTE]

I would suggest more padding in the message area. They seem a bit crammed.

[Potatofactory]

I made a basic location-based HUD that looks pretty decent for now.

Can I get some pointers for the health bar though?

[vid]https://a.pomf.cat/edwirn.webm[/vid]

[lavacano]

How old is the build of Awesomium in Garry's Mod? I'm trying to get my sv_loadingurl page to spin an object around. It works fine in an actual browser, but Garry's Mod doesn't seem to be able to handle CSS3 animations.

[zerf]

[QUOTE=lavacano;50884544]How old is the build of Awesomium in Garry's Mod? I'm trying to get my sv_loadingurl page to spin an object around. It works fine in an actual browser, but Garry's Mod doesn't seem to be able to handle CSS3 animations.[/QUOTE]

Lots of things are broken in GMod Awesomium, but that should work. Can you post your markup/css?

[Rubat]

[QUOTE=lavacano;50884544]How old is the build of Awesomium in Garry's Mod? I'm trying to get my sv_loadingurl page to spin an object around. It works fine in an actual browser, but Garry's Mod doesn't seem to be able to handle CSS3 animations.[/QUOTE]

Wrong question. GMod uses latest awesomium, but Awesomium is using very outdated Chromium.

[dimitrik129]

[QUOTE=Potatofactory;50884246]I made a basic location-based HUD that looks pretty decent for now.

Can I get some pointers for the health bar though?

[vid]https://a.pomf.cat/edwirn.webm[/vid][/QUOTE]

That shade of grey looks horrendous, too much negative space, silk icons do not fit with flat UI or material UI.

[Breny]

Cross-post from WAYWO to get some feedback on this.
I'm not very experienced with Derma nor design but I think it came out okay.

I'm mainly concerned about the top and the color scheme.
I feel like because 'Inventory' and 'Equipment' are longer than 'Trade' and 'Settings', it brings the whole thing off balance.
And while I'm personally a fan of the blue-purple-ish color, I'm not sure if it's a good choice.

[vid]http://a.pomf.cat/wjrjrc.mp4[/vid]

[skullorz]

that is an extremely pleasing design and your color scheme works well with it in my opinion

[YourStalker]

[QUOTE=Breny;50886553]Cross-post from WAYWO to get some feedback on this.
I'm not very experienced with Derma nor design but I think it came out okay.

I'm mainly concerned about the top and the color scheme.
I feel like because 'Inventory' and 'Equipment' are longer than 'Trade' and 'Settings', it brings the whole thing off balance.
And while I'm personally a fan of the blue-purple-ish color, I'm not sure if it's a good choice.
[/QUOTE]

I'm really not a fan of the purple. Also maybe make the backgrounds of the items a darker color to make them pop out a bit more. The header buttons seem kind of dull, also maybe think of changing color for the category you've selected.

[Breny]

Tried a few different color schemes, but I'm awful at this.
Neutral colors seem to be the safest, something like these:

[img]https://facepunch.com/fp/ratings/tick.png[/img] for light greys main and darker tints for text etc
[t]https://vgy.me/TRaipQ.png[/t][t]https://vgy.me/OBskEJ.png[/t]

[img]https://facepunch.com/fp/ratings/cross.png[/img] for dark greys main and lighter tints for text (inverse of above)
[t]https://vgy.me/wa2Qs2.png[/t][t]https://vgy.me/0bL2Cc.png[/t]

[img]https://facepunch.com/fp/ratings/box.png[/img] for :vomit:
[t]https://vgy.me/1lSKGg.png[/t][t]https://vgy.me/k6I8iw.png[/t]

[img]https://facepunch.com/fp/ratings/heart.png[/img] Maybe a combination of colors? Like so:
[t]https://vgy.me/Nvpx9B.png[/t][t]https://vgy.me/NJBPdQ.png[/t][t]https://vgy.me/oqR9St.png[/t]

[img]https://facepunch.com/fp/ratings/rainbow.png[/img] for something else

However, it's very easy to change the colors used.
I'm most likely going to let users chose the palette they prefer.
That said, I think the light greys with a colored top (like the purple) looks nice.

[QUOTE=YourStalker;50886969]Also maybe make the backgrounds of the items a darker color to make them pop out a bit more. The header buttons seem kind of dull, also maybe think of changing color for the category you've selected.[/QUOTE]

When you refer to the item backgrounds, do you mean the actual item 'spots', the category icons or the rarity borders?
I think I want to keep the actual spots on a lighter side to make sure the icon and rarity borders are visible enough.

As for the menu buttons, they do change color and play a sound on hover so that does make them a bit less dull.
I could add an icon for them, but I feel like there are already so many icons on there that it might be too much?

I agree the selected category needs to be way clearer, so I've amped it up a bit.
Let me know if it's better (see above).

[lavacano]

[QUOTE=zerf;50884701]Lots of things are broken in GMod Awesomium, but that should work. Can you post your markup/css?[/QUOTE]

CSS:

@keyframes throb {
        from {
                transform: rotate(0deg);
                margin: auto;
        }
        25% {
                transform: rotate(90deg);
                margin: auto;
        }
        50% {
                transform: rotate(180deg);
                margin: auto;
        }
        75% {
                transform: rotate(270deg);
                margin: auto;
        }
        to {
                transform: rotate(360deg);
                margin: auto;
        }
}

img#throbber {
        display: block;
        animation-name: throb;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        margin: auto;
}

Markup is just an img tag with the ID attribute set to "throbber". No JavaScript involved.

[zerf]

.spin {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Then apply the spin class or whatever you change it to.

[quote][vid]https://dl.dropboxusercontent.com/u/55311295/ShareX/2016/08/2016-08-16_17-22-56.mp4[/vid][/quote]

[dimitrik129]

[QUOTE=Breny;50889518]Tried a few different color schemes, but I'm awful at this.
Neutral colors seem to be the safest, something like these:

[img]https://facepunch.com/fp/ratings/tick.png[/img] for light greys main and darker tints for text etc
[t]https://vgy.me/TRaipQ.png[/t][t]https://vgy.me/OBskEJ.png[/t]

[img]https://facepunch.com/fp/ratings/cross.png[/img] for dark greys main and lighter tints for text (inverse of above)
[t]https://vgy.me/wa2Qs2.png[/t][t]https://vgy.me/0bL2Cc.png[/t]

[img]https://facepunch.com/fp/ratings/box.png[/img] for :vomit:
[t]https://vgy.me/1lSKGg.png[/t][t]https://vgy.me/k6I8iw.png[/t]

[img]https://facepunch.com/fp/ratings/heart.png[/img] Maybe a combination of colors? Like so:
[t]https://vgy.me/Nvpx9B.png[/t][t]https://vgy.me/NJBPdQ.png[/t][t]https://vgy.me/oqR9St.png[/t]

[img]https://facepunch.com/fp/ratings/rainbow.png[/img] for something else

However, it's very easy to change the colors used.
I'm most likely going to let users chose the palette they prefer.
That said, I think the light greys with a colored top (like the purple) looks nice.

When you refer to the item backgrounds, do you mean the actual item 'spots', the category icons or the rarity borders?
I think I want to keep the actual spots on a lighter side to make sure the icon and rarity borders are visible enough.

As for the menu buttons, they do change color and play a sound on hover so that does make them a bit less dull.
I could add an icon for them, but I feel like there are already so many icons on there that it might be too much?

I agree the selected category needs to be way clearer, so I've amped it up a bit.
Let me know if it's better (see above).[/QUOTE]

Did you ever decide what color scheme you are using

[Klaes4Zaugen]

This thread died too fast, bump with shitty content?

Idk about the initial animation, cant word it just feels a bit weird

[t]https://i.gyazo.com/7a85dba806d86a93f6325242779f2610.gif[/t]