UI Work

Harvestar (UI, Art)

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.

• Process

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.

• Full Process

Other Work

• Get Commissions (Open)

Individual pieces

Design Work

Elven flight HUD

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?

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.

Other UI

Stargunner HUD

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.

Design Work

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.

Characters

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.

Props + Mechs

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.

Vector art

A variety of pieces for selling as prints and stickers, and personal expression. I really like flat vector style's effectiveness and simplicity.

Art Commissions

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!

Testimonials

Quick Terms

I expect from you:

In return, you may expect:

See the full Terms of Service.

I look forward to hearing from you!

• Submit Enquiry

• Home
• ArtStation
• Instagram
• Twitter

Full Commission Terms of Service

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.

• Back to Commission page

Process - Powerplant

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:

• Download on itch.io

(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

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.

• Download on itch.io

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.

UI Process: Mecha Rogue-like

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.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.

Research

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 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:

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 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.

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:

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.

HUD 2nd pass + Animation

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.

Previous HUD design in Unity

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.

Reflection

Things I learned or was reminded of in this project:

Harvestar: UI and game art

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.

• Download on itch.io

Process:

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!

• Download on itch.io