Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Tutorials on UI Design?

Discussion in 'Game Design' started by Shack_Man, Oct 24, 2019.

  1. Shack_Man

    Shack_Man

    Joined:
    Jun 7, 2017
    Posts:
    184
    Once again I'm realizing that I suck at making a decent looking UI. Are there any tutorials that you can recommend, preferably for Photoshop? Could be anything from visual composition (I know that learning about it in general will benefit my UI design skills, but it would be great to hear things rather specific about UI), or things like how to make textures. I know there are quite a lot of texture tutorials out there but they all seem to aim at a realistic style and might not work very well in a rather stylized game.

    I think for now I'm just going to fire up some games, take screenshots and copy the good looking ones.

    Thanks
     
  2. Olmi

    Olmi

    Joined:
    Nov 29, 2012
    Posts:
    401
    I'd like to think the old logic that form follows the function is the most important, when designing something.

    Don't make an annoying artsy interface that is hard to use. Instead, all the buttons (placement, size) and texts etc. should relate to the actual function your interface has, which is to let the players navigate as easily as possible and focus on the game.

    So definitely don't waste much time on artistic final result details like panel trims, bevels, font colors, art style etc., but try to first create wireframe sketches of your interface, how the menu screens/states flow from one to another and so on.

    After this is clear to you and you've built a working proto of the interface, then it probably becomes obvious how it should look like.

    When it's time to start picking colors/produce actual graphics, maybe google some basics of color theory for user interfaces and visualization, try to consider how the human visual perception system works and what it's constraints are. i.e. don't use muddy colors, instead, use enough contrast, don't use strong patterns behind things you are supposed to be able to read easily and so on. You can also guide the viewer's eye with colors that pop out (for example, have bright color like red as indicator for the most critical thing like exit menu.)
     
    Last edited: Oct 24, 2019
    Shack_Man likes this.
  3. Martin_H

    Martin_H

    Joined:
    Jul 11, 2015
    Posts:
    3,926
     
    TonyLi and Shack_Man like this.