13 ms·

Round Rects Are Everywhere

431 points by zerojames 2y ago

wanderingstan 2y ago
I’ve enjoyed this story over several decades, but what stands out to me now is the fact that Bill Atkinson was working from home during the creation of the Macintosh.
- Stratoscope 2y ago
  Where would you rather take LSD, at home or in the office? https://news.ycombinator.com/item?id=19238322 https://news.ycombinator.com/item?id=19238322
  - deleted 2y ago
    [deleted]
- msephton 2y ago
  IIRC he did the more complicated stuff at home so he wouldn't be disturbed. But he also worked from the office. A healthy split!
m463 2y ago
Rounded corners are one of the common things on macos that make it look modern and cheerful. iphone icons are more pleasing because of this. other platforms should add more of this.
- gibolt 2y ago
  It is standard for web elements. Very easy to set border radius
  - EGreg 2y ago
    Bill Atkinson wasn’t aware of that feature. Also, Susan Kare didn’t know about vector graphics. That’s why all her icons ended up pixelated! But it was… quite iconic at the time.
    - Stratoscope 2y ago
      Whatever Susan Kare knew about vector graphics, that's not why the icons were pixelated. It was because she had only two colors to work with, black and white, and only two icon sizes, 16x16 and 32x32. Steve Jobs and Bill Atkinson only got 32x32 B&W icons for their own portraits: https://www.folklore.org/Steve,_Icon.html https://www.folklore.org/Steve,_Icon.html > Icons were only 32 by 32 black or white pixels, 1024 dots in total Susan posted more examples here: https://www.behance.net/gallery/81132387/Macintosh-icons https://www.behance.net/gallery/81132387/Macintosh-icons
      - michaeljsmith 2y ago
        (I think that was the joke)
        Stratoscope 2y ago
        Consider me duly and properly whooshed! It was only when I later re-read the comment I replied to, with the part about Bill Atkinson not knowing about the border-radius feature in CSS, that I realized what was going on. At least I hope my note about the pixelated icons may have been of interest to a few. Thanks for keeping me on my toes!
  - ftio 2y ago
    That hasn’t always been true! I remember with great displeasure the bad old days of creating a 3x3 table for every container and jamming a rounded corner gif into each of the four corners to create this effect.
    - lelandfe 2y ago
      See also the old sliding doors article breathlessly making rounded tabs: https://alistapart.com/article/slidingdoors/ https://alistapart.com/article/slidingdoors/
      - aalvarado 2y ago
        A list apart was my go to resource for a long time. Css zen garden was great
    - gary_0 2y ago
      I dunno, I look back on the <table>-based layout days with fondness, probably because I was young and the Web was nothing but rolling green fields and endless potential. I didn't see the limitations, only the opportunities for inventiveness. I'll never feel the same satisfaction as I did when those first few website designs came together.
      - reddalo 2y ago
        I feel like responsive websites killed that magic, because now it's way too complicated to make interesting designs.
    - nayuki 2y ago
      Indeed, CSS border-radius was introduced around year 2010. I was both browsing the web and writing pages before that time. https://caniuse.com/?search=border-radius https://caniuse.com/?search=border-radius , https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radi...
    - aalvarado 2y ago
  - kccqzy 2y ago
    Do you not remember a time before border-radius? Or -webkit-border-radius? I remember including a premade rounded rectangle button in Flash just to get that visual effect.
    - karaterobot 2y ago
      To be fair, the original comment said other platforms should add this, and border-radius has been widely supported for at least 15 years. You'd have to look hard for a browser that needs it to be added.
  - somat 2y ago
    ahh yes good ol border-radius, more popularly known as web 2.0
- golergka 2y ago
  Not only on macos, on the hardware as well. Macbook that I'm typing this comment on has a screen with rounded corners on top, and it just feels better than right angles on the bottom.
  - callalex 2y ago
    That effect is 100% done in software. Full black on screens is just really good now. If you don’t believe me look at a photo in full screen while zoomed in.
    - 1d22a 2y ago
      I'm not sure that's true that it's (always) done in software. For example, the newest Framework Laptop 13 has higher resolution screens that come with rounded corners, because whatever supplier had a large stock of them lying around. If it was just software, the concept of having a "rounded corner screen" from a supplier wouldn't exist.
    - pfg_ 2y ago
      I'm pretty sure it's a screen cutout - the corners are still rounded when fullscreen zooming, and on asahi linux. There's also another cutout for the notch at the top of the screen. Also, it's not a great panel and the blacks aren't very good - you can still see light coming from the monitor with a full back image in fullscreen and it changes based on brightness. So if it is software, then it's very low level and with darker blacks than anything else on screen, and has a super tiny bezel right at the corner. I'm pretty sure it's a cutout.
trevmckendrick 2y ago
It's underrated how great Steve Jobs's taste was, and how sincere the "liberal arts + technology" line is
- karaterobot 2y ago
  I don't disagree that it's important, but I don't think it's underrated. I think it's very highly rated.
  - cynicalkane 2y ago
    There's a puzzle in philosophy, where a philosopher points to a bear and says, "That's a bear". Except it's only a life-size cardboard cutout of a bear. But behind the cutout is a real bear. Is the philosopher speaking the truth when he points and says there's a bear there? Steve Jobs is appropriately highly praised, but by many people who don't know why he should be praised -- to them he's like a movie sort of figure, Elon Musk in his post-Twitter phase, a larger-than-life jerk who says smart words and allegedly does things. But Jobs actually is that sort of genius that a lot of wannabes pretend to be. So is he highly praised? Is the philosopher telling the truth when he points to the fake bear, having confused it for a real one but not knowing there's a real one behind it?
    - lxgr 2y ago
      Does the philosopher know that there’s a bear behind it? If not, it probably depends on your take on the Gettier problem :)
      - defrost 2y ago
        The modern take on that dilemma; What if it's a man hiding behind a bear cutout to appear less threatening?
      - dumbo-octopus 2y ago
        Various non falsified interpretations of quantum theory say there both is and isn’t a bear there until it is observed. So I say he’s right. And watch out, there’s a bear behind you.
behnamoh 2y ago
Not just rounded rectangles, but squircles too. Every icon or rectangular element in Apple software and hardware is a squircle.
- yreg 2y ago
  Surely a MacBook is a rounded rect and not a squircle.
  - behnamoh 2y ago
    Nope, it's still squircle.
    - roelschroeven 2y ago
      https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_open__dr7t682bocia_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_closed__xhvulpfj67m2_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pf_14_16__cnmzk9b7xtpy_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... Those don't look like squircles to me. If they are squircles, they're so close to simple rounded rectangles that there's no meaningful difference left. The keys could, maybe, be squircles, but I'm having a very hard time seeing the outline, the touchpad, the outline of the keyboard as anything other than rounded rectangles.
- shermantanktop 2y ago
  TIL about squircles: https://en.m.wikipedia.org/wiki/Squircle https://en.m.wikipedia.org/wiki/Squircle
- abhinavk 2y ago
  Apple uses quintic superellipses. Very similar to squircles but not quite.
  - 2y ago
paulcole 2y ago
> "No, there's no way to do that…” This is the key line to me. It turned out it could be done and in less than a day. Even very smart and talented people sometimes need a jerk to tell them to make it happen. Sometimes it backfires and sometimes it doesn’t.
beambot 2y ago
Can someone explain the technical detail a bit more detailed than on Folklore...?
- jepler 2y ago
  I didn't read it in detail but I did find this version of the same anecdote followed by a commentary on the original ROM code: http://wg20.criticalcodestudies.com/index.php?p=/discussion/80/code-critique-roundrects-apple-quickdraw-source-code http://wg20.criticalcodestudies.com/index.php?p=/discussion/... the underlying algorithm to draw an octant of an arc may have been https://en.wikipedia.org/wiki/Midpoint_circle_algorithm https://en.wikipedia.org/wiki/Midpoint_circle_algorithm You "just" need to draw 2 octants of an oval at each corner of the rectangle, plus the remainder of the 4 sides of the rectangle, and correctly account for fill/edge flags while doing so. This likely leveraged the existing "region" code in the Apple QuickDraw, but to be sure you'd have to get down into the code or find a more complete commentary.
- deleted 2y ago
  [deleted]
novia 2y ago
I viewed this on my RoundRect
stefan_ 2y ago
> Over the next few months, roundrects worked their way into various parts of the user interface, and soon became indispensable. At which point we realized they are just a fad like any other design ever was and went to sharp corners and flat design. And back to round corners, and back to sharp, and back to.. Hell, I can see this circle of hell happening in front of my very eyes. I think a year ago someone at Chrome had the brilliant idea to "refresh the design" as happens so often in big organizations and suddenly the tabs got round and we got little round corners around the navigation bar and..
- thr33 2y ago
  rounded corners are actually a significant accessibility factor and powerful gestalt mechanism in design. The border radius of a rounded rect makes it discernable at a glance the boundaries of the element and what is inside and what is out. Concentric rounding can clearly communicate parent child relationships in an astutely gestalt fashion.
- wolpoli 2y ago
  The only thing constant in modern web design seems to be the ever-increasing amount of margins and paddings. Everything else goes in cycles. When Google fully-rounded the corners of a rectangle, they added even more margins and paddings. When texture comes back in style, I bet we'll see even more margins and paddings.
nlunbeck 2y ago
Round rect technique aside (fascinating stuff!), the storytelling here is really charming. Reads like a clever short story > Bill returned to Texaco Towers the following afternoon, with a big smile on his face. His demo was now drawing rectangles with beautifully rounded corners blisteringly fast, almost at the speed of plain rectangles.
WillAdams 2y ago
It works well for the Mac OS, but for all that it's a core part of the Mac OS identity, I really hate that Microsoft is using round rectangles to the point that device manufacturers are painting the underside of laptop and tablet glass screens so as to cause a physical rounded effect at the corners, and I'd liefer have the crisp square Windows 10 screen appearance than the rounded Windows 11 (though the overall increase in consistency is nice otherwise).
- LoganDark 2y ago
  Painting? As demonstrated by Framework's new display option, there are displays that physically do not have pixels there. The the actual mask they use for printing is already rounded. It's not painted over, it's just not there.
  - WillAdams 2y ago
    If the displays don't have the pixels, then they should discount the price based on them being missing.
    - LoganDark 2y ago
      I'm pretty sure they do. You get maybe a few cents based on the physical area that the rounding leaves out. Of course, you can't just pay the few cents for a non-rounded screen if they don't already have masks for non-rounded screens. That's why Framework decided to compromise on the rounded option, as that one had already been commissioned by another customer, but if they wanted the same thing but without rounding they would have had to pay for brand new tooling.
      - WillAdams 2y ago
        That's even worse --- back in the days of the original Mac there were apps which would make use of the dark corners for various status notifications.
        2y ago
aj7 2y ago
Yeah, but how?
- WillAdams 2y ago
  See the QuickDraw source at: https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/ https://computerhistory.org/blog/macpaint-and-quickdraw-sour... https://d1yx3ys82bpsa0.cloudfront.net/102658076_quickdraw_acc.zip https://d1yx3ys82bpsa0.cloudfront.net/102658076_quickdraw_ac...
aj7 2y ago
In day camp in Brooklyn, we always had woodworking. In successive summers, we had an instructor who wanted us to round the corners and edges of everything, and another instructor who insisted we keep everything as square and sharp as possible.
- chrisjj 2y ago
  And lo you learned both! :)
  - oneshtein 2y ago
    ╭─────┐ │ Yep │ ╰─────┘
    - nickpeterson 2y ago
      /;;;((————//————————-$$ — % I never learned woodworking \
- mrgoldenbrown 2y ago
  Context matters, as usual. Sharp corners in soft wood can easily get dented and look bad if they are on the edge of a table or cutting board. But if two corners are going to meet they'll look better if they are both square.
  - shermantanktop 2y ago
    Rounding edges is also a great way to “intentionally” fix a piece that got dinged on the workbench.
xnx 2y ago
Aren't Apple rounded rectangles now squircles? https://medium.com/minimal-notes/rounded-corners-in-the-apple-ecosystem-1b3f45e18fcc https://medium.com/minimal-notes/rounded-corners-in-the-appl...
- LoganDark 2y ago
  Yes, they changed into squircles with iOS 7 I believe.
  - hajile 2y ago
    I wonder if they were inspired by Meego SwipeUI on the Nokia N9? It was visually quite different from everyone else at the time.
    - kmeisthax 2y ago
      No. iOS switched to squircles because their product designers use squircles[0]. If you extrude a rounded rectangle you get a shape that has harsh breaks in the highlights at the point where the rounded part meets the rectangle part. To smooth this off you need a curve where the tangents are smooth. This is also known as "C2 continuity", and you get that level of continuity by ensuring that the second derivative (acceleration) of the curve has no gaps between points. Absolutely none of these properties matter for icons, of course. [0] Or at least some curve with similar tangency properties.
      - LoganDark 2y ago
        > Absolutely none of these properties matter for icons, of course. To my subjective eye, squircles often do look slightly better in cases where the corner radius is large-ish.
- xnx 2y ago
  Original(?) older article: https://www.figma.com/blog/desperately-seeking-squircles/ https://www.figma.com/blog/desperately-seeking-squircles/
waterhouse 2y ago
Related, fun post: https://ridiculousfish.com/blog/posts/roundy.html https://ridiculousfish.com/blog/posts/roundy.html
zX41ZdbW 2y ago
Round rectangles can look not round enough on low-DPI displays, and the colors can also be wrong due to incorrect averaging in non-linear color space. Example: https://github.com/ClickHouse/ClickHouse/pull/33453#issuecomment-1007603199 https://github.com/ClickHouse/ClickHouse/pull/33453#issuecom... It is similar to how subtle gradients look striped and dirty on many websites if displayed with only 24-bit color: https://github.com/cockroachdb/cockroach/issues/91316 https://github.com/cockroachdb/cockroach/issues/91316
- crazygringo 2y ago
  I don't think that's quite right. The round rectangles are still perfectly round. But in the example given, the outline becomes fainter on the rounded sections, because gamma isn't taken into account. In other words, the shape is perfectly correct, but the antialiasing is buggy. (It also has nothing to do with gradient striping -- that's an unavoidable artifact of 24 bit color that has nothing to do with gamma. It becomes more noticeable if you don't dither, which generally isn't done in 24 bit color, or when compression is bad, like low-quality JPEG.)
- MBCook 2y ago
  On the 1 bit Macintosh display it wasn’t much of an issue.
semolino 2y ago
Mac OS ROM hack to generate fully circular windows: https://web.archive.org/web/20201209143138/https://macgui.com/news/article.php?t=493 https://web.archive.org/web/20201209143138/https://macgui.co...
- Someone 2y ago
  The ‘hack’ part isn’t drawing round windows; that is just using the operating system APIs to create a new window look. The hack is injecting that code in the Finder. A way to do that is to store the WDEF inside the desktop file on a floppy disk. Then, inserting that floppy would be enough to give new windows that look. The Finder would open the resource fork of that file to get info about files on the floppy and keep it open. When you opened a window, the Finder would ask the Resource Manager for “WDEF #0”, and the Resource Manager would find it (or rather, a WDEF pretending to be ‘it’) in the desktop file. Writing a Trojan for that OS wasn’t very difficult.
philipwhiuk 2y ago
iPhone rounded boxes: https://www.youtube.com/watch?v=bxgg_kW3QLU https://www.youtube.com/watch?v=bxgg_kW3QLU
noahlt 2y ago
Every time I see this story, I try counting the round vs square rectangles, and in practice they seem about even in my life. Door frames, picture frames, books, cabinets, and windows are all actually squared off. (And natural things aren’t rectangles at all!)
- mikepurvis 2y ago
  I had the same thought, but I’m actually currently on a passenger VIA train carriage, and almost everything in this “fully designed” environment is rounded off— the windows, the seats, the tray tables, the vent holes, even the bodywork itself. An airplane would be similar.
  - kqr 2y ago
    I feel like that is due to physical constraints (are glass panes weaker at the corners?) than actual design-to-be-pleasing-to-look-at.
    - canthonytucci 2y ago
      It might also reduce the risk of (some kinds of) injury in an event where the people inside bounce around. Same for inside cars.
    - IIsi50MHz 2y ago
      Corners tend to focus force, so yes, glass corners are more at risk the further they are from round. There was an earlier airliner (whose name escapes me right now) which was noted for having squarer corners to its windows, and suffered more damage to glass and frames than rounder designs. I think it was retrofitted with rounder windows.
- vasco 2y ago
  > And natural things aren’t rectangles at all Pyrite would like a word!
langcss 2y ago
I wish I knew about this in the microcomputer days. I started off with SIN() and COS() for circles which were very slow. I realized that you can just scan down a pixel at a time in the Y axis and use Pythagoras for the X. Also for a circle that calculation does 4 points. But the way posted here would much much faster than that!
dang 2y ago
Related: Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 https://news.ycombinator.com/item?id=28679496 - Sept 2021 (26 comments) History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 https://news.ycombinator.com/item?id=7062706 - Jan 2014 (1 comment) Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 https://news.ycombinator.com/item?id=3096927 - Oct 2011 (1 comment) The story of round rectangles - https://news.ycombinator.com/item?id=1636358 https://news.ycombinator.com/item?id=1636358 - Aug 2010 (77 comments)
userbinator 2y ago
Windows used rounded corners on its buttons from 1.0 to 3.11, then switched to square ones until XP's themed UI, where they were slightly rounded again, until 8 went back to square, and now with 11 they are again rounded: https://user-images.githubusercontent.com/7389110/64139289-37026c80-cdf8-11e9-81b6-655f584b1bf3.png https://user-images.githubusercontent.com/7389110/64139289-3... I still prefer the sharp corners.
- ted_bunny 2y ago
  Wonder how it syncopates with the high skirt / short skirt fashion cycle
  - kragen 2y ago
    that ended about the time engelbart first publicly demonstrated hypertext (i'd say windowed guis but sketchpad and grail had windowed guis)
    - msephton 2y ago
      They're is no end to a cycle. I'm not suggesting you go and check current skirt trends, but I guess it might be useful.
      - kragen 2y ago
        the phenomenon that was cycling, profound conformism in women's hemline height, simply ceased to exist. most cycles do in fact have an end; the sun's sunspot cycle will end when it is consumed by a stray black hole, or possibly even earlier, when it becomes a white dwarf or red giant
- CrimsonCape 2y ago
  it's interesting to see all the windows theming over the years. I personally prefer the UI that looks like little chunks of titanium and steel rather than the boring flat RGBCMYK-like color palette. It was even in the name, glass, to convey the materiality. I just wonder why developers can have design color palettes like solarized; yet Microsoft imposes its will and subjugates everyone to the same godawful blueness. F** the blueness because I know some corporate peon had conversations like "Yellow is too cautionary, orange is too obscure, red is too angry, purple is too edgy. Blue is safe."
femto 2y ago
The thing I like is that Bill Atkinson didn't spit the dummy when he didn't get the expected reception to his ovals. Instead he took on the challenge of round rectangles and came up with a solution.
LarsDu88 2y ago
Wow. So this is why Apple's campus visitor center literally has no corners in it. Even the stairwells have all rounded corners.
- saagarjha 2y ago
  Take a closer look at the tables.
bdahz 2y ago
Related post discussing the rounded shapes (and squircles) in design tools: https://blog.verygoodgraphics.com/posts/rounded-shapes/ https://blog.verygoodgraphics.com/posts/rounded-shapes/
lazy_afternoons 2y ago
Loved it. Will remember this everytime I add "rounded" in tailwind. :)
29athrowaway 2y ago
I much rather prefer the old UIs that were highly responsive at the speed of thought.
TheDudeMan 2y ago
"No, there's no way to do that. In fact it would be really hard to do." Why would Bill say this? Why would his ellipse optimization not be trivially applicable to a quarter-circle?
- sircastor 2y ago
  I think as Andy writes, Bill was showing off a very impressive demo, and was maybe miffed that Steve wasn’t appreciating it. Also, the question had just been sprung, and literally no one had ever done this before.
  - n4r9 2y ago
    This was my interpretation as well. Internally I would be thinking "Look, I've just worked my ass off and produced something incredible. Can't we just put it straight into production?"
  - int_19h 2y ago
    Is it actually true that "no-one had ever done this before?". As far as I know, the midpoint circle algorithm, being a straightforward extension of Bresenham's line algorithm, was already well-known by 1981. Indeed, here's a paper from 1967 that does basically the same thing: https://academic.oup.com/comjnl/article-pdf/10/3/282/1333509/100282.pdf https://academic.oup.com/comjnl/article-pdf/10/3/282/1333509...
    - sircastor 2y ago
      I meant more specifically the first time it was really being used as a rapidly drawn object on a screen.
- voiceblue 2y ago
  Helps explain why Jobs turned out the way he did, when perfectly capable people behaved this way around him.
  - 2y ago
aalvarado 2y ago
Love the story, could have added more in terms of how the round corners feature was solved
ralferoo 2y ago
I wasn't even aware that the Mac existed at the time, but I always had a fondness for rounded rectangles because the Amstrad CPC character set had 16 characters that represented all possible combinations of a central dot with N, E, S, W spokes. They were rounded for the 4 cases that represented 90 degrees, and the rounded rectangle look was perfect for using as borders around things. This was 1984, so wouldn't have been long after the original Mac but was maybe influenced by it. As far as I know, no other 8-bit computers have rounded container characters like this. I later used PCs, and the CGA text mode had its nice 1/2 line variants, which were good for variety, but they were square so I never found them as appealing as the rounded ones I knew from the Amstrad.
flohofwoe 2y ago
Oooof, so the rounded corners in UIs is just another Jobs-fetish by UI designers, got it ;(
Mikhail_Edoshin 2y ago
One example of rounded rectangles added purely for aesthetic purposes was the desktop window of the old Mac. When the display turned on during boot, it was naturally square, but then one of the first things the software did was to round its corners. Then they stayed this way until maybe another software switched into full screen. There was nothing like that on Windows and it was obviously a “useless” thing to do. I liked that detail.
dmd 2y ago
This conversation exemplifies every positive interaction I've ever had with any of my really good advisors or bosses. It's exactly what I want from my boss - to be told "that good, but not quite good enough, and I know you can do better even if you don't know it yet". And then I go off and think some more and outdo myself.
uwagar 2y ago
they are everywhere indeed because sharp corners can hurt people.
cat_plus_plus 2y ago
Learning how to design models for 3D printing now, and rounded corners are a matter of necessity as much as aesthetics. Objects with sharp corners are uncomfortable to hold, even risk of injury with some materials. They are also unhygienic and pain to clean dust out of. On the flipside, math to generate rounded corners on arbitrary shapes is messy and printing these out often requires supports and postprocessing to remove those and polish the curves with sandpaper.
jFriedensreich 2y ago
Rounded corners is much like semicolons, and rebasing / merging something impossible to discuss. Most people either strongly dislike the one or the other and are unable to reconcile.
cantSpellSober 2y ago
Can we add (1981) to the title please
layer8 2y ago
> Then he pointed out the window. …which hopefully was still a non-rounded rectangle.
spot1984 2y ago
"squircles" https://en.wikipedia.org/wiki/Squircle https://en.wikipedia.org/wiki/Squircle
camgunz 2y ago
I remember working on homework for "Discrete Computational Structures" (had to look it up ) in undergrad and having to come up with that sum of sequence of odds is the sequence of squares trick (it becomes clear if you visualize 4 blocks, then 9 blocks). I was like, "is this what I'm supposed to be learning, this feels like I just figured this out by luck". I think I got a B?

431 points by zerojames 2y ago

I’ve enjoyed this story over several decades, but what stands out to me now is the fact that Bill Atkinson was working from home during the creation of the Macintosh.

Stratoscope 2y ago
Where would you rather take LSD, at home or in the office? https://news.ycombinator.com/item?id=19238322 https://news.ycombinator.com/item?id=19238322
- deleted 2y ago
  [deleted]
msephton 2y ago
IIRC he did the more complicated stuff at home so he wouldn't be disturbed. But he also worked from the office. A healthy split!

m463 2y ago

Rounded corners are one of the common things on macos that make it look modern and cheerful. iphone icons are more pleasing because of this. other platforms should add more of this.

gibolt 2y ago
It is standard for web elements. Very easy to set border radius
- EGreg 2y ago
  Bill Atkinson wasn’t aware of that feature. Also, Susan Kare didn’t know about vector graphics. That’s why all her icons ended up pixelated! But it was… quite iconic at the time.
  - Stratoscope 2y ago
    Whatever Susan Kare knew about vector graphics, that's not why the icons were pixelated. It was because she had only two colors to work with, black and white, and only two icon sizes, 16x16 and 32x32. Steve Jobs and Bill Atkinson only got 32x32 B&W icons for their own portraits: https://www.folklore.org/Steve,_Icon.html https://www.folklore.org/Steve,_Icon.html > Icons were only 32 by 32 black or white pixels, 1024 dots in total Susan posted more examples here: https://www.behance.net/gallery/81132387/Macintosh-icons https://www.behance.net/gallery/81132387/Macintosh-icons
    - michaeljsmith 2y ago
      (I think that was the joke)
      - Stratoscope 2y ago
        Consider me duly and properly whooshed! It was only when I later re-read the comment I replied to, with the part about Bill Atkinson not knowing about the border-radius feature in CSS, that I realized what was going on. At least I hope my note about the pixelated icons may have been of interest to a few. Thanks for keeping me on my toes!
- ftio 2y ago
  That hasn’t always been true! I remember with great displeasure the bad old days of creating a 3x3 table for every container and jamming a rounded corner gif into each of the four corners to create this effect.
  - lelandfe 2y ago
    See also the old sliding doors article breathlessly making rounded tabs: https://alistapart.com/article/slidingdoors/ https://alistapart.com/article/slidingdoors/
    - aalvarado 2y ago
      A list apart was my go to resource for a long time. Css zen garden was great
  - gary_0 2y ago
    I dunno, I look back on the <table>-based layout days with fondness, probably because I was young and the Web was nothing but rolling green fields and endless potential. I didn't see the limitations, only the opportunities for inventiveness. I'll never feel the same satisfaction as I did when those first few website designs came together.
    - reddalo 2y ago
      I feel like responsive websites killed that magic, because now it's way too complicated to make interesting designs.
  - nayuki 2y ago
    Indeed, CSS border-radius was introduced around year 2010. I was both browsing the web and writing pages before that time. https://caniuse.com/?search=border-radius https://caniuse.com/?search=border-radius , https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radi...
  - aalvarado 2y ago
- kccqzy 2y ago
  Do you not remember a time before border-radius? Or -webkit-border-radius? I remember including a premade rounded rectangle button in Flash just to get that visual effect.
  - karaterobot 2y ago
    To be fair, the original comment said other platforms should add this, and border-radius has been widely supported for at least 15 years. You'd have to look hard for a browser that needs it to be added.
- somat 2y ago
  ahh yes good ol border-radius, more popularly known as web 2.0
golergka 2y ago
Not only on macos, on the hardware as well. Macbook that I'm typing this comment on has a screen with rounded corners on top, and it just feels better than right angles on the bottom.
- callalex 2y ago
  That effect is 100% done in software. Full black on screens is just really good now. If you don’t believe me look at a photo in full screen while zoomed in.
  - 1d22a 2y ago
    I'm not sure that's true that it's (always) done in software. For example, the newest Framework Laptop 13 has higher resolution screens that come with rounded corners, because whatever supplier had a large stock of them lying around. If it was just software, the concept of having a "rounded corner screen" from a supplier wouldn't exist.
  - pfg_ 2y ago
    I'm pretty sure it's a screen cutout - the corners are still rounded when fullscreen zooming, and on asahi linux. There's also another cutout for the notch at the top of the screen. Also, it's not a great panel and the blacks aren't very good - you can still see light coming from the monitor with a full back image in fullscreen and it changes based on brightness. So if it is software, then it's very low level and with darker blacks than anything else on screen, and has a super tiny bezel right at the corner. I'm pretty sure it's a cutout.

trevmckendrick 2y ago

It's underrated how great Steve Jobs's taste was, and how sincere the "liberal arts + technology" line is

karaterobot 2y ago
I don't disagree that it's important, but I don't think it's underrated. I think it's very highly rated.
- cynicalkane 2y ago
  There's a puzzle in philosophy, where a philosopher points to a bear and says, "That's a bear". Except it's only a life-size cardboard cutout of a bear. But behind the cutout is a real bear. Is the philosopher speaking the truth when he points and says there's a bear there? Steve Jobs is appropriately highly praised, but by many people who don't know why he should be praised -- to them he's like a movie sort of figure, Elon Musk in his post-Twitter phase, a larger-than-life jerk who says smart words and allegedly does things. But Jobs actually is that sort of genius that a lot of wannabes pretend to be. So is he highly praised? Is the philosopher telling the truth when he points to the fake bear, having confused it for a real one but not knowing there's a real one behind it?
  - lxgr 2y ago
    Does the philosopher know that there’s a bear behind it? If not, it probably depends on your take on the Gettier problem :)
    - defrost 2y ago
      The modern take on that dilemma; What if it's a man hiding behind a bear cutout to appear less threatening?
    - dumbo-octopus 2y ago
      Various non falsified interpretations of quantum theory say there both is and isn’t a bear there until it is observed. So I say he’s right. And watch out, there’s a bear behind you.

behnamoh 2y ago

Not just rounded rectangles, but squircles too. Every icon or rectangular element in Apple software and hardware is a squircle.

yreg 2y ago
Surely a MacBook is a rounded rect and not a squircle.
- behnamoh 2y ago
  Nope, it's still squircle.
  - roelschroeven 2y ago
    https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_open__dr7t682bocia_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_closed__xhvulpfj67m2_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pf_14_16__cnmzk9b7xtpy_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... Those don't look like squircles to me. If they are squircles, they're so close to simple rounded rectangles that there's no meaningful difference left. The keys could, maybe, be squircles, but I'm having a very hard time seeing the outline, the touchpad, the outline of the keyboard as anything other than rounded rectangles.
shermantanktop 2y ago
TIL about squircles: https://en.m.wikipedia.org/wiki/Squircle https://en.m.wikipedia.org/wiki/Squircle
abhinavk 2y ago
Apple uses quintic superellipses. Very similar to squircles but not quite.
- 2y ago

paulcole 2y ago

> "No, there's no way to do that…” This is the key line to me. It turned out it could be done and in less than a day. Even very smart and talented people sometimes need a jerk to tell them to make it happen. Sometimes it backfires and sometimes it doesn’t.

beambot 2y ago

Can someone explain the technical detail a bit more detailed than on Folklore...?

jepler 2y ago
I didn't read it in detail but I did find this version of the same anecdote followed by a commentary on the original ROM code: http://wg20.criticalcodestudies.com/index.php?p=/discussion/80/code-critique-roundrects-apple-quickdraw-source-code http://wg20.criticalcodestudies.com/index.php?p=/discussion/... the underlying algorithm to draw an octant of an arc may have been https://en.wikipedia.org/wiki/Midpoint_circle_algorithm https://en.wikipedia.org/wiki/Midpoint_circle_algorithm You "just" need to draw 2 octants of an oval at each corner of the rectangle, plus the remainder of the 4 sides of the rectangle, and correctly account for fill/edge flags while doing so. This likely leveraged the existing "region" code in the Apple QuickDraw, but to be sure you'd have to get down into the code or find a more complete commentary.
deleted 2y ago
[deleted]

novia 2y ago

I viewed this on my RoundRect

stefan_ 2y ago

> Over the next few months, roundrects worked their way into various parts of the user interface, and soon became indispensable. At which point we realized they are just a fad like any other design ever was and went to sharp corners and flat design. And back to round corners, and back to sharp, and back to.. Hell, I can see this circle of hell happening in front of my very eyes. I think a year ago someone at Chrome had the brilliant idea to "refresh the design" as happens so often in big organizations and suddenly the tabs got round and we got little round corners around the navigation bar and..

thr33 2y ago
rounded corners are actually a significant accessibility factor and powerful gestalt mechanism in design. The border radius of a rounded rect makes it discernable at a glance the boundaries of the element and what is inside and what is out. Concentric rounding can clearly communicate parent child relationships in an astutely gestalt fashion.
wolpoli 2y ago
The only thing constant in modern web design seems to be the ever-increasing amount of margins and paddings. Everything else goes in cycles. When Google fully-rounded the corners of a rectangle, they added even more margins and paddings. When texture comes back in style, I bet we'll see even more margins and paddings.

nlunbeck 2y ago

Round rect technique aside (fascinating stuff!), the storytelling here is really charming. Reads like a clever short story > Bill returned to Texaco Towers the following afternoon, with a big smile on his face. His demo was now drawing rectangles with beautifully rounded corners blisteringly fast, almost at the speed of plain rectangles.

WillAdams 2y ago

It works well for the Mac OS, but for all that it's a core part of the Mac OS identity, I really hate that Microsoft is using round rectangles to the point that device manufacturers are painting the underside of laptop and tablet glass screens so as to cause a physical rounded effect at the corners, and I'd liefer have the crisp square Windows 10 screen appearance than the rounded Windows 11 (though the overall increase in consistency is nice otherwise).

LoganDark 2y ago
Painting? As demonstrated by Framework's new display option, there are displays that physically do not have pixels there. The the actual mask they use for printing is already rounded. It's not painted over, it's just not there.
- WillAdams 2y ago
  If the displays don't have the pixels, then they should discount the price based on them being missing.
  - LoganDark 2y ago
    I'm pretty sure they do. You get maybe a few cents based on the physical area that the rounding leaves out. Of course, you can't just pay the few cents for a non-rounded screen if they don't already have masks for non-rounded screens. That's why Framework decided to compromise on the rounded option, as that one had already been commissioned by another customer, but if they wanted the same thing but without rounding they would have had to pay for brand new tooling.
    - WillAdams 2y ago
      That's even worse --- back in the days of the original Mac there were apps which would make use of the dark corners for various status notifications.
      - 2y ago

aj7 2y ago

Yeah, but how?

WillAdams 2y ago
See the QuickDraw source at: https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/ https://computerhistory.org/blog/macpaint-and-quickdraw-sour... https://d1yx3ys82bpsa0.cloudfront.net/102658076_quickdraw_acc.zip https://d1yx3ys82bpsa0.cloudfront.net/102658076_quickdraw_ac...

aj7 2y ago

In day camp in Brooklyn, we always had woodworking. In successive summers, we had an instructor who wanted us to round the corners and edges of everything, and another instructor who insisted we keep everything as square and sharp as possible.

chrisjj 2y ago
And lo you learned both! :)
- oneshtein 2y ago
  ╭─────┐ │ Yep │ ╰─────┘
  - nickpeterson 2y ago
    /;;;((————//————————-$$ — % I never learned woodworking \
mrgoldenbrown 2y ago
Context matters, as usual. Sharp corners in soft wood can easily get dented and look bad if they are on the edge of a table or cutting board. But if two corners are going to meet they'll look better if they are both square.
- shermantanktop 2y ago
  Rounding edges is also a great way to “intentionally” fix a piece that got dinged on the workbench.

xnx 2y ago

Aren't Apple rounded rectangles now squircles? https://medium.com/minimal-notes/rounded-corners-in-the-apple-ecosystem-1b3f45e18fcc https://medium.com/minimal-notes/rounded-corners-in-the-appl...

LoganDark 2y ago
Yes, they changed into squircles with iOS 7 I believe.
- hajile 2y ago
  I wonder if they were inspired by Meego SwipeUI on the Nokia N9? It was visually quite different from everyone else at the time.
  - kmeisthax 2y ago
    No. iOS switched to squircles because their product designers use squircles[0]. If you extrude a rounded rectangle you get a shape that has harsh breaks in the highlights at the point where the rounded part meets the rectangle part. To smooth this off you need a curve where the tangents are smooth. This is also known as "C2 continuity", and you get that level of continuity by ensuring that the second derivative (acceleration) of the curve has no gaps between points. Absolutely none of these properties matter for icons, of course. [0] Or at least some curve with similar tangency properties.
    - LoganDark 2y ago
      > Absolutely none of these properties matter for icons, of course. To my subjective eye, squircles often do look slightly better in cases where the corner radius is large-ish.
xnx 2y ago
Original(?) older article: https://www.figma.com/blog/desperately-seeking-squircles/ https://www.figma.com/blog/desperately-seeking-squircles/

waterhouse 2y ago

Related, fun post: https://ridiculousfish.com/blog/posts/roundy.html https://ridiculousfish.com/blog/posts/roundy.html

zX41ZdbW 2y ago

Round rectangles can look not round enough on low-DPI displays, and the colors can also be wrong due to incorrect averaging in non-linear color space. Example: https://github.com/ClickHouse/ClickHouse/pull/33453#issuecomment-1007603199 https://github.com/ClickHouse/ClickHouse/pull/33453#issuecom... It is similar to how subtle gradients look striped and dirty on many websites if displayed with only 24-bit color: https://github.com/cockroachdb/cockroach/issues/91316 https://github.com/cockroachdb/cockroach/issues/91316

crazygringo 2y ago
I don't think that's quite right. The round rectangles are still perfectly round. But in the example given, the outline becomes fainter on the rounded sections, because gamma isn't taken into account. In other words, the shape is perfectly correct, but the antialiasing is buggy. (It also has nothing to do with gradient striping -- that's an unavoidable artifact of 24 bit color that has nothing to do with gamma. It becomes more noticeable if you don't dither, which generally isn't done in 24 bit color, or when compression is bad, like low-quality JPEG.)
MBCook 2y ago
On the 1 bit Macintosh display it wasn’t much of an issue.

semolino 2y ago

Mac OS ROM hack to generate fully circular windows: https://web.archive.org/web/20201209143138/https://macgui.com/news/article.php?t=493 https://web.archive.org/web/20201209143138/https://macgui.co...

Someone 2y ago
The ‘hack’ part isn’t drawing round windows; that is just using the operating system APIs to create a new window look. The hack is injecting that code in the Finder. A way to do that is to store the WDEF inside the desktop file on a floppy disk. Then, inserting that floppy would be enough to give new windows that look. The Finder would open the resource fork of that file to get info about files on the floppy and keep it open. When you opened a window, the Finder would ask the Resource Manager for “WDEF #0”, and the Resource Manager would find it (or rather, a WDEF pretending to be ‘it’) in the desktop file. Writing a Trojan for that OS wasn’t very difficult.

philipwhiuk 2y ago

iPhone rounded boxes: https://www.youtube.com/watch?v=bxgg_kW3QLU https://www.youtube.com/watch?v=bxgg_kW3QLU

noahlt 2y ago

Every time I see this story, I try counting the round vs square rectangles, and in practice they seem about even in my life. Door frames, picture frames, books, cabinets, and windows are all actually squared off. (And natural things aren’t rectangles at all!)

mikepurvis 2y ago
I had the same thought, but I’m actually currently on a passenger VIA train carriage, and almost everything in this “fully designed” environment is rounded off— the windows, the seats, the tray tables, the vent holes, even the bodywork itself. An airplane would be similar.
- kqr 2y ago
  I feel like that is due to physical constraints (are glass panes weaker at the corners?) than actual design-to-be-pleasing-to-look-at.
  - canthonytucci 2y ago
    It might also reduce the risk of (some kinds of) injury in an event where the people inside bounce around. Same for inside cars.
  - IIsi50MHz 2y ago
    Corners tend to focus force, so yes, glass corners are more at risk the further they are from round. There was an earlier airliner (whose name escapes me right now) which was noted for having squarer corners to its windows, and suffered more damage to glass and frames than rounder designs. I think it was retrofitted with rounder windows.
vasco 2y ago
> And natural things aren’t rectangles at all Pyrite would like a word!

langcss 2y ago

I wish I knew about this in the microcomputer days. I started off with SIN() and COS() for circles which were very slow. I realized that you can just scan down a pixel at a time in the Y axis and use Pythagoras for the X. Also for a circle that calculation does 4 points. But the way posted here would much much faster than that!

dang 2y ago

Related: Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 https://news.ycombinator.com/item?id=28679496 - Sept 2021 (26 comments) History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 https://news.ycombinator.com/item?id=7062706 - Jan 2014 (1 comment) Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 https://news.ycombinator.com/item?id=3096927 - Oct 2011 (1 comment) The story of round rectangles - https://news.ycombinator.com/item?id=1636358 https://news.ycombinator.com/item?id=1636358 - Aug 2010 (77 comments)

userbinator 2y ago

Windows used rounded corners on its buttons from 1.0 to 3.11, then switched to square ones until XP's themed UI, where they were slightly rounded again, until 8 went back to square, and now with 11 they are again rounded: https://user-images.githubusercontent.com/7389110/64139289-37026c80-cdf8-11e9-81b6-655f584b1bf3.png https://user-images.githubusercontent.com/7389110/64139289-3... I still prefer the sharp corners.

ted_bunny 2y ago
Wonder how it syncopates with the high skirt / short skirt fashion cycle
- kragen 2y ago
  that ended about the time engelbart first publicly demonstrated hypertext (i'd say windowed guis but sketchpad and grail had windowed guis)
  - msephton 2y ago
    They're is no end to a cycle. I'm not suggesting you go and check current skirt trends, but I guess it might be useful.
    - kragen 2y ago
      the phenomenon that was cycling, profound conformism in women's hemline height, simply ceased to exist. most cycles do in fact have an end; the sun's sunspot cycle will end when it is consumed by a stray black hole, or possibly even earlier, when it becomes a white dwarf or red giant
CrimsonCape 2y ago
it's interesting to see all the windows theming over the years. I personally prefer the UI that looks like little chunks of titanium and steel rather than the boring flat RGBCMYK-like color palette. It was even in the name, glass, to convey the materiality. I just wonder why developers can have design color palettes like solarized; yet Microsoft imposes its will and subjugates everyone to the same godawful blueness. F** the blueness because I know some corporate peon had conversations like "Yellow is too cautionary, orange is too obscure, red is too angry, purple is too edgy. Blue is safe."

femto 2y ago

The thing I like is that Bill Atkinson didn't spit the dummy when he didn't get the expected reception to his ovals. Instead he took on the challenge of round rectangles and came up with a solution.

LarsDu88 2y ago

Wow. So this is why Apple's campus visitor center literally has no corners in it. Even the stairwells have all rounded corners.

saagarjha 2y ago
Take a closer look at the tables.

bdahz 2y ago

Related post discussing the rounded shapes (and squircles) in design tools: https://blog.verygoodgraphics.com/posts/rounded-shapes/ https://blog.verygoodgraphics.com/posts/rounded-shapes/

lazy_afternoons 2y ago

Loved it. Will remember this everytime I add "rounded" in tailwind. :)

29athrowaway 2y ago

I much rather prefer the old UIs that were highly responsive at the speed of thought.

TheDudeMan 2y ago

"No, there's no way to do that. In fact it would be really hard to do." Why would Bill say this? Why would his ellipse optimization not be trivially applicable to a quarter-circle?

sircastor 2y ago
I think as Andy writes, Bill was showing off a very impressive demo, and was maybe miffed that Steve wasn’t appreciating it. Also, the question had just been sprung, and literally no one had ever done this before.
- n4r9 2y ago
  This was my interpretation as well. Internally I would be thinking "Look, I've just worked my ass off and produced something incredible. Can't we just put it straight into production?"
- int_19h 2y ago
  Is it actually true that "no-one had ever done this before?". As far as I know, the midpoint circle algorithm, being a straightforward extension of Bresenham's line algorithm, was already well-known by 1981. Indeed, here's a paper from 1967 that does basically the same thing: https://academic.oup.com/comjnl/article-pdf/10/3/282/1333509/100282.pdf https://academic.oup.com/comjnl/article-pdf/10/3/282/1333509...
  - sircastor 2y ago
    I meant more specifically the first time it was really being used as a rapidly drawn object on a screen.
voiceblue 2y ago
Helps explain why Jobs turned out the way he did, when perfectly capable people behaved this way around him.
- 2y ago

aalvarado 2y ago

Love the story, could have added more in terms of how the round corners feature was solved

ralferoo 2y ago

I wasn't even aware that the Mac existed at the time, but I always had a fondness for rounded rectangles because the Amstrad CPC character set had 16 characters that represented all possible combinations of a central dot with N, E, S, W spokes. They were rounded for the 4 cases that represented 90 degrees, and the rounded rectangle look was perfect for using as borders around things. This was 1984, so wouldn't have been long after the original Mac but was maybe influenced by it. As far as I know, no other 8-bit computers have rounded container characters like this. I later used PCs, and the CGA text mode had its nice 1/2 line variants, which were good for variety, but they were square so I never found them as appealing as the rounded ones I knew from the Amstrad.

flohofwoe 2y ago

Oooof, so the rounded corners in UIs is just another Jobs-fetish by UI designers, got it ;(

Mikhail_Edoshin 2y ago

One example of rounded rectangles added purely for aesthetic purposes was the desktop window of the old Mac. When the display turned on during boot, it was naturally square, but then one of the first things the software did was to round its corners. Then they stayed this way until maybe another software switched into full screen. There was nothing like that on Windows and it was obviously a “useless” thing to do. I liked that detail.

dmd 2y ago

This conversation exemplifies every positive interaction I've ever had with any of my really good advisors or bosses. It's exactly what I want from my boss - to be told "that good, but not quite good enough, and I know you can do better even if you don't know it yet". And then I go off and think some more and outdo myself.

uwagar 2y ago

they are everywhere indeed because sharp corners can hurt people.

cat_plus_plus 2y ago

Learning how to design models for 3D printing now, and rounded corners are a matter of necessity as much as aesthetics. Objects with sharp corners are uncomfortable to hold, even risk of injury with some materials. They are also unhygienic and pain to clean dust out of. On the flipside, math to generate rounded corners on arbitrary shapes is messy and printing these out often requires supports and postprocessing to remove those and polish the curves with sandpaper.

jFriedensreich 2y ago

Rounded corners is much like semicolons, and rebasing / merging something impossible to discuss. Most people either strongly dislike the one or the other and are unable to reconcile.

cantSpellSober 2y ago

Can we add (1981) to the title please

layer8 2y ago

> Then he pointed out the window. …which hopefully was still a non-rounded rectangle.

spot1984 2y ago

"squircles" https://en.wikipedia.org/wiki/Squircle https://en.wikipedia.org/wiki/Squircle

camgunz 2y ago

I remember working on homework for "Discrete Computational Structures" (had to look it up ) in undergrad and having to come up with that sum of sequence of odds is the sequence of squares trick (it becomes clear if you visualize 4 blocks, then 9 blocks). I was like, "is this what I'm supposed to be learning, this feels like I just figured this out by luck". I think I got a B?