~Project Orihime: buttons and system font~
Project Orihime is a concept of a modern user interface for EGA and VGA displays running in 16 colours, aimed primarily at FreeGEOS.
The goal here is to bring an eye-candy interface and good UX to the 1984 IBM PC clones.
This is not a real UI (yet), but it gets more and more fleshed out, and I think it looks great on both CRTs and LCDs of the era.
I want to try and document some of my progress for your enjoyment. It also helps me to make better sense of design decisions I am taking on the go. Thread!
1/10
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
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
@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 @Gotterdammerung@glitch.social@nina_kali_nina props for Asuka from Evangelion 3.0 wallpaper
@Gotterdammerung I like my wallpapers on retro computers, okay?:)
@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!
@anethernetcable the palette has light and dark versions of RGB, CMY, white, black and two greys. I'm really pushing the limits here 
@nina_kali_nina Are you designing for modern LCD screens? The old Mac screens had legendary crispness, which made single pixel gaps easily distinct even at a high pixel density (early Macs had low resolution but even tinier screens). Most old PC monitors had a fuzziness to them that had to be considered.
@glitchf I have multiple test rigs: greyscale passive matrix LCD from 1989, VGA active matrix from 1992, and a CRT from late 90s. I also want to make sure it looks good on modern screens and in emulators. Most serious design decisions are done only after a test on the tests rigs.
@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. 