Colophon

With a pinch of historical context, a dash of nostalgia, and dollop of scrolling…

Designed and produced by Mr. Brian Morris

It’s been 10 years since my last portfolio update and apparently, some things have changed. A decade ago, it was Windows 7 or Snow Leopard and iPhone 3GS or Windows Phone (gulp). When I started at Microsoft, the team was using Photoshop on giant tower PCs with clickety-clack keyboards and the weirdest variety of mice I’d ever seen. I spent a half-day trying to re-map my Apple keyboard controls to Windows 7.

HTC HD7 Windows phone

Apple iPhone 3GS

Apple iPhone 11 Pro

Windows phone?

2010

2020

Operating systems

In the past decade, Apple has conquered all the big cats and is currently road-tripping through California landmarks. Microsoft cycled through Windows 7, 8, nein, and decided to stop at 10.

Operating system release schedule, 2010–2020

Portfolio websites

It’s a little unfair for a direct comparison, but here’s a portfolio entry from 2010 (left) vs. 2020 (right)—both interfaces screen-captured at 1366px wide. The 2010 site has a 2-column layout, displaying left column content at 480px wide. The body is wrapped in a 720px container.

Our screens have higher resolution, and fonts are more diverse, larger, and more readable, but I think the best improvement is how the content, rather than the interface, defines the canvas. Sure, we still have navigation and links all over the place, but those controls are usually right where you need them as opposed to carved out on the top and off to the side.

2010

2020

Half-way there, keep up the great work, buck-a-roo! 🤠

↓

🥧

Colophon, right? Ok, I think it’s ready now…

Design tools

Sketch: Diehard fan since 2013.
Figma: I go back and forth on this one. Love the accessibility and typographic control, not a fan of the file system or component logic.
Affinity Photo: Thank you for unshackling me from Adobe. But, wow, what a steep learning curve for many basic operations.
Typeface: Love how lightweight and responsive this one is. Would love to see smart filters with hooks into the font metadata.
Sip: Another lightweight and handy menu bar app for sampling colors. I love the names attached to hex values and have begun incorporating them into my style guides.
LittleIpsum: A very handy and clever lorem ipsum generator, designed by Dustin Senos, who has a very interesting background
iA Writer: I use this for everything. This text/markdown editor feels so natural.

Server tools

Hosting and domain registration: Dreamhost
Content management system: WordPress
Theme: Semplice
Analytics: Google Analytics

Typography

The body copy is EB Garamond, which is an open-sourced variant of Claude Garamont’s humanist typeface from the mid-16th century, designed by George Duffner and served by Google. Unfortunately, the small caps are not included on Google Fonts, so I had to fake it. I originally wanted to use Adobe Caslon, which is one of my all-time favorites but was not happy with how weird and imbalanced the selection states looked.

The headers and interface are set in Inter, formerly Inter UI, designed by Rasmus Andersson. It’s available on Google Fonts, but I’m using his latest variant served from GitHub’s servers with the extra glyphs and stylistic sets. I love how versatile this font is—big, bold headers with nice, round spittles (not a fan of squares), AND super-crispy at tiny sizes.

For metadata like captions and attribution, I’m using IBM Plex Mono, designed by Mike Abbink and Bold Monday for IBM, also served from Google.

And a few Blackwing 602s…

…because some things never go out of style.

Thanks a bunch, Mary Norris, a.k.a., the Comma Queen, for showing me the light.

***