How I Design

Making a website is fast these days. Pick a template, swap in your name and avatar, and you can be live in an afternoon. But that is also why so many websites look alike. I think the problem usually isn't technical; it's not knowing what you want. Without a worldview of your own, all you can do is pick from other people's options.

I don't know much about color or typography, and I can't explain with theory why something looks good. What I am more sure about are two things. One is that I love the Japanese aesthetic of subtraction: take away whatever can be taken away, and everything that remains has its place. The other is that when I judge whether a screen works, what I care about most is whether it is harmonious.

Let me say this up front, too: design is subjective. Some people simply prefer plain, intuitive interfaces, and there is nothing wrong with that; the only difference is how many people like it. What follows is my approach, not the only answer. And the most important premise of all is that you have to like what you make.

Know what you want first#

A worldview sounds big, but it starts small: what do you genuinely love? I chose the universe because I have always been interested in astronomy. I'm often leafing through astronomy books and watching all kinds of popular science. You will only keep digging into something you love, and every step after this needs you to know it well.

Something you love isn't a worldview yet. To turn it into one, I use it to answer questions. Every website runs into the same set of questions, so I listed them and answered them one by one with the universe:

Once you can fill in this table, you have a worldview. It has two uses:

• Anything you can't answer for is what will look "pasted on." A button, an animation, an illustration: if you can't say what it is in your world, it will most likely look out of place once you add it.
• The last row matters as much as the others. A world tells you not only what you can do, but also what you can't. That is the first step of subtraction. When I made the Neptune theme, one version drew the flight trail as streaks of wind. Wind belongs in a planet's atmosphere, but page changes happen between the stars, so the whole thing came out.

A worldview isn't a filter. Choosing the universe doesn't mean you can only use stars. This site also has a return capsule, a space shuttle's robotic arm, trees on the horizon, power towers and a sextant, and each of them can say why it is here.

It doesn't need to be realistic either. This world is fictional: text floats up beside moons, and a dot can fly from page to page. It's like watching a sci-fi movie. Nobody is pulled out of it because a spaceship travels faster than light. What pulls you out are the small things: a light that goes out the wrong way, an object whose texture doesn't match its surroundings, a movement with no reason behind it. So my standard isn't "is it real?" but "is it harmonious?" Real data is very useful, but it is there to help you reach harmony. It isn't the goal.

Make a choice, and accept the cost#

Once the worldview is set, a few big choices decide what the whole site looks like. My biggest one was building the entire site in 3D.

I don't think the vastness of space can be shown on a flat plane. The benefits of 3D are direct: a real sense of depth, and details you can carve deeper than in 2D. A star can spin, have a tilt, and have moons that pass behind it and get hidden.

The costs are just as clear. It sacrifices some UX, performance takes a lot of work to keep in check, and for the average reader a moving scene with depth carries a lot more cognitive load than a clean page of text. This was my own choice, and I'm not going to pretend it came free.

My approach: don't compromise on the core, and pay back the costs one by one.

• Performance: The goal is for people to wonder "how can this be 3D and still run this smoothly?", without dropping quality. Optimization can change the method, but not the picture.
• Reading: Article pages get an extra backing layer so the stars behind don't interfere with the text.
• Devices: Devices without a GPU fall back to a simpler starfield. All the features are still there; only some of the show is missing.

Any big choice works the same way: first be clear about what you are trading for what. Once you have traded, pay the cost back seriously, instead of pulling back halfway and ending up with something that is neither.

Choose the camera: where the reader stands#

Choosing 3D adds something flat design rarely has to think about: where to put the camera. I care a lot about angles and camera work. When I watch movies, I often wonder what angle a shot was taken from, and how. When building the site, I first decide where the reader stands, then what they see.

• Set the camera position for every page first. The home page looks down at Saturn at an angle from the north, and most pages use a 3D upward angle.
• Only go flat when the content itself is flat. The Photos page is a photo wall, and it looks better flat. But not every page can be flat. If the Logbook had been flat too, browsing page after page would get tiring.
• When the camera moves, the background needs parallax. Far things move slowly and near things move fast. That is what makes it look like the camera is moving, rather than the page sliding over a background.
• A page change is like a long take. First focus on the dot, then follow it, and finally the camera stops while the dot keeps moving, which is what reveals the trail behind it. I covered the details in the previous post.

Where the camera sits directly changes what a page is about. The old About page had a window showing the moment a blue fireball streaked across the night sky and hit the ground. The reader stood on the ground then, watching a star fall. After the redesign, the one falling is the reader. The period in the title "Hold on." is that amber dot. As you scroll down, it falls with you, and the return capsule touches the ground at the moment of "touchdown." The material is nearly the same; the camera just moved from the ground onto the falling star.

Reduce: only dots and lines#

On screen, I kept only two things: dots and lines. The subtitle I wrote for the Colophon page, "Nothing else here: only the night, white ink, and a faint light.", says exactly that.

The upside of a small vocabulary is that it makes decisions for you: anything new has to say whether it is a dot or a line first, and if it can't, it doesn't belong here. Your site doesn't have to use dots and lines. Squares and grids, or paper and creases, work just as well. The point is to choose only two or three, and build every page and every component out of them. Dots and lines happen to be the most honest form of a starry sky. Stars are already dots; orbits, star trails and comet tails are already lines. I didn't need to invent a separate visual language.

Subtraction also includes empty space. When you first land on the home page, there is only Saturn and a few lines. The five sections are usually just dots on orbits, and their names only appear when you hover over them or when it is their turn to light up. With fewer things on screen, readers explore on their own, and everything that does appear feels important.

Color: roles first, then colors#

Many people choose colors by picking a few favorites first and then deciding where to put them. I do it the other way around: first decide which "roles" I need, give each role exactly one meaning, and only then fill in the colors.

1. Paper isn't pure black, and ink isn't pure white. Pure white is too harsh on black. #F1ECE3 has a touch of warmth, more like ink on paper, and it is easier on the eyes over long reads.
2. Ink has only one color, layered with opacity. Headings, body text, captions and lines are all the same ink at different opacities. I measured the contrast of every layer; body text needs at least 4.5:1.
3. Keep a single signal color, and give it a single meaning. My amber only means "you are here." It doesn't need to be big or to blink, because it is the only colored thing on the screen.
4. The alert color only appears when something goes wrong. It has to be far enough from the signal color, or a delete button will look like "you are here."

Subtraction is hardest with color, because every color looks good on its own. I pulled out all the purple and green links from the old site, and I hesitated for a long time over syntax highlighting in code, because it would be one of the very few colored places on the whole site. Once too many colors mix in, the picture loses its subject.

When making multiple palettes#

The open-source version lets you switch celestial bodies, and I made four sets. When making multiple palettes, I kept three more rules:

• Paper and ink shift a little too. Neptune leans cool, Betelgeuse leans warm. The difference is small, but switch the whole site over and the temperature of the air changes.
• Don't color the main subject. Neptune is blue to begin with, and in one version even the planet turned bluish. That clashed a bit with the site's theme, and the dot stopped being special. The planet is always ink-colored; color belongs only to the dot.
• Signal colors must stay distinct. Each one has to stand apart from its own text color, and from the other sets. I measure color difference (ΔE2000) and keep at least 20 between sets so they can't be mistaken for each other. I originally had a Moon set, but its signal color was only 6 away from its own text color, so the dot was almost invisible. In the end I replaced it with the black hole.

The black-and-white test#

The last check is the simplest and the most useful: take the color away. Can you still tell things apart? If two things can only be told apart by color, the shapes aren't doing their job. Neptune once still looked like Saturn, because it used the same brushwork as Saturn with just a bit of blue added. Later I separated them by shape: Saturn has broken brush strokes and broad rings, Neptune has smooth strokes and a dark spot, the black hole has a hollow shadow and an accretion disk, and Betelgeuse has clumps of convection cells.

Lines: one weight, speaking through brightness and dashes#

The rule for lines is the same as for color: limit first, then assign meaning. The whole site uses a single weight, the 1px hairline.

Since the weight can't change, lines can only express different meanings through brightness, and through solid versus dotted: solid is what has already happened, dotted is what hasn't arrived yet.

Once a rule is set, it is best to find a place where it actually gets used, or it is just decoration. I used it in the article table of contents: the TOC is a stretch of star trail, the part you have read is solid, the part you haven't reached is dotted, and the amber dot is you, reading.

Breaking a rule needs a reason. I have only one exception: the line the dot trails behind it as it flies. A white hairline doesn't read as light, so it takes the dot's color, with a very faint glow. It is allowed to have color because it is the light the dot itself gives off.

Check every detail at the seams#

What came before were rules. This step is what I do every day.

During the redesign, the feelings that stopped me most often were "it looks pasted on," "it looks bolted on," "it doesn't fit." These are all what it feels like when harmony breaks: vague, and hard to fix. Eventually I realized it was almost always one "seam" that hadn't been joined well, and there are only a few kinds of seams:

There is another very useful question: what happens to it next? The space shuttle's robotic arm on the Gear page picks up a box. Where does that box go afterwards? If something only has a "now," with no before or after, it starts to feel fake the longer you look at it.

Most people won't notice these details, and none of them matter much on their own. But once a site has enough badly joined places, it starts to look pieced together. The other way around, once you join them one by one, readers will feel it is one complete place, even if they can't say why.

When you can't say what's wrong#

That table was put together after the fact. While I was actually working, most of the time I only felt that something was "off," and I could rarely say in one sentence where the problem was, let alone describe it clearly. Seeing that something isn't harmonious and being able to say why are two different skills. The first depends heavily on accumulated taste, and no table can shortcut it.

At times like that, I do three things:

• Compare with the real thing. Saturn's bands are distinctive to begin with, so the engraved lines trace the real Saturn. The north polar hexagon is drawn from Cassini's photos; it isn't empty inside, but a field of clouds with a storm eye at the center. The blue fireball on the old About page was matched against the video I had filmed myself, following the rhythm of the light going from dark to bright and then hitting the ground.
• See how others do it. At the start of the redesign, I spent a lot of time looking at all kinds of starry-sky designs, because I wanted something that would make even my own eyes light up. For the TOC, I read that fumadocs article devoted to TOC design, and it showed me that a TOC deserves to be designed as a thing of its own. When I couldn't get the favicon right, I went to see how everyone else handles the small sizes.
• Get the specs right. Some "off" feelings are really facts I hadn't understood. Contrast and color difference can be measured, and for a foldable screen like the iPhone Duo, Apple publishes official specs for the size and the crease position.

Referencing isn't copying. After looking, you have to come back to your own world and redraw it in your own vocabulary: the fumadocs TOC is vertical; mine is a stretch of star trail.

Put the story where readers can see it#

The four celestial bodies in the open-source version were the most thorough test this method has had. Researching and drawing from real stories is, honestly, just imitation; anyone can do it by following the data. The hard part is how to bring it in, in a way that makes sense and stays in harmony with the whole site. A story built where readers can't see it might as well not exist, and one that is brought in but feels out of place is worse than nothing.

When I finished the first version of Neptune, its page changes looked almost the same as Saturn's. Most of what you see in a page change is each page's own way of folding away and growing back, so there are actually very few places a theme can change. So I first listed the places readers will definitely see, then put the stories in one by one:

Before anything goes into a cell, I check it with three questions.

Can it be read at that size?#

Shrunk onto a single dot or line, a story easily becomes too abstract. Saturn has a great story: at the end of its mission, Cassini passed between Saturn and its rings 22 times. But done literally as a page change, squeezed onto one dot, it meant nothing, so I left it out.

The black hole transition was the same. The first version put time dilation, spaghettification and gravitational waves all into the page change, and all you saw was a circle flying around. With no black hole on screen, readers had no idea why the dot moved that way. Only after I let the black hole itself appear did it make sense:

Neptune's slingshot was the same. The body the dot swings around was at first just a faint little circle that looked like noise. Once I drew it as a tiny engraved Neptune, it was obvious the dot was swinging around a planet. The protagonist of a story has to be visible.

Draw it true, or draw it in harmony?#

Real doesn't mean readable, and it doesn't mean harmonious. When that happens, you have to find a way that keeps both. Neptune's opening uses the four bright arcs that really exist on the Adams ring. They are uneven in length and all crammed within about 40°, which makes a poor loading bar. Cutting the circle into four equal parts reads best, but then it has nothing to do with Neptune. In the end I kept the real length ratios and scaled them up to go all the way around:

Betelgeuse's surface was the same. Real photos show only a blurry blob of light; drawing that literally would be abstract and wouldn't match the engraved lines on the site. So I kept the engraved lines and let them curl around clumps of convection cells, just enough to read as a churning star.

Is it part of the same set?#

Betelgeuse was the hardest of the four. It is a star that shines on its own, with no terminator and no rings, so nearly everything Saturn and Neptune could share had to be found again. The opening alone went through three versions:

The first version, squeezed into such a small area, was just a target, and unreadable. The second was readable, but the other three openings were all tilted, pseudo-3D loaders and only this one was flat, so it wasn't part of the same set. The third finally passed all three tests: a companion star circles once on a tilted orbit at the same inclination as the other themes, and that is itself the story. Astronomers first inferred that a companion orbits Betelgeuse from a long period of about six years in its brightness.

This test also works backwards on older things. After finishing Betelgeuse, Saturn turned out to be the only one without a story of its own. The three home page items in its column of the table were all added at that point.

Copy tells stories, not features#

Words are part of the design too. Each celestial body has a line I wrote, and when you hover over the body menu in the top bar, its story appears beside it.

At first that description said "what the dot does during a page change," which is writing about a feature. My rule: tell the story, and let readers connect it to what the picture is acting out. Readers who know that a black hole pulls back even light will get it the moment they see the dot escape and the light behind it get pulled back.

This is the forbidden zone of the universe. Light turns back here. Time stops here. Everything falls in, and nothing finds its way home. Not one law we have written survives here.

Subtraction applies to words as well. I dislike filler and redundancy, and I dislike fairy-tale phrasing. If one sentence can say it, I don't write two.

For others: presets, not knobs#

If your design is meant for other people to use, say as an open-source template, the last thing to decide is how much to open up.

My choice was not to allow free color customization. What people can choose are the celestial bodies I have made, each with its colors, planet, transitions and copy tuned as a whole set. The only thing they can fill in freely is content. Giving them a few carefully made presets lets them choose within the range of my taste, which keeps the quality of the whole site while still giving everyone a bit of a "this is mine" feeling.

This is subtraction too, except what gets removed is the knobs. Every step before this was about making things harmonize with each other. Allowing arbitrary color codes is like letting people casually pull out one of the pieces.

Start with your own site#

Here it is as a checklist you can follow:

These steps can help you break "something feels off" apart and find which seam it is, but they can't replace your eyes. Seeing where harmony breaks takes time to develop, and I know only one way: look at a lot of truly good work, take it apart and study it, then come back and look at your own. As for whether what you make is good, in the end it still comes down to whether you like it yourself.