The thing is, 30 years ago wide window borders probably...

The thing is, 30 years ago wide window borders probably were a good idea. When you realise that, you probably will want to look back at previous systems and see how "windows" have evolved over time, what did they gain and what did they lose over time.

One of the earliest windowing systems, Xerox Star, did not offer any built-in chrome or buttons for the windows. If the programmer did not add "close" button, there was no way to close the window. I don't have an emulator at hand, but I think windows were not resizeable either.

Apple mostly copied that into Lisa, but added two important things in 1984's Mac: "close" button and "resize" button. And yes, you cannot resize the window by dragging its boundaries. Only resize button.

Makers of Amiga Workbench (and GEM) added buttons for quick resizing of the windows.

NeXTSTEP from 1988 was seemingly the first one to use "X" icon to close windows. It still had "resize" button to resize the windows arbitrarily.

🧵 3/6

Like 28 May at 12:18 | Open on tech.lgbt

6 comments

Mia Rose Winter :v_greyace:

@nina_kali_nina speaking as a 2-in-1 laptop user

I hate apps that make the title bar way too small, as well as the buttons on it, it's nearly impossible to properly grab them with touch, I hate it

28 May at 12:22 | Open on tech.lgbt

Colman Reilly

@nina_kali_nina Motif looked pretty clumsy even 30 years ago.

28 May at 12:26 | Open on mastodon.ie

Nina Kalinina

So, when Microsoft Motif style became an industry standard, it only made sense to visually indicate that the windows can be resized by dragging the boundaries of them.

By the time Windows 95 and BeOS were released, it became a common knowledge. Sometimes you could still find visual hints of "this window can be resized" in the corners of windows. But most systems just removed the hints from the UI.

The number, order, position and iconography of title bar buttons has never stopped evolving. At some point, Mac had four buttons - and modern Windows still has four buttons too, one of them mimics as a window icon.

What are the title bar buttons? Close, minimize, maximize, collapse into titlebar, resize, pin, always on top, window menu. Pick one or more!

Finally, some systems have experimented with vertical title bar. It looks fancy, but it means the name on the title bar is going to be vertical, so it's harder to read.

🧵 4/6

So, when Microsoft Motif style became an industry standard, it only made sense to visually indicate that the windows can be resized by dragging the boundaries of them.

Expand text...

OS/2 screenshot - a typical example of motif-like interface

BeOS - the only window control is Close button, and there are no hints that windows can be resized

28 May at 12:27 | Open on tech.lgbt

PulkoMandy

@nina_kali_nina your BeOS screenshot is cut off. The hint that a window is resizable is not in the titlebar, but at the bottom right. There is either a full resize knob (as in early mac os), or, if the app really needs to draw something in that corner, there are some markings in the window border (otherwise the border is continuous or even entirely missing)

28 May at 12:31 | Open on mastodon.tetaneutral.net

Nina Kalinina

@pulkomandy you are absolutely correct

28 May at 12:38 | Open on tech.lgbt

Nina Kalinina

With some history lessons learned, let's try to move some pixels around!

Having only two shades of grey, I figured the lighter will work as "active window" and darker as "inactive window".

When working with resolutions as small as 640x480, you very quickly notice the importance of each pixel. After moving lots and lots of pixels around, I found a way to make windows look smoother and thinner, with no "pixel comb" on the sides.

Shortly after, while working on design for buttons, I realised that the best button style needs to use "dark grey" for the button face. That means active window has to be dark grey, too! That means that inactive window must be one shade darker, or black... But that looks ugly, so I had to find a different way to make it look "unattractive". No gradients, and darker font it is, then.

One of the most important interface aspects is a font. Replacing a random pixel font with a hand-crafted interface-aimed font makes it look less like a concept and more like a real OS.

🧵 5/6

With some history lessons learned, let's try to move some pixels around!

Having only two shades of grey, I figured the lighter will work as "active window" and darker as "inactive window".

Expand text...

The first concepts of window title bars for Orihime project

Dark theme windows - both active and non-active windows are dark grey

28 May at 12:37 | Open on tech.lgbt