UI design
Spacing before colour.
What happenedA shop screen of mine had no room to breathe and the gaps were all different, so nothing stood out. I fixed the spacing and took elements out. Colour and size came after that.
Designfor games,apps & print
I'm Maurits van Rietschoten. I design game screens, levels, apps and things that get printed. I work with AI tools. I pick the style, look at every result and throw out what isn't good enough. I'm looking for part-time work, 20 hours a week, remote or near Hendrik-Ido-Ambacht.
About me
I finished Crossmedia design (mbo 4). Since then I've been making my own games, an app, puzzle books and 3D packs.
I have a strong opinion about what good looks like. When something isn't right I can tell you what is wrong with it and what needs to change. I have a critical eye and I notice the small things that are off. I'm curious and I teach myself what I need. Games, 3D, apps and print all started as something I wanted to figure out. I work well on my own and I make decisions quickly. When something clicks I get properly enthusiastic about it. And I'm honest about what I can't do yet.
- EducationCrossmedia design, mbo 4
- ToolsBlender, AI tools, basic Adobe
- LanguagesDutch, English
- Available20 hours a week
01
Game UI
Each game here looks different, because each one asked for something else. AI tools do much of the drawing. I decide the direction and what gets thrown away. Click a piece to read what was wrong and what I did about it.
- Problem
- The game needed a prompt that shows which key to press to mine a rock. It had no visual style yet, so I asked for three options that had nothing in common.
- What I did
- A stamped iron tag, foreman's chalk and a lamp terminal, all on the same rock, idle and pressed. My notes were about what you look at first. The key became the lightest thing in the picture and the glow got turned down.
- Result
- The prompt hangs above the rock, in the world. On a phone the button moves into the HUD, so I added phone and console versions to the same sheet.
- Problem
- An upgrade shop in a ship breaker's yard shouldn't look like a menu from some other game.
- What I did
- So the shop is a thing from the yard: a sheet of paper on a metal clipboard, stencilled headings, yellow price tags.
- Result
- You read every line the same way: name, what it does, price.
- Problem
- The ground in this open-world prototype was one smooth green surface. You couldn't tell how far away anything was.
- What I did
- I split it into ground you can tell apart: grass with blades up close, bare dirt, dry grass, sand by the water, rock on the steep parts.
- Result
- I look at every change from the same five camera spots, next to the previous version. Otherwise one view gets better while another gets worse and nobody notices.
- Problem
- In a feed the thumbnail is 168 by 94 pixels. At that size the current one was hard to read.
- What I did
- Two new options next to the current one, each also at feed size in the bottom row. Three AI raters scored them without knowing which was which.
- Result
- The brush with the money pop-up scored 6.7. The current one scored 5.3 and the one with the character 4.0.
02
Levels
Before anything gets built I decide where the player lands, what they see first and where each thing goes. Then I check it from where the player stands.
- Problem
- A lobby has to fit classes, quests, a daily reward, cosmetics and a leaderboard. Put all of that in menus and you can't see the game anymore.
- What I did
- Each of them became a place in the yard: the crew office, the job board, the punch clock, the lockers.
- Result
- You spawn facing the gate and the crew trucks, so the first thing you see is how to start a job.
- Problem
- The ship is the level. Players climb through it and take it apart. It can look fine from outside and still have a ladder that misses its hatch.
- What I did
- Every room gets rendered at eye height and I go through them as one sheet. Scripts check the rest: real sizes, stair angles, whether a lid can open, whether loose objects are standing on something.
- Result
- Both run on every change. The scripts found fourteen impossible details I had looked straight past. I found a ladder next to its hatch that no script checked, so now one does.
- Problem
- A render shows the mood. It doesn't show whether the layout works.
- What I did
- A top-down plan with every zone named for what you do there: pick-up bays, crew office, site office, punch clock, lockers, leaderboard.
- Result
- The middle stays empty between the spawn and the trucks. Everything optional sits along the edges.
03
Apps & print
Not everything I make is a game. Here is an assistant app for phone and desktop, a planner you print yourself and a series of puzzle book covers.
- Problem
- My own assistant app has chat, status and settings screens, and they had to look like one app. I wanted it modern and clean.
- What I did
- I rejected the first mock. It was cluttered and the tabs wrapped onto two rows. Patching that one mock would have kept the same idea, so I asked for a sheet of different navigation options.
- Result
- From the sheet: a drawer on phone, a sidebar on desktop, content in the middle. Both use the same parts.
- Problem
- The app has eight screens. As tabs they took up two rows on a phone.
- What I did
- Six ways to reach those eight screens, each drawn as phone, phone with the menu open and desktop. Two of the six are shown here.
- Result
- Option A. The chat gets the whole screen and the rest sits in a grouped drawer, which stays open as a sidebar on desktop.
- Problem
- A series of large-print puzzle books. The covers had to look like one series, and you still had to see which volume you're holding.
- What I did
- One layout for all of them. The title, a sample puzzle and the volume number sit in the same place every time. Only the background colour changes.
- Result
- Big type, strong contrast. People buy these books because small print is hard for them.
- Problem
- A planner for people who lose focus quickly can't be a busy page.
- What I did
- Each page does one thing and has one accent colour. Only the page title and the first field to fill in are bold. Everything else is thin lines.
- Result
- The same grid and margins on every page, in A4 and US Letter, so it prints properly at home.
- Problem
- After the navigation was chosen, the other screens had to follow the same look.
- What I did
- Five screens on one sheet: home, settings, chat, voice setup and sessions. Side by side you see at once where one of them differs.
- Result
- One accent colour and the same bottom bar on every screen. The voice setup is the only one without the bar, because you shouldn't leave it halfway.
04
3D props
Low-poly props for games, built in Blender. They come in packs by theme. Every render has the same figure in it, so you can see how big things are.
- Problem
- Props from different packs end up next to each other in one game. If each pack has its own scale and style, that looks wrong.
- What I did
- Every pack is built to the same figure and rendered with the same light and camera. Six of the 32 packs are shown here.
- Result
- A fire truck, a barn and a sofa can stand in the same scene without one of them looking out of place.
- Problem
- A pack can look fine as a whole while single props in it are off.
- What I did
- I went through the sixteen props one by one and marked each good, weak or bad.
- Result
- Ten good, six weak. The weak ones include the weeping angel, the gargoyle and the stone arch. This is the sheet I marked.
05
How I work
Four things that went wrong in my own projects, and what I do differently since.
UX
Test it on a phone.
What happenedScreens were getting approved in one desktop window. Most players are on a phone, and there the layouts were cut off and overlapping. Now a screen isn't done until it has been checked from a small phone up to a wide desktop.
Level design
Walk it in the game.
What happenedMost layout problems didn't show in renders. They showed once the map was running. So a map isn't finished until I've walked through it in the game.
Game design
Cut what doesn't help.
What happenedIn CLEANRUST the rust came off in blocky layers and didn't look like worn metal. It now wears away in eight stages. I also took out a collectible chip system, because it made the game more complicated and no better.
Work with me
Send me what you're making and what bothers you about it. I design and review screens, layouts and flows, for games and for other things. Part-time, 20 hours a week, remote or near Hendrik-Ido-Ambacht. I speak Dutch and English.
- Emailyaltyx@gmail.com
- BasedThe Netherlands, CET