|
I woke up yesterday thinking I was going to write about heading styles and tables of contents. I’ve rarely been so happy to be so wrong. Let me explain.
I had a chat the other day with someone about speaking at their events next year, and what I might focus on as an evolution of this year’s concentration on dynamic typography. I’d like to push farther on the whole editorial design angle, and we talked about what that might entail. We ended the call with some interesting ideas, and I was pretty excited to start thinking about it more deeply. I wasn’t expecting that process to start right away.
When I started looking through some magazines, I discovered something that I can’t help but feel will be a big part of what I design, research, write, and present for quite some time. Needless to say, I’m pretty excited about it. I hope you will be too!
For those of you in or near one of these wonderful cities, there are still seats available for my workshops in Tokyo, Toronto, and Berlin this fall—so follow the links if one of those fits your schedule. Of course, if you’d like to find out about a talk or workshop for your own team, hit reply and I’d love to chat about it.
This just in from the good folks at FITC:
Get back in the classroom with a workshop at Web Unleashed and save 50% for one week only!
Workshop only tickets regular price $449 // Now -> $249.50 with code CALCULATOR
WORKS passes regular price $1099 // Now -> $899 with code DUOTANG
Choose from four topics: Variable Fonts, Vue.JS, Design Thinking, and React with Gatsby.JS
These prices will only last until midnight on August 23rd, or until space runs out.
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
We’re doing it wrong: there is no ‘one perfect design’ or layout
|
|
|
For a very long time we’ve been chasing the ‘one layout to rule them all’ in our designs. We’ve bootstrapped, gridded, and patterned our way to a layout that works with every piece of content. Components that behave with all or none of the supported fields. Alignments that flex to fit every screen. Platforms like Medium have come along, allowing organizations to easily publish content with consistency, polish, and magazine-like style.
Except that’s not actually how great magazines are designed.
I’ve fallen into this mindset myself over the years, and while I knew that something was missing, even having studied graphic design (and done a fair amount of print work) I couldn’t put my finger on it. Until now.
|
|
|
|
Example article layouts from Vanity Fair and Communication Arts
|
|
Lifting our heads to see above the rut into which we’ve fallen
I’ve somehow taken it as rote you should come up with a good layout for content, give it some flexibility for different kinds of content modules like images, quotes, asides—and then use that layout for content on your site, and that layout alone. It’s gotten better over time—building in a bit more flexibility within the content modules like width, alignment, captions, and whatnot. But overall, everyone from Medium to the New York Times to [insert just about any blog here] has settled on a pretty standardized solution for presenting longer form content on the web.
|
|
|
|
Prototypical content strip down the center of the screen on NYTimes.com
|
|
|
Don’t get me wrong: the focus on content, the better use of whitespace, the reduction of the claustrophobic clutter are all are good things. But while an improvement, it’s still a lot of the same. I wanted to showcase how we might vary our designs, so I grabbed a couple of magazines and started to look at their covers and tables of contents. I thought that might give me some examples to play around with. Then I started to flip through some of the articles.
|
|
|
|
CommArts has a one-column layout, but with the veritcally set title it feels far more dynamic
|
|
A sudden, violent shift of perspective
I counted at least six distinct layout styles in Vanity Fair, and easily as many in Communication Arts. Sure, there’s always generally some underlying similarities in grid, typography, and/or layout—but those structures get pushed and pulled quite a bit throughout both publications. TYPE magazine does this as well. If we want to create the same kind of vibrancy in our online publications, we need to rethink our notions about what makes for good design on the web. Just as it’s not necessarily true that fewer weights of a typeface makes for better typography—we shouldn’t assume that every content page should have exactly the same design. We can, to steal a phrase, think different.
|
|
|
|
Two to tango: a split layout with bold rule down the middle sets a striking tone
|
|
|
Not willy-nilly-all-over-the-place different, but clear, purposeful variation that’s built into our design systems so they fit within the whole. This, coupled with a bit of per-page design flexibility afforded us by technologies like CSS Custom Properties and variable fonts, gives us the kind of layout and design flexibility that make publications like Vanity Fair so good.
|
|
|
|
And then there were three: a beautiful layout from Vanity Fair
|
|
Take it to the web, intrinsically
So in keeping with the idea of building on what we’ve learned, I took an article I wrote a few years ago and set it up using the styles from last week, but this time using another one of Monotype’s upcoming releases: Universe Next Variable. With it’s width range from 75%-140% and weight range from 300-900, it makes for a great set of fonts with which to experiment.
|
|
|
|
Our ‘sorta standard’ layout with a little bit of scale with headings and image
|
|
|
I added just enough CSS to make it a relatively familiar-looking layout of larger head and subhead, full-width images, and centered column of text. All the same attributes of scaling font size, weight, width, and line-height from last week. And the addition of some links at the top. These links trigger two additional layouts, but ones entirely driven by CSS—no markup changes were made.
|
|
|
|
We start to exaggerate the scale a bit more, and do some math to keep the wider text column while scaling the image to fill the space on wider screens
|
|
|
Each of the two different layouts are only 70-100 lines of CSS, but the effect is quite dramatic. All triggered by the presence of a single class. If we were to build this kind of flexibility into our content management system, the person publishing the content could make a conscious decision with each article. That, coupled with different choices on the component level for image sizes and alignments, etc, could result in a vastly more varied reading experience. We could bring design back into the publishing process. Sure, a great design system is invaluable. But that’s our plateau, from which we can launch for the peaks. Good design follows good design practices. Great design know’s how to break them.
|
|
|
|
This one pushes the scale of the text and layout a bit more, and really leverages the flexibility of Univers
|
|
When Jen Simmons coined the phrase ‘ intrinsic web design’ this is what she was talking about. Reimagining the concepts of layout, typography, and hierarchy inspired by great graphic design, but realized in a way that is native to the web—embracing all of the modern techniques and technologies we have at our fingertips.
If we are to progress the state of digital design, we simply have to overcome the ‘sea of sameness’ with which we are confronted every day on the web. It’s true the web isn’t print—we want to be designing in ways that are of the web—but as of yet, we’re still decades behind our erstwhile paper-based alternatives. We can do better.
|
|
Does your organization need a boost?
If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!
|
|
Upcoming Events
- Winding up in the Windy City for An Event Apart Chicago on August 26-28
- Teaching a full-day workshop and giving a talk on variable fonts at ATypI Tokyo on September 4-7
- Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14
- Heading to Edinburgh, Scotland, for Finch Front-End to talk about Dynamic Typography and Variable Fonts on September 23-25
|
|
|
|
