I’ve been waiting for a long time for an excuse to write about the design of my website. Unfortunately, I haven’t found any good excuses to do so. Fortunately, I’ve realized that I don’t need an excuse to do so. So here’s some ramblings about the design of The Squishy Lab.
The Vision
The Web is useful for a variety of reasons. Sure, it can be used for the dissemination of information, or for quick and easy communication, or for digital tools and services, or for entertainment, or for e-commerce or business, or a litany of other uses. But my favorite use case of the web has always been as a medium of creative expression.
And so when it comes to my own website, I see it as an extension of my own self-expression more than anything else. In other words, this site is an attempt to reflect my personal design preferences and sensibilities as truly as I can. I’ve carefully picked and arranged everything from the fonts and layout to the animations and colors in consideration of that goal.
To describe the site like that, though, is very abstract. In terms of a more concrete vision, I feel that I’m going after something that’s clean, balanced and legible while still hearkening back to the long-gone days of an Internet that put content over form. A site that very distinctly carries its own identity, but that also simultaneously allows that identity to slip into the background to make way for what it has to say.
To that end, I’ve gone for a sort of “minimalism in outer space”-type aesthetic. Glassy panels of information float in front of the vast expanse of the stars, leaving the viewer alone to reflect on what’s being said without distraction. Of course, the site does react to the user—the background stirs at rest, if only slightly, giving a feeling of the site being alive and reserved all at once.
That’s the general idea, anyway. But there’s a lot of details that go into creating that grand vision...
Design Language: Colors, Layouts and Fonts, Oh My!
Of course, the atmosphere of the site follows from its form, and much of that form owes itself to the core elements of the design, such as...
Layout
In terms of the general site layout, I don’t think it’d be inaccurate to describe The Squishy Lab as being a bit dated. Sure, the <header>-<main>-<footer>-<aside> flavor of websites hasn’t been in vogue for a decade or two, but I think the wide margins and general cleanliness keep TSL looking decently fresh. Plus, it works—if it ain’t broke, why fix it?
More importantly, I feel that it keeps the site practical. Need to navigate the main sections of the site? There’s a navbar up top. Need to find a specific article? It’s right there on the sidebar. And of course there’s a footer at the bottom to (ironically) top it all off.
And as a bonus, the sidebar really helps to balance the content on wider screens. Reading content is easier when there’s a distinct left line for the eye to follow, and so a left-aligned text block ends up being much better for the eyes. The sidebar on the right helps to provide an element on the right to balance the whole layout with the centered header and footer.
Fonts
Just like with layouts, I find that a key part of picking a font is striking the balance between readability and expression. To that end, I’ve gone with a few typefaces that I see walking that line perfectly.
Body Text: Open Sans
For the body text of the site I’ve gone with Open Sans, a Humanist sans-serif that reads easily while feeling warm and personal. I’ve always felt that sort of connection with humanist styles in general, whether it’s with a printed typeface or with my own work in calligraphy. And in setting most of the type of the site in this style, I hope to capture that personal feeling—almost as though the author is reaching out to you directly.
Headings: Titillium Web
Fun fact: Titillium Web was actually the main typeface of The Squishy Lab from 2018 to 2021, being used for all body text and headers. I’ve always loved the way it looks, but looking at it now, it feels too “square” and “cold” for long passages, if that makes sense. In fact, it’s that futuristic feel that has led me to use it for headings and emphasis—I find that it makes a nice foil against the warmth of Open Sans.
Wordmark: Tourney
In my eyes, a wordmark has a difficult job: It must capture the feel of a brand using only typography and composition. While I don’t think it’s under as much pressure as a logo (which I’ll get to later!), I do think that it is important nonetheless. Tourney, I’ve found, is a typeface that fits The Squishy Lab exceptionally. It looks towards the future with sharp, defined angles that seem to be carved into the page. But at the same time its proportions are nothing short of organic; they’re far from the inflexible, mechanical precision of, say, a seven-segment display. If the future one day writes back to us, I can’t help but imagine a letterhead set in Tourney.
Those are the main three typefaces that’ll appear on every page. Other than that, there are some other typefaces that make limited appearances. For text in Japanese or Chinese (neither of which have made an appearance before this post), I’ve chosen Noto Sans Japanese and Noto Sans Traditional Chinese. こんにちは！ 大家好！ For anything code-related, my go-to monospace typeface is Source Code Pro. It’s wider than most code fonts, but I find that it fits nicely with the fonts I usually use. And for anything mathematical, of course I have to use Computer Modern. LaTeX has changed my life for the better, after all.
Many thanks to the authors of these wonderful fonts for releasing them under the Open Font License. I truly appreciate it!
Colors
Despite my personal affinity for colors, you may be noticing that The Squishy Lab doesn’t actually feature any specific accent colors. This stems not from a lack of accented elements or specific effort to make a monochrome website, but rather from the simple fact that I can’t choose just one accent color. I love all colors so much that I couldn’t pick one over all the others; it follows then, that if I can’t choose one color, I may as well have them all!
As you can see, this has manifested in the site’s rainbow accent, seen in the borders, wordmark, and any content that needs to be especially emphasized. Perpetually in motion but unchanging at the same time, the rainbow accent provides exactly the pop of color that I’m looking for.
While the main site features a constantly changing color accent, I’ve designed other elements of the site to use color in a similar manner—unobtrusively, without putting any one color in the spotlight. Anodize is a possibly my favorite embodiment of that goal.
And of course, the effort to have a colorful website is very much helped by the color system in the account registration, which leads to even comments from users contributing to the vibrancy of it all.
Touching Up the Atmosphere
The general design of fonts, colors, and layout goes a long way in creating an atmosphere, but there’s a couple more things that I feel have added that last cherry on top.
The biggest one is the constellation of stars in the background. While it’s already very visually interesting at rest, I very much enjoy of a website that responds to its users. In keeping with that, I’ve made the stars respond to mouse and touch movements. The subtle motion of the individual stars also contributes to the feeling of “aliveness” that I try to capture.
The other thing I want to comment on is my decision to use square corners instead of rounded ones. I can’t say exactly why I’ve decided to go in this direction, but I don’t think it detracts from the atmosphere of the site—I think it feels warm and alive enough as it is.
With that, I’ve covered pretty much everything I wanted to say about the overall site design. I’m very proud of how it looks and feels, and though I’m sure that the design will inevitably change in some way, I’m very happy with where it is right now.
But before I wrap up, I wanted to talk a bit about the logo as well, as I’m supremely happy with it as well.
What’s in a Logo?
Logo design is hard—that’s the first thing that I’ll admit. But it helps to have a few constraints in mind when designing anything—limitations breed creativity, as they say. In particular, I set out to design something along the following guidelines:
- The logo should be square.
- It should be visually distinct.
- It should be geometrically constructible.
- It should be symmetrical.
- It should tie into the website’s general design, and
- It should not rely on color.
Decently restrictive, but I figured that these guides would help me create a logo I’d be happy with. Plus, they ensured that it’d make a good favicon as well.
With those restrictions in mind, here’s what I came up with:
Not only does it represent the site well, literally spelling out “TSL”, but it also fulfills all the requirements I set out. Going down the list:
- The logo is very square!
- It’s identifiable by its silhouette alone.
- It’s built on a 32×32 grid—doesn’t get easier to construct than that.
- It has 180° rotational symmetry.
- It has square corners and good proportions, just like the website, and
- There’s not any color... yet.
And with a very good concept, the last step was to finish coloring it in:
The coloring is pretty simple—it’s just a white logo on a black background with a rainbow border. The border is just a cutout of the hue wheel. I’ve set it up so that red is pointing northwest, but I figure it might have a pretty cool effect when rotated.
And with that, I think I’ve covered everything that I wanted to say about the site’s design. Whether you’re reading this for fun or looking for inspiration on web design, I hope you found something nice in my ramblings.
Other than that, I’ve got some big ideas coming up in the next few months, so stay tuned!
Log in to comment on posts.