Before pixels

A text file will not let me add colour, type or shadow. What is left is where things sit and how big they are next to each other, which turns out to be most of the decision. I rough a layout out in letters first, compare structural directions while they are still cheap to change, and only then confirm in pixels.
colour, type or shadow the things I cannot hide behind letters pipes and dashes in a text file structural directions different experiences, not skins confirm in pixels a check, not the comparison

When I have an idea for an interface I used to open Figma. Now I often open a text file instead. Not because it is faster, though it is, but because of what a text file will not let me do.

There is no colour in a text file. No typeface, no shadow, no spacing to nudge until something feels right. What is left is where things sit and how large they are relative to each other. When I cannot reach for a gradient, hierarchy is the only decision on the table.

I redesigned my contact page this way. Three actions, one page. I opened a text file and roughed it out.

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ [video icon] │ │ [message] │ │ [people] │ │ 15 MIN CHAT │ │ REPLY IN 24H │ │ WORKSHOP │ │ │ │ │ │ │ │ Book a chat. │ │ Send a │ │ Looking for │ │ │ │ message. │ │ the workshop?│ │ │ │ │ │ │ │ Pick a slot↓ │ │ Open form → │ │ Go to DWB ↗ │ └──────────────┘ └──────────────┘ └──────────────┘

Three boxes, each with a small label, a headline, a line of body and a call to action. Eight lines, and not one of them is a decision about how it looks.

Then I asked for three structural directions off the same brief: one where the three doors carry equal weight, one asymmetric where the primary action dominates, one with a personal hero above the doors.

┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ [video] │ │ [message] │ │ [people] │ │ 15 MIN CHAT │ │ REPLY 24H │ │ WORKSHOP │ │ │ │ │ │ │ │ Book a chat. │ │ Send a │ │ Looking for │ │ │ │ message. │ │ the workshop?│ │ │ │ │ │ │ │ Pick a slot↓ │ │ Open form → │ │ Go to DWB ↗ │ └──────────────┘ └──────────────┘ └──────────────┘

Variant A · Equal weight, three cards, no hierarchy. The default you'll get when you don't bias the layout.

┌────────────────────────────────┐ ┌──────────────┐ │ [video] ★ FASTEST WAY │ │ [message] │ │ 15 MIN · CAL VIDEO │ │ REPLY 24H │ │ │ │ │ │ Book a chat with me. │ │ Send a msg → │ │ │ ├──────────────┤ │ Quick 15 min, anything on │ │ [people] │ │ your mind. Pick a slot below. │ │ WORKSHOP │ │ │ │ │ │ [ Pick a slot ↓ ] │ │ Go to DWB ↗ │ └────────────────────────────────┘ └──────────────┘

Variant B · Asymmetric. The Cal door dominates with a "fastest way" tag; the other two stack smaller on the right. Hierarchy without removing choices.

╭─────╮ │ ◯ │ ╰─────╯ Hi, I'm Pradeep. How can I help? [ NID · Intuit · 15+ years · 3 cos ] ┌────────────┐ ┌────────────┐ ┌────────────┐ │ Book a │ │ Send a │ │ DWB │ │ chat. │ │ message. │ │ workshop │ │ │ │ │ │ │ │ 15 min ↓ │ │ Form → │ │ Apply ↗ │ └────────────┘ └────────────┘ └────────────┘

Variant C · Warmer. Personal photo + greeting + credentials above three smaller doors. Says "real person on the other end."

The differences are visible rather than argued. A treats the three doors as equals. B makes one of them the obvious answer and stacks the other two beside it. C puts a person in front of you before you choose. Those are three different experiences, not three skins, and I could see which was which in under a minute.

Pixels lock you in. Letters free you up.

I went with B, then rendered all three as working HTML to check.

Variant A · Equal cards on cream
15 min · Cal Video
Book a chat.
Quick call. Pick a slot below — auto-confirms with a Cal Video link.
Pick a slot ↓
Reply within 24h
Send a message.
Specific question or just want to write? Drop a note — it lands in my inbox.
Open form →
designerswhobuild.in
Looking for the workshop?
If you're here about the workshop — that lives on its own site.
Go to DWB ↗
Variant A · Rendered. The equal-weight ASCII becomes three identical card sizes in real type and spacing.
Variant B · Asymmetric, primary CTA emphasized
★ Fastest way
Book a chat.
Pick a 15-min slot. Auto-confirms with a Cal Video link in your inbox.
↓ Pick a slot
Reply 24h
Send a message.
Drop a note.
DWB
Workshop?
Go to DWB.
Variant B · Rendered. The Cal door takes 60% with a gold "★ Fastest way" tag; the others stack smaller. The hierarchy ASCII suggested becomes real in pixels.
Variant C · Photo hero above the doors
PS
Hey there —
I'm Pradeep. Let's talk.
Ex-Intuit Ex-Goldman Chiblu
Book a chat.
Send a message.
Workshop?
Variant C · Rendered. Personal hero on top with a dashed yellow halo around the avatar, italic greeting, three credential pills. The warmth ASCII hinted at becomes obvious here.

The render confirmed what the sketch had suggested: the asymmetric hierarchy held at every size. That is the order I keep working in. The decision happens in letters. The pixels prove it.

What it makes me ask

Working this way puts the same questions in front of me every time. What is the dominant element. What comes first. What belongs together. What is the next thing someone does. What can come off the page entirely. In Figma I can defer all of those for an hour by making something look nice. In a text file there is nothing else to do.

There is a second effect I did not expect. Hand an AI a Figma file and it copies what it sees: my nav, my card style, my particular red. You get more of what you already have. An ASCII sketch is too coarse to leak preferences, so what comes back is not anchored to anything I have already done.

Where it does not help

It skips the feeling stage. Sometimes I need to play with colour and texture before I know what the structure should be, and letters cannot help me there. It also assumes I already have an opinion about hierarchy; if I genuinely do not know whether the headline or the image should lead, I am still in moodboard territory and need to leave it first. And for brand identity it is simply the wrong instrument. You cannot choose a typeface or a colour story in pipes and dashes.

Yes, for

Landing pages, contact pages, dashboards, internal tools, prototypes, posters, emails, anything where you mostly know what should be on the page and need to see what it could look like.

No, for

Brand identity work, illustration, photo-led pages, anything where the visual decision is the design. ASCII won't help you pick a typeface or a color story.

The rule I use: could a senior designer describe this on a napkin? If yes, letters will do. If they would need to show me a moodboard first, they will not.

Figma still comes in, for polish and the final screens. Just not first. Holding off on the polish is what keeps me honest about whether the structure underneath actually works.