Beziers: Neubau Welt
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.
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 could/would enable OpenType features). I love how readable and 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 Fonts.
Server tools
- Hosting and domain registration: Dreamhost
- Content management system: WordPress
- Theme: Semplice
- Analytics: Google Analytics
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.
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.
* * *