Jump to content
AJAX

HUD / UI Design Visual Concepts

Recommended Posts

Here's just the beginnings of something I decided to do in my own time... Please read the following notes before replying. 

 
Notes:
 
  1. I understand the UI that's currently in place is just placeholder.
  2. I have never played PR or Squad (yet) so I don't have a full understanding of what is needed in the UI... I've mainly just used reference from YouTube videos.
  3. I did this purely as a personal challenge/project as I had never designed this kind of thing before (UI design). I wasn't even going to post it up here but then thought - what the heck!
  4. I'm not a professional UI designer - there are people out there that specialise in this kind of thing.
  5. I'm also not a professional iconographer... I didn't spend a particular amount of time on the icons.
  6. There are also specialised cartographers. I just used a terrain image from the web for this exercise.
  7. If there are others out there that can improve or contribute to the ideas - please do. Make sure to post it up and show the goods. I might learn a thing or two and I'll even give it a shot to better your version if I can - I'm only new to this... practice makes perfect.
  8. The developers are 'free' to use any stuff I post up here - it's just a little side project.
  9. Constructive critism only please.
 
With all that off my chest, this initial concept is to visualise an extended map which covers the whole screen -  the battlefield or gameplay region is just a part of this which is highlighted (as per normal). That way the player thinks they're in a 'region' (be that still a square area) of a much larger area of the world where the conflict is taking place.
 
Another goal was to retain the yellow/grey/black/white branding on the logo/website. This should be taken into account across all UI (my thoughts).
 
To join games the icons are indicated on the left column UI rather than big ugly buttons (in PR). Red = leave, yellow = join and greyed out = full.
 
Each team member has an icon which indicates their role (this is nothing unusual and I think is already done in PR). Icon ideas were taken from the Boot Camp Introductory Series located here:
 
Squad_Map_zpsdhgzl7e8.jpg
 
More to follow as I progress...

Share this post


Link to post
Share on other sites

Solid work mate, I'm loving the colour scheme and layouts. The map has a very nice contrast that balances the whole thing. Simplistic and concise!

Share this post


Link to post
Share on other sites

Following is a Role Selection concept. The character model is from Battlefield as I couldn't find any Squad character reference images that weren't in game.  The rest I think is pretty self-explanatory (I hope). Also did a mild update to the map above. Note: It's best to click on the image and then enlarge it to 100% size to get all the details.

 

Role_Final2_zpssjj0frdt.jpg

 

More to come as I progress...

Share this post


Link to post
Share on other sites

Whoa, that UI looks smooth and pleasing on the eye! You dont think its too CoD/Battlefield do you?  :)

 

Agree mate - definitely hints of it. Can't pinpoint exactly where I've seen the yellow/blacks palette as well but it's familiar (could be COD?). Weapon line illustration idea was nabbed from BF but that style has been done to death in other games as well.

 

At the moment, I'm just trying to get a feel for it, put a few screens together (maybe a couple more), then look at them as a group and go back and rethink it and develop it further.

Share this post


Link to post
Share on other sites

At the moment, I'm just trying to get a feel for it, put a few screens together (maybe a couple more), then look at them as a group and go back and rethink it and develop it further.

 

Keep going, its great work! :)

Share this post


Link to post
Share on other sites

Can't pinpoint exactly where I've seen the yellow/blacks palette as well but it's familiar (could be COD?).

Call of Duty: Advanced Warfare. Pretty set of colours though.

Share this post


Link to post
Share on other sites

Hmmmm...you don't say. This is lookin' pretty shwank if you ask me, nice work.

Share this post


Link to post
Share on other sites

I really like it, OP. A suggestion for any UI: I think a mic icon next to squad members names would help too. So you can see before joining a squad if it has people with detected microphones. It wouldn't add too much clutter and would be helpful. 

Share this post


Link to post
Share on other sites

LOVING the color palette, dood. Looks really, really good! I could easily see myself using this. Good job! Looking forward to more.

Share this post


Link to post
Share on other sites

nice colour scheme and layout. I really like this. Great work!

Share this post


Link to post
Share on other sites

I like what I see, but aren't you guys a little worried that it looks too much BF2?

I think it's good because it's not drastically different. If you've played PR you are right at home. If you haven't it's still a good and welcoming UI.

Share this post


Link to post
Share on other sites

Dude fuck no, this is gold. Just gold, dont doubt it. Solid clean looking design, very nice overview and pleasing to the eye. Awesome shit.

Share this post


Link to post
Share on other sites

It definitely gives off a Battlefield vibe in a Squad color scheme, but many of your UI elements are just well done.

For someone who's never done this before, you're doing it pretty damn well.

Share this post


Link to post
Share on other sites

Nice job, funny enough I was working on something along those lines as well in my free time :D

 

Some input from my side if you don't mind:

  • I think the UI would greatly profit from more font heirarchy, for example on the Squad selection right now it's all the same font size and same font weight, you could try to experiment with font sizes here to get a heirarchy of elements going
  • I think clickables could use a bit more affordance to distinct them from headlines or other elements in that font
  • When I do UI design I try to get rid of redundances where possible to clean up the UI, a possible way to do this is showing only things that are "different", for example on the Squad screen you could show the "lock" icon only there where it is really locked, which would get rid of a lot of icons
  • For the Role selection I think the users' eye could use a bit more steering, the main role selection is on the left and all of the role information is on the far right. On big screens this is quite a way "to go" for the eyes especially if you want to quickly flick through the different classes to check the equipment etc.
  • I also think the role selection could be nicely incorporated into your Squad/Map screen, since you already got the tabs nicely there for it, which would also help streamline the navigation in that menu.

That said, all the stuff I experimented with until now lack in quality next to your design, good stuff!

Share this post


Link to post
Share on other sites

Nice job, funny enough I was working on something along those lines as well in my free time :D

 

Some input from my side if you don't mind:

  • I think the UI would greatly profit from more font heirarchy, for example on the Squad selection right now it's all the same font size and same font weight, you could try to experiment with font sizes here to get a heirarchy of elements going
  • I think clickables could use a bit more affordance to distinct them from headlines or other elements in that font
  • When I do UI design I try to get rid of redundances where possible to clean up the UI, a possible way to do this is showing only things that are "different", for example on the Squad screen you could show the "lock" icon only there where it is really locked, which would get rid of a lot of icons
  • For the Role selection I think the users' eye could use a bit more steering, the main role selection is on the left and all of the role information is on the far right. On big screens this is quite a way "to go" for the eyes especially if you want to quickly flick through the different classes to check the equipment etc.
  • I also think the role selection could be nicely incorporated into your Squad/Map screen, since you already got the tabs nicely there for it, which would also help streamline the navigation in that menu.

That said, all the stuff I experimented with until now lack in quality next to your design, good stuff!

 

Of course I don't mind - happy to bounce ideas off others, even if they're just wire frames or alternate designs from other designers. Heck, I'm happy to give my PSDs if somebody needs them as well (it's only a side-project). Points definitely noted... I'm still trying to get into the mindset, we can all make things look pretty but there's a lot more to it than just that.

 

Anyway - have been playing with an alternate approach, however this is just an early stage. Seems to be far more clearer with the big tabs up top and any secondary button/menu at the foot. Thoughts?

 

squad_role_tabbed_v1_zps2u0a5veq.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×