Three years ago, I stopped writing for FwdThoughts. The lofty and self-imposed expectation of long-form pieces, precisely research-backed facts and critically proof-read sentences, crippled my motivation to write. While searching for a path to remove that mental block, I recalled a quote by Ging Freecs, a character from Hunter × Hunter, that goes:
道草を楽しめ 大いにな。ほしいものより大切なものがきっとそっちにころがってる
(Go enjoy the detours to the fullest. Because that’s where you’ll find things more important than what you want.)
So I started an informal travel blog called “detours” as an antidote to the suffocating perfectionism. It was a liberation; I could finally write without critical self-judgment. Later, I started writing about more topics as well—tea, cafes, ideas, opinions. It became a way for me share things with my friends. So I gave it a new name: b-side.
“B-side” is the backside of a cassette tape or vinyl that artists used to put instrumentals or tracks that are not intended for commercial promotion and tend to be more experimental. It’s a playground for trying things out. In the world of digital media, “sides” no longer exist. Everything is indexed and served just the same. However, I want to preserve that idea of b-side to be true to the chaos and spontaneity of the human mind and of myself.
But writing wasn’t the only area that perfectionism plagued me. Since I started working as a product manager, I began to view everything through the PRD lens. I ask questions like “what’s the success metric?” or “who’s this thing’s primary audience?” Soon, I started running my life as if I were running a business. I started filtering my own ideas and spontaneity through the lens of “how does this contribute to my overall success” and prematurely optimizing before giving ideas a chance to grow. My childhood self, who used to love building the most random and useless things, was completely silenced. My drive to pursue success and perfection became a mental block to my creativity and happiness.
Around the same time, I was also annoyed by WordPress in many ways, so I thought it was a good opportunity to design something myself that embodies my ongoing campaign against pre-mature optimization.
To achieve that embodiment, I needed to do two things:
- Let go of control
- Embrace changes
So to translate my personal goals into design goals, b-side needs to
- Feel at home to my readers
- Be imperfect and evolving
And that’s the mission of this redesign.
“At Home”
What makes a place feel like home is different for everyone. In the digital realm, your devices are the home of your digital world. So something that feels “at home” digitally is something that works as natively as possible. Today, when you load a website, almost everything is determined to the exact pixel. That’s not a bad thing. A commercial brand needs exactly that. Corporations have brands to invoke certain feelings in you. We have our own personal brands that may or may not be intentionally crafted.
But b-side needs to be an anti-brand, which is its brand.
Think about the word “dark matter.” It’s literally a bunch of things that we have no idea about, but yet we know them. We know them as “dark matter” simply because we put a label on them and therefore have learned the unknown. We just don’t understand it in a technical sense. An anti-brand is a brand that tries to portray values and attributes that conflict with that we normally associate with a commercial or personal brand. Specifically in my case, the feeling of uniformity and permanence.
If I wanted b-side to reflect the inherent imperfections and inconsistencies of my life and myself, I needed a way to provoke that feeling. And since this is a blog, the first thing I focused on was typography.
To make reading on different screens a natural experience, I used Tachyons to help me build a fluid typographical system. The bread and butter of legibility must not be broken. Then I struggled to pick a typeface, endlessly comparing and asking the question: “is this type unopinionated and invisible?” I wanted sans serif for its unassuming quality and something humanist for its traces of handwriting flow. Effra, designed by Jonas Schudel, was my top choice. I liked its humble stems, playful arcs, laid back bowls, and overall simplicity. I also considered other free font options such as Roboto Slab or Source Sans Pro.
After many attempts and mock-ups, I suddenly realized: the process of picking the right font to convey that “unopinionated and invisible” quality in itself is very much an opinionated and exact choice. Meanwhile, no typeface is as unopinionated as the default system typeface on the reader’s device. Whether a user is reading from their phone or tablet, the operating system knows what font should be rendered to achieve the best native experience.
What feels at home digitally is what feels native. In a way, this is closer to my original intention of writing email updates. Plain text emails show up in whatever format my readers choose, which feels “at home.” So I thought that b-side should just use whatever the native system or browser uses.
I thought this might be hard to do, but thankfully, CSS standardized on a system-ui value a few years back, and has 90% coverage across the globe and 100% on all major web browsers. With this value on macOS, for example, text will automatically switch between San Francisco Pro Display and San Francisco Pro Text to get the prefect kerning for small and large font sizes. In addition, any user preferences such as default text size, and other accessibility settings will also be respected. There’s also the added benefit of speed from not having to load external fonts.
In addition, because I want to emphasize the native typographical experience, I literally just used the oversized left and quote quotation marks “ ” in ::before and ::after pseudo-class content of a block quote. This way, even basic decorations manifest themselves according to the reader’s device environment. It couldn’t be more opposite from a uniform and permanent design.
“Imperfect and Evolving”
After typography, there’s logo. I thought to myself: “there shouldn’t be a logo.” But then something just looked off, like a book without covers, a house without a roof, or a person without a face. So I thought that the logo, usually the strongest identity marker, might also be the best place to reflect the reality of constant change. Maybe, I thought, if I could fill the space where the logo would be with a series of renditions of “b-side,” a randomly selected version can be served every time a reader refreshes the page.
I thought this was pretty interesting. A logo that is never the same—the anti-logo. A logo that really is a space for experimentation. I can add more renditions of b-side to the collection in the future so that they may be served in unpredictable ways. All of the renditions will share a common theme around the idea of “b-side,” but I don’t intend to only make word art of these letters. There might be parodies, puns, interpretations, deconstructions, or whatever might seem interesting at the time. It’s a statement of the axiom that the only thing that doesn’t change is change.
Other Personal Touches
To make sure that some personality is reflected just as my handwriting on a plain white page still packs a lot of signals that it comes from me, I used the color palette of my apartment as the basis for some subtle accent colors throughout the site.
#C62727Fire Engine Red: a favorite color of mine that reminds me of passion and my Chinese traditions.#F9F4D9Beige: a soft, easy-on-the-eyes, approachable ambient color that reminds me of fabrics, blinds, or cabinets.#93B7BEPowder Blue: an accent that’s not too strong and exudes calm and purity.#F1FFFAMint Cream: a lighthearted version of Powder Blue that’s cooler and more neutral.#E6EBE0Platinum: a slightly cooler medium-weight color that reminds me of the structural metals and ceramics at home.
Aside from colors, I also wanted to incorporate some parts of my cultural background.
One of the fun things I like to do is to date my personal work with Chinese lunar calendar dates. For those who don’t know, the Chinese invented a calendar based on the movements of the moon at roughly 2,500 years ago. This lunar calendar went through many changes throughout the millennia and was the primary way the royals and commoners kept track of time. Today, the Chinese calendar is no longer used officially for industrial and legal work, but still governs traditional festivals, holidays, the selection of auspicious days. To follow my own habit, all of the posts on b-side have both Gregorian and Chinese calendar dates.
Another cool part of Chinese culture is the use of yìnzhāng or seals. Traditionally, your seal is made of stone and acts as your signature to bless documents in your authority. In my own experience, seals in China today are mostly used for artistic and official purposes as pen signatures have replaced seals for daily authorizations. I like the compact, bold, and artistic look of a seal, so I wanted to include a modern rendition on b-side as well instead of the boilerplate copyright notice at the bottom. Those aren’t really legally necessary anyways.
That's It
For the debut of the redesign, that’s about it. There are of course countless other details that make the site functional and aesthetic, such as responsive layouts and various placement, spacing, and alignment decisions. But I don’t think those are important enough to my readers to elaborate on as they aren’t and shouldn’t be noticeable.
As I mentioned before, pre-mature optimization has been one of my biggest enemies. To prevent that from happening, I promised myself to push the blog to production as soon as I checked off the last of my initial list of required features. The list was quite short—typography, layout, media support, navigation, logo, and signature. There were countless times during the construction that I could’ve digressed into making something extra or perfecting something to the bone. But I held back. Gallery view? I’m not writing anything with photos as the focus yet. Search? I don’t have that many posts that people want to reference yet. I didn’t want to develop anything that the site didn’t need, so I stopped myself to give the site space and time to evolve as it goes.
Of course, there is much more to be done outside of the site. For one, my Mailchimp template, which is how most of my readers will actually read my posts, has not been updated (and pictures are broken). But it’s ok. b-side will continue to be what it is meant to be—a playground.