Email or username:

Password:

Forgot your password?
Top-level
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

3 comments
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)

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".

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.

Go Up