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:
I still think windows 2000 looks the best out of that bunch, if not for the lack of font antialiasing.
Windows 10 does a pretty good job too if not for the mess that is finding yourself in a universe of completely different UI paradigms that suddenly lurch from one to another, especially when navigating settings.
Windows 2003 Server was the pinnacle - it looked and felt like Windows 2000, but had XP-era improvements, including ClearType (subpixel font antialiasing).
I agree that Windows 2000 looks the best. I inherited a system that was running Windows Server 2003 that we have since replaced with up-to-date software. We needed to do it, of course but, the Windows 2000 UI was way better than what we have today. It was simpler but also more consistent.
What really bothers me is they removed the possibility to set the interface to the good old windows nt interface after windows 7. Okay, Microsoft wants to implement sim crappy new UI. At least give me the option to make it right
Sharp corners are dangerous, I always feel like those windows will draw blood if I touch them with my mouse wrong.
Strangely enough, I stayed in an East Asian hotel (I think with Tibetan influences?) and I remember the corners of the room all being rounded. It just felt better, more soothing? It would be hella expensive to get a craftsman to round all the corners in your room here in the west, you could do it with plaster but it wouldn’t last more than a decade and wouldn’t add any resale value.
Here in the UK it was pretty common up to say the 1940s for plasterers to curve the corners on outward pointing walls in hallways. This usually extends from the skirting up to the picture rail. There is a lovely transition from the curve to a point just below the picture rail, which is very elegant, but a total pain if you are hanging wallpaper, well, that's my experience anyway!
I've always felt it was one of those details that a plasterer could show off their skill, and you are right, it softens the corner in a very pleasing way.
> I remember the corners of the room all being rounded. It just felt better, more soothing?
It's funny. Here in the United States, I find houses with bull-nosed interior walls discomfiting. Something about all the rounded corners causes me mild distress. I find it much more comfortable being in houses with sharp-edged meetings of walls.
I was curious and went looking. This is the closest I found after a quick google search. It refers only to lighting options in the reactor chamber not the hallways and such.
"There are some obvious considerations: all underwater nuclear lights should be crafted from stainless steel with rounded and smooth surfaces for easy decontamination, and have no sharp or jagged edges to reduce the risk of workers tearing safety gloves or clothing. "
I spent two summers as a cleaner at a pharmaceutical company in my late teens. The "round corners are easier to clean" were a thing there as well, reason I was told was that sharp corners will scrape off some residue from the cleaning cloths when you drag them over the corner.
Oh, ya, I can see this being really nice for the kitchen sink or the stand in shower. Right now, oil build up gets trapped in corners that require a brush to work out, which is tricky in the shower where it’s all calked.
It feels like the more things I use a kitchen sink for the more I appreciate corners. Cleaning is a little more involved but being able to e.g. set two buckets next to each other and have them be level is really really handy.
You know, I remember seeing this on older pictures, but I tried to come up with an example and couldn't, all recent pictures I could find had regular floor moldings.
Hmm. We do it to ceilings (coving). I think you maybe need wooden coving, mounted vertically. Then you can make a feature of it, skim it, paint it, whatever.
I have some experience plastering. Round corners are somewhat easier than sharp ones. The plaster/joint compound tends to pile up quickly in corners and it is hard to skim it thin.
It's also funny how the later examples almost look like they could be terminal UIs. Based on this trend, I predict that the next version of Windows ("Windows One") will look like DOS.
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."
That's a very nice image. I think XP is the best one. Just the fact that it's yellow instead of gray makes all the difference.
I hate how modern widgets don't have shading. They're trying to be modern but it just feels very lazy.
Note how buttons suddenly became twice as big and there was margin/padding everywhere since Windows Vista/7. It's getting ridiculous how much space UI wastes.
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
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.
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.
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?
I think most philosophers would be fine with treating "there is no bear there" and "the amplitude of the probability density function of a bear is negligibly low there" as the same statement for this discussion :)
An entire bear spontaneously tunneling across a large distance or spontaneously forming out of vacuum fluctuations is really, really quite unlikely.
Don’t confuse the event with the distribution. An event always either has or hasn’t occurred, no further statement can be made. It’s only in bulk that one can talk about distributions. But in this contrived anecdote, there is only one observation, one event.
Some distributions are definitely relatively stable over time, so you can absolutely make predictive statements about the future given past observations.
That's true for both biological bear population dynamics and movement patterns and for quantum tunneling bears :)
I’m not sure “underrated” is exactly the best term here. He’s pretty much lauded as the greatest “visionary for design and innovation in the technology industry”, ever.
I agree that every time one of these anecdotes comes up, it’s a shock to remember. Of all the narcissists we have running the world, he’s the one I’ll most fondly remember.
Maybe not "underrated" but "Jobs only did marketing, Woz did all the technical work" is a very persistent comment I see on the internet when he's brought up.
Not to discount Jobs as a person, but the narrative in 100 years could easily be "Jobs was in the right place at the right time when technology reached a miniaturization threshold such that a computer could be in every person's pocket, the first time in human history; and Jobs led the first company to be there at the right time and capitalize."
But Jobs is who made the boxes something that non-nerds wanted to have in their homes. There were dozens of computer companies at the time, some (not many, but some) of which had Woz-level engineers (e.g. Jay Miner and team at Atari). But only Apple survived.
Someone once said there would never have been an Apple if there had been only one Steve, and I agree.
Was he a jerk sometimes? Yeah, definitely. But he's not the first genius who's been a jerk. At the extreme, Isaac Newton was a horrible person.
Success like he had is a filter. To be there you have to go through a lot of “sure you’ve done well so far, but you’ll never make it to the next level” conversations in your life. By the time you’re Steve Jobs, you’ve been right in the face of doubt thousands of times. Type of thing that makes someone think they can cure easily treatable pancreatic cancer with crystals or whatever.
He was a genius that had that flaw of being a narcissist.
The problem is all the people using him as a reason to praise narcissism itself. And almost never even in people that are genial, since very few people are genial.
I will not define Jobs as narcissistic (thinking on himself). Quite the opposite, Jobs was focussing on what people needed, and he was right: People needed rounded corners way more than ovals.
Jobs was obsessed with the customer experience and that was what made him a great CEO.
Did he cared more about the product or the customer than his own people? This is something that you should ask the people that worked with him.
> This is something that you should ask the people that worked with him.
No need to ask around, lots of people who worked for Jobs have gone on the record as saying he was the worst person they have ever worked for. If you ran into him (or worse, had to present something to him), you never knew if you were going to get Nice Steve or Angry Steve. Nice Steve would thank you for your work and politely inform you of changes or refinements that he wanted you to make. Angry Steve would verbally berate you in front of your manager and peers.
He had a set of close associates that he never or rarely treated badly, it is not hyperbole to say that most everyone else got the brunt of his wrath.
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.
> 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..
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.
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.
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.
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.
That's probably impossible (as rounded rects are not continuous) but also completely unnecessary as you can handle the quarter circle segments and line segments separately.
> as you can handle the quarter circle segments and line segments separately.
Possibly, but that is tricky in the presence of blitting modes such as XOR; the movement you accidentally draw a pixel twice, it would get flipped twice (nowadays, with anti-aliasing, it gets really tricky, but they didn’t have that problem yet)
You may want to draw the four circle segments in one go, too, as that allows you to share large parts of the computations for what pixels to touch.
The algorithm used to draw the ellipse should not have any issues with accidentally overdrawing even by a single pixel if your arcs are defined in 90-degree increments.
And you can, in fact, draw the four circle segments in one go, since they will all be mirror images of each other. If, instead of the absolute coordinate of the pixel, you compute the offset from the starting point, then you can compute it once, negate it as needed, and draw 4 pixels on each step.
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...
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?"
Also, for the most common cases this probably wasn't even needed - I bet they just stored the "masks" for rounding the corners hardcoded, as that would have been much faster.
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.
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.
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.
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.
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.
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.
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.
In games you had to do this 9 piece slice, one slice for each of the 4 corners, all 4 straight sides that can be repeated as a pattern and the middle background piece
Nine-patch image scaling[0] is still a thing, and is only orthogonally related to setting a border radius (it's a hell of lot more versatile than that).
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.
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.
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.
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.
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.
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.
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.
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.
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.)
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!
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).
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.
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.
It's not like you can use the notch for status notifications on phones with a screen cutout. To be fair though, I've always been hostile towards phones with notches or cutouts of any kind. Even my current phone (OP7Pro) with its rounded corners is pushing it.
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.
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.
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?
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.
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.
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.
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.
How does that work for rectangular elements? As far as I understand it, squircles are defined by an equation similar to (x/a)^n + (y/b)^n = 1, as in https://www.desmos.com/calculator/yllozptlmt.
That works well for squares (a = b), but for rectangles the corners aren't round anymore, they become elliptic, as in https://www.desmos.com/calculator/bzxyu6ygz3. That doesn't like as nice in my eyes, but more importantly I have the impression that the rounded corner of Apple's rectangles are circular, not elliptic. I don't have any Apple devices, but in screenshots like https://miro.medium.com/v2/resize:fit:4800/format:webp/1*oBI... it seems to me the corners of rectangular elements are very much not elliptic. Or certainly not nearly as obvious as in my second Desmos link.
So I don't understand what's really going on. It doesn't seem to me Apple's rectangles really are superellipses.
(And actually the squares in that screenshot look like simple rounded squares to me, not squircles/superellipses. The sides look too flat for squircles. I could be wrong though.)
They're definitely not superellipses these days, but to answer your question in a more interesting manner: you don't have to stretch the superellipse. You can just split it so that the corners are rounded with a 1:1 aspect ratio and cheat by stretching the lines in the middle.
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.
What does quintic mean in this context? My first thought would be something like (x/a)^5 + (y/b)^5 = 1, but that doesn't seem to work. I only get meaningful shapes when I use even exponents.
https://user-images.githubusercontent.com/7389110/64139289-3...
I still prefer the sharp corners.