Mastodawn

For those of you who never thought about old computers and modern interfaces, I want to remind you that "simple" and "flat" interfaces of modern operating systems rely on high resolutions and 24-bit colours a lot.

Take Gnome 46, for example.

1920x1080 in VGA palette looks somewhat okay, but

640x480 in modern 24-bit colour looks like it's losing quite a lot of details, and

640x480x4bpp VGA 16 of the said interface is simply unusable. Perhaps this is why modern OSes demand at least 800x600 in True colour.

So, uh, do you know what you usually end up when you try to make your interfaces look OK in default palette and resolutions of 640x350 or 640x480?

🧵 2/10

At best, you end up with things that look a lot like Windows 95. This is FreeGEOS, which I am aiming my UI/UX upgrade for, but you could take any OS that officially supports 640x480 in 16 colours, and it will look more or less like that.

The palette is very limited, and if you try to add custom drop shadows with dithering, you run out of resolution very quickly.

That means eye-candy and smooth corners can only take a few pixels at best. In the previous thread, I've explored my approach to making Windows and Titlebars, and this time I want to show you how I took a stab at making the next UI staple - The Button.

Previous thread btw: https://tech.lgbt/@nina_kali_nina/112518604838598161

🧵 3/10

Nina Kalinina (@[email protected])

Attached: 4 images ~Project Orihime: Windows~ Arguably, the most important abstraction of any windowing system is a window. And in most windowing systems, the most important part is the title bar. Let's say we want to make a windowing system that will look nice and modern while working in 640x480 16 colours mode. It shouldn't be too much of a challenge, because modern windowing systems are all using simple flat colours instead of gradients or textures that used to be popular just a decade ago, right? Let's start with drawing a window title bar like that, and then compare it with popular modern systems. Huh! It is missing something... But what? 🧵 1/6

LGBTQIA+ and Tech

I took my default window as a canvas (note yellow-white window background, it is quite unusual for OSes of the era, but not unthinkable, and it looks kind of nice on a CRT), and made a bunch of buttons.

It quickly becomes obvious that:
1) Gradients don't work, take too much space
2) Motif-like buttons work, but look dated
3) Coloured buttons don't work
4) Monochrome buttons look meh
5) Overly-round buttons look meh

🧵 4/10

I chose two designs I liked the most, dark and light, and tried to invent variations of the buttons for Inactive-Selected-Hover modes of the button.

This was the moment I realised why Windows 95 required a VGA monitor, and why Mac Classic and Windows 1/2/3 interface font was so bold. Mac Classic and Windows 1/2 were supposed to work fine in monochrome.

Curiously, Windows 3.1, which dropped official CGA/monochrome support, sometimes "loses" UI elements on monochrome displays.

🧵 5/10

After trying out different button designs on a real display, I decided that I like dark button better, but I need a better design for "inactive" buttons.

Especially considering how fonts are super important on low resolutions, and how much I don't want to make UI font to be bold by default just to make text on inactive buttons readable.

🧵 6/10

With dark buttons comes an unexpected change to the interface palette.

Dark buttons don't look great with light title bars. So the title bar has to be dark grey. And if the title bar is dark grey, then default bright-yellow window colour is too contrast and unpleasant.

So, here we go: dark window titles, dark buttons. Kind of nice, I think?

🧵 7/10

At this point, I got fed up with the fonts I have been using, and decided it's time to find a font that I would actually like in my interface.

Let's do some research!

The font used in the menu bar and the one below are fonts for pixel games, and they look OK in games, but they have too much character for a font that is supposed to be "default" and "invisible".

Default Windows fonts have a pleasant crispiness to them, but their bold version feels a bit chopped-off.

Default Mac Classic fonts are unexpectedly tall, and, as mentioned before, mostly designed to look best in bold. Two-pixel kerning is quite a move for a 512-pixel wide display.

Finally, default FreeGEOS font. It is huge, and it is meant to be displayed in semi-bold most of the times. It is an interesting decision; perhaps, it was important for 9" Brother GeoBook laptops or something?

🧵 8/10

For a UI font, I decided, I wanted something modern (maybe a bit like Android default font?), but still pixel-perfect with a nostalgic Windows 95 font crispiness.

I was highly inspired by an open font Lato by Łukasz Dziedzic, but ultimately went in a slightly different direction. But as a tribute, I'd like to call this font "Lito".

🧵 9/10

You can tell there is still quite a lot of work left on the font and the buttons. It is a work in progress.

I am not completely happy with the font, despite my best efforts it still looks like Windows 2000 or something, a kind of retro-vibe I did not aim for.

But then I suppose a pixel-perfect font in an interface is a dead giveaway about the number of colours the system can use. As long as the font looks fitting, it's okay.

As long as it looks okay, it's okay. Right?

🧵 10/10

Eniko (moved ➡ gamedev.place)Sep 21, 2024

@nina_kali_nina the only way i can think of to not have quite so retro looking a font is to add some kind of anti-aliasing. i don't know how viable it would be to actually implement but you're using few enough colors that pre-cached blend tables could work to maybe add some kind of manual AA?

@eniko I have entertained the idea. The only way I can afford that is by using a custom palette with four steps between black and white instead of two. But it will break compatibility with a bunch of documents and images, so I'd rather not.

🇪🇷Götterdämmerung Sep 21, 2024

@nina_kali_nina props for Asuka from Evangelion 3.0 wallpaper

@Gotterdammerung I like my wallpapers on retro computers, okay?:)

AnEthernetCable Sep 22, 2024

@nina_kali_nina The text for the file manager's context menu looks less like win2000, I think because it's not a solid black? Perhaps giving the text a dash of color could help, or maybe more of a gray rather than black - That is if you're able to squeeze any more colors in lol. Nonetheless really like the vibe, very cool project!

Nina Kalinina Sep 22, 2024

@anethernetcable the palette has light and dark versions of RGB, CMY, white, black and two greys. I'm really pushing the limits here 😭

Rob Fahrni Sep 22, 2024

@nina_kali_nina I love this thread! Thank you for sharing.

My first computer was a 286 running Windows 2.1, which I eventually upgraded to Windows 3.1. It had an orange monochrome display and seemed to work fine. I wrote my first Windows app on that computer. 😃

Eniko (moved ➡ gamedev.place)Sep 21, 2024

@nina_kali_nina that's a very pleasant font

@eniko thank you, it feels good to be praised by someone who knows a thing or two about pixels <3

@nina_kali_nina
Maybe the fonts that were used on monochrome systems like Smalltalk-80 & 76, Interlisp, Lisp machines and the like could be a good inspiration?

@kirtai not unexpectedly many were quite atrocious, actually! Very few companies could afford good fonts, and very few computers could support non-monospaced fonts

@nina_kali_nina
True. I did like the Smalltalk-76 font though (called Cream iirc?) since they *did* care about how things look.

I think @neauoire uses that one in their UXN tools.

@nina_kali_nina @neauoire
Oh, and it's a proportional font. Not bad for 1976.

@kirtai @nina_kali_nina I do! But it's been heavily modified, the capital letters were bad.

@neauoire @kirtai it is pretty but very fancy, not the kind of utilitarian font I'd personally enjoy in an interface

@nina_kali_nina @kirtai yeah you need a full-on victorian dress with frills and puffy shoulders to code with that font.

@neauoire @nina_kali_nina
Now I need a frilly dress

Lonnon Foster Sep 21, 2024

@neauoire @nina_kali_nina @kirtai The kind of font Ada Lovelace herself would have used if she and Babbage had managed to cobble together gear-based display technology.

ShaneB Sep 24, 2024

@lonnon @neauoire @nina_kali_nina @kirtai Adele Goldberg of Smalltalk fame rocked that look: https://tube.arthack.nz/w/vLrZzjuKdpyjgEEvECeytZ?start=1m27s

(1980) Smalltalk-80 : Adele Goldberg

PeerTube

atsuko Sep 21, 2024

@kirtai @neauoire @nina_kali_nina now i want to see Devine in full-on victorian dress with frills and puffy shoulders coding with this font

@yottatsa @kirtai @nina_kali_nina *in pyjamas*
I AM NOT WORTHY

@nina_kali_nina @neauoire
Fair enough, maybe the St-80 font would be better there. (Smalltalk has always had proportional fonts).

David JONES Sep 21, 2024

@neauoire @kirtai @nina_kali_nina oh I thought this was Venice, but I think it's the same designer, right?

@drj @kirtai @nina_kali_nina similar, venice is bolder. I don't think they're from the same designer tho.

@neauoire @drj @nina_kali_nina
Oooh, I like that one a lot. Reminds me a little of the garnet font on the amiga which I used for icon names

David JONES Sep 21, 2024

@neauoire @kirtai @nina_kali_nina if it's what FontsInUse call Cream (and I'm not sure these things get passed around like office photocopier memes) it is in fact the same designer, Bill Atkinson. https://fontsinuse.com/typefaces/174352/cream-apple

Cream (Apple) in use

Cream a.k.a. Creamy or Palo Alto is a bitmap font “seen in early versions of Smalltalk and on Macintosh prototypes.” [Kreative Korporation] “Cream 12 [was] our first system font, which was the default font used by SmallTalk, that Bill [Atkinson] had converted to the Lisagraf font format.” [Folklore] “Used through most of 1981.” [Folklore] Cream 12 (used for sample) and Cream 14 as included in Macintosh OS 0 (Twiggy) were converted for contemporary use by John D. Duncan III as part of the Classic Macintosh Typefaces archive. Parc Place (Kreative Korporation, 2011) is a TrueType version made by Rebecca G. Bettencourt.

Fonts In Use

overstrike Sep 21, 2024

@drj @neauoire @kirtai @nina_kali_nina Bill copied Cream from SmallTalk; he wasn’t the original designer.

David JONES Sep 22, 2024

@overstrike @nina_kali_nina I was starting to wonder if that was the case. Which begs the question, who designed the SmallTalk version of the font?

@neauoire @nina_kali_nina
It does look really nice. I wonder how hard it would be to backport the modifications.

marc Sep 21, 2024

@nina_kali_nina @kirtai I quite like the font of Genera. Looks a bit similar to Iosevka Aile.

Konrad Kołakowski Sep 23, 2024

@nina_kali_nina Fun fact: "Lato" means "Summer" in Polish, this is why font is named that way 🙂 It's easy to spell for almost everyone though!

Nina Kalinina Sep 23, 2024

@kkolakowski and Lito is літо - Summer in Ukrainian

Konrad Kołakowski Sep 23, 2024

@nina_kali_nina Oh, that's interesting! Nice touch 😍

Hak Foo

Sep 21, 2024

@nina_kali_nina I wonder if the default GEOS font makes more sense for the old "Appliances" paradigm-- a full-screen app with only a handful of buttons probably needs a chunky font to fill the space.

Have you looked into some of the old bitmap X11 fonts? They're pre-antialiasing and often come in a few useful sizes.

@hakfoo I suppose that might have been one of the reasons, too. It also looks better on 1024*768

Yes, old X fonts can be very nice sometimes! GEOS supports them to an extent (there's a converter tool that might or might not work).

@nina_kali_nina Did you try to look at video games from that era?

Many use highly customized user interfaces. But I also remember some with at least rudimentary widgets that resemble a real UI. And at 320x200 in 16 or 256 colours, they really made use of the available pixels?

The obvious example is Sierra adventures from around then. Those choices are maybe too rudimentary.

@nina_kali_nina SimCity also went for flat window elements.

@nina_kali_nina Not the best example, but I recall a lot of the same approach to a 3D effect as in Windows, except the lower resolution of 320x200 made the choice of typeface pretty simple. But you can squeeze colour and 3D effect into a very small button that way!

@nina_kali_nina Warlords (I think this is the second one) had UI elements that include a rounded corner button. The bit that shows the button is selected is a black frame *outside* of it, which is something I remember seeing in a few places.

@jens this one is very pretty but also very 256 colour

Not a Spring Onion Sep 21, 2024

@nina_kali_nina @jens

Throwing "The Incredible Machine" (1992) in the ring, 15 colors and a lot of skeuomorphism.

@wakame @jens this one is really a very fun interface, thank you for reminding me about it

Alex Sep 21, 2024

@nina_kali_nina It's looks like old Apple OS.

Dr. Eric J. Fielding, PhD Sep 21, 2024

@nina_kali_nina My first computer was a Mac Plus, so I worked on a screen with no color for a while. The interface was extremely simplified.

Not a Spring Onion Sep 21, 2024

@nina_kali_nina
IMHO: Rounded corners are a waste of space and an insult to developers and users alike

@wakame feel free to replace the style with the one you like better :3

Not a Spring Onion Sep 21, 2024

@nina_kali_nina
I didn't intend this as a critique... sorry

Part of my brain wanted to make a statement about usability and how (at least in my opinion) UI designs are often horrible (black/white/gray deserts) or... designs that are so colorful that you quickly get diabetes.

But somehow the post was deemed finished at "hot take" levels.

Edit: Bookmarking this so I can contribute if I have something to contribute. Otherwise: Like the thread and the topic.

R. L. Dane

Sep 21, 2024

@wakame @nina_kali_nina

* Macintosh System 0.x-7.x has entered the chat

Ted Sep 22, 2024

@wakame
I'm curious how so? I ask as a user and developer that tends to like rounded elements.

I do imagine it might be a problem for lower end systems because checking which thing to paint is now more complicated than a bounding box check.

You can cheat with a button - just paint the window background. But it is trickier for a window on top of a window.

@nina_kali_nina

Nina Kalinina Sep 22, 2024

@tschundler @wakame in terms of performance, rounded titlebars aren't slower in any meaningful way because on such old machines each pixel is copied to memory individually or, at best, line by line, so it's only a question of choosing different start and end points.