Updated on April 12, 2021

Colophon

With a pinch of historical context, a dash of nostalgia, and a 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.

Apple iPhone 3GS

HTC HD7 Windows phone

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…

Typography

The body copy is EB Garamond, which, like Stempel and other Garamonds, is based on the Egenolff-Berner specimen. This one is an open-sourced variant of Claude Garamond’s humanist typeface from the mid-16th century, designed by George Duffner and served by Google Fonts.

The headers and interface are set in Inter, formerly Inter UI, designed by Rasmus Andersson. It’s recently available on Google Fonts, but I’m using his latest variant served from GitHub’s servers with the extra glyphs, stylistic sets, and other OpenType features. I really wish Google Fonts would enable OpenType features. Anyhow, I love how versatile and legible this font is—big, bold headers with round tittles (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 Fonts. 

Server tools

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

Design tools

• Sketch: Diehard fan since 2013. On the fence for 2021 with the third or fourth pricing model—what a pain in the ass.
• 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. I also have a pre-cloud mindset, I don’t like the idea of all of my source files not on my local drive.
• Affinity Photo: Hallelujah, thank you for unshackling me from Adobe. But, wow, what a steep learning curve for many basic operations. 
• Typeface: I appreciate how lightweight and responsive this one is—love the filters with hooks into the font metadata from Version 3.
• Sip: Another lightweight and handy menu bar app for sampling colors. The names attached to hex values are such a nice bonus that I’ve 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. Would love to incorporate Skate ipsum into this little tool.
• iA Writer: I use this for everything. This text/markdown editor feels so natural.
  

And thanks to Mary Norris, a.k.a, the Comma Queen, for sharing her Blackwing 602 pencil obsession with everyone. After reading Between You & Me, I hopped on the bandwagon—I’ve really enjoyed using the long point 602s. 

* * *

-- ·-· -··· ·-· ·· ·- -· -- --- ·-· ·-· ·· ···