Skip to content
W06 / 01Development

The expertisejournal

Entry 01 / Development

The clearest evidence of how something is built is the thing itself. This is the architecture of the publication you are reading: seven routes around one transition engine, and the systems each of them relies on. Hover a node to read it, select a page to travel there.

HomeAboutProjectsCase studiesExperimentsExpertiseContact
W06 / 02Digital Design

Digitaldesign

Entry 02Design here is a system before it is a style: a type scale, a palette with a role for every colour, and a grid everything snaps to. These are the real tokens of this publication. Tune the scale, copy a colour, switch the grid on and off.

Modular type scale

  • 67 pxUniverse
  • 51 pxUniverse
  • 38 pxUniverse
  • 28 pxUniverse
  • 21 pxUniverse
  • 16 pxUniverse

Twelve column grid

Masthead / 12 columnsType is architectureEvery block starts and ends on a column line, so the page reads as one composition.

Palette / Select to copy

DisplayAnybody
Variable weight 100 to 900, width 50 to 150
EditorialInstrument Serif
Roman and italic for voice and contrast
TextInstrument Sans
Variable weight 400 to 700 for reading
LabelsJetBrains Mono
Metadata, readouts and code
W06 / 03Creative Coding

Creativecoding

Entry 03Code is a drawing tool. This fragment shader runs once for every pixel on the right, sixty times a second. Its four uniforms are wired to the sliders, and the source beside it updates as you play.

1uniform float uTime;
2uniform float uFrequency;  // 1.40
3uniform float uWarp;  // 0.60
4uniform float uSpeed;  // 0.25
5uniform float uHue;  // 0.00
6varying vec2 vUv;
7
8vec3 palette(float t) {
9    vec3 a = vec3(0.55, 0.45, 0.6);
10    vec3 b = vec3(0.45, 0.4, 0.4);
11    vec3 d = vec3(0.0, 0.18, 0.42) + uHue;
12    return a + b * cos(6.28318 * (t + d));
13}
14
15void main() {
16    vec2 p = (vUv - 0.5) * 2.0;
17    float t = uTime * uSpeed;
18    float n = snoise(vec3(p * uFrequency, t));
19    p += uWarp * vec2(n, snoise(vec3(p * uFrequency + 7.1, t)));
20    float rings = sin(length(p) * uFrequency * 6.0 - t * 4.0);
21    vec3 color = palette(rings * 0.5 + n * 0.5);
22    gl_FragColor = vec4(color, 1.0);
23}
Fragment shader / live
W06 / 04Technology

The stack

Entry 04 / TechnologySix layers hold this publication up. Scroll to pull them apart, then hover a layer to read what it does here, on this page, right now.

W06 / 05Creative Process

Creative process

Entry 05Six stages, one continuous line. It is the same path this publication travelled from a brief to the page you are reading.

  1. Stage 01

    Research

    Study the references, the content and the people it is for. Learn what makes the best work in the field feel special before deciding anything.

  2. Stage 02

    Concept

    Name the idea in one line. Here it became Typographic Universe: a publication where type, motion and space speak as one language.

  3. Stage 03

    System

    Lay the foundation: typefaces, palette, grid, a constructed alphabet and the components every world will share.

  4. Stage 04

    Motion

    Design how things move: easing, timing, continuity. Each world receives its own rhythm, some fast, some deliberately calm.

  5. Stage 05

    Build

    Engineer in stages: architecture, navigation, scenes, transitions, then every page, without shrinking the vision along the way.

  6. Stage 06

    Refine

    Audit as a creative director and as an engineer: performance, mobile, accessibility and every detail, until it holds up.