5 TIPS for making prettier UI for games, faster. || Resources and Tools for User Interface Design
Вставка
- Опубліковано 26 чер 2024
- Wondering how you can make easy UI for your video games?
In this video, I share my best 5 (And ½ ) tips for speeding up your User Interface design workflow.
Turns out: The majority of developing games comes down to fiddling with UI. I sure didn’t know this, when I first signed up to be a game dev! But here we are.
Luckily, over the years, UI design has grown on me. And I’ve found a bunch of tools and design principles to help me boost the process.
I hope it helps!
Watch me create my own game from scratch here:
• Soul Shepherd - Devlogs
❤️ Subscribe to stay up to date: ua-cam.com/users/amaliekae?su...
Social Media:
Instagramz: @AmalieKae || / amaliekae
Twitterz: @AmalieKae || / amaliekae
-- TIMESTAMPS: --
0:00 Introduction.
1:08 TIP 1 = Choose your Colour Palette.
4:00 TIP 2 = Know your fonts!
5:40 TIP 2.5 = Lorem Ipsum.
6:25 TIP 3 = Design a Visual Mock-Up
8:18 TIP 4 = Worry about Player Feedback - Not about polish.
9:34 TIP 5 = Look Outside of Video Games for Inspiration.
10:56 Extra Resources.
-- RECOMMENDATIONS: --
Coolors:
coolors.co/
Paletton:
paletton.com/
Google Fonts:
fonts.google.com/
Figma:
www.figma.com/
-- RESOURCES: --
Tutvid - 10 Tips for Pairing Fonts:
• 10 Tips for Pairing Fonts
Design Doc - Good Design, Bad Design (Playlist):
• Good Design, Bad Design
Game Dev Guide - Making UI That Looks Good In Unity using Color Palettes, Layout Components and a Blur Panel:
• Making UI That Looks G...
🎵 Music:
Nomyn - Lightness
Listen on Soundcloud: / lightness
Borealism x [Ocean Jams] - Kill It.
Listen on Soundcloud: / borealism-x-ocean-jams...
Soyb - Sunflower
Via Audio Library Plus: • Sunflower - Soyb | Fre... - Навчання та стиль
btw this site now requires subscription
Which one
@@FuryPupYT coolors
@@sanketvaria9734 why the hell would you pay for something that u can do manually under 3 minutes
@@OrangeSmilez because it requires skills to do it manually. If you are not an experienced artist then doing this manually will never result in good colour combination.
@@sanketvaria9734 you can just use a simple and cool dark ui
I'm a game dev as well and making UI is something I'm struggling with since I'm a developer. Tutorials like this are helpful especially with the colour pallets. Subbed
Thanks! : D UI is definitely one of those things that sneak up on you!
Great tips. Can't wait to try them myself.
Great tips! Starting a project with the colour palette already decided is really smart and coolors is very useful, thanks! :D
Coolors is the best! : D
Thank you for this! Really helps with making more informed design choices right off the bat!
Some other useful design points in helping you make design that's friendly for people with Dyslexia:
- Use sans serif fonts that have well structured kerning (don't use a font that has letters really close to one another)
- Spacing of entire words is important, use tracking to space words apart so that it's clear from the reader where a word starts and ends
- Avoid using only capital letters, it can tend to blend into one another for Dyslexic people
- Softer coloured backgrounds are easier to read on than pure white or black
- Passive style writing is easier to parse with short and simple sentences
- Use of iconography will aid the reader in making sense of the text quicker (i.e a picture of a cog next to settings)
Just a few things and there's waaaaay more theory in this which I'd recommend reading up on at:
www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide
This was very helpful. Thank you!
Great video! Thank you for making and sharing these great tips!
Thx Amalia! Your video helped me a lot!
Very helpful. Thanks Amalie
i really needed tip 5, i was stuck but this helped me get a new insight thanks!
This is very useful! Thank you! ^^
Thank you. Those tips are very helpful.
Great tips Amalie!
Great video, thank you!
Thanks for the tips !!
This video and your channel is so good. I've been struggling with UI because my game is two teams fighting each other as RTS units on Twitch. So like... everyone shares a screen and I've got a whole camera system and everything... like live sports XD
Anyways. Its hard to really know what's most important to the players and you saying to tie it in with the game world really made a flip switch in my head. So yeah. Thank you!!!!
Wonderful video!! I just came here trying to figure out how I could make my inventory UI but I'm leaving with a shift in my crude UI ideology. Thank-you!
I agree about tip 5. I think one of the coolest things somewhat personally was when pokemon in Scarlet and Violet made the shop menu look like a receipt.
Simple, but super effective (badumptiss)
Info on game art is relatively scarce, thanks for this amazing video!
Great tips, thanks!
GREAT VIDEO AND BREAKDOWN🎉
great tips, this type of content is rare ngl.
Thank you for your helpfull / usefull tips. :)
One of the Best tips Great
thanks you helped me !!
Thank you a lot for the great video.
Game UI design is a pain, when I make arcade or hyper casual game I spend time making to UI more than time making the game code ! it is hard to find a good pattern and colors for the game, since games are more colorful and alive than websites and apps, it is easier to design an app or website since they mostly all follow same rules and look the same, but games it change from every game, specially picking the colors it is very hard
Great tutorial ! I am bad at UI Design
Thank u for the information :))
Good video! I too want to wing it but should just mock it up first so i guess ill do that XD
THANK YOU SO MUCH. I LOVE U
oh i love too
Amazing video
so happy you mentioned color blindness!
Thank you, if I can learn more about UX design that will be better. hehe
How do you create the different characters/objects/environment when creating the mockups in Figma? Thanks
I did not do this for my game, but I had the idea recently to add horrible fonts to my game. Like literally Comic Sans. The reason I think this might be a good idea for the prototyping stage of your game and a little beyond is that Comic Sans will stick out like a sore thumb, and you will hate it. Fonts are not a priority in the beginning of the life of your game, but they are very important. But I think sticking with the default font that comes with TextMeshPro can lull you into a sense that that font is good enough. Comic Sans is not good enough, it should never be used, even if you are making a game that is comic related. Though if you are making a game that is comic related maybe pick different font like Times New Romans which you should also not use in your games. The point is to purposefully put focus on something that can easily be overlooked.
nice video
Mantap
what software are u using at 9:30 ?
Thanks for looking out! I have three #videogame #ideas that I'm working on, but I'm seeing that they want children's books or comic books first. Does this make sense?
Do you know where I can find a course aimed at those who want to be UI Artists for games? Because every time I search, I only find a UI Design course for apps and websites, etc.
What software do you use to make game UI and HUD elements? Is Figma a viable choice or it just comes down to personal preference? What's the industry standard, Illustrator?
If u find an answer please tell
@@ieatmuchchicken
Recently I've had an interview and a take-home assignement with a gaming company. And what I've learned and asked them about is: the industry standard for UI in Video Games is Photoshop. The final UI with all of it's animations and such is done directly in the game engine (usually is Unreal Engine). So the final answer is, you can do your UI in any software of your liking, either it be Figma or Illustrator or anything else. But the reason they go with Photoshop above all things is, that they use Photoshop automated scripts to export the UI elements directly into Unreal Engine, in which later on you make the final version of the UI that will be used in the game itself. So if you're a UX/UI Designer trying to make it in the gaming industry, you'll need to learn Unreal Engine besides Figma/Photoshop and the usual software. Hope this helps!
i subscribed Amalie! which game engine you are using?
unity. she says it by the end of the video.
Amalie I have a question do I have to learn game design to be a uxui designer? I'm a uxui designer interested in uxui game design
the UI needs to be sized correctly and information needs to be applicable to left or right eye dominance if you spread information across the whole screen it can be hard to focus if you have deficits also color palet to attract is as important.
How to add this UI to the game?
Being stuck over iterating in the same pice ... yep sound familiar
Hey Amalie 👋🏻 We both have an affinity for black smears / dark painterly UI. Did you make yours? If not - can you link me to the resources . Ty for the video