Hello, I'm Charles Frelund. I help teams turn complex systems into clear, human-centered products by building in conversation, testing assumptions, and following the evidence.
Learn moreShow less
As the creator of Fly-By-Wireframing, I developed a methodology designed to kill the “waiting tax” in modern software development—replacing endless debates over static comps with real-time, live browser prototyping. I believe the biggest waste in product design isn’t writing bad code; it’s dead time: sequential handoffs, mockups debated in a vacuum, and expensive rework when untested assumptions hit production.
My work sits at the intersection of product architecture, behavioral validation, and organizational flow. By moving cross-functional teams straight into functional code—running on a continuous loop of testing interactive logic before visual polish—I help startups and enterprise teams make high-velocity decisions, eliminate meeting latency, and ship battle-tested software in record time.
That trade-off comes with a hidden tax: dead time. Static mockups get debated in endless meetings. Work waits in sequential handoffs. Then untested ideas hit production and trigger painful rework.
Fly-By-Wireframing changes the order. We build interactive, behavioral blueprints directly in live browser code. Once the behavior is proven, visual design can elevate the foundation instead of decorating an educated guess.
The process
From big idea to real product
Talk it through. Build it live. Prove it works. Then polish.
01 / WOW!
Wireframe Over Words
A big vision lands and everyone goes, “WOW!” Before the room disappears into specs and speculation, open the browser and prototype the idea live.
The test: If you can argue about it for ten minutes, you can test it in five.
02 / TBD
Talk. Build. Decide.
At the start, most feature details are To Be Determined. Talk through the logic, build it in live code, and decide together based on how it actually feels.
The rule: Don’t leave TBD in a spec doc. Resolve it live in the browser.
03 / MVB
Minimum Viable Behavior
The result is a working answer to the important question: does this do what we thought it should, could, or would do? Test the interaction and flow before visual polish.
The principle: Function before finish. Prove how it works before deciding how it looks.
04 / MVP
Minimum Viable Product, in Sprint 1
Because the MVB is already live browser code, shipping doesn’t mean starting over. Visual design wraps the validated behavior to deliver a polished, production-ready MVP in Sprint 1.
The reminder: Never decorate confusion. Build your MVP on a proven MVB.
02 — My Philosophy in Practice
Two projects, two different design problems. These case studies will document the constraints, decisions, and iterations behind each one.
MCCS · E-commerce wireframe
Marine Corps Community Services Enterprise Website
An enterprise website experience for Marine Corps Community Services. The case study will document its structure, interaction paths, and design decisions.
Case study in progress
Oarfish Marine · Product website
Oarfish Marine
A static marketing site for Oarfish Marine. The case study will document the visual system, product storytelling, and build decisions.
Case study in progress
03 — The Exposés
Exhaustive teardowns of web mechanics, semantic integrity, and interaction patterns: the small decisions that shape how an interface works.
Three mechanics, examined closely
01 / Macro patterns
CenteredSplitTask-firstMedia-ledType-ledCommand
The Hero Spectrum
Six ways to begin an experience. When does each pattern create clarity, and when does it get in the way?
Layout · hierarchy · failure modesDeep dive in development
02 / Component mechanics
Save changes buttonView details link ↗Saving…
Buttons vs. Links
An architectural line with consequences for semantics, keyboard behavior, browser history, and loading states.
HTML · keyboard · accessibilityDeep dive in development
03 / Visual systems
←Back+Add item•••More options
Iconography in Micro-Interactions
Hit targets, accessible names, helpful tooltips, and how small symbols either clarify a moment or add noise.
ARIA · hit targets · visual balanceDeep dive in development
04 / Form architecture
01One clear step02Details when needed03Review before send
Form Flow Architecture
Single-page, stepped, or conversational: choosing the flow that reduces friction without hiding what comes next.
Forms · cognitive load · recoveryDeep dive in development
04 — Writing & Thoughts
Notes on the decisions behind the interface: how people think, how systems behave, and where design meets engineering.
Mar 1, 2026 Great design isn't seen — it's felt. When an interface demands attention, it has already failed. Here's how I think about building experiences that get out of the user's way.
Feb 18, 2026 Every engineering team I've ever worked with treats performance as infrastructure. It isn't. Every millisecond of delay is a design decision with measurable consequences on human cognition.