Hi there, I'm Jonathan. I'm a passionate video game UI designer focused on creating beautiful and intuitive interfaces to serve the player's experience.Drawing on the powers of graphic & web design, illustration and motion graphics combined, I bring that jack-of-all-trades skill set to games UI. Enjoy your visit!
Please email work enquiries to: me [at] jonathancaridia [.] com
UX design, UI art, Animation (After Effects), Unity implementation: Twin-stick Shooter
Project focused on pushing UI aesthetics, inspired by graphic sci-fi vector-style design of the 00s and today.
UI Design, Animation (After Effects): Combat Flight Sim
You'd need most of the same HUD information when flying a jet or by magic, right? Personal project designing and animating a flight mage's HUD for a fantasy combat sim.
UX design, UI Art: Management Sim
Designing UI on a spaceport building and management game. A good complex challenge with the genre's heavy UI use.
UI Art: Fighting Game
Collaborating with an indie developer on a HUD design for his in-progress fighting game, mirroring and enhancing its vibrant and energetic art style.
UI Design, Game Art: Game Jam, Award Winner, Puzzle Game
A narrative puzzle game for Game Jam Aoetaroa. Responsibilities were game art, iconography and puzzle design; also tackled production and direction, for international team of 4. The game won the Innovation Award and was nominated for Best Use of Theme (Dark and Light).
UI Art, Logo Design: Visual Novel, Historical
Adapts portions of a layered, wandering, exotic 1800's novel. This tale's UI takes inspiration from period manuscripts and Moorish patterns.
UI Design, Game Art: Game Jam, Card Game, Rogue-like
Ludum Dare entry in a team of 3, making a card-based crop growing game. Responsible for UX layout, all game art, and assisted with in-engine asset implementation. Playing to my strengths made the process smooth and enjoyable.
Small project with a focus on artistic expression, testing new techniques and how to approach a specific layout.
Rebels in Exile
Kingdom, Cauldron
Mecha designs
AVT Work Experience set
UE search site logo
Metal Fist fighting game logo concept
Among the Hollow book cover
SoHA sword club logo
Sistine Plastering logo + business card
Raised in the volcanic soil of Lanzarote and the harbours of New Zealand, I've made my way in life with a number of varied pursuits that combine the technical and creative, from web and graphic design to illustration and concept art. My passion for games runs from when I was a wee lad getting carsick playing Pokemon Yellow, and only grew from there. Not just for new experiences and prettier graphics, but the desire to understand - to see behind the curtain into how the sausage is made. With games UI, I get to combine my skills, interests and passions, and I couldn't be happier with that.
My approach boils down to this - at the end of the day, the player comes first. It's my job to make sure they can act in a game without thinking about how. They're here to play, not get lost or frustrated or distracted. If I can enhance their experience beyond useful, even better. Form has its own function - to delight the player.I'm not so blind to think I'd hit it right every time, no matter how close I adhere to best practices. An untested design is a question, one that needs an answer. Like an experiment, we hypothesise with design, test, analyse, adjust and repeat. It's even better if I'm wrong, as that means I get to learn.
In the short term, I'm excited to work with more awesome people on projects we can be proud of. Long term, I aspire to grow into a leadership role within UI or beyond, to support, empower, and inspire fellow industry creatives. There's so much passion and talent out there!
Shadow of the Colossus - atmosphere, sense of scale, minimalist but impactful storytelling, music
Halo 3 - tight gameplay loop, amazing soundtrack, multiplayer memories
Hades - action flow, character writing, stunning art in every category
GMing Lancer, a mecha TTRPG, for friends
Longsword training
Sci-fi and fantasy fiction reading
Travel with family
If you need a UI designer who will do their best to make players' interactions with your game intuitive, engaging and fun, give me a message. I might know someone who can help. (Me!)
Google Slides linkEurogamer Metaphor UI designer Koji Ise interview GDC Jordan DeVries Lightsaber customisation UX (couldn't find the full talk for the life of me, maybe they took it down? But the TikTok summarises it pretty well.)Games mentioned: Hi-Fi Rush, In Other Waters, Another Crab's Treasure, Signalis, Metaphor: ReFantazio, Star Wars Jedi: Survivor, Prey, Dredge, Blackheart.Honorable mentions that didn't fit: Hollowbody (lofi horror), Lost Records: Bloom and Rage (supernatural mystery/drama), Unicorn Overlord (richly decorated fantasy tactics), Bomb Rush Cyberfunk (Y2K skating game), High Fleet (machine flight management with diegetic Soviet UI) Topic: Last of Us 2's guitar touchscreen minigame gimmick vs Ghost of Tsushima touchscreen wind pathfinding. Both valid, but if innovating with input, bear in mind how common the interaction is. Uncommon has room to be fun toy, but common must have longevity. Will be fun the 10th time or the 1000th time, or will it start to grate? Would be a nightmare if you had to play a tune on guitar to save, as an extreme example.
Celia Hodent @ GDC - The Gamer's Brain: How Neuroscience and UX Can Impact Design
About the game: A visual novel based on a portion of The Manuscript Found in Saragosa, written in 1805 by the Polish author Jan Potoki. Set in 1700's Spain just before the Napoleonic wars, the soldier Alphonse Van Worden is robbed and waylaid travelling in the Sierra mountains. Desperate, he comes across the mysterious Venta Quemada inn, and meets a pair of seductive Moorish twins. Things only get stranger from there with sorcery, spirits, demons, and hung bandits who won't stay put.The novel has a "frame story" structure where a main thread serves as a frame for other shorter narratives, those sometimes having sub-naratives themselves. For example, Alphonse may be told the unfortunate tale of a beggar, and that beggar listens to another story around a bandit's campfire.Genre: Historical, Horror Platform: PC Engine: Ren'PyResponsibilities UI design, UI asset export, logo design
The design was inspired by the unusual setting and premise The frame decorations use authentic period arabesques (blocks arranged in a printing press to give pages decoration with repeating patterns). The body font, IM FELL, is also scanned from type blocks from around the period, giving it a nice organic edge that goes well with the paper backgrounds.
dialogue UI
Settings page and main menu
Save page and main menu
Pop-up design
logo design
App icon
About the game: In EarthStar, you are tasked with building humanity's first commercial passenger spaceport, gateway to the stars. Build shops, security checkpoints and starship terminals, manage staff and flight schedules, keep passengers fed and happy and build the station's interstellar reputation.Genre: Construction and management sim Platform: PC Engine: Unreal Engine 5 Visual direction: Sci-fi, clean, modern, slightly playful, main colour blue.
UX design (split with and supervising another junior)
UI art direction, in collaboration with project lead
UI art
Game logo
Signage design for shops, restaurants and bars
Alien passenger designs
The UI was designed in Figma, inspired by some flavour of Y2K and modern graphic design with heavy gradient and colour use, glass-morphic panels, and organic shapes to give it an alien twist. Background is a blurred image to test the UI against a realistic range of colours values before final level art was available.
HUD design, with placeholder background to check contrast
HUD build menu
HUD zoning menu with custom icons
Button state style examples
An in-progress 3D fighting game, Metal Fist combines grafitti, comic book and sci-fi inspirations. An impressive combo showcase video led to collaborating with the game's sole developer on the HUD design. Above you can see the mostly-complete implementation in Unity by animator, modeller and developer Dayniel Deguzman, and below, a breakdown of the design process.
Deliverables: HUD design and asset exports Visual direction: vibrant, futuristic, fun, rebellious, comic style, grafitti Inspirations: My Hero Academia, HiFi Rush, Splatoon, modern comic books.
Look 1: Holo-grafitti
Look 2: Future-Pop
Look 3: Graphic Modern
Look 1: Holo-graffiti. Imagining the HUD as 80's retro-futuristic, graffiti style holograms. Perhaps street art in this world involves projected light? High saturation, many glows, subtle CRT overlay.
Look 2: Future-Pop. Vibrant, bright, more comic-inspired. Big bold outlined areas, halftones and graphic shapes.
Look 3: Graffiti Modern. Bold type and geometric elements, mixed or overlaid with graffiti in an "overwriting the system" kind of way.
After client feedback, the final design combined Look 2: Future Pop with more graffiti elements. Two options for pop-up text were provided, and the one on the right selected.All the elements were exported as PNG textures for the client Dayniel to recombine in engine, resulting in a functional HUD as seen in the video at the top of the page.
The logo design emphasises the bombastic, graffiti style and indulges in a bit of literalism with the font material. The high contrast and impactful colours would help the game catch attention when used on a social media feed or storefront.This was a fun project with such a dynamic look, and it was gratifying to see it in action.
This project was an exercise in combining technology and fantasy on the visual side, and exploring After Effects on the technical side.
Refined selection of research, real HUDs for function + effect and "elven" filigree for design.
Pre-production involved development of this elven society's values and how that would affect their aesthetic choices, to give a base of what would be appropriate for visuals.
Value harmony with and appreciation of nature
Weave beauty into all things, even those used for an ugly purpose like combat - perhaps especially so, to mask it
Restrained and elegant; Decorative but tasteful
The design Features delicate decorative elements inspired by nature and art nouveau. Most of the function was taken from real fighter HUD displays, with a little magic missile for fantasy. Researching what information needed to be included on screen led to layout wireframes and design in Illustrator, then post effects, colouring and mockup in Photoshop.Did you know the lines in the middle that stay level relative to the ground and indicates the craft's pitch angle is called a ladder, and it has different designs for above and below the horizon? I didn't, and now we both do.
An alternative initiation animation using stacks of effects instead of layered and linked animated elements, as well as an alternative but similar soundscape. This was to explore a whole range of different techniques, appropriate for scene transitions and more noisy animations.
A highly worthwhile and educational exercise. The design answered the creative brief with aplomb, and the animations brought it to life for an engaging glance into the HUD's world and usage.Getting more into AE expressions resulted in a greatly expanded animation toolbag. Controlling elements with Javascript snippets works similarly to game engine scripts so the crossover will be very useful.
In-context background sourced from Everspace by Blackfish Games
A futuristic HUD design for a starship turret gunner, applying techniques learned from Ash Thorp and Carl Hauser. Built in Figma to take advantage of their powerful arc tool.The heat gauge on the right and ammo/charge counter on the left have distinct shapes to not confuse them with the limited palette. The trailing portion on the cross-hair helps with leading shots, and the radar shows field of vision as well as the vehicle direction. Its 2D nature and the magnetic compass suggest they're currently in atmosphere.Visuals elements were used to funnel sight into the middle, and keep important information close to it with extraneous parts around the edges, meant to be glanced at rather than kept in sight.
A new endeavour by Ben Humphreys a.k.a BenUI, an Epic Games UI Programmer. The logo is to be used on a search website for Unreal Engine knowledge, making it easier to find specific niche info. The direction was to make it clean, approachable and a little bit cute, featuring the titular Ferret. The core design was decided on quickly, then variations of fonts, colours and specific design details to get it just right ensured a fit that hit all the desired brand keywords.
Cover for a Byzantine-themed fantasy novel. Hit on core graphics pretty quickly with approval from the client, then experimented colour combinations, layouts and typography ranging from safe to adventurous.Post-release, the cover is often mentioned in user reviews and messages to the author as one of the things people love about the book.See it on Amazon
A Historical European Martial Arts club with a holistic and inclusive approach. The club needed a clear, representative visual identity to start marketing and growing members. Keywords that came up in discovery were "clean, disciplined, control, mastery and modern". Through a collaborative process presenting and consulting at various stages, I brought that through into the final logo.
A plastering company in Australia. The client was clear in their desired imagery, and requested a luxurious, high-end feeling to appeal to upmarket clients. I believe this was achieved.
REBELS IN EXILE - character designsA series of characters exploring an alien court in exile. Inspired by ancient Chinese and Elizabethan themes, these designs started with the central Queen and expanded to imagine her retinue - the General, the Maiden, the Merchant and the Prophet. They were a good exercise in balancing design distinction of individuals with cohesion of the whole group. Suitable for a faction in a tactical RPG, or named characters in an strategy game.
KINGDOM, CAULDRON - character designsThe main protagonist and antagonist in a 2D narrative RPG. A young lass thrust into rule too early, she's trying her best to keep things together when old grudges come to test themselves against the new cold blood. Hounded by an old dog sick of being left out in the cold, he's turning up the heat on our hero to get his due.The Princess was designed to be simple and elegant with delicate details, to emphasise the vulnerability of her new position and her discomfort with opulence, and to be more relatable than the more fantastical designs.
The fiery Rebel's character was less defined, so thumbnails were refined into a few compelling archetypes, of which the most visually commanding won out. The others have potential as deputies or collaborators.
AVT WORK EXPERIENCE APPLICATION STEPS - illustrationsA series of illustrations for a vet nursing school in Perth, Australia. The purpose was to break up the text-heavy web page describing the work experience application process, with a panel for each step.As the brief was to liven up an otherwise very dry page of text, the illustrations were designed to be fun, energetic and playful while still being grounded and literal in what's depicted. It was challenging showing filling in various paper and web forms without making the panels too repetitive. The client was taken by the energy on show.
Character illustrations for prints or personal pieces, showcasing a variety of subjects and styles. Includes: a White Witch grappler Pathfinder character, Samus mutated by the Metroid DNA she was injected with in Zero Mission, a rabbit nun sniper and her fire fairy spotter inspired by Jaya Ply's buns, and a personification of the PS5.
A variety of pieces for selling as prints and stickers, and personal expression. I enjoy flat vector style's effectiveness and simplicity.
BLOWFISH A chunky, underwater mech used for deep sea dives. This one is specced to collect biological and mineral samples. Inspiration taken from deep ocean submarines, crustaceans, industrial equipment and the namesake.
BOLT-FLASH A fast racing mech, lightweight with concessions to holding a pilot. Aeronautics and Formula 1 were heavy inspirations.
Pastel Farm ToolsA rack of medieval level farming equipment, though it's remarkably similar to what one might use in the garden today. Still needs to perform the same function I suppose. Blender Eevee renders in the style of an indie 3D game.
Post-Apocalyptic Ration ContainerA background prop for a sci-fi game set in a near future where humanity is forced underground due to climate change. It makes sense that they use reusable, non-plastic materials as there would possibly be a social stigma against practices and industries that got them into that mess, like single use plastics. The full design process is on display here, with 2D shapes to flat 3D visualisations to textures.
At Game Jam Aotearoa 2021, narrative puzzle game Powerplant was nominated for Best Use of Theme and won the Innovation award. Our team of four consisted of a programmer, musician, writer and an artist/designer (yours truly).Responsibilities:
Look dev
Typography
Icons
Puzzle design
Team coordination
(As a short project with a small team certain considerations were unfortunately left behind, like onboarding and instruction clarity. As such please read the project's comments as the game is very difficult to complete without the added instructions therein!)
With two members in France and two in NZ, project planning and division of labour proved crucial due to limited overlapping waking hours.Initial discussion building on every member's ideas led to the concept of a power plant admin struggling with the computer system’s newly implemented Dark Mode, getting wrapped up in some cold war style espionage along the way. Our limited time and development resources led to simple gameplay - item sorting memory puzzles that got progressively more complex, wrapped with short story snippets in between.
Moodboard - world and feeling
The RenPy visual novel engine was chosen for its out-of-the-box narrative framework and UI, with puzzles inserted between scenes. With themes of nuclear power, near-sighted managerial cost-cutting, and absurdist incompetence, the setting of an unnamed European country during the Cold War made sense, and led to a lot of the story beats.
The theme of Dark and Light and the game’s premise led easily to old monochromatic computer displays. This was both a distinctive look and achievable within the timeframe.
Style research
Puzzles were planned to gradually introduce game concepts - sorting icons into their respective folders, managing the limited allowed Light Mode time to check things that are obscured otherwise, and tricky icons that look the same in the Dark Mode but go into different folders. Each screen was matched to a story beat.
Content plan and brainstorm
Icons were ideated then drawn in Piksel, a pixel art program. Emulating the style of old interfaces as in the research, some icons are a little playful to match the game’s tone.
The finished icons were used to mock up puzzle layouts, deciding which designs to introduce when and balancing repetition with pacing.
Mistake: Icons only difficult to see in light mode don’t challenge the player at all, since they're easy to sort in the free-to-use dark mode. This meant some the icon variations were not required.Solution: Prototyping puzzles with rough sketch icons would have quickly made clear what worked or not.
Full icon set
Problem: Icons have clear sections so the background colour can obfuscate them, but the RenPy engine treats transparent pixels as not clickable. This making click+dragging very annoying, and as our main gameplay interaction, that's a big problem.Solution: The first solution of making the backgrounds 1% opacity still wasn't recognised. Our programmer found a solution: with two different solid background versions of every sprite, he could switch the image to match the screen background on mode change. This did work, but required re-exporting every sprite (twice).Fixing this issue forced cuts to finish, consolidating the 3rd and 4th levels into one. Luckily this was within our planned contingencies and only lost one puzzle gimmick and a superfluous story piece.
Final icon set with different backgrounds
Title Screen Graphic
Day 1 (Dark) mockup
Day 1 (Light) mockup
Day 2 (Dark) mockup
Day 2 (Light) mockup
The final product was a functioning, completable game with custom sound effects and background ambience, four puzzles of increasing complexity, a branching path narrative and two different endings. Not too shabby for a weekend.
After submission, players enjoyed the concept of the game, but struggled with remembering instructions and recognising file icons, as they were shown once at the start of the level and not available during play. This led to errors which accumulated into a game over, and the error tracker did not reset between levels, making the game quite difficult to complete.To somewhat alleviate this an icon identification chart was made and and posted in the comments, with the apologetic suggestion to write the instructions down, as no changes were allowed after submission.
Icon key
Limitation is the mother of invention. Using our team's limitations as a foundation for ideas within what's possible for us, then ideating with a "yes, and" collaborative approach, workshopped a compelling concept that paid off.Key takeaways:
practice gained coordinating across time zones
the importance of a solid action plan
testing as soon as possible - ideally with people outside the development team. You become blind to a new user's experience incredibly quickly, especially under time pressure.
My personal contributions, both art and management, were good opportunities to stretch skills and I learned a lot from the experience.
Upgrade Select mockup
HUD mockup
HUD in Unity (early design)
Personal projects are a great place to explore passions completely freely. Here is a spec project for a mecha rogue-like/lite like Nuclear Throne, Dead Cells and Hades, using a graphic sci-fi vector aesthetic.
Design the user interface for a top-down mecha shooter rogue-like.Visual Direction Futuristic, sci-fi, colourful, clean. Platforms: PC, modern consoles. Lowest target: Nintendo Switch. Target audience: 23-33, likes sci-fi, anime, games like Hades, Hyper Light Drifter, Mechwarrior, LANCER.Deliverables: Designs and mockups in Unity for each of - - In-game HUD - Upgrade select screen
Through market research, polled members of the target audience were drawn to 4 and to a lesser extent 3 due to their interesting shapes and bold colours. This happily mirrored my personal opinions.The importance of structured presentation was made clear, and would have been improved by including visdev samples alongside the UI options so there are concrete visual aides for the game they're being asked to judge the UI directions for. This would have been simple if this project actually had non-UI visdev, but we make do.
A common mechanic in rogue-likes is being given a selection of random upgrade options at certain intervals, and mixing and matching to make the best build you can for the run. The upgrade select screen is where the player is presented with this choice.As a good mix of complex but contained, this was perfect for solidifying an applied style to carry over to other screens. While wireframing in Figma, the following was considered:
Balancing legibility with interesting layering as seen in research
Element hierarchy through size and placement
Hover and selected states, and how they might transition
What is on the immediate surface for the player, vs expand on attention
Different string lengths for items, including for localisation
Interaction on keyboard/mouse and controller
The chosen is a dynamic layout, with bold typography and sensible hierarchy, and room for varying element sizes - the description and stats can easily expand and contract vertically from their top points, and the header has room for 4 lines.
After some style analysis the visuals were built out in Illustrator, experimenting with typography and colours.Weapon damage type icons were discarded as they added to visual clutter unnecessarily for low importance information.The chosen Lemon scheme is bright, fresh and distinct which fit the brief well, while also keeping things legible with high contrast.The detour to flesh out another wireframe (Rolled Edge, middle bottom in upgrade select variations) was worthwhile as it informed some elements of the final, with the background overlay, corner rounding and a different iteration of the stat comparison.
Trying to build this layout in Unity's UI Toolkit was immediately met with regret, wrangling flexbox values and element widths. While it is certainly possible, it felt like fighting Toolkit's nature to make offset, overlapping, odd-width element comps like these. Despite that, it did manage to get to a visually acceptable place.
It turns out SVGs aren't handled very well at time of writing. They render without anti-aliasing and with janky curves. Though the vector 9-slicing capability was interesting, it wasn't worth anything not at a 45 degree angle looking jagged and terrible.Here's a short video walkthrough of the final comp. Sufficient lessons were learned so I moved on to better use my time elsewhere.
The centrepiece of the UI, the HUD informs the player of moment-to-moment gameplay information and so is important to get right. The wireframing process considered:
Information grouping and mapping - is it better to map information to its relevant input placement to intuit controls, or to group concerns and see both weapons/ability cooldowns at a glance?
What needs to be in vision near the reticle or character vs glanced at on the sides
Not obscuring the screen too much as top-down shooters can't move the camera far, if at all. Map and encounter design would control which specific edges need to be kept clear the most.
Support for 21:9 or 16:10 displays
Keeping important elements within the screen's safe zone
Visuals for mockups were developed in Illustrator using the style established in the upgrade select. The mech graphic is from Retrograde Minis. Design considered element states, using the magenta as a warning colour, and imagined how they might animate.
The release of Armored Core VI promted a revisit to this project. The HUD was redesigned to be more compact, and feature more of the technical shapes similar to the Upgrade Select screen.Different states and interactions were then animated using After Effects, adding audio for impact. Expression code snippets made for an approachable, bite-size way of coding animations.
The regular Unity UI system was much more comfortable to work in for this kind of layout compared to Toolkit. The elements were exported at sufficient resolution for 4k displays, then downscaled in engine. A few hiccups with blurry edges resulted from not placing and sizing elements pixel perfect in Illustrator A simple fix sure to be kept in mind for the future.Here's a short video showing the reactive elements of the HUD in Unity, simulating how they might change in different states.
Heavily curate information in presentations. Leave nothing to the imagination so it can't be misinterpreted and get in the way of the real subject.
Clarity on the capabilities of the different Unity UI tools, and will keep them in mind at design and even wireframe stage in future projects. Also keen to experiment with hybrid workflows to leverage both tools' strengths.
Complex designs are harder to build, so are consequently more impressive. A solid reminder to confirm if a higher complexity would be a good resource allocation, and empathy for those in that role. The hand-off from design to implementation led to many a curse to my past self for making something too cool.
Vector images are still not properly supported in Unity, probably why the ability to use them is hidden in a github extension.
Pixel perfect placement and size is important if you want those clean vector-like edges in raster texture exports.
After Effects is fun :)
Harverstar was a Ludum Dare project completed in 48 hours with 2 other team members, a programmer and a game designer. With an appropriate style touchstone and a strong team, leaning into my strengths in vector art led to a smooth pipeline with high quality results.Responsibilities:
Participate in team ideation brainstorming for concept and game design
Art direction
UI wireframing
Game art design and asset creation
Replace placeholder assets in Unity (shared with programmer)
Project page copy writing
Iterative wireframes
Colourful vector art style inspiration (like Kurtzgesagt)
Art pass over wireframe (Illustrator)
Feedback Round 1: Visualise effects happening this turn, genericise background to apply to all events.
Round 2: Re-add event title, finalise card design, improve challenge counter
Round 3: Move status effects to diegetic panel instead of floating above.
Assets for export: icons, environment and UI pieces.
Cards for export.
Designed game-over pop-up and wrote light-hearted flavour text.
The last stretch involved implementing assets over placeholders in Unity, game testing, and rewriting the draft copy accompanying the project upload.This jam was a great experience that went remarkably smoothly. This was thanks to the high competence and experience of every team member, and the designer's solid leadership, maintaining momentum and enabling clear decisions.See the game in action at the link below -
I've had a mailto: link on my website before and it's a massive spam magnet. To mitigate that please click this button to copy my email to clipboard, to paste in your email client of choice. Thanks!
mailto: