29/05/2014 · On a plane to Belfast · A site about web design should represent the author’s best thoughts on web design. In the three years since my last design overhaul, I’d grown enough as a designer that when Monotype bought out Mark Boulton Design last month, I felt the time afforded me in those admin-soaked, transitional days were the perfect window to finally have some fun with a redesign.
An aesthetic refresh can be fun, but I wanted to challenge myself with a bit more. I set some design mandates up front:
- In all aspects – color, type, layout – try to be memorable and meaningful.
- Allow for an expressive use of typography in posts.
- Design for fluidity by using all of the available space.
- Have fun; release quick; keep it loose.
I also had two process mandates: use Gridset (a responsive design tool I’ve run for years), and use Typecast (familiarizing myself with my new colleagues). Through both tools, my hope was to simplify tasks and allow for more creative exploration.
Starting with type
Typecast houses thousands of web fonts, poised for your whims, so it’s best to go in with a plan. I first veered anti-trend, shying from the cutesy sans-serifs I see everywhere right now to make a claim on traditional, humanist serifs. Perhaps, I thought, recent advancements in screen fonts and high-density displays might again afford us legibility in such classic faces as Baskerville or Caslon.
I browsed the Typecast catalog and favorited a few fonts that met my criteria:
I then copied and pasted one my posts right into Typecast, applied each font, and pulled up the previews in a Chrome tab running Adobe’s Edge Inspect. This allowed me to view the how each web font ran the gauntlet of varying pixel densities, operating systems, and browser renderings.
My hypothesis was wrong. This process brought out the deficiencies in each font, moving the pain forward and allowing me to make smarter decisions about the type, up front, that side-stepped future roadblocks. The delicate details of my selected serifs did not stand up to such a barrage of display variation. Even the ones retooled for screens. Most lost their historic character on one common screen or another, and inconsistent use of tracking/kerning tables smacked of default text. So I ditched this concept and did rummaging.
When I’m stuck for typeface inspiration, I dig up old MyFont’s “Rising Stars” newsletters, or visit a few discerning type haunts. Typographica had recently posted their favorite faces of 2013, and in it I came across their review of Clear Sans. Described as “efficient”,“sharp”, and “practical”, it was definitely not cute. Its tone seemed a good fit for my writing style, and its forms held up well on my array of screens, so I dove into Typecast and got to work.
Note: The Clear Sans I intended to use – the one lauded by Typographica – was released by Monotype around the same time Positype released the Clear Sans found in Typecast. I wound up working with the Positype font for a while, but thankfully when I realized the difference, and loaded in Monotype’s Clear Sans, it slotted in well with the near-complete design. It was basically a typographic hail-mary.
Deciding the layout
I write about web design, CSS, and other not-so-wild topics. To match, this site should employ a grid system that’s quietly varied; balanced, but with the ability to give the content of posts uniquely expressive typography. I’ve found laying out content using ratios, rather than columns, better suits a fluid design process, and helps take advantage of available space in meaningful ways.
In Gridset, I chose the “Penton” ratio for my proportions, as 1:1.2721 creates small but noticeable increments in size. From this ratio I derived a scale that was then applied to both my layout grid – which divides the viewport space – and the macrotypographic spaces (margins, padding, etc.).
The form of the layout grid has no real analog, though I started by mimicking the page margins of a book. My goal was to give the content ample space, especially at the start of posts. The left margin is equal to the top margin, while the right margin is bisected into whitespace and a vertical footer. My process to arrive at this grid was messy and completely unscientific, feeling out the proportions while jumping between the browser and Gridset.
For the content itself, I wanted to take full advantage of the available space at all times, and use variation of size to express hierarchy. I also wanted to avoid stagnating the composition with even columns of text. I worked iteratively on a simple prototype, bringing in my type from Typecast, grids from Gridset, and resizing to find at which viewport sizes the composition would break down. At problem sizes, I would apply a new grid for layout or content, and eventually found fluid system that worked. Again: messy, unscientific.
The resulting layout is unique, useful, and completely fluid. It has created a challenging landscape in which to lay out each post I write, but its just enough to continually spur me towards a more expressive use of content.
Working with multi-column text on the web
This might warrant its own post, but for now I will briefly explain what I learned on this project. I have worked with text columns on this site before. Prior to the advent of CSS columns, I wrote a php script to divide up content in Wordpress and distribute it evenly into three
div elements. The functionality was trivial, but the design then required anchor links to return the reader to the top of the next column, as even division of content resulted in columns taller than most viewports. This is true of CSS columns as well, and if you want to proportion the width of each column differently, then CSS column syntax falls a bit short.
I have found, for better reading experiences in left-to-right languages, a short left column paired with a right column that runs long works well to eliminate the need to jog back up the document to continue reading. The new design for this site uses this pattern for screens wider than 800px. A thin left column paired with a wide right works well, too. You can chunk sections together and repeat this pattern as you move down the page.
The navigation had been decided months before I began, as I felt a flat layer of posts with an ever-present index made since for my content. Sidebars, categories, or related links felt superfluous and distracting. Eliminating these allowed for a wider exploration of form.
With this and the other broad strokes decided, the details fell into place quickly:
- I worked in black, white, and red for most of this process to indicate how I would use color, postponing the actual hue choices to later in the process when I would have time to be finicky.
- To decide the actual hues, I wound up just stealing a palette from Vasilis van Gemert’s excellent studies in proportion, color, and type.
- Also inspired by Vasilis’ efforts, I pulled the footer up on the right, rotating the text and providing a vertical band of color that became characteristic of the aesthetic.
- At first I designed my grid system with no gutters, using padding on columns to separate content. This didn’t resize well, and I eventually found that gutters, defined in percentages, worked better for this layout. I matched the content grid’s gutter size to the space between the content and the side-footer, strengthening the connection between content and layout.
- The most difficult decision was where to put the logo. I tried just about everywhere, and settled on its current location by finding where it got out of the way, but still helped anchor the composition at the top of the content.
Build walls around the problem
Designers find two things most terrifying: a blank canvas, and designing for oneself. The combination of the two explains why web designers are perennially working on their next site. The walls I built around my choices in the early stages were wholly responsible for this success. I was able to focus on my goals, rather than chasing down infinite possibilities. The results, by my own criteria, make me happy.
But then again, you’re not me. Following this process might be a baffling nightmare for you. You must find what works for you and your content, but hopefully a note here, or an aside there, will help inspire your path next time you find yourself designing for yourself.