August 2024 (1 month ago)

Canvases versus Documents

§
3 min read (547 words)
· · ·

Much web design has reflected that of paper documents: finite with clearly defined edges. But by no means is the canvas style recent, as we can see in Space Jam.

alt text alt text alt text

A swing back to documents

I feel a shift in style is ongoing: the big text on a clear background is now becoming bordered. See Zed, Hebbia, or Matrices.

alt text alt text alt text

The non-bordered style is shown below.

alt text alt text

Issues

Sections are floating in space

But it’s not the front page that needs a border, it’s the fact that a clearly defined container gives a sense of coherence to the sections underneath the top part (which I refer to as the storefront, or just front because it’s the first thing you see), without which seem lost in space.

There’s another resizing issue I’ve seen where the container size is big enough to fit the width of the screen, so there ends up being no padding on the left or right side, making the document weird. I’m generally against using Tailwind’s container class because it has multiple breakpoints, which is saying that there are 4-5 different sized documents that represent your website, and you have to design specifically for each of them.

alt text alt text

Text is not meant for immersion

Another issue is that they attempt a “canvas-style” immersive effect but for text. Text is meant for reading. Text is meant to be understood and quickly scanned. Websites are attempting a “canvas-style” design, generally better for conveying feeling, but for text, which is meant to convey meaning and immersion. I’ve always felt that a lot of websites would look much better if they shrank the text size and container width.

alt text alt text

See the difference in “text immersion” versus realistic immersion from a photograph? alt text alt text

There’s too much slop on website homepages

We can extend the shop analogy to the body sections as well: adding a bunch of Twitter testimonials, random pictures of the app with text, other companies’ logos, and Loom videos tell me very little about whether I’d want to use it. Website landing pages now seem much too long. The forefront and quality of the shop is all you need to keep looking.

I think Pocketbase is well designed: the logos are specifically relevant to frontend users, it gives you a demo of the app, and there are good examples of code.

Rather than an FAQ section, I wonder if websites will integrate a “LLM question” section instead.

alt text

What poor construction means

Another vibe shift is happening, and those throwing together slop (no offense to the tools, which are great) hacked together with Tailwind + Cursor + shadcn are immediately noticeable and are a strong indicator of low quality because once a “default” way has been established

  • it tends to lead to low quality practitioners as these are people who copy rather than innovate
    • which means they won’t ask the important questions
      • which likely also means they are motivated by the wrong reasons (money) and see the project as a means to an end

Conclusions

Ask yourself the following when designing a website.

  • Are you putting in features that are actually convincing to the customer, or are you just following what everyone else does?
  • Are you doing immersion/feelings or text/readability?

The skill ceiling for a well-designed website is really high. It even goes into 3D. No need to go that high, but at least get the basics up to a minimum standard correct.