Author Topic: UI Design and Suggestions  (Read 10958 times)

0 Members and 1 Guest are viewing this topic.

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #15 on: October 11, 2012, 05:41:25 PM »
The existing splash screen background is just a place holder, it can be completely replaced. The same goes for the icons and other graphics I’ve used so far, they just place holders until someone like LB comes along and creates some Pulsar Specific stuff.

Personally i like 8, 12 and 14. i though that the black text in 8 getting brighter as Pulsar loads would be cool for the splash screen instead of the progress bar. Don't know how we'd do it tho.

It's a pity that the Bank Gothic Font is commercial, its the best font I've seen so far. LB's custom font would look good to if it was polished up, how would you create the full font? as a bitmap or would you create a font that can be used by windows? We really need both to be able to use it throughout the project.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #16 on: October 11, 2012, 08:08:57 PM »
I'm not sure how you'd program in a brightness equivalent of a progress bar - if it's possible to overlay images and adjust opacity, I could give a plain and bright version, which could be faded between i. e.  0% progress is 0% opacity on the brighter version, 100% is 100%.  I don't know enough on the programming side of things to know the feasibility of that kind of thing.

Regarding fonts, for the logo itself I can just draw those out in Photoshop.  For a full font, it can be created as a proper TrueType font which could be installed, resized and used as any other font is.  It would take quite a bit more time to do bold and italic variations than it would to just make the regular version.

I've only ever done a couple myself (so I'm not an expert on the matter), but it would certainly be possible to do a sort of "inspired by Bank Gothic" font.  Draw it all out piece by piece (but properly, in a vector graphic program, rather than 10 seconds with a paint tool), but using Bank Gothic as a reference or starting point.  It's completely possible, and of course there's something nice about having a unique font, but it won't be quick to do.  It can quite easily be re-edited though, so a quick and rough initial one could be made which can be improved upon later.  I'm happy to give it a go if you think it's worth doing.
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #17 on: October 12, 2012, 12:30:43 AM »
I'm not sure how you'd program in a brightness equivalent of a progress bar - if it's possible to overlay images and adjust opacity, I could give a plain and bright version, which could be faded between i. e.  0% progress is 0% opacity on the brighter version, 100% is 100%.  I don't know enough on the programming side of things to know the feasibility of that kind of thing.

Thats what I was thinking, it shouldn't be too hard, i'm already fading out the whole form so i can probably reuse that code to do it.

Regarding fonts, for the logo itself I can just draw those out in Photoshop.  For a full font, it can be created as a proper TrueType font which could be installed, resized and used as any other font is.  It would take quite a bit more time to do bold and italic variations than it would to just make the regular version.

Bold and italic aren’t a big issue, the main reason for a regular font is for use in the actual winforms controls, they use system fonts for the text. We'd need something that will work on Windows/Linux/Mac and we'd have to have our installer install it for the user (otherwise nothing will have text on it). the only exception to this is the labels on the System map which are using a bitmap font and rendering with OpenGL.

I've only ever done a couple myself (so I'm not an expert on the matter), but it would certainly be possible to do a sort of "inspired by Bank Gothic" font.  Draw it all out piece by piece (but properly, in a vector graphic program, rather than 10 seconds with a paint tool), but using Bank Gothic as a reference or starting point.  It's completely possible, and of course there's something nice about having a unique font, but it won't be quick to do.  It can quite easily be re-edited though, so a quick and rough initial one could be made which can be improved upon later.  I'm happy to give it a go if you think it's worth doing.

If your willing to give it a go, go ahead. there’s no rush and a rough version is fine for starting point and it would give us an idea of how it looks when used in the UI.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #18 on: October 13, 2012, 05:13:59 AM »
Excellent.  I'll try and put together a upper/lower 26 letter alphabet and numbers, which should be enough to test with.  We can tweak that to your liking, then I can look at adding punctuation, basic symbols and additional letters afterwards.  That might take a couple of weeks depending on real-life work, but I should be able to get the next sheet of adjusted logo bits done over the coming week.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #19 on: October 17, 2012, 12:14:46 PM »
I tidied up the logo lettering a little, and expanded it to a standard alphabet to test.  The upper/lower cases are simply resized versions of each other.  There's no numbers or punctuation yet.

http://i.imgur.com/7CKDH.png (link needs adjusting, sorrylink fixed - Erik)

There's a lot of technical errors in there currently - particularly the fine lines of the shapes, weight of the lines (letter I is too thick, U is too wide), positioning of the letters (see heights of P and T in lower case "captain") and spacing (closeness of WX and MN for example).

Anyway, it should be enough to decide whether that style of writing is to your liking and whether its legible enough as "main" text.  The bit that takes a lot of time is all the fine tuning of the problems mentioned above - so it's pointless to do if the general look, weight and shape of the font is wrong in the first place.

If it's roughly to your liking, then I can carry on refining it.  If it's nowhere near, then give some pointers towards what you're wanting and I'll do a redraw.

It may be we want to remove the "pointy bits" (on P, A, R) for the in-game writing, but leave them on the logo (they don't have to match).  There's also the question of whether we want "proper" upper and lower case, or whether the small capitals style is readable enough.  Also, if we end up with a unique "letter P", there's the possibility of using this alone for shortcut logos etc - I've tested a couple on the right hand side of the sheet.
« Last Edit: October 17, 2012, 12:19:07 PM by Erik Luken »
 

Offline niflheimr

  • Lieutenant
  • *******
  • n
  • Posts: 164
Re: UI Design and Suggestions
« Reply #20 on: October 25, 2012, 05:47:53 AM »
IMO you could increase the weight of numerals - they look a bit thin compared with the other characters. Other than that , me likes!
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #21 on: October 25, 2012, 12:20:10 PM »
Definitely, yes - I haven't touched the numbers yet - the ones you can see are just the placeholder ones (i. e.  program defaults before you've added your own glyphs).  If the general look is okayed by someone, I'll do the remainder of numbers, letters and punctuation and tidy it all up.

As said, the fine tuning takes a lot more time than the initial sketching, so I'd want some confirmation/suggestion/guidance before starting on any of that stuff.
 

Offline Erik L

  • Administrator
  • Admiral of the Fleet
  • *****
  • Posts: 5656
  • Thanked: 366 times
  • Forum Admin
  • Discord Username: icehawke
  • 2020 Supporter 2020 Supporter : Donate for 2020
    2022 Supporter 2022 Supporter : Donate for 2022
    Gold Supporter Gold Supporter : Support the forums with a Gold subscription
    2021 Supporter 2021 Supporter : Donate for 2021
Re: UI Design and Suggestions
« Reply #22 on: October 25, 2012, 02:27:25 PM »
My 0.02 credits.

The A bothers me a bit. Maybe if it were slanted so the right leg was vertical? Dunno. Maybe it's just me.

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #23 on: October 25, 2012, 04:02:46 PM »
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.
« Last Edit: October 25, 2012, 04:11:04 PM by Erik Luken »
 

Offline Erik L

  • Administrator
  • Admiral of the Fleet
  • *****
  • Posts: 5656
  • Thanked: 366 times
  • Forum Admin
  • Discord Username: icehawke
  • 2020 Supporter 2020 Supporter : Donate for 2020
    2022 Supporter 2022 Supporter : Donate for 2022
    Gold Supporter Gold Supporter : Support the forums with a Gold subscription
    2021 Supporter 2021 Supporter : Donate for 2021
Re: UI Design and Suggestions
« Reply #24 on: October 25, 2012, 04:17:13 PM »
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.

#4 I think fits the best. The vertical leg just moved the imbalance to the other side :)

Offline ThatBlondeGuy

  • Warrant Officer, Class 2
  • ****
  • T
  • Posts: 56
Re: UI Design and Suggestions
« Reply #25 on: October 26, 2012, 11:06:56 AM »
Personally I think #5 fits the best (assuming 1-5 top through-bottom) because of the angles in the other letters carry through the angular top of the A.
 

Offline sublight

  • Moderator
  • Captain
  • *****
  • s
  • Posts: 592
  • Thanked: 17 times
Re: UI Design and Suggestions
« Reply #26 on: October 26, 2012, 12:34:10 PM »
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.

The original 'A' formed a wedge that seemed to visually push characters right of itself away. Of the revised fonts I like #5. The only other variant I can think to try is using the original 'A' with the same right-leg ending as the 'R' to make just the tip a vertical edge.

All in all the font seems to offer a distinctive flavor that should look great on titles, labels, and logos.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #27 on: October 27, 2012, 11:51:08 AM »
Yeah, such wedge-like spaces are quite common in a lot of fonts with certain letter combinations, but it's particularly noticeable in this case.  You'll often spot it in pairs like "AV" and "WA", which often need to overlap their spacing slightly to appear correct to the reader.  One of the slow latter stages of fine tuning the font is setting up "kerning pairs" to manually adjust these gaps between specific pairs of letters

Anyway, I'll test the variant/suggested "A" shapes and start refining the existing letters and adding the numbers, punctuation and foreign letters, then do another run through the draft logo bits.  I should have some time during next week I think.
 

Offline ardem

  • Rear Admiral
  • **********
  • a
  • Posts: 814
  • Thanked: 44 times
Re: UI Design and Suggestions
« Reply #28 on: October 31, 2012, 08:52:42 PM »
Hey guys,

Here to offer my services. I am not a real artist, however I am a 3D modeller and texturer and done stuff for a couple of MOD projects in the past. I use Maya to create this, now if it for an image for an icon, or something bigger like a splash screen it is something I can do.

These are a couple of small examples that I have online at the moment, I do have a 1/2 complete tank somewhere but been over two years since I done work purely cause nothing has interested me.

A number of the models I did in this game or have a leading role in the rest. (aka ViViD in the credits)

These are very basic examples of other work but only what I have on my work pc for now.
https://dl.dropbox.com/u/4316559/3D%20Work/PIV_SideHatch.jpg
https://dl.dropbox.com/u/4316559/3D%20Work/panther_muffler.jpg
https://dl.dropbox.com/u/4316559/3D%20Work/Towcable.jpg

As you can see a lot of these component when to making a tank, but the project got canned early on, I do have a video of a semi completed tank, however even so happy to provide 3D Art if needed.


« Last Edit: October 31, 2012, 09:23:53 PM by ardem »
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #29 on: November 24, 2012, 11:45:51 PM »
Its been a wile, but i have finally finished converting the winforms UI to use DockingPanelSuite. It really changes the Look/Feel of the UI and its a lot cleaner.

I have put in LBs Font, its very rough being baesd on the Sample sheet he provided, but it looks good so far (see attached).

Going forward I could really use some proper button icons for the Tool strip and System map buttons. Also, LB, if you could do up a proper sprite sheet with you font layed out including Numbers that would be great (the letters need to be white on a transparent background).