Hi, I’ll be covering how to make great UI for your game! I’ll be guiding through the steps.
(Sorry, I don’t do good introductions lol)
1. Planning your design
Here are some questions you want to ask yourself:
- What is the theme for your UI? (Modern, vintage)
- What emotions do you want your users to feel? (Comfortable, energetic)
- What are some aspects you want your UI to show?
When planning UI, you always want to consider your users first, and their needs so that your UI can be properly used!
There are also somethings that you want to consider in your UI. This is a great transition into, User Journey !
Your user journey is the journey of your user from the landing/home page until your user reaches the goal of the UI. You want this to be as short as possible. Here are some tips:
- When designing an application or pages for the application, what is the purpose of the application/page? Don’t bombard the user with unnecessary information, especially on a landing/home page.
- Use a lot of whitespace. This helps the user determine what is important, while making the UI look clean.
- Make everything as accessible for the user as possible, don’t make them hunt for things.
Here’s an example:
UX/UI is always about the user, and you should make it as accessible as possible!
2. Intro to Design Languages
In order to sketch what you want your UI to look like, you need to know what to sketch.
Design languages are what helps to keep designs uniform and good-looking. Some examples are Material Design 3, and Fluent Design. Material Design is the best IMO (created by google, you can find it in a lot of applications like Gmail), and Fluent Design (created by Microsoft, you can find it in applications like Microsoft Office and Windows).
Intro to Material Design 3
The original philosophy of Material Design is to take previously familiar objects such as Paper and Pens to UI, and a deep usage of shadows and light to create visual hierarchy. For example, the "Ink/Ripple" effect?
Ink is used to replicate Ink spreading on a paper, the effect you get when you put a pen on paper for too long.
Material Design 3 brings new aesthetic details while bringing better accessibility.
Check out Material Design here, or check out Material Design components here.
Don’t forget that this is simply recommended! If you can’t find a design language that goes with the aesthetic of your game, skip this!
3. Sketching your UI
Almost to the fun part! Take in your original answers to your question in the first part, and quickly sketch what you want your UI to look like. Please don't worry at all about how pretty it looks, this is just meant to be simple lines to represent the layout of how you want your UI to be. Don't use any colors yet! Remember to always design for your users, and while designing think into the brain of your users. Here's an example wireframe I quickly found online:
Notice how for images, they make an X, and for text they draw straight lines.
After your down sketching, I’d recommend you list one reason why that design will fail. This will force you to iterate your feedback.
4. Bringing your design to life
To start, we will need a web application called Figma. It's free—you should sign up! It's used to prototype your UI. (a reminder that there are other apps, personally Figma is the best)Once you sign/log in, click “New Design file.” In the top left corner, click the icon that looks like a #. Play around with shapes, lines, and frames, and you’ll soon get the hang of it!
In order to get the best out of Figma and Material Design, there are some resources you should get.
Material Design Figma Components | Material Design Theme Builder
There are also numerous of other resources like this which make your life 10x easier.
Components are great because they allow you to prototype faster! You can simply copy and paste components to make your UI look beautiful and fast to make.
4.1 Colors
Colors are a very important part in UI. Material Design makes it easy with their latest Material You color theme builder, generating palettes that are accessible yet beautiful! In order to properly use Material You palettes, I suggest you visit The Color System.If you wish to not use Material Design, remember that you must keep text and colors legible and accessible. According to Color Contrast | Digital Accessibility, “aim for a 4.5:1 ratio between the foreground color (e.g. text, links, etc.) and the background color.”
Remember that your primary color should be designed to gain attention, and should be used only when attempting to gain the users attention.
4.2 Icons
Icons are very important as they direct the user to things while not giving up screen real-estate. It is important that you use icons that directly explain what the icon is attempting to show.4.3 Motion
Motion is an extremely important aspect of UI design. It makes the platform feel expressive while also having other benefits. You can use motion to give the user a reward for important steps in the user journey, and in a Material Design Blog, they said that container transform animations give visual hierarchy, making it feel like the container is jumping out towards the user. Please don't attempt to do cross-fade animations, as they make the interface feel weird. Instead, perhaps make an accessibility setting for reduced motion.To learn more about this very important topic, please visit Transitions – Material Design 3, but for more general information about animations, please visit Understanding Motion.
4.4 Typography
Typography is important to not only give your design a polished look but also display to your users the importance of one group of components/text vs another by using, for example text size.4.5 Responsive design
You want your design to feel snappy, and intuitive. You can do this by not only animating on MouseClick, but also on MouseEnter. Give immediate response for when the user does an action.Finally, understanding UX
UX is the experience of your users while using your UI. If there is good UI, but the UX is trash, then your design will fail.I’m sorry for this being a bit basic, and missing a lot of stuff but I hope this opened your eye up!