Jump to content

FISD Forum UI Refresh


Harbinger

Recommended Posts

16 minutes ago, Daetrin said:

Actually having been in the military, I still like the new designs. :)   Once the items are complete, I'll go with it.  

 

Just to clarify, I do like the designs. I got my wires crossed and didn’t realise the design was final. My bad. -_-

Link to comment
Share on other sites

2 minutes ago, CableGuy said:

 

Just to clarify, I do like the designs. I got my wires crossed and didn’t realise the design was final. My bad. -_-

No apologies needed.  Nothing is final yet, and everyone should always feel free to share opinions.  Else what's the point of having a discussion board?

  • Like 1
Link to comment
Share on other sites

On 2/22/2018 at 4:18 PM, Harbinger said:

Quick detour to the EIB/Centurion Awards...

 

Expert Infantry Badge

So this one really doesn’t need much, if anything... so what follows is what I’d deem nice-to-haves/suggestions.

 

The changes I'm proposing are:

1.) Lighten the "EXPERT INFANTRY" text so you can read it on the dark gray forum background. At a minimum I would say this is a must.

2.) Tweak the styling to match the new ribbons (shadows, rounded corners by popular demand).

3.) Ditch the cogs on either side of the "EXPERT INFANTRY" text. #1, as part of ongoing FOTK inclusion, and #2 because they are indistinguishable at that size. Also allows more room for text (legibility wins!).

4.) Switch the font to the one used in official FISD merchandise (most notable use is on challenge coins), it's a move towards better brand cohesion AND it's more legible scaled down (the 'R' and 0-9 most notably).

5.) Move the stars inside the EI badge instead of above it. Takes up less space (the current solution leaves a huge gap between awards), and makes it clear the stars are for the EI award and not whatever award sits above it. Also looks cooler (my opinion of course!).

 

Proposed NEW EIB art:

 

mAnKQGu.png  HKgXgKF.png

 

ON48CZN.png  mq5qG7V.png

 

yBWmo6M.png  UEx0kyH.png

 

Centurion would follow suit with similar changes (in progress).

Expert Infantry Badge, Revisited

 

Changes from previous version:

  • Stars moved back to above award
  • DLT-19 replaced with more accurate version from newest hi-res logo
  • Imperial cogs re-added
  • EXPERT INFANTRY text style adjusted (more bling)
  • Gold border adjusted, no more rounded corners

 

zdLTUAs.png  hzN82Q8.png

NAufCoy.png  jnJr4TA.png

 

FWIW, I tried a version with split Imperial/FO symbols but the FO symbol looks terrible at lower resolutions... but here it is for reference:

kiMMWOl.png  r60Zpf1.png

 

 

PS: Above-star spacing matches ribbon star spacing, a change from existing art. I think it'll look better:

oemff0h.png

zdLTUAs.png

 

 

Edited by Harbinger
Link to comment
Share on other sites

Drop Shadows

Here's a quick comparison of a toned-down stroke/drop shadow:

 

oemff0h.png  SDahtqd.png

5TJkHRa.png  KWriLO4.png

 

vs. older version:

 

 

F3PkcIR.png  siGavwb.png

1csrAbA.png  9LpGn7i.png

Edited by Harbinger
  • Like 1
Link to comment
Share on other sites

Attaché Achievement Award, Part III

 

Changes from previous version:

  • Swapped in higher-res handshake (thanks Glenn!)
  • Text color/boldness changes to match EI badge

 

Here is with the darker blue:

uifQhq2.png  iySORkB.png

 

...or with FISD blue:

P61VhuV.png  XXxz2CP.png

 

Darker blue looks better with the olive green (unofficial, official Attache color) IMO.

Edited by Harbinger
Link to comment
Share on other sites

Master Armorer Awards

 

I didn't do a lot here as these are fairly new awards, mostly tweaks so they match the new art style:

  • Font changed to match other awards
  • Stars changed to match new ribbon stars
  • Yellow/gold ribbon color tweaked slightly to match gold of new star

 

QRCFQzy.png  VJbL0VP.png

 

QTFWeWD.png  BU7d1QZ.png

 

eBcawIv.png  JPXMDY2.png

 

 

I can't tell if the old awards were intended to have a white stroke around the laurel leaves, but I put them on because it helps the leaves stand out on the ribbon (especially the darker blue). Here's what it would look like without:

 

o27IRTz.png  sCN1JyW.png

Edited by Harbinger
Link to comment
Share on other sites

Centurion Award

 

Proposed changes from existing:

  • Font switch to match everything else
  • Merged laurels and border into single shape/gradient to clean up design (and help with scaling)
  • Slightly larger text, to help with smaller sizes

 

Proposed NEW Centurion art:

 

8vTYTak.png  0RngKT3.png

Edited by Harbinger
  • Like 1
Link to comment
Share on other sites

Okay, now that everything has had at least one pass, here's a quick mockup of how all the new stuff would look. I'll be using Ukswrath as a real-world example since he has most of these awards (hope you don't mind, Tony!):

 

CURRENT:

ukswrath

Deployment Officer

ukswrath

Deployment Officer[Staff]

team_cmdstaff.png

X,XXX posts

Location:CA

serviceaward2.png
achievementaward1.png
attache_award1.png
expert_infantry_badge3.png
centurion_badge.png
armorer_award_b.png
 
-------------------------------------------------------
New/Proposed:

CURRENT:

ukswrath

Deployment Officer

ukswrath

Deployment Officer[Staff]

G4DApO8.png

X,XXX posts

Location:CA
1amAJUA.png

a9tJxJa.png

iySORkB.png
DWEIksa.png
meNskz4.png
VJbL0VP.png
 
I hope this illustrates one of the goals of this refresh, consistency.
 
Some additional notes:
  • I decided to go with rounded corners for the the user ranks/titles, but am planning to keep everything else square... mostly so the EI/Centurion awards can stay square and it will all match - don't want to change these too much.
  • Spacing between images has been tweaked, hopefully evident above.
  • All art is vector-based, so in the future it can be scaled up/down to any resolution needed.
  • Art is not designed/doesn't currently exist for EIB #10 or above. A solution will be needed when Glen gets there. :P
Edited by Harbinger
Updated Centurion image
Link to comment
Share on other sites

Made some tweaks to the armorer awards to closer match the originals:

GYb9vro.png  BImpP93.png

 

Also made some tweaks to the Centurion type so it feels more like the old one:

j6RQzah.png  meNskz4.png

 

One last suggestion I would like to make, would be to change the ordering of awards in the sidebar so that EIB and Centurion awards go last, with all ribbon-style awards before. This basically amounts to making the Armorer awards appear before the EI awards; this way they are split up by art style/award type, with the EIB space where the stars reside acting as a break. Using Tony again to illustrate - compare to the previous post:

 

ukswrath

Deployment Officer

ukswrath

Deployment Officer[Staff]

G4DApO8.png

X,XXX posts

Location:CA
1amAJUA.png

a9tJxJa.png

iySORkB.png
VJbL0VP.png
DWEIksa.png
meNskz4.png
 
I could even argue you don't need the text under the Attache Achievement Award, and use some mouseover text to do the same job.
 
Everyone (staff included) please feel free to leave your feedback/constructive criticism. I don't foresee any more tweaks on my end, so it's up to you guys.
Edited by Harbinger
  • Like 1
Link to comment
Share on other sites

It's Full of Stars

 

Going though some final polish/presentation of various scenarios, I thought I would break down the star system. Paul, myself and others talked about this briefly in the attache section, but here it is for all to see. The current system stops after thirteen years/stars/levels, but taking a page from real-life military service ribbons, I propose doing something akin to what is done in the military and adding additional rows. Quick example...

 

First year, ribbon and no star:

a9tJxJa.png

Years 2-5, bronze stars:

Ai6BjPm.png

Years 6-9, silver stars:

gCxEbrb.png

Years 10-13, gold stars:

23Wpa0T.png

All of the above already exists in the current art. For years 14-26, I propose adding a second row the same as above. Example, year 14 would look like this:

AgcjW21.png  KcMlCOi.png

(Top row 13, bottom row 1; 13+1=14)

 

At year 27, you add a third row, etcetera. Although I doubt anyone would serve on staff beyond 26 years, we would have the capacity to do so.

 

 

 

As mentioned earlier, EIB awards are a similar system with stars appearing above the logo...

 

The first award has no stars, while #'s two through five have silver stars:

zdLTUAs.png  hzN82Q8.png

 

EIB #'s 6-9 have gold stars:

NAufCoy.png  jnJr4TA.png

 

I propose that for EIB #10 it switches to a 5-star design (as seen on real-life five star generals), and for EIB #11 a sixth star is added (again, based on real military imagery):

uPsu1nr.png  kjSVaSI.png

 

mvet5qw.png  3cTBGcJ.png

 

For EIB awards #12+, I propose that you do NOT add any additional stars (the image caps out at six stars) and just give them FISD kudos for being an insane person. Alternately, you could either make #11 five gold with a silver star in the middle, moving six gold stars to #12 and the cutoff up one, and/or design something if someone ever gets to EIB #12 (or #13).

Edited by Harbinger
Link to comment
Share on other sites

Suggestions - non-award related.

 

1.) Add some more Star Wars iconography to the forum skin, an easy replacement would be the read/unread icons:

1zw0vpm.jpg

 

...or FOTK inclusive version (design credit for split symbol goes to gmrhodes)?:

AeRAV9M.jpg

 

2.) Consider adding the logo/some color to the header?:

0AdIFqI.jpg

(blurry logo because I can't find the new one)

Edited by Harbinger
  • Like 1
Link to comment
Share on other sites

Hey Brien - can we break out the skin updates separately?  I think that may be a place where can chat about themes, maybe a "part 2".  I'd like to get the badges done in one thread so after posting it can archive and we can then tackle the other design elements next.

  • Like 1
Link to comment
Share on other sites

Short: I love the star concept on the EIB :)


For service ribbons (not sure if you want to update that one too), for the stars I'm not overly keen on the double row. Maybe we just mix/match colors like the guide you posted had.  That would get us to 26 or so, right?

Link to comment
Share on other sites

3 hours ago, Daetrin said:

Short: I love the star concept on the EIB :)


For service ribbons (not sure if you want to update that one too), for the stars I'm not overly keen on the double row. Maybe we just mix/match colors like the guide you posted had.  That would get us to 26 or so, right?

You would still need two rows because of the way it "fills" up. If you don't want double rows it limits options to more stars and/or more levels past gold.

 

I could bring over the five/six star design from the EI proposal, which would get us to 19 years:

0KLCHkI.png  YzIRxQk.png

 

 If you want to go that route, I'd suggest making a 20+ award and capping like the EI award images at 11 for the same reasons, don't see a lot of 20+ year service awards being handed out much like I don't see that many people (let's be honest, probably just Glen) getting twelve or more EI awards.

Edited by Harbinger
added mockups
Link to comment
Share on other sites

I think capping at 20 is a fair thing to make a limit too.  For the ribbons, we can use a 4th color to get to 20.  Or, how about a different ribbon for 10 years of service? This way we only have to go to 10 on the regular one.  Also, I can't conceive that anyone would get more than 10 AAMs - right now there are only a few people with 2, and none with 3.

Link to comment
Share on other sites

Personally, I think going to a different ribbon for years 10+ would be more confusing that sticking to a single level-up system?

 

It may be weird that the ribbons have 5/6 star versions in bronze/silver/gold but EI only goes to 5/6 stars for gold (and not the silver ones), and I wouldn't want to change it since it would move the goalpost for a gold EI award. If you stick to the EI scheme where five and six stars are only for gold, you could still cap it at 15 years if that's a good cutoff for you?

Edited by Harbinger
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...