I like to call User Interfaces the Crown of games, mainly because it’s the first layer on top of everything else(parts, post processing effects etc.) We all know that studio’s current tools for designing interfaces is pretty limited, so we must resort to a third party software/service like Pinterest and Adobe XD that can fill in the gaps.
• What is Pinterest?
Pinterest is a social platform which makes discovering information on a global scale using images. Pinterest also makes it easier to pull together designs for almost anyhting including user interface designs, building designs, clothing, music, art and so much more!
• What is Adobe XD
Adobe XD is a vector based tool used for designing/prototyping user interfaces for websites mobile apps and other platforms. Adobe XD can also be used to design logos, symbols and vector art.
Your game interface such as the menu that will always stay on a player's screen needs to be made in a way that will impress your players because having a cluttered game menu could lead to players losing interest in your game quickly. A user interface concept needs to meet each and everyone of these principles:
Usability
Your interface is responsive to any form of interaction.
Navigatable
Navigating your interface has to be seemless and effortless. Don’t make it a maze just to find where the store is, where a setting is etc.
Desireable
The design of your interface is clean with no excess materials and appropriate for your game’s style.
• Creating/Finishing a Concept
As soon as you’ve logged on to Pinterest, you can either seach “UI Design” or “UI” or the specific UI element that you need a basis from.
Let’s take this UI element as an example
Source: https://www.pinterest.com/pin/569494315359434179/
However creating this in studio would seem like a nightmare without the proper tools, shapes and resources, so let’s start designing in Adobe XD.
Utilising Adobe XD for designing UIs will open infinite possibilities for designs and choices for your design. You can adjust and modify to your heart's desire, make revisions in any area that seems unrefines and even test your design in realtime with your phone or computer.
• Designing a Concept
As soon as you’ve opened Adobe XD, go to the list of screen sizes and select the “Web 1920” as seen below:
You may also use other screen sizes in the future when designing UI for mobile devices or smaller screens.
After clicking on Web 1920 button, this screen will open
Go to the top of the window and click the arrow pointing down (beside the “Saved” indicator) and the screen below will show up:
Name your document as you wish, but if you are OCD with format, just name your document as so
GAME_NAME User Interface - Concept 1
and click save.
Back to the canvas, remember the toggle I posted earlier in this post? I will be creating a similar design in Adobe XD.
• Designing a User Interface Element
Taking things slowly, each individual UI element should be designed carefully for an equal design through out the interface.
So first off, zoom into any part of the canvas and create a rectangle by pressing R on your keyboard and clicking on one point and dragging.
Go to the right side of the screen and change the size to Width 150 and Height 80 as seen below:
Scroll down and you will notice the “Border” setting, turn off the border. You will also notice the rounded rectangle just under the opacity slider, click the first rounded rectnagle and set the number at the very right to 40 to make the rectangle rounded.
It should look like this:
Next, create a circle by pressing E on your keyboard and doing the as creating a rectangle. Make the size of the circle 70 x 70 and turn off the border. Make the fill of the circle the same colour as the beige background.
You can create the beige background by creating another rectangle and making the fill colour anything you desire, make the background layer unedr the rounded rectangle’s layer by dragging the shape layers than can be found by going to the bottom left of the Adobe XD window and clicking the very bottom button as shown below:
(The button in blue)
And this panel will show up:
Drag the background rectangle under the rounded rectangle so that the background won’t overlap the toggle.
As soon as you’ve created the cirlce, your toggle should look like this so far:
Now duplicate the beige circle by selecting it and pressing Ctrl + D and dragging it to the left. Make the fill colour of the circle you just duplicated something other than white or just leave it as is. and your toggle should look like this:
Designing UI Symbols
Creating symbols on Adobe XD is fairly simple, but to make it even more simple, we have to improvise.
• Creating a Cross Symbol
Create two rectangles, one is lenghtwise and one is crosswise like this:
Size them as so:
W: 40
H: 4
Next make the rectangles rounded and make its roundedness set to 10
Select both of the rectangles by clicking and holding shift and union them by going to the right panel and press Ctrl + Alt + U then set the rotation to 45 degrees (the property can be found near the size property)
and the cross symbol should look like this:
• Creating a Check Mark Symbol
Create another lengthwise rectangle with similar properties to one of the rectangles in the cross symbol.
This time, we’ll be using the other rounded rectangle option which has the broken line like rectangle. Set the values to these numbers:
Create another rectangle at the bottom of the first one and size as so:
W:20
H: 4
And set its rounded corners as so:
Your check mark should look like this:
Union the rectangles together and rotate the union to 45 degrees.
Drag the cross symbol into the first circle in your toggle and the check mark into the second which should look like this:
Now that you have the assets for your interface, you have to export them from Adobe XD. You can't just export the toggle as it is, we have to break down the toggle into pieces like this:
You can comile the check mark and cross symbol into a sprite sheet, but that’s a whole different tutorial. Please note that you have to colour all of the assets white.
• Exporting Assets from Adobe XD
In the left panel with all the shape layers, right click on all of the toggle elements and click “export selected” or press Ctrl + E. After saving the elements, we will need to make use of Pixelfix because the image files tend to have dark outlines, so select all of the exported elements and drag them into the pixelfix application(more details can be found in the pixelfix post) and now you’re ready to import the elements into studio!
• Importing UI Elements into Studio
Upload all of the UI elements and give back the circle its necessary colour.
Position and scale the UI elements to match the design in Adobe XD.
Script the elements to move and react to a player’s click.
Toggle Elements:
Toggle UI:
Basic Toggle.rbxm (5.1 KB)
Note:
When uploading the assets to Roblox, you could use the Roblox Studio asset manager for game specific interfaces or upload via the website to use the toggle in any game that will use the toggle. Avoid uploading multiple copies of ui elements! Your inventory will become cluttered with redundant assets.
good job for going the extra mile.