6 ms·

Monochromatic interfaces can be so beautiful. I'd love to use a modern GUI that adopted this aesthetic. Even though the content of documents would be in color,

Monochromatic interfaces can be so beautiful. I'd love to use a modern GUI that adopted this aesthetic. Even though the content of documents would be in color, having the UI itself restrained to a simple monochrome palette would be very enjoyable to use.

aaaaaaaaaab 8y ago
macOS graphite?
kh_hk 8y ago
fluxbox, awesome or any other tiling windows manager plus conky can be very near to this interface. Of course, that's just the windowing system and not the GUI itself.
coldtea 8y ago
macOS toned down most ole Aqua UI colors to get there. With the current black theme and a gray highlight it's not that far.
neoteo 8y ago
macOS: Preferences-> Accessibility -> Display -> Use grayscale
- sizzzzlerz 8y ago
  I didn't know that could be done. I've never even opened up the Accessibility panel. Actually, grayscale is not too bad. Everything is sharp and the contrast is high. However, I think I'll keep things in color anyway.
- aasasd 8y ago
  Alas, third-party apps—and of course websites—aren't made to be converted to grayscale. This can be easily seen by comparing custom-made monochrome icons in the menu bar to grayed icons in the dock and third-party toolbars (e.g. browser addons).
TeMPOraL 8y ago
I strongly agree. Another great part of this particular interface is also minimal cruft. All you have is data text, descriptive text, and a bunch of small graphics, all but one meaningful (the sine wave representing communication seems to be just a gimmick, though it still carries a few bits of relevant information). No useless animations, no useless framing, no "material design", no nonsense.
- z3t4 8y ago
  I was afraid to touch anything, but I did anyway, hope I didn't accidentally activate any thruster.
yuchi 8y ago
I recently discovered a dev/artist that brings this to its max expression. I fondly love all the work you can find in the portfolio. https://twitter.com/neauoire https://twitter.com/neauoire
atrilumen 8y ago
I'm not really ready to show people, but my 'modern' (conversation-driven) GUI is rocking the monochrome. ( edit: oh, with dark and light themes! ) Fuck it. Slater is magic software... and it's interface is like a tiling 'window manager' for any number of screens (anything with a browser), for threads of interaction, that are modeled as a story, like a conversation... but composes natural language with rich controls, forms, and stateful widgets. and super monochrome... but also controls your browser and TV and stuff... I'm really inspired by the design work on the LightPhone 2, btw. Super lame, early video: https://youtu.be/_m1zEbQieYQ https://youtu.be/_m1zEbQieYQ
- TeMPOraL 8y ago
  Was it also inspired by Samaritan UI from Person of Interest? Because your video reminds me a bit of this: https://youtu.be/cu-pnxgvA6s?t=216 https://youtu.be/cu-pnxgvA6s?t=216.
  - atrilumen 8y ago
    I'll watch in a minute, because I luuuuurv fantasy interfaces... but nope. I'm not really imitating anything here; just keeping it minimal. I'll probably throw away the waveform. I'm just looking for ways to use the audio to pace the text output, and also to tie the speech and text together as much as possible, so there's never a gap between them for your focus to jump between.
    - exikyut 8y ago
      Maybe you'll have more success with this idea than I have (way too many other things in the way sadly): something that may be fairly nontrivial but very cool to solve would be breaking words down into syllables, identifying the syllable boundaries in the speech (... xD), and then synchronizing the display on each syllable as it's presented. How are you synchronizing to each word? I wonder if Google would consider expanding their TTS a bit to provide syllable data and other rich breakdown information. I like the waveform, btw.
      - 8y ago
tomp 8y ago
I’m really sad that UI and backend are so tightly coupled usually... like, not a lot of value is in the UI (except for ads of course), and many web software and especially desktop software could just supply an API along with an open source, adaptable GUI that users could freely modify and adapt (or download/buy other themes). The old mIRC was mostly like this, a core/backend functionality with a very skin-able frontend.
- TeMPOraL 8y ago
  > not a lot of value is in the UI (except for ads of course) Almost all the value is in the UI. For the user, it's the place where they interact with the system, and in software tools, UI design can make orders of magnitude of difference in value delivered to the user[0]. For the vendor, the UI is where they shove ads at people, track them, and lock them into the product. The problem is that Internet companies today no longer operate under "earn money by delivering value" model. They operate under "extract as much value as possible from the customer", which means any value delivered is incidental. Examples of those two models in action: - "earn money by delivering value" - customizable interface with power-user features, and/or good API allowing users to interact with the product from third-party UIs and scripts; users pay for the product/service - "extract value from user" - dumbed down, shiny interface, no power-user featuers; locked down SaaS little to no API access; sometimes paid, but more likely free in order to maximize user growth, which leads directly to the company being acquihired, product being shut down, and users being left in the cold (Yes, I'm pretty bitter about the state of things, and I generally refuse to use most SaaS products because of the dominant approach of such companies.) -- [0] - as a real-world example, consider software for managing products in ecommerce. Take away batch-processing capabilities, and your user's productivity will drop hundredfold. Which directly translates to a) frustration, and b) the need to hire more people for the same task.
pighive 8y ago
How can I build something like this? Is this just CSS what makes difference. Reference to a guide or source is very much appreciated. This is really cool. Thank you.
- dan-robertson 8y ago
  Yes it’s just css. The hard part is deciding what colours things should be. How thick to make the borders, and when to add them. What sizes and colours and fonts for the different bits of text. How to lay it out. This sort of design fits nicely into css and html without much hackery but that doesn’t mean it’s easy to design. I suppose you could view source or inspect element.
  - pighive 8y ago
    Ya, first thing I did was to inspect. The page’s layout is so simple. Their <div>’s use look so rich.
- TickleSteve 8y ago
  No, CSS is how you implement this... Graphic design principles are what make the difference...
CamperBob2 8y ago
Agreed. But that particular font's gotta go.
- Tempest1981 8y ago
  The curved “i” is not of this world.
aasasd 8y ago
I'm of firm belief that the principle of proximity is primary for UI design, and color is far below. IMO the recent slew of the ‘anti-bullshit’ “This is a website” pages didn't come close to Matthew Butterick's online-book “Practical Typography,” which is exquisite simply from using carefully chosen margins and fonts: https://practicaltypography.com/ https://practicaltypography.com/

aaaaaaaaaab 8y ago

macOS graphite?

kh_hk 8y ago

fluxbox, awesome or any other tiling windows manager plus conky can be very near to this interface. Of course, that's just the windowing system and not the GUI itself.

coldtea 8y ago

macOS toned down most ole Aqua UI colors to get there. With the current black theme and a gray highlight it's not that far.

neoteo 8y ago

macOS: Preferences-> Accessibility -> Display -> Use grayscale

sizzzzlerz 8y ago
I didn't know that could be done. I've never even opened up the Accessibility panel. Actually, grayscale is not too bad. Everything is sharp and the contrast is high. However, I think I'll keep things in color anyway.
aasasd 8y ago
Alas, third-party apps—and of course websites—aren't made to be converted to grayscale. This can be easily seen by comparing custom-made monochrome icons in the menu bar to grayed icons in the dock and third-party toolbars (e.g. browser addons).

TeMPOraL 8y ago

I strongly agree. Another great part of this particular interface is also minimal cruft. All you have is data text, descriptive text, and a bunch of small graphics, all but one meaningful (the sine wave representing communication seems to be just a gimmick, though it still carries a few bits of relevant information). No useless animations, no useless framing, no "material design", no nonsense.

z3t4 8y ago
I was afraid to touch anything, but I did anyway, hope I didn't accidentally activate any thruster.

yuchi 8y ago

I recently discovered a dev/artist that brings this to its max expression. I fondly love all the work you can find in the portfolio. https://twitter.com/neauoire https://twitter.com/neauoire

atrilumen 8y ago

I'm not really ready to show people, but my 'modern' (conversation-driven) GUI is rocking the monochrome. ( edit: oh, with dark and light themes! ) Fuck it. Slater is magic software... and it's interface is like a tiling 'window manager' for any number of screens (anything with a browser), for threads of interaction, that are modeled as a story, like a conversation... but composes natural language with rich controls, forms, and stateful widgets. and super monochrome... but also controls your browser and TV and stuff... I'm really inspired by the design work on the LightPhone 2, btw. Super lame, early video: https://youtu.be/_m1zEbQieYQ https://youtu.be/_m1zEbQieYQ

TeMPOraL 8y ago
Was it also inspired by Samaritan UI from Person of Interest? Because your video reminds me a bit of this: https://youtu.be/cu-pnxgvA6s?t=216 https://youtu.be/cu-pnxgvA6s?t=216.
- atrilumen 8y ago
  I'll watch in a minute, because I luuuuurv fantasy interfaces... but nope. I'm not really imitating anything here; just keeping it minimal. I'll probably throw away the waveform. I'm just looking for ways to use the audio to pace the text output, and also to tie the speech and text together as much as possible, so there's never a gap between them for your focus to jump between.
  - exikyut 8y ago
    Maybe you'll have more success with this idea than I have (way too many other things in the way sadly): something that may be fairly nontrivial but very cool to solve would be breaking words down into syllables, identifying the syllable boundaries in the speech (... xD), and then synchronizing the display on each syllable as it's presented. How are you synchronizing to each word? I wonder if Google would consider expanding their TTS a bit to provide syllable data and other rich breakdown information. I like the waveform, btw.
    - 8y ago

tomp 8y ago

I’m really sad that UI and backend are so tightly coupled usually... like, not a lot of value is in the UI (except for ads of course), and many web software and especially desktop software could just supply an API along with an open source, adaptable GUI that users could freely modify and adapt (or download/buy other themes). The old mIRC was mostly like this, a core/backend functionality with a very skin-able frontend.

TeMPOraL 8y ago
> not a lot of value is in the UI (except for ads of course) Almost all the value is in the UI. For the user, it's the place where they interact with the system, and in software tools, UI design can make orders of magnitude of difference in value delivered to the user[0]. For the vendor, the UI is where they shove ads at people, track them, and lock them into the product. The problem is that Internet companies today no longer operate under "earn money by delivering value" model. They operate under "extract as much value as possible from the customer", which means any value delivered is incidental. Examples of those two models in action: - "earn money by delivering value" - customizable interface with power-user features, and/or good API allowing users to interact with the product from third-party UIs and scripts; users pay for the product/service - "extract value from user" - dumbed down, shiny interface, no power-user featuers; locked down SaaS little to no API access; sometimes paid, but more likely free in order to maximize user growth, which leads directly to the company being acquihired, product being shut down, and users being left in the cold (Yes, I'm pretty bitter about the state of things, and I generally refuse to use most SaaS products because of the dominant approach of such companies.) -- [0] - as a real-world example, consider software for managing products in ecommerce. Take away batch-processing capabilities, and your user's productivity will drop hundredfold. Which directly translates to a) frustration, and b) the need to hire more people for the same task.

pighive 8y ago

How can I build something like this? Is this just CSS what makes difference. Reference to a guide or source is very much appreciated. This is really cool. Thank you.

dan-robertson 8y ago
Yes it’s just css. The hard part is deciding what colours things should be. How thick to make the borders, and when to add them. What sizes and colours and fonts for the different bits of text. How to lay it out. This sort of design fits nicely into css and html without much hackery but that doesn’t mean it’s easy to design. I suppose you could view source or inspect element.
- pighive 8y ago
  Ya, first thing I did was to inspect. The page’s layout is so simple. Their <div>’s use look so rich.
TickleSteve 8y ago
No, CSS is how you implement this... Graphic design principles are what make the difference...

CamperBob2 8y ago

Agreed. But that particular font's gotta go.

Tempest1981 8y ago
The curved “i” is not of this world.

aasasd 8y ago

I'm of firm belief that the principle of proximity is primary for UI design, and color is far below. IMO the recent slew of the ‘anti-bullshit’ “This is a website” pages didn't come close to Matthew Butterick's online-book “Practical Typography,” which is exquisite simply from using carefully chosen margins and fonts: https://practicaltypography.com/ https://practicaltypography.com/