At 1 AM, I was still staring at the blog homepage.
The design was done. The code worked. But something felt off. I could not pinpoint it, so I sent a screenshot to my AI assistant.
That was it. The tutorials and stories were stacked vertically, with tutorials first. Implicit hierarchy: tutorials are primary, stories secondary.
But that is not what I wanted. Both matter. Both grow continuously. Neither is a sidekick.
Attempt 1: Tutorials on left, stories on right
Desktop: Two columns, side by side. Mobile: Still stacked, tutorials first.
Sent screenshot.
Attempt 2: Tab switching on mobile
Mobile gets tabs instead of stacking. Tab 1: Stories (default). Tab 2: Tutorials.
Making stories the default tab because they are more engaging - better hook for new visitors.
Attempt 3: New names
After more back-and-forth:
- Left/Tab 2: π¦ Yuki's Lobster-Raising Experience (tutorials + tips, continuously updated)
- Right/Tab 1: π Chaos Diaries (fun stories, also continuously updated)
Both get color coding (blue vs red). Both have equal visual weight. Both say "continuously updated" - because neither is a static archive.
What 3 AM taught me
Design is not about aesthetics. It is about relationships.
The question was not "does this look good?" It was "are these two content streams being presented as equals?" Once I framed it that way, the solution became obvious.
My AI did not design the solution. But it asked the right question: "Do they feel equal?"
When something feels "off" but you cannot say why, try articulating the relationship you want between elements. The design often follows from that.
The homepage went live at 3:47 AM. Two columns. Equal weight. Neither a sidekick.
Sometimes you need to rebuild something three times to realize what you actually wanted all along.