Hi, I'm Jonathan Caridia, a New Zealand-based videogame UI artist and designer. Welcome!
Currently open for work. Please email enquiries to: me [at] jonathancaridia [.] com
A personal project featuring a colourful sci-fi interface design, inspired by futuristic vector art of the 00's and today.
Contributing HUD designs to an upcoming cyberpunk fighting game project from game designer and artist Dayniel Deguzman.
To stretch my animation capabilities and explore the potential of After Effects, I designed a videogame HUD for a flying elven mage from an advanced fantasy society. How would their values and magic affect the design, and how would necessary function compare to our own?
A narrative puzzle game completed over a weekend-long game jam in a team of 4. I handled game art, iconography and puzzle design. The project won the Innovation Award and was nominated for Best Use of Theme (Dark and Light).
Ludum Dare entry in a team of 3, making a card-based crop growing game. My responsibilities were UX layout and all in-game art, and I helped implement assets in engine. Playing to my strengths made the process fairly smooth and enjoyable.
Rebels in Exile
AVT Work Experience set
By Dayniel's direction the game's art style was vibrant, futuristic and comic book inspired, taking cues from My Hero Academia and other similar properties. I prepared a number of UI options I believed would be appropriate.
Look 1: Holo-graffiti. Imagining the HUD as futuristic, graffiti style holograms. High saturation, many glows, subtle CRT overlay.
Look 2: Future-Pop. Vibrant, bright, more comic-inspired. Big bold outlined areas, halftones and graphic areas.
Look 3: Graffiti Modern. Modern, bold type and geometric elements mixed or overlaid with graffiti.
After feedback and talking about what elements Dayneil liked from each option, this combined design was accepted for the final (with some saturation adjustments), using the right option for overlay text.Currently in the process of exporting all the elements to bring into Unity for implementation. Excited to see it brought to life!
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.
As pre-production I did some thinking on the values of this society, 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
Featuring delicate decorative elements inspired by nature and art nouveau, a bunch of function taken from real fighter HUD displays, and a little magic missile. 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.
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 more traditional 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 and ammo/charge counter are visually distinct 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.
Bubble payment screen
A 100 days of UI challenge prompt, this was a fun exercise in trying to enhance the appeal of a part of online experiences that are usually very functional and dry. Unfortunately legibility does suffer with the high key colour palette and the text would need to be made quite large to make up for it, but as a quick visual exercise I am pleased with it.
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. An old dog sick of being left out in the cold, he's turning up the heat on our hero to get his due.For the Princess I went with something simple and elegant with delicate details to emphasise the vulnerability of her new position, and to be more relatable than the more fantastical designs.
The Rebel's character was less defined, so I began with thumbnails and refined them into a few compelling archetypes, of which I took the most visually commanding. 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, I made the illustrations 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, but I achieved it after a little iteration. 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.
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. I considered reusable, non-plastic materials as there would likely be a social stigma against practices and industries that got them into that mess. The full design process is on display here, with 2D shapes to flat 3D visualisations to textures.
A variety of pieces for selling as prints and stickers, and personal expression. I really like flat vector style's effectiveness and simplicity.
I love the process of taking things from imagination to reality. I work closely with clients to ensure we're on course, and will end up at a destination you're happy with. Let's go on that journey together!
Knights, sorcerors, fey, tieflings, goblins and more. Give me your warlock cowboy looking to even the score, or shining paladin who trusts her god but not her lord.
*Prices in USD.
Realise your grizzled veteran cut adrift by FTL time dilation, runaway princess of the Karrakin House of Glass, or cybernetically enhanced middle manager of a corpro-state’s Acquisitions division.
Let's build that jet-boosting striker, walking tank, liturgicode-spewing hack goblin or friendly truck horse.
Simple and fun with a splash of colour, these work great for profile pictures, decorative prints or inoffensive,appealing branding material.
If you're wanting something that doesn't fit into one of the above categories, I encourage you submit an enquiry anyway. I enjoy variety!Things I'm especially into:
Weapons and items, prop design (fantasy, sci-fi or realistic)
Or email: commissions[at] jonathancaridia.com
Aww it’s so good! Everything looks great, no changes needed. […] I think you did a fine job. Very transparent and good communication.- Eddie B.
AAAAAAAAAAA SHE LOOKS AMAZING!!!- Amber K.
You did a great job and were very responsive.- Roman A.
Polite and responsive communication, replying within 3 working days.
Sticking to the agreed project scope, or extra payment for additional revisions / deliverables.
Prompt payment within 2 weeks of sending an invoice, via PayPal or NZ bank transfer.
Adherence to personal usage only (unless negotiated otherwise) and to copyright law.
Prompt acceptance (or decline) of commission, or communication to clarify details.
Frequent progress updates while working on your project (min. once/week and upon reaching project milestones).
Full delivery of the project deliverables within the agreed timeline.
Transparent, friendly communication, and prompt notice of any issues that arise.
See the full Terms of Service.
I look forward to hearing from you!
1. Scope This Agreement covers work on items listed in the Schedule of Work, a document listing deliverables and due dates whose contents must be confirmed as correct by the commissioner before I will start work. Any work not included in this agreed-upon Schedule, be it extra deliverables or changes to existing ones in number, scale, level of detail or any other parameter requiring more of my time to complete, will require additional payment and extension of any deadlines by negotiation.2. Usage The products of these commissions are for personal use only, meaning no commercial gain may be attained through its display or use. You will receive only the final image(s) in raster format like .png or .jpg, not working files such as .psd or .ai files, unless negotiated otherwise. You may use final image(s) on social media for a profile picture or banner, or as a post, if you give credit in your bio or post with a link to one of either: - jonathancaridia.com - My profile on the same platform posted on (if such exists). You may print the final image for display in a private setting such as your home. I retain the right to display the work and any WIPs (works in progress) for my own use including promotion, posting on my social media and/or in my portfolio or for any purpose, unless otherwise negotiated.3. Copyright I retain all applicable exclusive rights to works made under the Commission Agreement, including rights of attribution and reproduction. This means you cannot display the work without credit, take credit for work undertaken in its creation you did not do, post the work edited or traced without permission, sell usage rights or copies of the work, enter the work in contests without permission, use the work on merchandise or any other such breaches of copyright law. I will retain all applicable exclusive rights to any materials produced under a terminated commission unless negotiated otherwise.4. Payment I accept bank transfer for clients within New Zealand and PayPal for all other clients. I require a 50% deposit or full payment before starting work, and payment in full before sending the final deliverables. Payment in currency other than USD or NZD will be converted to and due in NZD, rounded to the nearest dollar. Cryptocurrency is not accepted.5. Communication Timely feedback on works in progress and sketches is expected. When feedback is required from you to continue work, no communication for seven consecutive days will be taken as indication to continue as I see fit unless previously communicated otherwise. You will be reminded via email and/or an agreed preferred communication channel one working day before I continue work. Any changes necessary as a result of late communication will be subject to the terms in section 6 (Revisions). Excessively rude or abusive communication is grounds for terminating the commission.6. Revisions Commissions include a limited amount of revision time, outlined in the Commission Agreement. Any time spent on changes over the included amount will be charged at US$40 per hour and due in the final payment.7. Commission Termination and Refunds Either party may terminate (end) a commission with 10 days’ written notice.If you end the commission before start of work, a refund of the full amount paid will be given. After start of work, the deposit is non-refundable. Additionally, payment will be due for any work done to date that exceeds the value of the paid deposit, measured at a rate of US$40 per hour. The final payment cannot be refunded, as it is due on completion of work and its payment indicates satisfaction with the provided services.If I end the commission, I will refund the amount paid, minus an amount for hours of work done so far at a rate of US$40 per hour. I will also give you the option of me sending you any material produced in pursuit of the commission's completion. The exception to these terms is if I terminate on grounds of bad client behaviour, including but not limited to abusive communication, overdue payment or breach of copyright, in which case the same terms apply as if you end the commission. Payment of outstanding funds will be due within 30 days from the date of termination.8. Breaches of Terms If a party is in breach of these terms, that party will be given 30 days to address the breach. If the breach is not adequately addressed as agreed by both parties, the Agreement will be treated as being terminated by the party guilty of the breach. If both parties disagree on whether a breach has occurred or if a breach has been addressed adequately, a third party arbitrator will be found to render binding judgement, agreed upon by both parties. If an arbitrator cannot be agreed upon, the dispute will be resolved by litigation under New Zealand law.9. Jurisdiction This Agreement is subject to the laws and regulations of New Zealand, and any legal disputes will be resolved in its courts and on its land.10. Liability I am not liable to you the client, or any third party for damages, including lost profits, lost savings or other incidental, consequential or special damages, even if I am advised of such damages. If any provision of this contract shall be unlawful, void, or for any reason unenforceable, then that provision shall be deemed severable from this contract and shall not affect the validity and enforceability of any remaining provisions.
At Game Jam Aotearoa 2021, narrative puzzle game Powerplant was nominated for Best Use of Theme and won the Innovation award. In our team of four, we had a programmer, a musician, a writer and an artist/designer (yours truly). My responsibilities were:
- look dev
(Please read the project's comments as the game is very difficult to complete without the added instructions 😅)
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 everyone’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 espionage along the way. Since this was a weekend jam, we went with an item sorting memory puzzle that got progressively more complex, wrapped with short story snippets in between.
Moodboard - world and feeling
Since our programmer was familiar with Python, we used the RenPy visual novel engine as an out-of-the-box narrative solution and inserted the puzzles between scenes. With the themes of nuclear power, near-sighted managerial cost-cutting, and absurdist incompetence, we thought setting it in an unnamed European country during the Cold War made sense, and led to a lot of the story beats.
After a short stint on Pinterest for interface visual research and world ideas, 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.
I planned the puzzles 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. I matched each screen to a story beat.
Content plan and brainstorm
I quickly brainstormed different icon ideas then set to work 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.
I used the finished icons to mock up puzzle layouts, deciding which 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, with some being unnecessary
Problem: Icons are designed with 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: I tried making the backgrounds 1% opacity, but they still weren'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 as necessary. This did work, but required re-exporting every sprite (twice).Fixing this forced issue cuts to finish, and we consolidated the 3rd and 4th levels. Luckily we’d planned for this possibility and we 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
We managed to submit a functioning, completable game with custom sound effects and background ambience, four puzzles of increasing complexity, a branching path narrative and two different endings.
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 help I made an icon identification chart and posted in the comments, with the apologetic suggestion to write the instructions down, as no changes were allowed after submission.
Limitation is the mother of invention. Using our team's limitations and ideas with a "yes, and" collaborative approach, workshopping a compelling concept paid off big time.I was happy with my contributions, both art and management, and learned a lot from the experience. Especially coordinating across time zones, the importance of a solid action plan, and testing as soon as possible - ideally with people outside the development team. You may be missing the obvious!
Upgrade Select mockup
HUD in Unity
A game idea that's lived in my daydreams for a while, I thought it would be a fun personal project to explore the aesthetic and practice my skills. I really like mecha, sci-fi and vector art as well as solid rogue-likes/lites like Nuclear Throne, Dead Cells and Hades, so definitely playing to my passions here.
Design the user interface for a top-down mecha shooter rogue-like.Setting: Futuristic, sci-fi, colourful, clean. Platforms: PC and modern consoles (lowest target: Switch). Target audience: 23-33, likes sci-fi, anime, games like Hades, Hyper Light Drifter, Mechwarrior, LANCER.Deliverables: - In-game HUD - Upgrade select screen Flat designs + built in Unity.
I asked a friend within the target audience to stand in as an art director / client for a style direction presentation to help with decision-making. After considering the options, he was drawn to 4 and to a lesser extent 3 due to their interesting shapes and bold colours. I was pleased as these were the ones I liked best too, but wanted to test my feelings were in the right direction.I discovered the importance when presenting to laymen of either including a separate section of in-world examples to help with visualising the actual game along with the UI, or removing distracting elements entirely to prevent focus on the wrong thing, even if that means editing reference.
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.I started with this as a good mix of complex but contained, perfect for solidifying an applied style to carry over to other screens. While wireframing in Figma I 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 aspects to surface immediately to the player vs expand on attention
Different possible string lengths for items, including for localisation
Interaction on keyboard/mouse and controller
I selected this layout as it was the most interesting with bold typography and a hierarchy that makes sense under that, with room for varying element lengths - 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 I built out the visuals in Illustrator, experimenting with typography and colours. I didn't end up using the weapon damage type icons as in the I found they added to visual clutter unnecessarily for a low importance piece of info.I went with the Lemon scheme as it was bright, fresh and distinct which fit the brief well, while also keeping things legible with high contrast.I took a detour to flesh out another wireframe which I didn't end up preferring - the similar colours on the background layers blend together too much and I never found a purpose for the circle aside from visual balance - but it did inform the final with the background overlay, rounding a few corners and a different iteration of the stat comparison, so a worthwhile exercise.
Wanting to expand my abilities, I decided to try Unity's UI Toolkit to build out this screen. I was immediately filled with regret as I wrangled flexbox values and element widths. While it is certainly possible, it felt like I was fighting Toolkit's nature to make offset, overlapping, odd-width element comps like these. That or I need much more practice. Still, I did manage to get it to a visually acceptable place.
I tried SVGs for the backgrounds, but they aren't handled very well at time of writing - not anti-aliased and with janky curves - unless I'm missing something. It is cool that you can 9-slice them.Here's a short video walkthrough of the final comp. I didn't get all the elements in, but got what I needed as a learning experience so 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. During wireframing I considered:
Information grouping and mapping - is it better to map locations to 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
Trying not to obscure the screen too much as top-down shooters can't move the camera. Map and encounter design would control which specific edges need to be kept clear the most.
How elements might place on 21:9 or 16:10 displays
Keeping important elements within the screen's safe zone
I selected what I thought were the most promising potential solutions given these considerations, then developed visuals for mockups in Illustrator using the style established in the upgrade select. The mech graphic is from Retrograde Minis, everything else I made.During design I considered how the elements would look in their different states, using the magenta as a warning colour, and imagined how they might animate.
Frankly I think any of these HUD layouts could work, and user testing would be required to evaluate them properly. I initially chose to continue with 2, as it offered a balanced composition with grouped concerns - weapons on one side, abilities on the other. There's not too much edge obstruction where enemies would come from, keeping the top + sides free and the bottom somewhat visible under the Ult charge bar and background-less health.
At the release of Armored Core VI I revisited this project and redesigned the HUD to be more compact, and feature more of the technical shapes similar to the Upgrade Select screen. Its footprint could probably be reduced further but I was on a deadline and this is an improvement in my eyes.I then animated different states and interactions 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. I exported the elements at 4x size to account for 4k resolutions, then scaled them down in engine. Had a few hiccups with blurry edges from not placing and sizing elements pixel perfect in Illustrator, simply fixed but will keep in mind for the future.Here's a short video showing the reactive elements of the HUD in-engine, simulating how they might change in different states.
Things I learned or was reminded of in this project:
Heavily curate information in presentations to laymen and probably others too - leave nothing to the imagination so it can't be misinterpreted and get in the way of the real topic.
I now have a much better idea of the different Unity UI tools, and will keep their specific capabilities in mind at design and even wireframe stage in future projects. Also keen to experiment with hybrid workflows.
Complex designs are harder to build, so are consequently more impressive. Will keep in mind the load being passed on to the next in the pipeline and would confirm if a higher one would be a good resource allocation. Especially if that next person is me!
Vector images are to my knowledge still not properly supported in Unity, probably why the ability to use them is hidden in a github extension.
Pixel perfect placement and size are important if you want those clean vector-like edges in Illustrator element exports.
After Effects is great 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, I was able to lean into my strengths in vector art and smoothly make quality assets for the game.
Style inspiration (Kurtzgesagt)
Conversion of wireframe layout to art
Split effects happening this turn and bed status, genericise background to save having to make unique ones for each event.
Add back event title, finalise card design, improve challenge counter
Move status effects to diegetic panel like the rest.
Assets for export: icons, environment and UI pieces.
Cards for export. Would have been more correct to use a prefab but this was faster.
Pop-up mockup featuring light-hearted flavour text I wrote.
After this was implementing the assets over placeholders in Unity, helping with testing, and editing the copy accompanying the project upload. This jam was a great experience that went remarkably smoothly thanks to general competence on everyone's part, and good management by the designer acting as lead keeping things moving and enabling decisions.See the game in action at the link below!