Issue 01: Bridging physical product design, UI/UX, and agentic web architecture through a tangible A3 sketchbook.
The Artifact explores the intersection where tactile design meets digital interfaces. Transitioning from traditional graphic design into UI/UX and agentic development requires a new structural approach. This issue documents that evolution, establishing a rigid editorial system to showcase everything from physical furniture to complex software architectures within a tangible, physical A3 sketchbook format.
Defining the user dictates layout density, pacing, and typographic hierarchy.
Analyzing developer-focused platforms and tech editorials. The goal is to echo the precision of a local-first visual editor, utilizing a strict grid to manage dense technical information without overwhelming the reader.
Analyzing lifestyle and architecture publications. Their use of macro and micro white space allows physical products — like industrial furniture or 3D web experiences — to anchor the page naturally.
Drawing from high-end fashion editorials. Using striking, contrasting typefaces to create clear focal points, ensuring the reader's eye is guided logically through the spread using Gestalt principles.
Moving from research into raw geometry, ideation, and physical sketching.
Establishing a robust grid system. A standard 3-column setup feels too rigid for a tech-focused magazine; instead, an underlying modular grid allows for flexible component placement — much like a UI wireframe translated to print.
A geometric, heavy-weight hexagonal emblem containing an inverted triangle. The stark contrast and sharp angles convey precision, engineering, and structure — perfectly aligning with both physical product design and backend development.
A stark, high-contrast monochrome system reflecting digital environments.
A striking, geometric sans-serif to handle loud, clear headers. Supported by a stark, high-contrast monochrome palette to reflect digital environments.
A highly legible, structured serif or mono-spaced font to handle technical body copy efficiently, paired with deliberate white space as an active design element.
Rapid ideation using pen and paper. These initial A3 sketchbook spreads map out the macro-level flow, establishing baseline grids and image containers before any digital precision is applied.
Testing multiple variations of double-page spreads to find the exact right balance between dominant product imagery and readable, technical text columns.
Converting physical sketchbook concepts into precise InDesign architecture.
From physical A3 sketch to print-ready CMYK output — a five-stage editorial pipeline.
Translating the physical sketches into InDesign. Setting up the baseline grid, master pages, margins, and gutters to ensure cross-page consistency and structural integrity.
Adjusting typographic weights and managing text-wrapping around complex product imagery. Ensuring the white space acts as an active, breathing design element rather than just empty background.
The completed A3 physical sketchbook submission and digital presentation.
Print specifications calibrated for high-fidelity physical output.
Prepared strictly for physical A3 sketchbook presentation to meet FMP assessment criteria. A4 portrait format with editorial double-page spreads.
Applied 3mm bleed, crop marks, and strict CMYK color space conversion for flawless, high-fidelity physical printing.
The final printed cover featuring the geometric logo, strict typographic hierarchy, and the assigned ISSN barcode — setting the tone for the tech-focused interior.
The culmination of grid theory and typography, successfully balancing long-form technical copy with striking visual product design.
Utilizing macro white space and image dominance to create pacing and rhythm, allowing the reader to breathe between dense informational blocks.
View the interactive presentation and the full project breakdown at www.the-artifact.co.uk.