Industrial war sim, identity & menu system
A front-end menu and three settings screens for an industrial war sim, all built on the same two-column layout, each shown next to the greyscale wireframe it started as.
In this case study
WarTruck is a personal concept for an industrial war sim. I built out the front-end menu and three of the five settings categories, Graphics, Gameplay and Language, and I've put each screen next to the greyscale wireframe it started as.
I kept the texture to two things and left everything else plain. The WarTruck wordmark is a rounded geometric letterform with a rust and grain fill, and the selection bar is a weathered plank. The category names, the setting labels, the values, the Apply button, all of that is just dark type with no fills, no borders and nothing behind it. Two textured elements felt like as far as I could push it before the type started fighting the background.
The layout doesn't move between screens. The wordmark stays in the same place on all four, the category rail sits under it, the options panel sits to its right, and Apply is pinned bottom-right. I left the panel semi-transparent instead of filling it in, so the locomotive is still there behind every list.
WarTruck is a personal project, so the design here is all mine: the wordmark, the interface and its controls, and every screen and wireframe on this page. The locomotive and the environment renders are reference imagery. I used them to show the UI in context, they aren't my art.
The wordmark is the only textured thing here and it's carrying the whole screen. Underneath it I kept things as bare as I could: Play, Continue, Settings, Credits, Exit, no containers, no icons, no dividers, just type sitting straight on the snow. The render takes up the right two thirds of the frame, so the menu lives in the empty third on the left where there's actually room for it.
This is the busiest of the three, and it's where I worked out the settings layout: category rail on the left, options panel on the right, Apply pinned bottom-right. Eight rows from Gamma down to Motion Blur, and I used three kinds of control rather than forcing everything through one. A bracketed stepper for the values you cycle, like Resolution and FPS Cap. A double-headed arrow with a diamond handle for FOV. And a diamond-in-circle toggle, filled for Vertical Sync, empty for Motion Blur. There are two plank bars lit at once, one in each column, so you can see which category you're in and which row you're on without having to hunt for either.
Four rows here where Graphics had eight, and I didn't move anything to close the gap. The rail, the panel and the Apply button stay exactly where they were and the rest of the panel just stays empty. Three of the rows use the same diamond-in-circle toggle, filled on Tutorials Enabled and Vertical Sync and empty on Adventure Camera. Rest Tutorials doesn't carry a control at all, which sets it apart from the settings sitting around it.
Eight languages, and no steppers or toggles anywhere, because on this screen the row is the value. The plank bar pulls double duty: Language in the rail, English in the list, the same component telling you where you are at two levels of the same screen. Putting Arabic and Korean in the list meant I was looking at a right-to-left script and a non-Latin one early, rather than laying it all out in Latin and finding out later.
Process
One wireframe per screen, in the same order as above. The structure is the same in both passes, same rail, same panel, same Apply position, same row order, and really the only thing that changes is the selection bar: a black-to-white gradient in the greyscale, the plank texture in the final.
The thing I'd keep from this one is how little the layout moves. Graphics has eight rows and Gameplay has four, and because the rail and the panel and the Apply button never shift between them, the short screen still reads as part of the same set instead of looking like something I hadn't finished.
Related reading
Longer write-ups on the craft this project drew on.
Interface type is read in half a second, at speed, over moving artwork, by somebody who did not come to your game to read. Almost every rule that applies to a book works against you here, and the fixes are specific.
Read the article
An icon has about a fifth of a second and a few hundred pixels to say what a thing is. Most game icon sets fail not because the drawings are bad, but because they were drawn large, one at a time, by different rules.
Read the articleContact
Menus, HUDs, full UI systems or a single screen that isn't working. Tell me what you're building and I'll tell you honestly whether I'm the right fit.