Dokle

Tag

Layout

Grids, bento, and the structural decisions that hold a page together.

23 stories

The &friends homepage: a collage of NYC amateur soccer photos with cut-out stickers, a bubble-letter wordmark in acid yellow, and black and yellow pills reading no sponsors, no problem, no turf

Inspiration

&friends builds a soccer archive out of collage web design

Figma release notes page, with the August 21 entry titled Responsive spacing across design and CSS.

Tools

Figma auto layout spacing now matches how CSS does it

The Oimachi homepage in dark mode, with a sans headline whose word Innovation is set in serif italic, and a blurred blue photograph below

Awards

Oimachi runs a studio site on sidebar navigation

The Mosby's Files homepage: a giant condensed headline reading American Modernism over a stack of coloured architect folders on black

Awards

Mosby's Files makes a filing cabinet its navigation

The Bauhaus Clock homepage: a large analog clock face under the headline Turn waiting into watching, with a Buy now button pinned top right

Inspiration

Bauhaus Clock nails the single-product landing page

Partizan's homepage: a masonry grid of autoplaying video thumbnails on a near-black canvas, the lowercase wordmark centered above.

Awards

Partizan turns its homepage into a wall of playing film

Dragonfly's homepage: an insect drawn in ASCII characters on a black background, with DRAGONFLY set in orange across the middle

Websites

Dragonfly's ASCII website design frames the page in DFLY

Dragonfly's homepage: an ASCII-rendered dragonfly in grey characters on black, with the word DRAGONFLY across it in orange

Awards

Dragonfly's hero image is drawn entirely in ASCII

The CoffeeTech home page: giant cream type reading Coffee Roasting Reinvented on a near-black background, with an orange Products button in the nav

Websites

CoffeeTech's manufacturer website design is drawn in vw

The Jacky Winter Gallery home page: three photographs on a black background, each starting at a different height, under a thin nav bar

Inspiration

Jacky Winter Gallery's website design hangs work on black

Jeton's homepage: a pink to peach gradient with a floating 3D coin, the headline One app for all needs in white, and an orange navigation pill at the bottom of the screen

Websites

Jeton's fintech website design parks the nav at the bottom

Nudot studio home page: the words STUDIO and DIGITAL pushed to opposite edges of a black screen, with Traditional Chinese service labels set small underneath

Inspiration

Nudot puts bilingual typography in every page header

The Estudio Niksen homepage: a scanned photo spread of two models in red shorts against a yellow wall, with the handwritten wordmark centred in the header.

Websites

Estudio Niksen lets you set how dense its e-commerce grid gets

The Glitch&Grit home page: a full-bleed film still with the words OPENAI: BUSINESS, REIMAGINED set over it in large cyan grotesk type

Awards

Glitch&Grit turns its portfolio filter into the headline

The Warren and Mahoney homepage: an Acknowledgement of Country headline on a cobalt blue field, with the practice's five-bar monogram below it cut out to reveal aerial footage of ocean surf

Inspiration

Warren and Mahoney's logo-as-mask hero gives every page a different face

The Izanami homepage: a fogged cedar ridge in near-monochrome with the line Remember who you are set in a light serif

Awards

Izanami blurs every photo so the serif stays in focus

The Huts homepage: a video of a dark barn-shaped house beside a pond, with the serif headline "The best way to design and develop a property in the country" and a green Get Started button

Websites

Huts turns real estate website design into eight named plans and a map

The Counter Forms home page: a white board of grey cards showing typeface samples, a black Acknowledgement of Country card top left, and the wordmark drawn as a clock face top right

Inspiration

Counter Forms runs its type foundry web design on grey cards and a single orange

The Beats In Space homepage: a sideways-scrolling grid of mix cards with DJ portraits, above a yellow audio player bar

Inspiration

Beats In Space is the best argument for archive-first web design

Teenage Engineering's homepage: a control-panel nav of icons and labels above a black-and-yellow DAILY LIFE OF MR. UPDATE comic hero

Websites

Teenage Engineering's website treats its product catalogue like a control panel

Raycast home page: the headline Your shortcut to everything set over red diagonal light ribbons on a near-black background.

Websites

Raycast's product marketing site runs one motif through every page

Paper Tiger's home page: the words CLARITY FIRST and IMPACT FOREVER in huge black condensed type wrapping a pink photo of a hand holding a disco ball

Websites

Paper Tiger's studio website bets everything on one giant typeface

StageCrew studio homepage: a two-column layout with stacked work images on the left and a project index listing disciplines on the right, near-monochrome with an acid-green accent.

Inspiration

StageCrew's index-style portfolio layout lets the work speak first