Swiss design, minimalism, typography and grids

Swiss design and minimalism

I love Swiss graphic design. I love the simplicity, the typography and the rigour of the grids. And so I love Swiss Legacy, a blog devoted to the ever present legacy of Swiss design and all it represents. I also love swissmiss, the astonishingly incessant blog of Tina Roth Eisenberg, a ‘swiss designer gone NYC’ in which she publishes a ‘visual archive of things that make me look’.

One of things that made swissmiss look recently was a TED talk by John Maeda on Simplicity Patterns, in which he talks about paring down to basics, and how he creates clean, elegant art, websites and web tools, boiling it down to one simply delightful way to be.

Also found via swissmiss, Rainfall Daffinson has chosen 24 moments of minimalism in web interface design from the last decade. On the same page, they’ve also put together a great list of minimalism resources and a fine selection of some of the best new minimalist websites (including a smattering of Britpackers).

In defining minimalism, Rainfall Daffinson included this perfect quote from Muji designer Tokujin Yoshioka.

Minimalism design relies on subtraction and the preservation of empty space.

Typography

Speaking of love and lists, relative newcomer I Love Typography is getting a lot of attention at the moment, and rightly so. Especially notable is the recent post of 15 Excellent Examples of Web Typography which admitedly includes the usual suspects, but is notable for including some unusual – and perhaps controversial – ones too.

Another typography blog to which I’m subscribed is Type For You. It’s run by Pedro Serrão, a Portuguese graphic designer, so there’s plenty of European references, the type of which don’t surface of often as they should on some of the more established type blogs.

Grids

Aaron Gustafson recently published an article on A List Apart in which he proposes some Javascript to wrestle images into place. The problem being that you, the designer, come up with a perfect flexible grid which requires images to conform to one of a number of pre-defined sizes. Except the ensuing content creators inevitably ignore these rules and upload images of sizes which suit them best (for whatever reason). Instead of forcing the CMS to resize the images, Aaron’s script calculates how the image should fit into your grid and retrospectively applies CSS classes accordingly. Clever stuff (even if it does require Prototype).

A week ago, Jon Hicks twittered thusly:

Hicksy wonders if someone clever with javascript can come up with a background grid thing, that can be toggled on/off via keyboard

Mere days later, Stephen Hallgren came up with Grid Layouts.com, a magnificently handy bit of code for toggling a grid on and off straight from the keyboard using ctrl+shift+g.

And so to the CSS 3 module CSS Grid Positioning which was recently released as a working draft. The official description:

An element with columns (as in Multi-column Layout) establishes an implicit grid. Together with optional explicit grid lines, that establishes a coordinate system for positioning floats and absolutely positioned boxes. This module proposes properties to position and size floating boxes relative to this grid.

Essentially the module will enable authors to define a grid and then position content elements with that grid, allowing for column spanning, and content flow around positioned elements. If/when it ever comes to fruition, this will be a fantastic addition to CSS, so much so that it might actually make it easier to create tightly gridded layouts on the Web than in conventional print layout software.