HOVER / WORKPRODUCT LANDING PAGE

AI COMMERCIAL BLUEPRINT

A product landing page for AI Commercial Blueprint, a digital guide to AI advertising production. An editorial layout, process diagram and actual sample pages explain the methodology and help visitors compare two product editions.

STRATEGY / UX/UI / DEVELOPMENT / MOTION

WEBSITE LIVE

CLIENT

YevAI.dev

INDUSTRY

Education / commercial production

WEBSITE TYPE

Product landing page

SERVICES

Strategy / UX/UI / development / motion

WEBSITE LANGUAGES

YEAR

2026

01 / CONTEXT

AI Commercial Blueprint is a digital guide to producing advertising with AI. It covers the journey from the brief and visual direction to keyframes, motion, editing, sound and delivery of the finished material.

The landing page needed to explain the product’s scope to creators, designers and small studios. We built its presentation around the methodology, sample pages and edition comparison so visitors could assess the content and choose a suitable format.

Original Blueprint product composition: the cover and pages on the pipeline, keyframes and product fidelity — PRODUCT COMPOSITION / THE COVER AND SAMPLE PAGES

02 / CHALLENGE

Make the content of a digital product clear before visitors choose an edition.

The methodology, examples and working materials required different levels of explanation. Our task was to bring them into a coherent product story, show their practical substance and clearly distinguish what each edition includes.

METHODOLOGY

Present ten production stages as a sequence of actions, each with its own quality check.

CONTENT

Explain the guide’s six modules through their topics, working tasks and actual sample pages.

CHOICE

Clarify the shared foundation of Book and Production Edition and the expanded edition’s additional materials.

FIRST STEP

Let visitors explore through previews, full pages and a separate Production Checklist request.

03 / STRUCTURE

The page moves from production challenges to the system that addresses them. After the introduction and recurring problems, the Commercial Pipeline presents ten stages, while six content modules explain the scope of each part of the guide.

Visitors then explore sample pages and the MIRA and TISSOT studies, consider how the product fits their work and compare editions. The Production Toolkit, free checklist and FAQ extend this journey with specific materials and answers.

PRODUCT & TASKS
COMMERCIAL PIPELINE
SIX CONTENT MODULES
PAGES & STUDIES
BOOK / PRODUCTION EDITION
CHECKLIST & FAQ

04 / ART DIRECTION

The visual direction draws on the language of a working manual: paper surfaces, carbon sections, saturated blue and precise numbering. The cover, diagrams and sample pages become the main visual material and immediately establish the subject.

Large condensed headings work with serif explanations and monospaced labels. Alternating light and dark sections distinguish the main chapters, while rules and margins give the long page the rhythm of an editorial layout.

Original AI Commercial Blueprint cover — ART DIRECTION / THE LANGUAGE OF A WORKING MANUAL

Blueprint sample page analysing TISSOT product fidelity — ART DIRECTION / THE LANGUAGE OF A WORKING MANUAL

05 / DESIGN SYSTEM

The design system connects the product narrative, production diagram, page gallery and edition comparison. Typography distinguishes the main idea, explanations and reference labels, while recurring components maintain a consistent presentation throughout the product journey.

IBM PLEX SANS CONDENSED / 700

AI COMMERCIAL
BLUEPRINT

SOURCE SERIF 4 / 400

From brief
to delivery.

IBM PLEX SANS / 400

Commercial AI
production system.

#0D0D0E

#F2F0EA

#315CFF

#747471

01 / TYPOGRAPHY

IBM Plex Sans Condensed shapes the headings, Source Serif 4 carries detailed explanations, and IBM Plex Mono identifies numbers, captions and technical labels.

02 / COLOR

Paper and carbon establish contrasting sections. Blue identifies actions, numbering and key points; graphite supports secondary information and the rules of the grid.

03 / GRID & COMPONENTS

A modular grid connects stages, content sections, edition cards and working materials. Numbers, dividers and consistent caption structures help visitors navigate the detail.

06 / INTERACTION

Motion establishes the order in which information appears: the heading, explanation, product image and subsequent sections during scrolling. Short button transitions and sequential module reveals support reading, with animation accounting for reduced-motion preferences.

MIRA and TISSOT previews open a full page in a dedicated viewer with access to the original. The FAQ expands answers in place, while the checklist form distinguishes address validation, loading and request result states.

AI COMMERCIAL BLUEPRINT / PREVIEW

The Commercial Pipeline — original Blueprint page showing ten stages of the production process — 01 / The Commercial Pipeline
SYSTEM / PROCESS

Choose a page and select it to inspect the original.

07 / RESPONSIVE

On tablets and phones, the product story retains its sequence while the composition adapts to the available width. Navigation opens in a dedicated menu, editions stack vertically, and text modules receive their own space below headings.

On phones, the ten pipeline stages become a sequential list that retains their groups, descriptions and quality checks. The page gallery scrolls horizontally, while the full-page viewer lets visitors examine details separately from the main narrative.

AI Commercial Blueprint on tablet: Production Checklist cover and request form — 01 / TABLET · PRODUCTION CHECKLIST

AI Commercial Blueprint on mobile: expanded navigation menu — 02 / MOBILE NAVIGATION

Tablet and mobile versions of the AI Commercial Blueprint product landing page.

08 / SELECTED SCREENS

The edition-selection screen connects the product’s shared foundation with the differences between its packages. Book presents the methodology, while Production Edition adds working templates, checklists and editable materials.

A consistent card structure lets visitors compare the editions in the same visual rhythm. The cover maintains the link to the guide, while the blue marker identifies the expanded edition.

THE PRODUCT IN DETAIL

Two editions with a shared methodology and different sets of materials.

09 / RESULT

The completed product landing page presents AI Commercial Blueprint through its methodology, content and sample materials. It brings together ten pipeline stages, six guide modules, the Book and Production Edition comparison and a dedicated route to the Production Checklist.

We created a digital presentation visitors can explore in sequence: read explanations, inspect pages, open studies and compare editions. The structure, responsive compositions and restrained motion support that journey from the opening screen to choosing a format.

PIPELINE STAGES

CONTENT MODULES

PRODUCT EDITIONS

OPEN WEBSITE

NEXT PROJECTSOLARCITY→