UI Designing | Resources & Tools | PT.1

Resources Community Tutorials
,
#1

UI DESIGNING | RESOURCES & TOOLS

Directory:

  • Welcoming.
  • UI Explanation.
  • UI Colors & Modern UI Colors
  • Resources (Shapes, Fonts, etc.)
  • 3rd Party Applications.

Welcoming

Hey, UI Designers my name is castizasowner or you can call me Elijah. I’ve been UI Designing for around 2+ years now and over those 2 years, I’ve learned multiple tips & tricks workarounds, etc when creating your user-interface and I wanted to share them. This small tutorial will go in semi-detail into UI Designing this also very friendly for advanced designers as well and not just starters.

UI Explanation

UI (User-Interface) are visual elements it is basically what you see on all the games you play for example the website you are on currently DevForum is all a “UI”.

Using UIS for your game is very useful as it makes the game more functional if you want to promote game passes, game rules, in-game items, etc.

[Examples]

image

image

This would be promoting who has contributed to the game that this UI is in.

For simple terms having UIS in your game makes it more pleasurable to the player that is playing the game.

UI Colors

Color schemes are very important when you are creating your UI. It’s important it matches the game theme.

Why?

Having a good color scheme in the UI and it matches the game theme can attract more players as it gives the eyes pleasure. (Depending on what you are going for.)

Modern UI Colors Topic

I’ve created a model for the people who are interested basically showing off the modern UI colors that a lot of other UI Designers use. (as I prefer using a modern theme for every UI)

Resources

I’ve put together a model of an old UI I made that you can play around with and create your own stuff with it or even use it for a game you are making.

  • You don’t have to give me credit :+1:

3rd Party Applications.

A lot of designers I know use 3rd Party Applications to design UIS either prototype it or fully import it into studio. ( I don’t recommend importing if you use this tactic. )

Designers use 3rd Party Apps as it’s much easier (depending on the application you use) to create UIS or have a prototype.

Opinion
Personally, I think this is a horrible idea. Prototyping a design that is pretty smart but I’d never import it into studio. It’s basically wasting time.

Free Applications

Paid Applications (that I use)

Have a nice day hope this helped :slight_smile:

29 Likes
#2

Ths article does a nice job of categorizing and explaining different ways to go about ui designing and layouts, and just putting things that are scattered throughout multiple articles in one place.

1 Like
#3

Update:
If you guys like this tutorial I plan on working on Part - 2

4 Likes
#4

Everything is very interesting, personally I use Figma and Photoshop to create the interfaces, even so the contribution to the community is appreciated

1 Like
#5

I’d really like to give a shoutout to lunacy. When it comes to free features, it really takes the cake. Its easy to use, learn, and even master. There isnt a single feature that is blocked by a paywall besides the optional cloud service. When it comes to price and other things, id pick lunacy over xd, XD is really good if you are designing for websites or apps, but for games it takes a little bit more work than lunacy.

1 Like
#6

Personally use Lunacy (which is already mentioned) and Inkscape. The UI in this is great but will the next part have some practical advise on how to improve your UI?

1 Like
#7

I’m working on a part 2 to this so you will see new information on how to improve UIS etc

1 Like
#8

I think its good to mention https://material.io/resources/icons

1 Like
#9

I think another good program for UI Designing would be GIMP which is really similar to Photoshop and offers similar features.

1 Like
#10

for the love of god dont use gimp for ui design, I can understand photoshop due to brushes, but I dont think you can automatically allign and change all the properties like you can in figma and adobe XD

#11

Well its your opinion because Gimp is actually great for ui design it even mentions ui design on their website.

#12

Even though I’ve never used GIMP, you shouldn’t be using a piece of software that is primarily aimed at photo editing. Inkscape/Lunacy is your best bet.

Also @ComplexPriorities, Microsoft’s Fluent Design language is open-source [generally hard to find the icons but icons8 has a few of their fluent design icons for free SVG download]. Personally would rather design my own icons so there is zero copyright trouble. I find Figma quite complicated to use anyways and I have not seen anyone perform a gradient effect with that.

#13

I mainly use photopea. Its basically photoshop but website and free. If you cant afford a photoshop plan like adobe etc, I would highly suggest photopea. I also suggest iconsdb
they give a ton of free icons and its honestly just amazing to have

#14

material.io is made by google and is cc0

#15

I know material.io is owned by Google. I didn’t mention it in my reply to you as it is a good source for icons and I wanted to add on that Microsoft’s icons are also open-source.

1 Like