2

From 2014-2019, Windows/Windows apps, macOS/macOS apps, and most websites have used modest levels of padding in their user interfaces. From what I understand, the padding is there to make it easier to see and click on things. YouTube on Mac OS X in 2015

However, newer websites, operating systems, and apps use very large amounts of padding and whitespace, and I have never seen a real explanation for this. It makes the interfaces just look ugly and childish, rather than more usable or convenient.

macOS Big Sur, 2020 (note: that is an older version of the notification bubbles, they got much worse in the final release) A modern website

Is this just some design trend, or is there a real meaning behind it?

1
  • 7
    Your examples don't illustrate examples of extreme padding.
    – Steve
    Aug 14, 2023 at 20:47

1 Answer 1

3

This question may not be asked in good faith ("just looks ugly and childish"), nor is it particularly accurate, but the answer is probably interesting nonetheless.

Reason 1: Optimal line length

As humans don't have a spirit level built into their eyeballs, reading long lines of text causes your eyes to lose track of where the line started, so when it comes for the line break, you'll have to do some searching for which line you previously read every time. Using lots of whitespace to constrain the line length makes this problem less relevant as you still can see where things start from the corner of your eye by the time you reach the line break.

This becomes more and more important as screens are getting bigger; you'd be hard-pressed to find a 24" display in the 2000s 1024x768 standard, or in the previous-century 800x600 resolution,

More info: Wikipedia: Line length, Wikipedia's redesign which added a fixed line length

Reason 2: Information staging

When communicating, the goal never is to just dump as much information on the recipient as possible. A public speaker will often times speak slowly and deliberately, making pauses along the way to give the audience time to process what just happened; a writer will add paragraphs, chapters, headlines and such (as I'm doing right now); an advertiser will generally only put a few short words up on a big canvas, and by the same idea, a web designer will only put a few design elements on screen at once, as to not overwhelm you.

This becomes particularly important on websites where the user is expected to do something - "download now", "buy the tshirt", "watch the video". Adding too much information on screen at once causes the recipient to not read through all of it (terms of service are a good example for this), adding too many calls to action on screen at once makes the call to action ineffective (the "like, comment, subscribe" you find on YouTube is a good example of that).

Reason 3: It just isn't new or extreme

If you look at newspapers, you can see a trend from old newspapers to more modern ones) which replaces columns of text separated by thin lines and almost no padding by fewer columns and more padding between the columns.

If you look at positively old websites, you can often see massive amounts of whitespace as soon as the site is viewed on a modern screen:

PPWIZARD ADVANCED/EXAMPLES

The images you show in your question don't show massive whitespace, they show massive design elements:

  • The red rectangle on YouTube is the channel banner, and on real channels it can look more interesting than here, and it even is recommended to put information in there such as your upload schedule or tour dates in the case of musicians. In previous designs ("Cosmic Panda", "Channels 2.0", and the original YouTube), these banners used to be full-page image decorations on a level only surpassed by Tumblr. And all things considered the banner is not that massive; the screenshot shown here is a window half the size of the screen opened on the macbook; there's plenty of additional stuff to be shown if that window actually got expanded to full size.
  • The second screenshot is an email in an extremely thin viewport, not a website. While emails tend to follow similar design rules to everything else, Email-HTML is extremely cursed at the best of times and tends to break subtly or less subtly when viewed on anything that's not identical to the designer's setup.
  • The Angle2 screenshot has barely any padding on either side; you could not fit an additional character in without it running out of the screen. Their new site by contrast (below) does have plenty of padding, in line with reason 1+2. Angle2 screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.