0 0
Hi there!
I'm Eric Yang
About
I am a designer that can code his own mockup prototypes so your team can focus on business logic.
Beyond just Figma prototyping, my creative process is deeply influenced by a combination of the tool-agnostic skillset of concept art combined with the user-centric methodologies of UX.
I draw on my academic background in HCI and cognitive psychology to inform how I employ colour, form, value, & motion in what you're seeing.
Digital Art
Digital Art
The fundamentals of visual design skills — especially how I handle color, value, and contrast — has been developed through my graphic design and digital concept art work.
The process has also given me the confidence in diving head-first into new workflows to achieve my vision; auto-layout or centering a div was nothing compared to the learning-curve of using zBrush and KeyShot to create 3D concept art.
Figma to code
CODE
I love exploring esotric CSS & SVG tricks to take my creative vision beyond what Figma's feature set allows.
Not just beyond Figma's featureset — but also that of popular UI component kits and web design systems — my Trichord Editor project demonstrates my drive to create unique interaction patterns and web visuals.
My coding skillset is focused on design-implementation and seeing what's possible with modern CSS and web animation techniques.
TRICHORD
E
D
I
T
O
R
Initial Figma Concepts
The first draft of the Trichord Editor.
Main Editor Screen
This is where users view and customize their devices' input bindings. The leftmost panel shows the saved keybinds for any given device input/button/axis selected by the user. While the rightmost panel shows all available inputs available by the selected device where users can individually select then bind them to in-game keybinds using the keybind panel overlay.
Keybind Selection Panel
This panel features a searchable database of all in-game keybinds. Every keybind (500+) is accompanied with unique iconography that painstakingly created over many weeks.
Control Profile Selection Screen
This panel allows users to select and create profiles containing their devices with their respective saved keybinds. Selecting a profile will take them to the main editor screen for keybind customization.
TRICHORD
E
D
I
T
O
R
Coded Components
The first draft of the Trichord Editor.
Keybind Selection Panel
Based on PrimeReact's DataTable, the keybind panel let's users select any supported in-game keybind to be bound to a device input. Two extra input layers are provided allowing multiple keybinds on the same input using modifier keys (e.g. akin to ctrl, alt, shift, etc).
LAYER 0 (DEFAULT)
LAYER 1
LAYER 2
- No available options
Interactive Device SVGs
To enable intuitive skeumorphic button/device-input selection, users can simply visually click on any given device input instead of referring to clunky dropdowns with semantically meangingless input labels such as "input 28".
VKB Gladiator EVO Flightstick
VKB T-Rudder Pedals
Device Input Panel
The device input panel shows all avaiable button and axis inputs of a selected device. Clicking on an input will open the keybind panel for users to bind an in-game keybind to the selected input.
Code Markup Examples
CSS/Tailwind Markup
JSON Markup for Runtime Iconography Generation
Rigging Skeumorphic Input
TRICHORD
E
D
I
T
O
R
UX / UI
UX / UI Design
I can work around your frontend UI Library & Design Systems, markup CSS such as flexbox & media-query breakpoints, and deliver prototypes in working code.
I aim to be crossfunctional as possible from talking technical feasibility with developers or seeing how my design could serve marketing goals.
From corporate minimalism to more avant garde themes, I hope what you've seen so far demonstrates my flexibility to cater to any context.
CIAAN Security Corp.
Hi-fi Figma Mockups
Desktop Cybersecurity Automation Platform
Security Assessment Workflow
Designing CIAAN Security's SCAS (Security Controls & Assessment System) cybersecurity assessment workflows through:
1. Improving visual parsing through card-based interaction patterns
2. Reducing mental load and anxiety by exposing and verbalizing various system status states
3. Elevating system aesthetics beyond the basic Bootstrap theme to make it more pleasant to use and marketable to T-Mobile
After
Integrating Flikshop Platforms
Integrating additional Flikshop product platforms into the existing user experience through distinct color pallette identities and interaction patterns such as hotswap menus.
Guided onboarding Tutorials
Onboarding users to newly integrated platform features such as the hotswap menu using pop-up hint tutorials.
Hi-fi Figma Mockups
Mobile App Modernization & Branding
UI & Branding Refresh
Elevating the Flikshop app's visual styling and branding beyond the previous corporate minimalist aesthetic.
Integrating additional Flikshop product platforms into the existing user experience through distinct color pallette identities and interaction patterns such as hotswap menus.
Guided onboarding Tutorials