Art: Game UI Design
Join the #1 Art Workshop - LevelUpJoin Premium Art Workshop

Results 1 to 7 of 7

Thread: Game UI Design

  1. #1
    Join Date
    Nov 2012
    Location
    San Francisco
    Posts
    24
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Follows
    0
    Following
    0

    Game UI Design

    Hello everyone. I've been trying to develop some interesting graphic/ video game UI design examples for my portfolio. I finished some icons and now I'm trying to make a HUD. I created the following artwork in illustrator for a personal game project I'm messing with. I wasn't sure where to post this so I can get the most appropriate feedback but the graphic design section seems like the best. I imagine this artwork/ui would be specifically made for a mobile game. I was trying to create something streamlined and simplistic since I think that's what works well with mobile games. I was inspired by the simple UI design of games like Skyrim, Zelda, and some mobile RPGs.

    I'd really like some critiques on the icons and also on the actual HUD/UI elements. Right now I'm debating on whether to turn the simple white borders of the UI into something more intricate and fanciful. I have a question regarding painting in illustrator. The last image I attached is a UI example I found online. I would like to know how they got the borders and stuff to have some much clean and unique detail. Was that done using vectors in illustrator or hand painted using photoshop? So, any thoughts you might have, please let me know. UI work is something new to me.

    edit: added icons image because I forgot to attach the icons sheet. feedback please?

    Attached Images Attached Images        
    Last edited by heyguy; February 17th, 2013 at 11:40 PM.
    Reply With Quote Reply With Quote  

  2. The Following User Says Thank You to heyguy For This Useful Post:


  3. #2
    Join Date
    Apr 2007
    Location
    Brooklyn, NY
    Posts
    305
    Thanks
    50
    Thanked 177 Times in 83 Posts
    Follows
    0
    Following
    0
    The last image is probably hand painted.
    Your elements don't really match with each other. You've got clean, graphic buttons, but cartoonish looking health indicators. You probably need to pick a style and stick with it.

    Please PM me if you'd like an individual crit.

    idrawyouonthesubway
    huxleycreative
    Reply With Quote Reply With Quote  

  4. The Following User Says Thank You to prepsage For This Useful Post:


  5. #3
    Join Date
    Nov 2012
    Location
    San Francisco
    Posts
    24
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Follows
    0
    Following
    0
    Thanks for the comments prepsage. You're right, the elements don't mesh well together. My imagined game would have a simple health system like Zelda so I made simple cartoony health indicators. I should rework that. I wonder if everything expect the health indicators and bag items look too simple? The UI example I posted is great because of the stylized artwork. Since this is for a "mobile" game though, I want a clean, elegant, transparent, non-intrusive UI that doesn't take you out of the game experience. The white border menu and light blue buttons I made look kind of boring. I actually really like the layout/flow/placement of everything but it's just not artistically interesting right now.

    I'll think about adding some color and squiggly lines around the white borders or change the buttons to metal. Oh, and I forgot I also had some icons I also wanted feedback on. They're just fun little vector icons that would be perfect for rewards or whatever on a mobile/casual game. The icons are on top with the other images I posted. I'd appreciate some feedback regarding the icons too.

    Reply With Quote Reply With Quote  

  6. #4
    Join Date
    Apr 2007
    Location
    Brooklyn, NY
    Posts
    305
    Thanks
    50
    Thanked 177 Times in 83 Posts
    Follows
    0
    Following
    0
    Good UI's are about relaying/accessing pertinent information effectively and quickly. Everything else is kind of just icing on the cake. Simple is usually better when you're talking information design.

    I'd approach it in this way.
    Figure out what control actions need to be readily available to the player. (since mobile can make innovative use of gestures & touch for control)

    Figure out & map what information the player needs to be available on the main UI as well as the sub menus (inventory/stats)

    Figure out optimal size for said menus/buttons & layout on the screen.

    Then develop the style that will fit in accordance with game itself and apply it to the UI.

    You've already stated the three factors that you want dictate your design from this point (clean, elegant, transparent, non-intrusive UI). However, you should also keep in mind the type of game this is for (as you said, "that doesn't take you out of the game experience.") since your UI should belong in the game world as well.

    That being said, it will help if you used a mockup of a game screen that is similar to what you're aiming for in the game, and overlay your UI on top to see if the elements mesh together well.


    regarding your icons- I think the thin black outline is distracting with the white outline. Other than that they look good!

    Please PM me if you'd like an individual crit.

    idrawyouonthesubway
    huxleycreative
    Reply With Quote Reply With Quote  

  7. #5
    Join Date
    Nov 2012
    Location
    San Francisco
    Posts
    24
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Follows
    0
    Following
    0
    Great advice prepsage, thanks. I tried to incorporate more "game art" elements into the UI. I came up with a protagonist, some story, game design basics, and a weird world the player would explore a while back so I decided to add a more ornamental, colorful look. The main character would be like this jewel encrusted golden metal automaton knight so I themed the UI a little toward something that would fit or belong to a character/story like that. It's important to me that I still keep like a clean, non-intrusive UI but I don't want it to look too simple, boring or unattractive. Right now, I think the text is looking too simple and boring so I'll have to think of something more interesting. Also, I guess I'll draw out some more stuff instead of having just simple shapes in white. I haven't worked on this as much as I should have but here's an update I'd love some feedback from anyone who has any thoughts on the piece!

    Attached Images Attached Images  
    Reply With Quote Reply With Quote  

  8. #6
    Join Date
    Apr 2007
    Location
    Brooklyn, NY
    Posts
    305
    Thanks
    50
    Thanked 177 Times in 83 Posts
    Follows
    0
    Following
    0
    Love the buttons and the ornamentation on the right. Why didn't you follow through with that design on information screens? Right now you're cluttering those screens with unnecessary elements, but more importantly, elements that don't mesh.
    Name:  attachment-3 copy.jpg
Views: 3018
Size:  214.2 KB

    Please PM me if you'd like an individual crit.

    idrawyouonthesubway
    huxleycreative
    Reply With Quote Reply With Quote  

  9. #7
    Join Date
    Nov 2012
    Location
    San Francisco
    Posts
    24
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Follows
    0
    Following
    0
    I'll remove the elements that don't mesh well. I decided not to make the information screens on the left the same as the artwork on the right because I didn't want to overdo the gold. Since you seem to like the look thought, I'll try and add more gold/silver ornamentation on the left while removing the clutter. I've been searching different graphic design resources and I think I'll change the font and some colors. I'll post something new soon.

    Reply With Quote Reply With Quote  

Members who have read this thread: 8

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •