Yet Another Portfolio Operating System (YAPOS)
And why you don’t want to have one of many.
I’m gonna get heat for this. And that’s ok, but someone needs to say it:
No more operating systems as portfolios.
I get it, I do. I mean, I really do. My first portfolio was not the ever-popular Windows 98, nor the sleek indie pick MacOS. Oh no, my first portfolio operating system was IBM’s 1988 GEOS.
I loved the Retro Aesthetic; the big, clunky buttons; the 8-bit font that made me feel like I was sitting on the CLI chatting with Alan Turing himself. But, most of all, I loved the Flex. Surely, no one else has built a GEOS simulator as a portfolio. Surely, this will impress. And the code can even be good too. Modular. I can use React Draggable, define complex windows in terms of smaller components, and express myself while doing it. It’s a perfect weekend project.
As Monday rolled around and my site could give IBM a run for their money, my first thought was “This is so sick! I’ll definitely stand out from the crowd because I’m flexing my frontend and design skillz all at once.”
And then I didn’t… Months, an entire year, went by, and I didn’t hear a peep on my sweet ass GEOS simulator (“emulator” if you want brownie points). My fine-tuned custom résumé — with mathematically perfect padding, strategically placed colored underlines and highlights, using the web design standard of Helvetica Neue — none of it seemed to matter either.
“This can’t be,” I thought. This was a well-designed résumé for a “designing-well” position. It should be a slam dunk. It should draw in recruiters like honey to flies. It shows I can build interactive experiences on the frontend, that I can React™, that I can keep up with the Wes Boses of the world. And then I realized, browsing the web one day (every day, really):
So can everyone else.
Because, in fact, it seems an unavoidable right of passage for eager, young frontend developers to remake some nostalgia trip operating system and nestle away easter eggs, terminal surprises, and pixel perfect SVG replicas of 20 year old GUI icons. You spend hours whittling away on getting margin-top just right. You’re Jony Ive, you’re Dieter Rams, you’re… forgetting design fundamentals.
What is the Point of a portfolio? To showcase your work. To provide contact information. Perhaps, on the web, to include a (topical) blog where you show, beyond the end products, how you think about your process. Ideally, something you should be aware of in all your projects is certain “design principles.” According to me, good design is:
- Accessible
- Simple
- Balanced
- Obvious
- Pleasant
An “operating system as a portfolio” turns up pleasant to 11 and fails everything else.
Accessibility
Now that smartphones account for 50% of our web browsing, it’s common to hear the advice to design “mobile first”: design for constrained environments first and then consider more expansive ones. I’m not gonna say if this is right or wrong, but it’s pretty obvious that having a mobile design is good nowadays, whether that came first in the design process or not doesn’t matter to the end-user.
Windows 98 was not designed “mobile first.” It was designed before smartphones were even A Thing, much less The Thing. MacOS was not designed “mobile first.” (Although, that might change soon with the move towards one unified iOS. But for now, May 2021, no.) They were designed for large, horizontal displays, a mouse, and a keyboard. This influenced their UIs and makes them particularly ill-suited for a mobile world. Knowing this, recognizing the contexts, strengths, and weaknesses of designs, shows that you think critically about your work instead of reaching for whatever tickles your fancy.
Accessibility also means considering users with different needs and backgrounds. Does your MacOS Catalina replica support screen readers? Do you have alt and aria attributes set for the navigation? What about for the various link hacks you had to use to simulate an operating system in the browser? IBM’s GEOS certainly was not designed to pass the WCAG contrast ratio test, so did you fix that? What about larger text sizes? Does zoom/magnification work properly? These are all things that come easily to a text-based portfolio which need to be painstakingly curated in an OS portfolio.
Of course, it is possible to make these simulations more accessible. You can approximate HTML information hierarchies using semantic HTML, but it requires a lot of effort and begs the question: “Is this the best tool for the job?”
Simplicity
Typical portfolios are simple. You have pages, not modals. You have hamburger menus or navbars, not “Start Menus.” You have links, not React Router Links™. You generally don’t need to worry about browser compatibility. Anything that supports flexbox and maybe night mode styles should render your site roughly identically. It’s very difficult to feel this assurance with a GUI.
The visual hierarchy of a typical portfolio is straightforward: H1, H2, P. Boom, post, share, repeat. By and large, my grandma knows her way around this page. This is a good page. What do you think she’s going to think when she opens up yoursite.me and decides her computer has crashed. “The Google isn’t working!” Your operating system imitation machine is not simple. I mean, that’s part of why you liked it, right? It’s Cool, it’s a little harder to implement, and it’s interesting. But it is not simple. The user needs to understand the context of “this person has re-created an operating system interface as their personal portfolio” to even begin to navigate your site.
And don’t even get me started on about.txt in the “web terminal.” You want me to ls and cd my way around when the internet was created to avoid this very thing?
Balanced
Good design has visual balance because I said so. You have more important information and you show this importance with visual design. Print design has done this for centuries. The titles of chapters are large, the subtitles are smaller than the titles, and the body of the text is smaller than that. Footnotes are even smaller because they are supplemental information. The visual design of these elements (text size, font weight, placement, padding, white space, contrast, color, decorations, etc.) all go to convey the hierarchy of the elements themselves. Browsers are nice and provide much of this styling out of the box, and we go in after and make improvements and additional rules. But these should all go to highlight the inherent structure of the page and the relationship between its elements.
“What if it’s a web app? Not everything on the internet is a portfolio!” Yes, but your portfolio is a portfolio and not a web app.
The site you’re reading this post on knows good design is balanced. Medium’s UI certainly isn’t perfect (ask anyone who’s ever embedded code), but it does know this much. Headings/titles are biggest, subtitles are big, and body text is regular. Highlighting uses appropriately contrasting colors. Overall, there is a balance to the articles.
Now where is the balance in putting your blog posts inside a folder on your Windows 98 GUI simulator for the web? The information is just not represented as accurately as possible.
Obvious
Now, this one is really obvious. Good design is not just simple, balanced, and accessible, but also straight-forward. You don’t even think about it. Go to Bloomberg and go through each element on the page. Ask yourself “Do I know what this is going to do?” If “yes,” and it actually does that thing, that’s obvious design. Brava, Bloomberg.
When I click the Launcher icon in the MacOS dock on your portfolio, how do I know what’s going to happen? It could display the default MacOS apps, it could have links to your projects (because you’re “launching” them?), it could link to SpaceX for all I know. Part of this is part of the appeal for users of course. I get to explore your OS simulation and maybe I’m delightfully surprised when a nostalgic memory releases the dopamine gates. Or maybe I’m annoyed at how I have to go through a fake TextEdit on the browser to get to your about page.
Pleasant
This is the one most people think of, especially beginners. “Design is color palettes, fonts, and style guides.” “Design is sans-serif.” “Design is animations and box shadows and gradients.” This is also the one criterion operating system portfolios excel at. They delight us. I’m not going to lie. Yes, your honor, I confess. I have fun poking around, seeing what’s in the terminal, can I grep, can I restart, but also admiring the craftsmanship of the recreation. “Wow, they nailed the translucency of MacOS” or “God, I miss those Windows borders and teal wallpapers.” But, when that initial joy fades, I leave the page. This isn’t a blog I’m going to return to, or add to my RSS reader. This isn’t even really a blog I take seriously. It’s delightful, interesting, and Cool, but it’s also completely devoid of any restraint or serious design principles.
Compare Yet Another Portfolio Operating System to something like Jeff Kaufman’s blog. Jeff was clearly in the back of Design 101 with the founder of Craigslist, but you know what, I love his blog. I find myself returning to it, not for the amazing aesthetic circus (sorry Jeff) but for the content of the posts. And the design is good enough by all other principles that I can always easily, reliably, and quickly find my way around. Another one with a bit more CSS is Julia Evans’ blog. I always know that I’ll enjoy and trust Julia’s write-ups and so I keep coming back. Isn’t that what we want?
I don’t want to come off as a Grinch (if I do, I humbly accept the nomination.) And I want the web to stay fun, to stay weird, to stay neutral (@ Ajit Pai, no I still haven’t forgotten and I’m not over the whole debacle). Build a operating system simulator! Build a Manchester Mark 1 emulator! I’d gladly click and play around. Just don’t make it your designer or frontend portfolio, because it works against what your probably want to represent yourself to be. It’s impressive design, sure, but let’s never confuse impressive design with good design.
