To Zomboid with love (UI Design)

[draxo]

What is this?
This project is a way to say "thank you" to the game we love. For moments of genuine excitement, for tough choices that we learned so much from, and for letting us forge our own survival stories. I lived and died in Knox County, and I will always remember this part of my life.

 

This is a work in progress.
Some things can be rough around the edges. Some things may turn out to not be a good fit for Zomboid. Just bear that in mind. Everything is changeable.

 

We would want everybody to join in.
Contact me directly or by email at thisishowyoulived@gmail.com if you want to participate. Or if you want to help in any way, have any suggestions, or just want to say hi.

 

If you want to use it.
Feel free to use everything in any way you like.

 

Download.
You can find source .psd files, uncompressed .jpg and additional information on Google Drive.

[draxo]

#1 Overall UI

 

All this is based on three ideas.
Immersion, respect for the original design, scaling, and splitscreen safe.

There are no distractions in the default view, so you can really focus on your story.
Any panel can be expanded by moving a mouse to the corner of the screen.
Easy for the new players, familiar to the advanced ones.

 

Inventory.

Categories. Sort by category view changed to display every category name once on top. The reason for this is the extra space occupied by repeating the category name for every item. As a result, you should be able to find anything you want fast and easily.

Number of items. Near icons on the same line. Again, for faster comprehension.

Container icons. Placed at the bottom of the window to be on the same line with the rest of the interface to make it more coherent.

 

Time controls.
I didn't come up with any particular reason for the player to see time controls all the time (pun intended), so it auto-collapses. Maybe it should collapse to the pause icon instead of the clock icon. I don't know, you tell me.

 

Weapons.
Quick access is visible only when you move a mouse near the weapons panel.

 

Stats.
This includes all other menus in a compact and easily accessible window in the right corner. The health menu opens first by default. 
Players on a controller can open it with just one button. So it's much easier. 
Splitscreen players benefit because the window doesn't cover another player's screen. (The skills window killed a bunch of characters when we played with friends. That actually was pretty funny, but still...)

 

Moodles.
They are already in a perfect spot, so no changes here. So in a collapsed view, moodles and "the shaking heart" are the only distractions.

 

I'd really like to hear everyone's opinions about this.
And check the first message for source files and contacts.

 

[draxo]

#2 Vehicle Mechanics UI

 

Categories.
So to stay splitscreen-safe, we have to make UI windows occupy less than a quarter of the screen, and man, it was hard to achieve this with the mechanics window. There is a lot of text to read when it comes to this window, so vehicle parts were grouped into categories. Every category shows the average condition of all parts in it, so you can quickly check a car with one glance.

 

Specific parts.
To not repeat the positions (front left, front right, rear left, and rear right) condition icons were placed next to the corresponding vehicle part on the car blueprint. Oh, and the first category you see when you open up this window is "Main" with Engine, Battery, and Gas Tank.

 

Details.
More detailed information placed on the right side. And if you think that there is too much empty space in there, I have a little something for you in the next post.

 

[draxo]

#3 Car Logos

 

So the aim here is to add a teeny tiny bit of immersion with authentic car logos. I wanted to make them 100% original and, at the same time, add a little dejavu feel to them. I tried to show every car's original character as best I could.

Let me know what you guys think.

 

[Faalagorn]

I like it! The UI overhaul was teased some time ago, not sure how far it progressed since, probably not so much given the effort being put elsewhere, so I guess when it comes, especially when it comes to the inventory and item management, as that needs a lot of love (managing items is counter-intuitive really.

 

I like the immersive UI, reminds me Escape from Tarkov. I guess the corners could be customizable too? Maybe even letting players move the moodles? That in hand reminds me the UI customization from various MMOs.

 

I like the logos for the cars too. Too bad they aren't official else I'd add them on the wiki :D. I also wonder if the team got anything in mind with the logos; we have a lot of companies having logos in the game and more lore coming in build 42, though I don't think vehicles logos are part of it, but I guess we'll see…

[draxo]

11 hours ago, Faalagorn said:

I like it! The UI overhaul was teased some time ago, not sure how far it progressed since, probably not so much given the effort being put elsewhere, so I guess when it comes, especially when it comes to the inventory and item management, as that needs a lot of love (managing items is counter-intuitive really.

 

I like the immersive UI, reminds me Escape from Tarkov. I guess the corners could be customizable too? Maybe even letting players move the moodles? That in hand reminds me the UI customization from various MMOs.

 

I like the logos for the cars too. Too bad they aren't official else I'd add them on the wiki :D. I also wonder if the team got anything in mind with the logos; we have a lot of companies having logos in the game and more lore coming in build 42, though I don't think vehicles logos are part of it, but I guess we'll see…

 

Thank you for your reply. I really appreciate that.
It is very inspiring to read that someone liked what you've done. 

 

I thought about your idea about customizable corners.
We have 4 corners, so there may be top/down or left/right changes. As I see it, when it comes to text, our eyes find it more comfortable to look down rather than up because we read in this way, scroll in this way, and just got used to it. I guess the main reason why players put UI on top of the screen right now is that it always collapses to the top header, so it's not possible to pin it to the bottom of the screen. But again, I might be wrong, and maybe a lot of people just find the top UI more comfortable. So maybe for them, the top UI option would be justified.

 

About the left and right panel swap I personally see nothing wrong with that (except extra programming work, of course), but the reason I put Inventory to the left for now is because looting is a big part of the game, and this way the loot panel becomes closer to the center of the screen.

[draxo]

#4 TV and Radio UI

 

Immersion
I like to use an oven interface so much because it makes me feel like I'm actually cooking something. Turning a knob, hearing a little "click,"  and then hearing the bubbling sounds creates a pleasant feeling of real presence in this hostile but at the same time strangely cozy world. I tried to transfer this feeling to interactions with TV and Radio.

 

Controller friendly.
Both interfaces should be easy enough to navigate on a controller.
BTW, if you haven't tried to play Zomboid on a controller, I recommend you try. This adds a lot.

 

[Faalagorn]

Looks nice; I guess it all could be made into a mode; thogh that'd require some work, not sure someone posts it, but if you do want to try, you can check either the modding section here on forums, or maybe on Discord, as that's where most folks are nowadays at https://discord.gg/theindiestone

 

Sadly the interface revamp wasn't mentioned since 2018 and 2019, tentantively scheduled for before 1.0 back in 2018 and loosly-made WIP in 2019, see https://steamcommunity.com/app/108600/discussions/0/3160848559790468622/ and https://projectzomboid.com/blog/news/2019/07/reloaded/ but we haven't heard since, I guess things like that may start popping slowly after b42 eventually, though I bet that after b42 iwbums release tentantively this year, there will be lots of polishing and deserved break, so I guess it may be not sonner than 2025 hearing about it, if not later, especially as Vehicles will need some love down the line I guess (they wasn't really touched since the https://pzwiki.net/wiki/Build_39 and there are already mods that are based upon the unfinished idea of interactable doors in vehicle you can spawn in debug.

 

As far as crafting goes, that is device interface we might actually see something in build 42, even if not the initial IWBUMS then later, so maybe that? Tomorrow's a new blog post, so we'll see if there's anything new being teased there.

Edited February 21 by Faalagorn
it's before 1.0, my bad

[DiegooLoquii]

On 2/19/2024 at 8:37 PM, draxo said:

#4 TV and Radio UI

 

Immersion
I like to use an oven interface so much because it makes me feel like I'm actually cooking something. Turning a knob, hearing a little "click,"  and then hearing the bubbling sounds creates a pleasant feeling of real presence in this hostile but at the same time strangely cozy world. I tried to transfer this feeling to interactions with TV and Radio.

 

Controller friendly.
Both interfaces should be easy enough to navigate on a controller.
BTW, if you haven't tried to play Zomboid on a controller, I recommend you try. This adds a lot.

 

All this looks very cool! Just hoping this doesn´t get lost in the forums, something like this will be very cool to be added in-game.