Web build

UPGO

A repeatable build workflow from a spreadsheet brief to a live landing page, with a live URL from the first rounds.

Status: Live, a Vietnamese landing page for a global affiliate network.

The problem

Landing pages stall on missing content and endless review. Links are not ready, assets arrive late, and changes pile up with no way back.

How it runs

1Scope the brief
Brand info and section order come from a Google Sheet, with a new logo and palette and Vietnamese first. Anything missing, like CTA links and offer data, is marked as a placeholder so the build never waits.
2Information architecture
The brief becomes one page of seven blocks: ticker, launch-week slider, hero, advantages, top offers, insights and a final call to action. Copy is cut to three verbs: find offers, run traffic, scale.
3Visual system
Electric blue leads, gold is reserved for calls to action, navy carries the performance blocks. Space Grotesk for headlines, Manrope for text, thin borders. The logo’s own U symbol is reused instead of inventing a new motif.
Tool or model: Space Grotesk, Manrope
4Responsive base, published early
Plain HTML, CSS and JavaScript with the right section order, full Vietnamese copy and clear placeholder states, published early so review happens on a real URL.
5Assets per component
Offer mockups, GEO flags, insight thumbnails, banner visuals and the U symbol are added after the layout settles, each sized to the exact crop it is shown at.
What it taught: A sharp image looked fine opened alone, but a thin gold line aliased when scaled into the banner. Judge assets at display size.
6Interaction, in rounds
Ticker that pauses on hover, auto-advancing slides with crossfade, tabs and swipe, metric highlights, light parallax and scroll reveal. Added group by group, never all at once.
What it taught: The U symbol grew from two layers to eleven 3D layers and covered the brand colour. The light version felt more premium.
7Live review loop
Publish, look at the live page, capture what is off, fix one group of problems, publish again. A ticker that did not move, autoplay that stuttered and a heading that orphaned a word were each fixed in their own round.
8Versions and rollback
Every change is its own commit and version. When the mouse-follow glow on the offers block did not fit, it was reverted with a new commit instead of patched over.
What it taught: Sync the source before every edit. The live page once ran two versions ahead of the checkout and the wrong asset was read.

What exists today

Eight stages from scoping the brief to versions and rollback.
A published page reviewed on a real URL from the first rounds.
One commit and one version per change, with rollback instead of patching over.
Lessons logged: sync the source before every edit, judge assets at display size, start motion from the lightest version.