UI and icons

8 posts / 0 new
Last post
TheInternetJanitor
Offline
Last seen: 1 month 2 weeks ago
Joined: 05/11/2018 - 06:00
UI and icons

I saw some of the quality design of CoX's UI and icons brought up on CoH reddit recently and it reminded me that we haven't seen much of the CoT UI yet.

One of the great things the old game did with icons (especially power icons) was use similar symbols in them so it was obvious at a glance if a power was a template, pbaoe, heal, debuff, attack, etc.

This was done using not on the central symbol of the icon but the borders as well. Once the basic symbols were understood it made it easy to understand the basic concept behind any power with a quick glance at the icon. Colors were used to quickly tell the player what power set the ability was from as well.

I would love to see quality UI design touches like that in CoT.

Cobalt Azurean
Cobalt Azurean's picture
Offline
Last seen: 2 hours 22 min ago
kickstarter11th Anniversary Badge
Joined: 10/03/2013 - 16:39
I think when I first started

I think when I first started becoming active in the CoT forums, we had a discussion about the UI... let me see if I can find it.

Found it: https://cityoftitans.com/forum/help-development-ui-style

TheInternetJanitor
Offline
Last seen: 1 month 2 weeks ago
Joined: 05/11/2018 - 06:00
Thanks Cobalt!

Thanks Cobalt!

That mostly talks about the aesthetics of the UI in other ways, but I think one person does briefly bring up how CoX used the UI to convey information efficiently.

As for aesthetics I would love to see the UI incorporate many of the features I think CoX did well. Subtle backgrounds in menus that added style but were not immediately obvious so they didn't distract your eyes. Clear borders and outlines along with the color choices made everything pop. It also looked more "comic book" than video game and didn't lean towards any specific theme (magic, scifi, etc).

Tannim222
Tannim222's picture
Offline
Last seen: 2 hours 18 min ago
Developer11th Anniversary Badge
Joined: 01/16/2013 - 12:47
There is a little bit of our

There is a little bit of our iconography found in our last update on Augments and Refinements.

While those are for socketing into your powers, it shows that we are aware of having a cohesive visual language in our power icons.


I don't use a nerf bat, I have a magic crowbar!
- Combat Mechanic -
Tech Team.
TheInternetJanitor
Offline
Last seen: 1 month 2 weeks ago
Joined: 05/11/2018 - 06:00
Oh, thanks Tannim!

Oh, thanks Tannim!

The bit of the UI shown off there seems like it captures everything we were talking about. It really looks great!

Planet10
Planet10's picture
Offline
Last seen: 14 hours 8 min ago
Joined: 03/23/2016 - 17:21
There was also this thread >>

There was also this thread >> Discuss: Your Input - Icon Shape
And that reminds me we need to dig up the NIMBUS horse and beat it a bit to see if things have changed.

avelworldcreator
Offline
Last seen: 5 days 8 hours ago
Developer11th Anniversary Badge
Joined: 12/04/2012 - 12:19
It has been a while since

It has been a while since this topic has come up. That reminds me to bring it back elsewhere.

-----------

Senior Developer/Project Manager/Co-Founder,,, and then some.

Redlynne
Redlynne's picture
Offline
Last seen: 8 hours 52 min ago
kickstarter11th Anniversary Badge
Joined: 10/28/2013 - 21:15
Friendly reminder for anyone

Friendly reminder for anyone who missed the previous thread on this subject (almost 2 years ago) ...

LINK

Redlynne wrote:

Okay ... so here we go again. This time, I'm doing a mix of shapes relying on multiples of 45º and 60º (hence the underlying circle around octagon and clock face pics, respectively) so as to make the arc lengths and positioning very obvious. Ignore all of the black lines and just pay attention to the placement of the purple lines I've drawn on instead.

Alright, one more time ... from the top ...

  • Single Target (45º arc)
  • Cones (120º arc)
  • Target Volume of Effect (staggered 45º arcs)
  • Point Blank Volume of Effect (360º arc)

  • Player Only and Miscellaneous Icons (empty Nimbus with no arc)

  • Summons or Drops (45º arc)
  • Summons or Drops, Volume of Effect (120º arc)

156x156 scale (for easy visibility of what I'm doing)

. . . . . .

52x52 scale

. . . . . .

Looking at just these "bare bones" craptacular versions of the basic idea I've been blathering on about for some time now, I will freely admit that Fireheart is right that a 4 Corner rather than a 3 Corner arc version of the Target Volume of Effect does look better. It helps to better differentiate and disambiguate the different types of Power Effects that the Nimbus is intended to convey. The only real "price" that you have to pay for that clarity is abandoning an exclusive use of either a hexagon or an octagon as the "guideline" for how long the arcs around the circle ought to be, which honestly isn't that steep of a price to pay.

Izzy, if you want to do another quick mock up set for everyone to see, that would be most kind.

avelworldcreator ... I figure this right here will probably be the last you'll hear from me on this subject, since it feels like this current structural alignment of visual language for Icon and Nimbus Shape has been honed about as far as is practical on my part. After this, it basically comes down to Implementation on your end.

Tannim222 ... unless I'm missing some category of Effect Shaping that you guys had planned internally and never told us about, I figure that this setup of circular Icons and Nimbus Shapes ought to be able to handle pretty much anything we'd be expecting to see based on past experience(s) with City of Heroes. If you need something else thrown into the mix, you're going to have to tell me these things so that I can include them!

Doctor Tyche ... sorry about the mess. I'd like to think I left most of the sand in the sandbox where it belongs. Really appreciate the invitation to come over and play at your house. *^_^*

LINK

Redlynne wrote:
Izzy wrote:

39% (52 pix'ish)

100%

Beautiful as always, Izzy.


Verbogeny is one of many pleasurettes afforded a creatific thinkerizer.