Production II Dev Blog | UI Mockups

Over the past week or so, I've been able to finally work on the stuff I've been wanting to work on all semester: UI. And considering how it's the standard to make mockups and how I (for the most part) haven't really gotten into the workflow of doing mockups before implementing the UI, I decided to make a couple of mockups this week. The focus was to make something to visualize the speed mechanic while also setting the theme of the UI moving forwards, which I envision as what you might actually see in an old TV. Anyways, let's get right into the mockups!



Mockup 1 | Way Too Much

This mockup... well, let's just say I'm not too happy with it. There's way too much going on all at once, and there's way too much information being thrown at the player that it becomes too cluttered and ugly to look at. But for now, let me explain it:


The top-left is just images of inspiration. The weird series of colors that you usually see when an old TV glitches out is what I chose to use for the colors of each individual channel. Going forwards, these will be slightly edited so they aren't extremely taxing on the eyes since these are way too saturated. The image that says "RAB" is what I envision the visual effects of the UI interface to be.


As for the actual speed meter goes, there is too much being managed all at once. Each speed channel is divided into its own color but also into its own bar; this removes any sort of uniform movement throughout them all, which is pretty bad. The multiple colors being displayed at once is also too much for the player. The intent of doing so was so that the player can notice which speed channels they have access to since the actual meters being filled up change to the color of the current channel and so that they can see the next channel that they need to unlock, but it's far too noisy and busy. Let's move away from this mockup and pretend it didn't happen, shall we?



Mockup 2 | Condensed Info

What I had learned from making the previous mockup I applied to this one. I went into it thinking of how to best condense all the information I needed to without giving too much to look at. I realized that I don't need to convey everything; the player unlocks a locked speed channel by gaining speed off of a surface corresponding to their maximum speed channel, meaning they have no need to know the color of the next speed channel.


The current channel (in this case, channel 3, which is cyan) is indicated by the largest box, while the currently unlocked channels are brighter than those that are locked. Below these boxes is a meter, which shows the current speed inside of the current speed channel.


I also changed the color of the outlines, borders, and font to be white rather than black since CRT menus usually operate the same way. Going off of that, I added in a very clear indication in the top left of the screen of what channel you are currently in, which would only show up when you change channels (much like when changing channels on an old TV!). The color of the channel text also changes based on the current channel.


When I presented this to my team, they all thought this one was the best of the three, and because of that it is the mockup we will be moving forwards with! But wait... I thought there was three mockups?



Mockup 3 | It's Like an Actual TV!

Personally, this mockup is my favorite. It conveys the information similar to how mockup 2 does, but also stays completely on-theme by appearing as a volume bar! The taller bars show up for the speed channels that you have unlocked, the the smaller lines are each a locked speed channel. The length of the lit-up bars within the bar as a whole shows off where you currently are inside a speed channel.


The reason the team chose not to move forwards with this mockup is because of how large it is. I do agree that it is too big, and making it smaller or moving it elsewhere takes away from the whole volume bar aesthetic. But it still holds a special place in my heart as the most fun one of the three, and maybe this could be implemented in some other way in the future!



And that's all for this week! I'll see you next time where hopefully I'll have the UI implemented in the actual game itself!

Website designed by Leonardo Robles Gonzalez

Website powered by Wix

  • Twitter Social Icon
  • LinkedIn Social Icon
  • SoundCloud Social Icon
  • YouTube Social Icon
  • Itch.io Social Icon