Website Design Process
A landing page for Verifly — a sales-driven showcase for the real-estate platform. This is where we collect concepts, wireframes, and design iterations.
Production Build
The real Astro production site, served over the internet (GitHub Pages snapshot). Rebuilt from site/ on every accepted screen.
Open Live · localFront-end (live)
The dev server with working animations — pins, scroll, transitions. Opens only while the local server runs on this machine (port 4321).
Open DecisionTechnology Stack
Chosen production stack — Astro + Storyblok + GSAP + Cloudflare Pages — with the full contender comparison and the requirements it was judged against.
Open Live docProcess & Questions
Working checklist — open questions for the client and build stages, with answers logged as they arrive.
OpenConcept 1
First design concept — hero with 90° orbit video, glass deal-cards as floor markers, white-fade overlay.
Open NewConcept 2
Quick variation of Concept 1 — glasses panorama becomes the hero, orbit-with-cards moves down to anchor "Private Deal Network".
Open NewMobile First
Mobile-only hero — glasses panorama with price tags, dark navy background, image-first layout. Based on approved Figma direction (node 99:2071).
Open SandboxSandbox
Internal experiment ground — concept-1 search-section variants laid out side-by-side. Winner drops back into concept-1/index.html#search.
markers 01
Pulsing 40px markers over the orbit video. Hover/click reveals the matching deal-card. Studies marker → card interaction.
Open FoundationsUIKit
Visual source of truth — tokens, type scale, components. Edit shared/tokens.css or shared/components.css and every page picks it up.
Resources
Project stages
-
01WireframeComplete
-
02DesignComplete
-
03Front-endComplete
-
04Back-endPending
-
05TestingComplete