Hi, I'm Jonathan Caridia, a New Zealand-based UI artist and designer working on video games & more. Welcome!
email: me [at] jonathancaridia [.] com
Elven flight HUD (UI, Animation)
To stretch my animation capabilities and explore the potential of After Effects, I designed this videogame flight HUD for a magitech-inspired Elven fighter helmet. What would a flight HUD look like from a society of Tolkien-style elves, using magic instead of technology?
Harvestar (UI, Art)
Ludum Dare entry in a team of 3, making a card-based crop growing game. I did UX layout and all game art, and helped implement assets in-engine. Playing to my strengths made the process fairly smooth and enjoyable.
Topdown Mecha Rogue-like (UX, UI)
A personal project using a game idea I've had for a while to explore a modern interface design, inspired by futuristic vector artwork of the 00's and today.
Game Jam Aotearoa award winner - Powerplant (UI, Art)
A narrative puzzle game completed over a weekend-long game jam in a team of four. I handled art, iconography, typography and puzzle design.
Other Projects
Stargunner HUD
Bubble payment screen
Projects
Project: Rebels in Exile
Project: Kingdom, Cauldron
Mecha designs
AVT Work Experience set
Individual pieces
Among the Hollow book cover
SoHA logo
Sistine Plastering logo + business card
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 somewhat mask it
Restrained and elegant; Decorative but tasteful
Design
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.
Alternative animation
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.
Conclusion
A highly worthwhile exercise I learned a lot from. Really happy with how the design answered the initial idea Getting more into expressions expanded my toolbag considerably, controlling elements with Javascript snippets functions similarly to game engine scripts so the crossover I'm sure will be very useful.
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.
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.
AMONG THE HOLLOW - book cover
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
School of Historical Arts - logo
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.
SISTINE PLASTERING - logo & business cards
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.
Concept Projects
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.
Individual Illustrations
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.
Mech Concepts
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.
Prop concepts
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!
DnD/Fantasy Characters
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.
LANCER/Sci-Fi Characters
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.
Mecha - LANCER etc.
Let's build that jet-boosting striker, walking tank, liturgicode-spewing hack goblin or friendly truck horse.
Colourful Vector Art
Simple and fun with a splash of colour, these work great for profile pictures, decorative prints or inoffensive,appealing branding material.
...Something Else?
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:
Female characters
Weapons and items, prop design (fantasy, sci-fi or realistic)
Expressive emotes
Or email: commissions[at] jonathancaridia.com
Testimonials
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.
I expect from you:
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.
In return, you may expect:
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:
Art
- look dev
- typography
- icons
Puzzle design
Team coordination
(Please read the project's comments as the game is very difficult to complete without 😅)
Prep
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.
Research
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.
Style research
Concepts
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.
Development Hurdles
Mistake: I realised since light mode is used only in infrequent bursts, being difficult to see in light mode but easy in dark doesn’t challenge the player at all, which meant some the variations were not required. Solution: Going to mockup and testing the icons in "use" sooner would have made clear what worked or not.
Full icon set, with some being unnecessary
Problem: The engine treats transparent image pixels as not clickable, and the icons are designed to let the background colour through. This makes dragging very annoying, which is a big problem as that’s our main gameplay interaction. Solution: I tried making the backgrounds 1% opacity, but no go. The programmer found a solution: with two versions of every sprite, one with a solid black background and one with white, he could switch them on mode change to match the screen background. This did work, but required re-exporting every sprite. Fixing this forced 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.
Icon re-exports
Results
Title Screen
Level 1 (Dark)
Level 1 (Light)
Level 2 (Dark)
Level 2 (Light)
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 what icons went where, as there was no help screen during the puzzles. 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 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.
Icon key
Reflection
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 to see if something works, or what you’d need to make it work. It might be less than you think.
Upgrade Select mockup
HUD 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.
Brief
Design the user interface for a top-down mecha shooter rogue-like game. Setting: Futuristic, sci-fi, colourful, clean. Platforms: PC and modern consoles (lowest target: Switch). Target audience: 20-30, likes sci-fi, anime, games like Hades, Hyper Light Drifter, Into the Breach, 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.
Upgrade select
A common mechanic in rogue-likes is being given limited 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
Feedback for hover and selected states, and how they might transition
What aspects to surface immediately to the player vs expand on attention
Leaving body and header text enough room to expand from different content or 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.
Building Upgrade Select in Unity
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 - 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.
HUD
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 and 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 HUDs could work, and user testing would be required to evaluate them properly. However I chose to continue with 2 as it offered a balanced composition with grouped concerns and not too much edge obstruction where enemies would come from, keeping the top and sides free and the bottom somewhat visible under the "ult" charge bar and backgroundless health.
The regular Unity UI system was much more comfortable to work in for this kind of layout. 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 setting them pixel perfect in Illustrator, but that was a simple fix with adjustment and re-export. Will keep in mind to build it right first time in the future though.Here's a short video showing the reactive elements of the HUD, 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 things are harder to build, but 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.
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.
Process:
Iterative wireframes
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!