UI Design
Welcome to my UI Mock-Ups Portfolio. This collection highlights my expertise in designing intuitive and visually appealing user interfaces for various applications. Each mock-up is crafted to provide a seamless user experience, combining functionality with aesthetic design.
Anki
Anki was a robotics startup known for creating consumer-oriented robotic products, including popular items like Cozmo, a small robot with artificial intelligence capabilities, and Anki Overdrive, a robotic car racing game. Here are UI designs I did across their various products.
Anki : Themed Game Control 2/2
Visual treatment for the game controller based on Anki OverDrive's Nuke vehicle. The phone is physically tilted to steer your car. And I/m showing screen functionality and placement that works with your steering hands in landscape mode.
Role : Art, motion and layout.
Anki : Driving UI
Driving interface for Anki Drive/OverDrive
Role : Illustration, effects, motion and Unity implementation.
Anki Drive : Garage With Holographic Treatment
Driving interface for Anki Drive/OverDrive
Role : Illustration, 3D effects and motion.
Anki : Character Visual Treatments
Commander VFX treatments for available versus locked.
Role : Effects and Illustration.
Anki : Visual Treatment
Concept board showing how to immerse the player more in the story and introducing more desaturated UI framing to allow art, icons, and text to pop.
Role: Illustration and Effects.
Anki : Packaging
Anki Drive treatments for the packaging that help the customer understand what this product is. A racing game that you play with your devices.
Role : Art, Concept and Layout.
Anki : UI Visual Treatments
Controller variations across the project lifecycle for Anki Drive/OverDrive
Role : Illustration, effects, motion and Unity implementation.
Anki Drive : Mechanical 1/2
Took a finished UI screen and detailed it out, so the engineers can implement it with pixel perfect results.
Role : Art, Concept, Mechanicals and Assets.
Anki Drive : Mechanical 2/2
Took a finished UI screen and detailed it out, so the engineers can implement it with pixel perfect results.
Role : Art, Concept, Mechanicals and Assets.
Electronic Arts : UI visual treatment
Did this for a mobile game for EA.
Role : Concept, Art and Iconography.
Unannounced Wargame : HUD Treatments
Futuristic treatments for a satellite sensor based HUD ( Heads-Up Display )
Role : Concept Art and Assets.
Unannounced Wargame : Vehicle Treatment
Treatments for a Mech, showing how you have outfitted your mech for battle.
Role : Art, Concept and Layout.
Unannounced Wargame : Vehicle Selection
Garage selection for all the player's vehicles. Presently zoomed-out.
Role : Art, Concept and Layout.
Unannounced Wargame : Vehicle HUD
Lightweight treatment for a tank HUD (Heads-Up Display). I aimed for the entire HUD to remain useful and readable in both bright environments and completely dark night combat.
Role: UI Art, Fonts, and Assets.
Unannounced Wargame : Vehicle Details
Different treatments to show scale and loadouts.
Role : Art, Concept and Layout.
Unannounced Wargame : Vehicle Barracks
Show your vehicles that are ready for combat.
Role : Art, Concept and Layout.
Unannounced Wargame : Icons and Symbols
For various game elements and UI.
Role : Illustration.
Star Wars: The Old Republic (SWTOR) : Web Site Design
Redesign of Star Wars - The Old Republic's web site for The Galactic Starfighter release.
Role : Art, Concept and Layout.
Star Wars: The Old Republic (SWTOR) : UI Visual Treatment
MMORPG HUD theme exploration.
Role : Direction and Illustration.
Star Wars: The Old Republic (SWTOR) : UI Panel Framework
Modular and consistent panels.
Role : Assets and Illustration.
Star Wars: The Old Republic (SWTOR) : UI Elements
Themed modular UI elements.
Role : Art, Concept and Layout.
Star Wars: The Old Republic (SWTOR) : Implementation Styleguide 1/2
Details for interface elements used by GUI programmers to implement systems.
Role : Direction and Illustration.
Star Wars: The Old Republic (SWTOR) : Implementation Styleguide 2/2
Details for the quickslot elements used by GUI programmers to implement this indicator.
Role : Direction and Illustration.
Zynga : Mechanical 1/2
Tooltip details for implementation in The Ville.
Role : Art, Mechanicals and Assets.
Zynga : Mechanical 2/2
Panel details for implementation in The Ville.
Unannounced Wargame : Visual Style Guide
As the first part of a UI re-skin project, here are the style guides that informed that work. I really enjoyed taking hints from the nature of lenses from recent military equipment. The cool effect is caused by the coatings applied for anti-glare or anti-reflective.
Role : Direction and Illustration.
Mobile Game Startup : Modern Military RTS
I was given an early UI concept from the team and did a paint-over to improved the overall feel and function.
Role : Art, Concept and Layout.