,

Game UI – Quick Tips for Quick UI

Sometimes you may be put in the position to create a fast good enough UI for a prototype. Here are some quick tips for getting started. First I will assume you already have an idea of what screens you will need, if not maybe write down some notes of screens you will expect to need…

min read

Crafting in Animal Crossing

Animal-Crossing-New-Horizons-UI_Crafting

Sometimes you may be put in the position to create a fast good enough UI for a prototype. Here are some quick tips for getting started.

First I will assume you already have an idea of what screens you will need, if not maybe write down some notes of screens you will expect to need (Menu, inventory, action buttons, etc). There is a popular thing UI/UX designers do called crazy 8’s to generate some quick ideas for screens. Simply fold a piece of paper into 8 slices by folding it in half, and repeat folding in half 3x in total. Next set a timer for 8 minutes, and spend 1 minute drawing the idea of what the screen could look like per square. It’s just a way to generate ideas so don’t spend too much time here. You can likely skip this step and come back to it later after some inspiration if you need to or skip it completely if the next step is all you need…)

1) Look for UI assets first

Don’t reinvent the wheel unless you have time to. Look in the Unity Asset store and see what is available first, there is a considerable amount that you can use as a starting point and it can save you time.

You can mod free assets like “3D Modern Menu UI” and save some time

In no particular order here are a few free assets to check out, you can look for UI and GUI

You can also use some free tools to create UI (Shapes2D – Procedural sprites and UI)

For more custom controls & UI, I recommend the Lean series (Lean GUI – Free) there is quite a lot of free stuff you can work with if you check out the rest of his work

There are tons of great paid assets too, I’m not going to make a long list but I have a few I recommend.

2) Get Inspired

Well, if you have browsed everything on the store you may realize they don’t have what you are looking for! That is where you find yourself needing to either mod UI from one of these packs or create it from scratch.

Either way, you will likely need some inspiration. Check out GameUIDatabase to get some ideas on design work.

Great place to reference screenshots of UI.

I recommend for your project to pick 3 games in the theme/style/genre you going for and grab screenshots of what you will need.

You can also consider layouts by sites like Mobbin even if they aren’t games, they still can have cool ideas on how to approach something so don’t be afraid to use outside resources.

What if you can’t find inspiration?

Well, time to do stuff the old-fashioned way!

Look up real-life items that fit your theme, be it books, menus, postcards, scrolls, or other things, and reference that…

You can also try and use art generators be it with templates or AI and see if that gives you something you can work with.

AI can do so much now

3) Copycat er…. Steal like an Artist*

Do you see some elements you want? Copy them and combine them. Then tweak 3 things about them – shape, color, and layout or proportion. You’ll find you end up with something professional that looks a little different than the original.

“Every new idea is just a mashup or a remix of one or more previous ideas.”

Austin Kleon

I often do this for UI elements and I tend to find I also have to change up the shading to match my style.

At this point, you’ll likely need to start prototyping some aspects of it and test if it’s readable.

Here is some UI I quickly built in Affinity Design and Unity

From here you need to ask people some quick questions:

  • What do you think this is?
  • Can you tell me what it’s for?
  • How or would you interact with it?

These often let you know if something is understandable at a glance. I’m not going to go into shape or color theory or elements of design but they are good to know.

Wrapping it up
And that about covers it, I don’t talk about wireframing or spending a lot of time planning your idea out.

I tend to work in short iterations and I’ve found the idea of spending too much time working on deciding a font or particular style can be a problem until you have cleared a few practical use cases.
  1. Test your font in a paragraph, title, and with a small screen. Does it work in all three cases? Should a more decorative title be used? Sometimes templates for that can be found free online but they tend to not be good with particular backgrounds… Does this text work okay on different backgrounds?
  2. Does the system support this font? This is particularly a problem with multiple languages. You may need to either do additional testing or use multiple fonts depending on how much space you have.
  3. Block out quick ideas with a set color scheme to see that it emphasizes the right sections. There are tons of color schemes available online though it’s often fastest just to grab colors from concept art, your own art, or photos you like. Sure you could spend extra time telling a story with color but if the UI is not as important as other elements maybe it should be simplified as much as possible. Whatever the case, it’s up to you as the creator to decide how much attention you want to draw to the UI.

Blocking out the ideas above quickly 👆 Ultimately I combined a bunch of ideas.

This took just a few hours and will get faster the more resources and experience you have. The longer the project the more you should consider each use case of the UI, this project was very simple so a few hours is fine but complex projects can take a month+ to feel good and may change even further after some iteration and feedback. Additionally, if pieces of your UI are procedurally generated art from code you will likely need additional iterations so keep that in mind.

Leave a Reply

Your email address will not be published. Required fields are marked *

Ashley Hooper