5 TIPS for making prettier UI for games, faster. || Resources and Tools for User Interface Design

Подписаться 4,6 тыс.

Просмотров 66 тыс.

50% 1

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: ru-vid.com?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...

Хобби

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@sanketvaria9734 Год назад

btw this site now requires subscription

@FuryPupYT Год назад

Which one

@sanketvaria9734 Год назад

@@FuryPupYT coolors

@OrangeSmilez Год назад

@@sanketvaria9734 why the hell would you pay for something that u can do manually under 3 minutes

@sanketvaria9734 Год назад

@@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.

@OrangeSmilez Год назад

@@sanketvaria9734 you can just use a simple and cool dark ui

@adonicipher7230 4 года назад

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

@AmalieKae 4 года назад

Thanks! : D UI is definitely one of those things that sneak up on you!

@VEOdev Год назад

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

@danishmehmood6382 4 года назад

Great tips. Can't wait to try them myself.

@Krevz 4 года назад

Great tips! Starting a project with the colour palette already decided is really smart and coolors is very useful, thanks! :D

@AmalieKae 4 года назад

Coolors is the best! : D

@michielw.8101 2 года назад

i really needed tip 5, i was stuck but this helped me get a new insight thanks!

@bleachedink 2 года назад

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

@Lexie_T 9 месяцев назад

Great video! Thank you for making and sharing these great tips!

@tatermytots487 2 года назад

Info on game art is relatively scarce, thanks for this amazing video!

@GoodguyGastly 3 месяца назад

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!!!!

@TBGGameDev Год назад

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!

@MinerMovie 2 года назад

This was very helpful. Thank you!

@Bashar3A Год назад

Very helpful. Thanks Amalie

@brightFlaskGames Год назад

Great tips Amalie!

@1KOLYANOS1 2 года назад

Thx Amalia! Your video helped me a lot!

@darrellwillis4871 3 месяца назад

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)

@wolfsbanebloom 2 года назад

This is very useful! Thank you! ^^

@johnsavage3586 6 месяцев назад

Great video, thank you!

@deltondias5161 2 года назад

Thank you. Those tips are very helpful.

@SoundsBy80K 2 года назад

great tips, this type of content is rare ngl.

@brandonbell3133 3 месяца назад

GREAT VIDEO AND BREAKDOWN🎉

@nathansoares3050 Год назад

Thanks for the tips !!

@alexanderkartashov8776 5 месяцев назад

Great tips, thanks!

@OneSievertOfJava День назад

great video, thanks!

@MichoSchmidt 4 года назад

Great tutorial ! I am bad at UI Design

@LifeCodeGame Год назад

Good video! I too want to wing it but should just mock it up first so i guess ill do that XD

@worldofintelligencee Год назад

One of the Best tips Great

@Ferenc-Racz Год назад

Thank you for your helpfull / usefull tips. :)

@deipty222 Год назад

How do you create the different characters/objects/environment when creating the mockups in Figma? Thanks

@DmytroPlekhotkin Год назад

Thank you a lot for the great video.

@Arab_GameDev Год назад

thanks you helped me !!

@SkorpionYassine 9 месяцев назад

Thank u for the information :))

@GabrielGcbs Год назад

Amazing video

@sevennom8721 Год назад

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.

@andrewpullins8817 2 года назад

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.

@samidos7358 2 года назад

what software are u using at 9:30 ?

@fafifafafafifajy7067 11 месяцев назад

Thank you, if I can learn more about UX design that will be better. hehe

@ericpatterson4248 Год назад

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?

@cherry-lp8yq Год назад

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

@RonenGoldstein 3 года назад

so happy you mentioned color blindness!

@grant6821 Год назад

THANK YOU SO MUCH. I LOVE U

@supercc66 Год назад

oh i love too

@ease1appears 2 года назад

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?

@ieatmuchchicken Год назад

If u find an answer please tell

@ease1appears Год назад

@@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!

@harunbahrudin9049 Год назад

Mantap

@adonaiemanuel4686 19 дней назад

nice video

@Havie Год назад

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

@EkramHossain45 Год назад

How to add this UI to the game?

@7tipsmedia 2 года назад

i subscribed Amalie! which game engine you are using?

@c4ss1usplayer Год назад

unity. she says it by the end of the video.

@arcadealchemist 10 месяцев назад

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.