SilverStudioGames
patreon
Devblog #15 – Interface Design 101
🕑 Added 2024-05-10 16:37:26 +0000 UTCHello there, dear reader, LoafyLemon here!
Today I'd like to do something a little different and combine Dev Blog with Dev Dump. A little something to showcase the inner workings of my process, maybe it'll interest some of you who want to learn more about the design side of things.
So, let's get right to it. As you may remember from our last announcement, Witch Trainer Silver has a lot of new content coming down the pipeline. That means more interfaces. But hold up, what's with the old interfaces, right? That's the problem.
The truth is, those old interfaces are still (mostly) functional, but they're not only not fitting the game's style anymore, they're also severely limiting the game's potential. And, quite frankly, they're an eyesore.
Before any of you take out your pitchforks, know that I am solely responsible for that eyesore, so I am allowed to say that it's ugly! I mean, I'm not one to cry over spilt milk, but this is an opportunity to do something different, something more visually appealing, and more functional that I simply could not do before due to limitations of the engine, but also my own skills back then.
Now, let's get back to the current state of things. You see, Witch Trainer Silver's UI is, well, it's a bit of a mess, but it's a mess that despite its many flaws, has a certain charm to it. It's also something that people love, or at the very least, don't hate as much as they should. (That's what I tell myself at night, anyway.)
However, Witch Trainer Silver is also a game that has a lot of potential, and one of those areas where it could use a lot of improvement is in the interface. Now, I know what you're thinking: "Why should I care about this?" Well, let me tell you, the interface is not just about looks. It's also about functionality, usability, and how easy or hard it is for the player to navigate through the game. And right now, those things are not exactly perfect.
Now, here comes the part where I'm supposed to tell you that I've been working on Witch Trainer Silver for a long time, and I know what I'm doing. And in a way, that's true, but in a way, it's not. Because when you're working on a project for a long time, you can start to take things for granted, and you can also start to make mistakes that you wouldn't have made if you had been working on it for less time.
So, what do I do? Well, I do what I do best: Break things down into smaller pieces, and then break those pieces down even further. And then, I try to figure out how they all fit together.
So, let's take a look at the old interface. It's not perfect, but it has worked for a long time, and it's not like it's going to fall apart right now. But still, it's not the most visually appealing, especially on HiDPI monitors above 720p, because originally we were limited to just 1080x600 pixels.
You may be scratching your head here, as 1080x600 pixels is pretty low, and it's even lower than some mobile devices today, and I know you're asking yourself why we chose that resolution, and the answer is we didn't. When my predecessors started the project, the original game was running on Windows XP in 4:3 aspect ratio, and the resolution was limited to just 600 vertical pixels. As you can guess, it's not a very pretty thing, especially on modern devices, but I digress.
Anyway, enough of that. You may be wondering what we can do about this. Well, here's the good news: we can do a lot of things. For one, we can make the interface more visually appealing. For another, we can make it more functional. Lastly, we can finally do some things that we could only dream of doing before because of limitations.
But, I know what you're thinking now, "How long will this take?" And I'm happy to report that it will be faster than you think. At least, that's the plan.
Now, I know that not everyone may be as interested in this as I am, but I hope at least some of you will take a look at this and think, "You know what, this actually sounds pretty cool." Because, at the end of the day, this is what it's all about: making something that people will enjoy, and that drives me to do what I do.
Without further ado, here's the new interface design for Mafkin's Emporium, a work in progress:
As you may notice, it's a very rough draft, but I wanted to show it to you to give you an idea of what the new interface could look like. These kind of rough design sketches are very common in the game development process, and that is something not many people are familiar with, so I thought I'd take a moment to explain.
Here's how the design process typically goes for me:
1. Gather Requirements: In this case, Witch Trainer Silver has a lot of new content coming down the pipeline, so we need to make sure the interface is scalable and can handle the new content without looking too cluttered or messy.
2. Research and Planning: This involves looking at other games in the same genre, finding out what players like or dislike about their interfaces, and planning how we can incorporate those elements into Witch Trainer Silver's interface.
3. Drafting: Once we have all the information we need, it's time to start drafting the interface design. This is where we take all the ideas we gathered during research and planning and start putting them onto paper. This is usually done in a very rough, unrefined state, and is often just a series of scribbles or rough drawings as seen on the above image.
4. Engine Integration: As Witch Trainer Silver uses an engine that has some limitations, I have to work with that engine to see how I can make the interface look and function as I want it to, before I seriously start working on designs. Sometimes this means writing code to make it work, other times it means finding workarounds.
5. Visual Design: This is the fun part, where I get to decide what the interface looks like, and how it will be organised. This involves designing icons, buttons, text, and other elements, and deciding how they will interact with each other.
6. Feedback and Revision: Once I've made a draft of the interface, I show it to the rest of the team and get feedback on how to improve it. This can involve changing the layout, the colours, the icons, or anything else.
7. Implementation: Once the design is finalised, I start implementing the interface into the game.
At the moment, we're at step 5, the visual design. As you can see, it's not finished yet, but we're further along than you might think.
The above image is what we call a sprite sheet. It's a collection of images that represent the various UI elements we need to include in the game, like buttons, text boxes, and so on. Once we have these sprite sheets, we can use them to build the interface.
The new interface design will have a lot more detail and visual flair than the old one, and it will also be much more functional, and more suitable for HiDPI monitors and larger screens, but also compatible with lower-resolution screens and mobile devices, or even controllers.
Now, I know that this might not be everyone's cup of tea, but I hope that at least some of you will be interested in how this works, and maybe even help out with some of the design decisions along the way.
Thanks for listening to my ramblings, and I hope to see you all around on the discord where you can give me feedback on this design.
Love,
LoafyLemon.
Comments
Silver Studio Games
I'm doing my best to keep character style/design intact. You may see lots of Tonks' sketches floating around when I'm practicing. The more recent works (unpublished) should be more representative of her character, stay tuned! -L
Haksly
I love this, absolutely adore it, thanks for the update. I currently have deleted the game, so will reinstall and play with it, once the new interface is in, plus Tonks and Luna, since i haven't played since the new Luna update. Keep us posted and Love all your hard work ^.^
Shannon St. Claire
As long as the character designs aren’t changing, I’d welcome UI facelifts/overhauls.
Silver Studio Games
That's a very good advice! I'm noting things down for future reference.
Silver Studio Games
That's the idea. Performance issues with the clothing store is another aspect I wanted to address during the interface redesign, and will definitely talk about it more once we get to the implementation stage.
Javegar453
I hope this makes Mafkin's Emporium a lot less laggy, I don't know why but Mafkin's shop has always been laggy for me, the only part of the game that is laggy, so I would never use it (ie use the cheats to get all clothes) except for when I would need to buy the new dress for Hermione
Varsh
That was an awesome dev blog. I can feel the enthusiasm while reading it. I am glad that you are having fun with it and will recommend you to templatize to use in your future games. Many times I will work on a project, have fun, and then miss all the little QoL things I did in it in future projects. I have learned from it now. Even though it may add a few more days of work for the current you, your future you and audience will be thankful to the current you. Keep having fun and creating great content. 🙂
