
Ask HN: What are weird and/or novel ways to do web UIs? - louismerlin
Do you know any websites that have weird UIs ? Something like a ZUI [1] for example.<p>[1] https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Zooming_user_interface
======
zxcvbn4038
I once worked at Chase Manhattan Bank and one of their internal networking
teams had a web site for wiring requests. They didn’t want to work too hard so
their UI was designed to make data entry as slow as possible, mostly by using
huge multi-level drop down lists where the slightest twitch would make them
collapse and you would have to start over navigating through them, repeat a
dozen times for every run of cable, several runs required to make an end to
end connection. It wasn’t custom programming, just taking full advantage of
the browsers of the era’s inability to render the UI component for that. So I
was building out a data center and needed Something like forty thousand cables
run which translated into around one hundred and fifty thousand segments. I
tried to give this info via a spreadsheet but they were steadfast that the web
interface was the only way they could receive it. So I wrote a script to just
post the data directly without going through the UI, ran it, and went home.
Turns out all their web form did was e-mail the values to a half dozen people.
The e-mail system was Lotus Notes (dates this) so each person got their own
copy and there was a lot of overhead. The sudden influx of a million e-mail
messages brought down Chase’s email system for two thirds of the country. They
spent days clearing the mail queue and recovering - they had to fly in IBM
techs with suitcases full of disk drives to add the storage needed. Everyone
who received the wiring requests spent days deleting them with new ones
arriving as quickly as they deleted the old ones. Then when things were
finally normal again they asked me to resend them my spreadsheet.

~~~
AndrewStephens
Whole books could be written on the terribleness of Lotus Notes. For those too
young to remember the 90s, LN really was as bad as everyone says, turning what
should be simple (email, maybe a few custom forms) into swampy morasses of
pain.

When intranet webapps came along everyone breathed a huge sigh of relief.

~~~
smacktoward
Notes was a double-edged sword. It could be as terrible as you've heard, but
on the other had it also let non-programmers build surprisingly useful
applications all by themselves. (Which is part of why it stuck around for so
long -- being useful, those apps tended to get wedged into critical parts of
the business process, which meant you couldn't just pull them out and throw
them away.)

~~~
moonlighter
Notes was conceived in 1984 and at the time was an amazing platform which
featured a secure client/server architecture, RSA encryption, data replication
and offline support. Both the Notes client and the server (later renamed to
Domino) needed to run on multiple platforms (Win 3.x, OS/2, Netware, NT,
Alpha, RISC systems etc), and while the code was native C code on each
platform, all UI of the client was implemented using an abstraction layer
called NEM ("Notes Environment Manager"). Likewise, all database storage was
abstracted in NSF ("Note Storage Facility"; and Notes databases to this day
still have the .nsf extension). Long story short, the NEM layer was a trade-
off between portability and consistency across platforms. And, Notes used F9
to refresh data, way before the Windows standard of F5 was a standard...

[https://www.ibm.com/developerworks/lotus/library/ls-
NDHistor...](https://www.ibm.com/developerworks/lotus/library/ls-NDHistory/ls-
NDHistory-pdf.pdf)

~~~
AHThomas
What he said

------
TekMol
This website uses scatterplots instead of lists to display products:

[https://www.productchart.com](https://www.productchart.com)

So on Product Chart, you can for example say "Show me 300 smartphones and put
the price on the x-axis and the size on the y-axis".

It's a bit like you would lay out things on a table and then organize them by
some criteria.

~~~
oftenwrong
I'm glad to see this site making progress and gaining attention. I remember it
used to be "GNOD":

[https://news.ycombinator.com/item?id=7465980](https://news.ycombinator.com/item?id=7465980)

Also similar, and by another HN user:

[https://diskprices.com/](https://diskprices.com/)

[https://battprices.com/](https://battprices.com/)

~~~
heffer
These are great.

I miss a page like this for Canada.

In Germany, where I'm originally from, we have geizhals.de for product and
price comparison that works a lot like these pages you linked and has been
around for ages.

They have an English version you can check out here:
[https://skinflint.co.uk/?cat=nb](https://skinflint.co.uk/?cat=nb) (this links
directly to the Laptop section so you can check out their filtering
capabilities).

Here's their listing of price per TB for SSDs which is very much alike the
diskprices.com page you linked:
[https://skinflint.co.uk/?cat=hdssd&sort=r#productlist](https://skinflint.co.uk/?cat=hdssd&sort=r#productlist)

~~~
thirdsun
> In Germany, where I'm originally from, we have geizhals.de for product and
> price comparison that works a lot like these pages you linked and has been
> around for ages.

Geizhals is not only useful as a price aggregator, but also when it comes to
product discovery itself - often I look for products with very specific
attributes, which may be represented by different names and keys between
sellers and manufacturers. Geizhals' ability to collect and aggregate them in
such detail is second to none. At that point pricing information is just an
extra.

------
toddmorey
An impressive implementation of a web UI is Figma:

Figma is written in C++ code then run in the browser by cross-compiling it to
a subset of JavaScript known as asm.js. The asm.js subset is basically
JavaScript where you can only use numbers (no strings, objects, etc.). This is
all you need to run C++ code since everything in C++ is either a number or a
pointer to a number, and pointers are also numbers. The C++ address space is
just a giant JavaScript array of numbers and pointers are just indices into
that array.

Of course wasm is more performant as it matures, but they’ve been at this
since 2015 and I’m impressed by how responsive the app is.

[https://www.figma.com/blog/webassembly-cut-figmas-load-
time-...](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)

------
yakshaving_jgt
I used to work at a company that behind the scenes had to _use_ a web UI in a
weird/novel way for their system to work.

This company's web UI would allow its users to initiate bank transactions.
Nothing weird from the user's end. However, the company had to "approve" the
transactions in real time, synchronously. The company could do all sorts of
programmatic verification on the user, recipient, transaction, etc, but we had
to actually _physically press_ a button on the screen of a smart telephone to
approve the transaction. There was no programmatic way around this.

Some programmers at the company came up with a robotic arm which could be
controlled programmatically, which would do the telephone screen pressing for
us.

I always thought that was pretty clever.

~~~
el_dev_hell
Easily the most amusing thing I've read all day.

Was this compliant?

~~~
yakshaving_jgt
Oh, I couldn't tell you. For the same reason that I couldn't reveal the name
of the organisation; to protect the guilty :)

------
Namrog84
Go spend 5 minutes here on pc desktop.
[http://cyberspaceandtime.com/Gaano9Y6KAU.video+related](http://cyberspaceandtime.com/Gaano9Y6KAU.video+related)

I came across this site a few weeks ago. And it's quite unlike anything I've
seen. And try to inspect the site using browser inspector. It's a very
different ui than I've ever seen before.

~~~
cr0sh
Seems completely broken in Firefox and Safari, and mostly broken in
Chrome/Chromium - just what browser does the site work with?

~~~
Namrog84
You mention safari. Are you on a mac?

So it works in firefox and chrome for me on windows. Not sure, I have pretty
vanilla setup.

------
melvinroest
This is a bit of an odd answer, even in a question that expects odd answers.
That is because it sounds so normal, yet I have Googled for it and almost _no
one_ advocates for it. They do maybe advocate for it in terms of design, but I
mean in making actual static websites.

Enter Google Slides: the product for your uncle Joe and aunt Lysa to create
their own websites without knowing how to code!

I even have an example website for you that I made as it is a project that I'm
working on in my free time. I already remade the website in actual HTML/CSS/JS
but I was simply curious how well Google Slides would work. IMO, it has a
thing or two over Sketch (such as displaying GIFs, having links) since I made
the actual layout with Sketch, and then redid everything with Google Slides to
do a side by side comparison (I went too far with this :P).

There are a few things to consider:

1\. Every page needs to be made in its own slide show as you cannot have
different document sizes.

2\. You will be stuck with a slide viewer, but I figured for the industrious
fellow, you could simply inject some JavaScript that disables that whole
viewer when you iframe your Google Slides website.

3\. There are zooming issues because the pages are of different document
sizes.

4\. The fact that you need to define document sizes is noteworthy in itself.

So yea, not super duper practical, unless you aren't a web designer and simply
want a simple profile page online, but definitely weird :D

Example website / project that I'm working on (and recreated to the best of my
abilities in Google Slides for fun):
[https://docs.google.com/presentation/d/e/2PACX-1vRxqg4SNv1Sl...](https://docs.google.com/presentation/d/e/2PACX-1vRxqg4SNv1SlUZzPwu2ycjqMKPqk4fgtFDroq0nwbVp_m7hd8Zbui04g3ademPQP-
efmdzi9PHW3Uoj/pub?start=false&loop=false&delayms=3000&slide=id.g61e126f25a_0_1)

~~~
j-me
Wow, this idea brings me back to one of the moments that first inspired me to
start down the path of web development. In 2007 I took a semester off and got
a job as a teaching assistant for a special education classroom and was 1:1
with a child that LOVED computers but would get overwhelmed by the information
density of your typical website - too many decisions would frustrate him.

One week, we were learning about farms which I was really excited for because
his love for the computer was matched only by his obsession with animals.
Sadly, his outbursts would require me to separate him from the group time
where we would show them pictures of animals and learn about their sounds,
functions, etc. This made me think of creating and interactive PowerPoint
where I made a slide with options for “petting zoo”, “animals with jobs”,
“wild cats”, etc. each choice would lead to a new slide with a set of photos,
icons that played their sounds, and even tried creating a set of quizzes where
I recorded an animal sound and he had to select a photo that matched.

I worked until 3 AM making this PowerPoint and was deliriously tired the next
day, but man the joy this kid experienced while he got to play on the computer
AND learn about animals without getting worked up over a multitude of
decisions sparked something in me that made me decide I wanted to do something
with IT.

Your idea really hit home for me and helped me remember one of the reasons I
do what I do today - frontend and app development. Lowering boundaries and
making technological concepts more accessible can inspire unexpected interest
and adoption.

~~~
melvinroest
That's a truly heart warming story to hear!

I think you just upped my motivation even higher to be in IT.

------
ggerganov
Not sure if this counts as weird or novel web UI, but I wrote a small library
to stream Dear ImGui's vertex and index buffers to browsers via websockets,
and just render them using WebGL's drawElements [0]. There a couple of
examples linked in the README for anyone interested.

[0] [https://github.com/ggerganov/imgui-
ws](https://github.com/ggerganov/imgui-ws)

~~~
helltone
This is wicked cool, nice work!

------
ag8
The rotating cube interface [1], where each of six parts of a form is on a
different face of a cube.

[1] [https://ux.stackexchange.com/questions/11229/is-this-
rotatin...](https://ux.stackexchange.com/questions/11229/is-this-rotating-
cube-interface-user-friendly)

~~~
some1else
It's like you're the only person who read the question.

------
rwmj
This isn't a weird UI as such, but it's probably a technology that isn't
explored enough. Back in the very early 2000s before Javascript was
universally available, we wrote a CGI-based technology that worked by
persisting the entire state of the page between clicks. It was a true widget-
based server-side GUI, so you could build single page UIs by composing widgets
such as buttons, labels, and more complex things, hierarchically (like native
GUIs). The whole page would reload between clicks but everything was so
lightweight and tiny that wasn't actually much of a problem, at least by the
standards of the day.

It's all open source but probably doesn't compile on modern machines, and of
course for extra fun we wrote the entire stack including the webserver, CGIs,
cooperative threading, database layer and C libraries from scratch. From top
to bottom this is the entire stack:

[http://git.annexia.org/?p=monolith.git;a=summary](http://git.annexia.org/?p=monolith.git;a=summary)

[http://git.annexia.org/?p=rws.git;a=summary](http://git.annexia.org/?p=rws.git;a=summary)

[http://git.annexia.org/?p=pthrlib.git;a=summary](http://git.annexia.org/?p=pthrlib.git;a=summary)

[http://git.annexia.org/?p=c2lib.git;a=summary](http://git.annexia.org/?p=c2lib.git;a=summary)

Edit: I should say that it's obsolete if you can make the nowadays reasonable
assumption that Javascript can be used on the client side. It's more like
"this is the crazy shit that a team of developers in their 20s with VC
funding, disfunctional management and time on their hands get up to".

Edit 2: It was used in production for quite a long time, certainly until the
2010s. If you were in a UK school in the mid 2000s there's a chance you might
have used this.

~~~
zxcmx
If I'm not mistaken this is pretty much how ASP.NET Web Forms work(ed). I
think Java Server Faces (JSF) uses a server rendered component approach also.
The giveaway being the need for a ViewState.

So for a long time this has been a widely used pattern! With today's dominance
of (MVC || SPA) architectures I agree it's not as widely known as perhaps it
should be.

~~~
thrower123
You could do some heinous, heinous stuff the Web Forms and UpdatePanels.

Interestingly, Blazor seems to be reviving the whole idea. With SignalR, it is
actually not completely insane to handle events with the equivalent of code-
behind.

------
Doxin
Last time I checked Gtk has a web backend, meaning you can run basically any
gtk app with the right environment variables and it'll pop open a browser with
the app rendered pixel perfect into it.

I don't really think it's useful as an actual web technology since you'd need
to spawn a process, reserve a port, and keep a connection open for each and
every user which seems like it wouldn't be workable.

It's a neat trick though.

~~~
severine
It's called Broadway, and still going on:

[https://blogs.gnome.org/alexl/2019/03/29/broadway-
adventures...](https://blogs.gnome.org/alexl/2019/03/29/broadway-adventures-
in-gtk4/)

[https://people.gnome.org/~alexl/broadway-
gtk4.html](https://people.gnome.org/~alexl/broadway-gtk4.html)

~~~
Doxin
Oh awesome, I actually messed with broadway some yesterday on Gtk3 and while
it works _incredibly well_ it has some drawbacks to the point where I don't
really see a use case so maybe you can enlighten me somewhat.

The main downside I see is that every single keystroke needs a roundtrip to
the server. Given a ping time of ~200ms that already makes it nearly unusable.
So that leaves running broadway on localhost but then why use broadway at all?
You might as well run it normally.

Anyways it's a really cool backend and I feel like with a small amount of work
it could actually be used for web-apps, with the amazing advantage of
basically eliminating front-end programming entirely.

------
tiborsaas
Check out [http://hoverstat.es/](http://hoverstat.es/)

It's full of examples with unconventional design.

------
tomglynch
You might find some interesting examples by going through the websites here:
[http://brutalistwebsites.com](http://brutalistwebsites.com)

They definitely dont all have weird UI, but some do.

~~~
nothis
I’m already seeing this in the wild, at least for more artsy clients, museums,
that sort of thing! I _kinda_ like it. Some of their examples are over the
top, of course, but think of it as the fashion show pieces that retail chains
will digest into more realistic designs over the coming years. I think we
kinda need this to escape the tacky, bloated default look that 99% of websites
do, nowadays.

------
dandare
Inspired by zoomable interface [https://uk.wikibudgets.org/w/united-kingdom-
budget-2015](https://uk.wikibudgets.org/w/united-kingdom-budget-2015)

~~~
htfu
Really impressive! Just so smooth and intuitive. Shame it broke down very
quickly after zooming in and trying to go back out again.

------
brianpgordon
I think briefly it was considered cutting edge to have your page content be
delivered as an XML document, with an accompanying XSL or XSLT file to
mechanically translate the XML into a full-fledged XHTML page suitable for
rendering in a browser. I even saw it once on some public website, I think
maybe for a Blizzard game? The content XML looked great; very intuitive. The
XSLT stuff for translating into XHTML, well, not so much.

~~~
yesbabyyes
The Swedish election authority builds its website like this:
[https://val.se/](https://val.se/)

XSLT is quite different and really powerful. I helped a friend once, he wanted
to import his iTunes Db to Qlik for analysis. iTunes keeps its data, with
number of plays and all statistics, in an XML file. Qlik has XSLT support. So
it was just a matter of a couple of lines of XSLT to get all the data into
Qlik. It literally went from a complete headscratcher to done with half an
hour of studying MDN's XSLT documentation and some experimentation.

------
superkuh
For the comment system on my website I wrote a perl script that tails the
nginx logs for all instances of /@say/ in the file path of requests. Anything
after a /@say/ is considered comment. So the UI for commenting on my website
is like,

[http://mywebsite.com/somepage.html/@say/Hey](http://mywebsite.com/somepage.html/@say/Hey),
neat somepage content, guy.

Some nginx redirects also included to take users to the comments page after
submitting.

------
Bilters
I would say the website which shows you and tells you what you're doing in the
browser; [https://clickclickclick.click/](https://clickclickclick.click/)

------
Ruphin
I worked on a project before that explores using non-traditional UI on the
web:

[https://overwebs.ruph.in](https://overwebs.ruph.in) (warning - sound and high
bandwidth)

It emulates a game UI, and uses background video to simulate physical movement
when navigating between pages. It also incorporates some controls that are
unusual for normal web applications like keyboard controls (shortcuts like
'Esc' to go back, 'Enter' to open chat).

It's a pretty old and very experimental project so some stuff is in a semi-
broken state. I should revisit it sometime and clean up.

~~~
hazzamanic
I really enjoyed navigating around this, good job!

------
justusthane
[https://www.kickscondor.com](https://www.kickscondor.com) is really bizarre.

Animated backgrounds, infinite scrolling, elements that are only partially
visible until you mouseover them, and uses zooming interface for opening
individual posts.

Feels like a bastard child of GeoCities and modern web.

~~~
orthecreedence
Oh man, kind of reminds me of an animated version of Yvette's Bridal:
[https://yvettesbridalformal.p1r8.net/](https://yvettesbridalformal.p1r8.net/)

Careful: the further you dig, the weirder that site gets. Made by some guy (a
"world famous artist") who uses the site as some weird recruitment tool for
his cult. You could spend an entire day on that site and not see all of it.

------
tontonius
I like [http://zombo.com/](http://zombo.com/)

You can do anything at zombocom

~~~
iLemming
Flash, really?

------
ssijak
Well, not that novel tech wise, but design always cracks me up
[https://www.lingscars.com](https://www.lingscars.com)

~~~
ilovetux
Thanks, I found this site on HN a while back but have been unable to find it
again when I wanted to show the ascii art in the source code to a friend. I've
bookmarked it now so I won't lose it.

------
sp332
A classic from 1996. Olia Lialina (@GIFmodel on twitter) wanted to make a
website that had the feeling of a movie, far before movies were feasible
online. So she made My Boyfriend Came Back From the War. Here's a mirror:
[http://www.teleportacia.org/war/](http://www.teleportacia.org/war/)

------
sksksk
[http://www.dontclick.it/](http://www.dontclick.it/) is a super old (Flash)
demo of a UI that doesn't have any clicking

~~~
daliusd
It felt so awkward...

~~~
collyw
I quite like it. Its seems like an advanced version of where menus pop up on
hover rather than having to actually click.

------
TeMPOraL
Well, HN is pretty weird for the web of today. That's also why it's so nice to
use it. I wish more sites had simple, lean UI that let the text communicate
its message, instead of being interactive marketing brochures.

------
daosyn
Bong International [1] has done interesting and weird stuff. One of my
personal favorites of theirs is bo en's website [2]. They have also done stuff
for Bloomberg.

[1] [http://bong.international/](http://bong.international/) [2] [http://bo-
en.info/](http://bo-en.info/)

------
atrilumen
I'm not ready to show it yet (#FML), but my interface renders _everything in
threads_ , including graphical controls, which yield messages.

Nothing happens outside the context of a thread. So it leaves a log of
everything that happened in that context. Graphical elements can go full-
screen... but you don't lose connection to the thread that they appear in.

It will tile these threads across all your (funky, heterogeneous) screens.

I think this will help you to organize things, and homogenize and simplify
your experience with those things across devices.

Imagine actually knowing where everything is, and being able to see who, when,
and why anybody touched it.

------
license2e
Zircle: A frontend library to develop zoomable user interfaces

[http://zircle.io](http://zircle.io)

Smart home dashboard example:
[https://zircleui.github.io/docs/examples/home.html](https://zircleui.github.io/docs/examples/home.html)

------
dec0dedab0de
Weird UIs were what I miss the most about the web in the late 90s. There were
no rules, and people were just winging it. I remember my friends making
websites for their bands and bragging about how they made it so hard to use,
that it was like a secret club if you figured it out.

~~~
nothis
Kai‘s Power Goo!

------
miki123211
repl.it's jobs page[1] is basically a bash terminal running on the web. You
navigate it by using standard commands like cd and ls, and read files with
cat, more or similar. This is _NOT_ a bash emulator, this is an actual bash,
running in a Docker container somewhere. repl.it lets you build an app, in
almost any language, on the web, and run it. If it's a console app using
stdin/stdout, they even provide you with a terminal emulator. Well, that's
some pretty impressive instance of dogfooding.

[1] [https://repl.it/jobs](https://repl.it/jobs)

~~~
mwcampbell
Have you found any practical way to use this web-based terminal with a screen
reader? I haven't.

~~~
miki123211
OCR works, kinda sorta. The NVDA's plugin does its job pretty well.

------
haolez
I’ve always liked the approach of
[http://intercoolerjs.org/](http://intercoolerjs.org/).

But I’m not a web dev and I don’t know the real reasons why it didn’t get
traction :)

~~~
grenoire
I think the main reason is because you have to build your entire back-end
based on the assumption that you are using intercooler. It requires the
responses to be formatted HTML for anything more complex than changing the
content text. It ends up making the whole approach much more complex than it
is advertised.

~~~
NoGravitas
No, you really don't. What you do, is you write your back end based on the
assumption that you have no JS at all, using a server-side MVC framework like
Rails or Django or ASP.NET MVC. Make sure that your controllers and views are
well-factored and that you're using partial views where appropriate. It's then
almost trivial to apply intercooler to the front-end. In a lot of cases, you
don't have to change anything at all in your controllers: just tell
intercooler to select out the element you care about from the response (this
is most appropriate when a lot of stuff on a page is changing at once, e.g.
when you are PJAXing-away a full page refresh). In most others, you usually
only have to tell a controller to check whether the request is being made by
intercooler, and return a partial view rather than the full view.

The point is that you already have the infrastructure that is generating
formatted HTML responses (partial views), and you are now re-using it. If you
were trying to write a client-side application from scratch while avoiding the
easy path of writing a server-side MVC app, then yeah, I can see how it would
be more complex than advertised.

Source: I've built a couple of web apps using intercooler.

~~~
haolez
Would you still use it today? Sometimes I would like to write simple web apps
behind a login page, but the complexity of mainstream frameworks (and their
build systems!) makes it not worth it to me.

~~~
NoGravitas
I have absolutely used it recently, and I find it a pleasure to use.

------
8jef
Weird? Maybe. Super simple single page responsive website, no JS, CSS + HTML
only: [https://isabellegrell.com/](https://isabellegrell.com/)

~~~
ryanianian
Love "low-tech" solutions to UI experiences. But to be sure, toggling the
individual sections does use javascript (view-source -> see
'toggle_visibility').

~~~
laszlokorte
using the :target selector or invisible radio buttons it would not even need
to

------
mzzter
Back in design school, web portfolios could get pretty interesting. One novel
way was to put up a collaborative google doc with some initial info that
visitors could edit.

An example of this was [http://carlyayres.com/](http://carlyayres.com/) though
it has since been updated to a non-editable page.

------
khuknows
Cool interface for user flow diagrams:
[https://overflow.io/s/9ST7SX/](https://overflow.io/s/9ST7SX/)

~~~
juancampa
One of my pet peeves are websites that use "ease-in" or "ease" transitions.
IMO "ease-out" is always the way to go. I hate waiting for things to go full
speed

------
jho406
I wrote a library for React, Redux and Rails. Allowing you to build SPA
without APIs.
[https://github.com/jho406/Breezy](https://github.com/jho406/Breezy)

Breezy's insight is that frontends are wildly complex due to the industry
vertical (say.. childwelfare), so instead of shaping your state for business,
breezy shapes it for content. Content being a header, footer, body as opposed
to a post model or user model. This means each page is represented as a node
in the Breezy Redux tree with its own header body and footer.

On one hand, it is annoying to traverse the pages to make updates, on the
other, I can look at any running application and make close-to-correct
assumptions on how to update the store. After all, most applications
regardless of industry vertical has a header, body and footer somewhere.

~~~
faizshah
This is actually really cool! I am definitely gonna try this this weekend,
awesome work :)

How complicated would it be to do something like this for Ember, is it tightly
coupled to react and redux? I might give a try at forking it.

~~~
jho406
Yes give it a go and ask me any questions :). I was hoping someone makes use
of it. It's tightly coupled to Redux, but not React. I don't think it will
work great with ember, and I say that because Breezy doesn't require any
router or models (again Breezy is about the content state as opposed to
business models). It reuses your Rails routes much like Turbolinks.

------
carapace
I once made a calendar UI that used D3 to animate little circles that
represented days. Switching from e.g. week to month caused the circles to flow
to new locations. It had a pastel color scheme and it was really beautiful.
Everyone who came into the office and saw it said things like, "I've never
seen anything like this on the web." It was just eye candy really. It never
saw the light of day. I begged them to put it in front of users or investors
but no dice.

BTW, if you like ZUIs read up on Jef Raskin's "Humane Interface"
[https://en.wikipedia.org/wiki/The_Humane_Interface](https://en.wikipedia.org/wiki/The_Humane_Interface)

~~~
fragmede
What were the investors' objections, if you don't mind me asking?

~~~
carapace
The founders wouldn't show it to potential investors because IIRC they wanted
to have some users first. I don't remember why they wouldn't go live with a
beta and try to get users. It was a weird little "vanity project" startup and
they made a lot of weird decisions (from my POV.)

------
WillPontificate
I favor brutalism. A 1998 style design completely contained in inline code in
the header. Using base fonts and features that are supported by all browsers.

It has a unique capability: it loads quickly.

~~~
Xelbair
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

~~~
onemoresoop
Haha, yes, but thats just a static page not a website.

~~~
ahartmetz
Everybody knows that real websites are generated in the browser using
JavaScript, right? Right???

------
pssflops
I've always had an affinity for weird image hotmaps at SuperBad[0].

[0][http://www.superbad.com](http://www.superbad.com)

------
ehnto
Vimium may not be a web UI itself but it layers on top of them, and I have
found it to be a way more efficient and concise way to navigate the web.

~~~
htfu
The issue for me is, since it hooks into the current page, hence doesn't work
if it's blank, slow loading etc, you end up reverting to basic shortcuts often
enough, breaking flow. Still well worth it just for d u j k and f, though :)

~~~
p_l
Vimperator had no such limitation, but the APIs necessary for such
functionality had been jettisoned by Firefox

------
throwaway_bad
Dribbble has a really nice collection:

[https://dribbble.com/shots/popular/animation?timeframe=ever](https://dribbble.com/shots/popular/animation?timeframe=ever)

Codepen has stuff you can actually see source code of:

[https://codepen.io/popular/pens/](https://codepen.io/popular/pens/)

------
neurostimulant
This library allows you to compile your winform C# gui app into a set of html,
js, wasm and dll files and run them in the browser:
[https://github.com/roozbehid/WasmWinforms](https://github.com/roozbehid/WasmWinforms)

Completely blew my mind! Probably not practical but really make me wonder if
anything is possible with webassembly.

~~~
lykr0n
I think I've seen this in use for the Travis County Tax Office, or at least
the vehicle licensing part.

Looked exactly like a WASM app, but running in IE.

~~~
exikyut
That might've been an ActiveX control.

------
nathell
I haven't seen this on a page, but David Gelernter wrote about Lifestreams[1]
in "Mechanical Beauty," which is a good read.

[1]:
[http://www.cs.yale.edu/homes/freeman/lifestreams.html](http://www.cs.yale.edu/homes/freeman/lifestreams.html)

~~~
specialist
I've always loved the lifestreams metaphor, mental model.

I spoke to Gelernter at a conference, ages ago. His wares were being compared
to JavaSpaces. IIRC, maybe because he had done some work on Linda, or his
lifestreams was implemented using same, or something like that. No one really
grokked what lifestreams was about or how you'd use it. (Jini and JXTA
suffered similar befuddlement.)

Any way, I over enthusiastically encouraged him to repurpose lifestreams into
a PIM (personal information manager, shows how old I am) unifying all one's
communication and activities. To Gelernter's credit, he listened seriously and
pondered.

I'm still waiting. :)

------
harryf
[http://www.coboloncogs.org/](http://www.coboloncogs.org/)

------
pjungwir
Isotope is a pretty fun jQuery plugin:
[https://isotope.metafizzy.co/](https://isotope.metafizzy.co/)

An idea I read about long ago is ring-based context menus. So instead of
getting a square list of choices, one per line, you get each choice arranged
in a ring around your cursor. So maybe Copy is at 1 o'clock, Cut 2 o'clock,
etc. It would be easier to "target" your choice, and even easier once you
learned the position of things. I don't know if this has ever been tried.
Maybe in a game? EDIT: apparently this is called a pie menu or radial menu:
[https://en.wikipedia.org/wiki/Pie_menu](https://en.wikipedia.org/wiki/Pie_menu)

~~~
zimpenfish
Been around since about 1969 and been pushed many times -
[https://medium.com/@donhopkins/pie-
menus-936fed383ff1](https://medium.com/@donhopkins/pie-menus-936fed383ff1)

I seem to remember trying at least one X11 window manager that used pie menus
back in the early 90s - but unless the apps have small menus with small
labels, you just get chaos.

------
laumars
Javascript-less seems weird these days yet you can build most sites without
really needing Javascript.

------
throwaway_bad
3d web comics? [https://sketchfab.com/3d-models/headache-
xkcd-880-5659b3b539...](https://sketchfab.com/3d-models/headache-
xkcd-880-5659b3b539e94dcca00a315ac6a48256)

Also New York Times and other news site sometimes have really sophisticated
interactive story telling or visualizations.

------
boldslogan
I've seen a website favicon be used to show loading and other information at
the top of the browser inside the tab. that was really cool. They made the
emoji cycle through multiple so that the favicon was animated.

------
Mattasher
One of the first websites I built (and one of the few sites left untouched for
20yrs) was a design experiment: [http://lyca.com/](http://lyca.com/)

------
subpixel
I still love this chestnut from years and years past:
[http://noonebelongsheremorethanyou.com/00025](http://noonebelongsheremorethanyou.com/00025)

------
bullen
I tried mixing SVG and pixel perfect elements:
[http://fuse.rupy.se](http://fuse.rupy.se)

It's really hard because it behaves differently with different aspect ratios.

------
spiralganglion
I created this SVG-based graph layout GUI [1] for our learning media website
LunchBox Sessions [2]. The graph lets us visually express the prerequisites of
each session. Using SVG meant I could do some fun animations to hide the load
time when opening a session.

[1]
[https://lunchboxsessions.com/explore/hydraulics](https://lunchboxsessions.com/explore/hydraulics)

[2] [https://lunchboxsessions.com](https://lunchboxsessions.com)

~~~
theossuary
That's pretty spiffy! How'd you do the layout? I was looking at elkjs [1] and
the Klay layout algorithm to do something similar.

[1]:
[https://github.com/OpenKieler/elkjs](https://github.com/OpenKieler/elkjs)

~~~
spiralganglion
Thanks! It's manually laid out using a drag-and-drop editor. I've never met an
automatic graph layout algorithm I liked the aesthetic of.

------
mo1ok
I'd a big fan of some of the webGL experiments hanging around the internet.

i.e. [http://taotajima.jp/](http://taotajima.jp/)

------
clemensnk
With Webstrates ([https://webstrates.net](https://webstrates.net)) we
experiment with building web UIs by persisting and synchronizing the DOM. I
wrote a short blog post about it here: [https://medium.com/@clemensnk/a-brief-
overview-of-webstrates...](https://medium.com/@clemensnk/a-brief-overview-of-
webstrates-7847333b39f7)

------
sktrdie
Using Behavioral Programming you can write UIs mainly using event traces. The
state of the app is not really contained and managed in the usual way: it's
based off of the state of many concurrent threads running at the same time.
Here's a TicTacToe example: [https://lmatteis.github.io/react-
behavioral/](https://lmatteis.github.io/react-behavioral/)

------
jaimex2
Back in the days of Flash the web was full of interesting and weird UIs with
tons of art and animation.

ie -

[https://www.youtube.com/watch?v=N-2sKZjawq4](https://www.youtube.com/watch?v=N-2sKZjawq4)

[https://www.youtube.com/watch?v=UHbQmqmmIFk](https://www.youtube.com/watch?v=UHbQmqmmIFk)

Now its just the same boring Bootstrap/Material design cookie cutter crap
everywhere.

~~~
alluro2
Ooh, 2advanced - as a high-school kid, I must have starred at versions of
their "website" for more than 15h in total, in awe, and trying to soak in the
pure awesomeness, hoping that it would affect how good early versions of my
site will turn out :) Where "my site" was approx 200h of work over something
like 15 revisions and complete redo's for a "portfolio" site with 1 design in
it :D Good times - I think my parents would have preferred if I just hang out
outside and did drugs at that point :D

~~~
jaimex2
Same, it really set the bar on what I would try and create during that time. I
really liked Flash and its creative tools - I was really hoping the web would
continue to make awesome sites with even better tools based on pure HTML.

Mobiles pretty much destroyed all of it as we focus on making sites that can
render well on any screen size now.

------
bradenb
ZUI huh? Thanks for introducing me to that term. I didn't know there was a
name for a type of interface I've created in WPF a number of times. We've
always called it a "semantic zooming" interface. WPF makes this super easy,
but turns out it's a little harder in the web, but we've almost matched the
UX!

------
avaer
My metabrowser [1] transludes webgl volumes into 3d space, and is navigated
with FPS controls or VR. It’s ultimately a web site, but I’ve had chromium
developers argue with me it’s not really “web”.

[1] [https://github.com/exokitxr/exokit-
browser](https://github.com/exokitxr/exokit-browser)

------
Zarel
Pokémon Showdown uses a two-column layout on desktop, where you can drag
panels between the columns:

[https://play.pokemonshowdown.com/](https://play.pokemonshowdown.com/)

I don't have a good sense of whether or not users actually like it, though.

------
l00sed
I stumbled upon this guy's site recently:
[http://cyberspaceandtime.com/Gaano9Y6KAU.video+related](http://cyberspaceandtime.com/Gaano9Y6KAU.video+related)

Think it's been around for a while, but pretty fun and weird. :)

------
teknopaul
Apache/Nginx SSI + fcgiwrap + bash scripts.

For little admin/monitoring ui for Linux servers this is crazy quick to build.
Probably would not want such sites on the Internet. Pwnd instantly if you have
shell shock

If you have a good set of cli admin tools #youmightnotneedphp :)

------
xylophone
How about exe in the URL? I can only imagine whats going on behind the scenes.
[https://www.example.com/searchUtility.exe?a=1](https://www.example.com/searchUtility.exe?a=1)

~~~
rescbr
Compiled language CGI running on IIS. Unusual, but not that weird.

Probably an old setup, nowadays the .exe would be hidden with a rewrite rule
and you would be none the wiser.

------
nick_vdb31
A novel way would be to create a UI using a UI that exports the UI code. Using
one of these no code tools like Webflow or Handoff. (Disclaimer: I'm the
founder of Handoff. Check: www.handoff.design)

------
tsak
Using Vis.js timeline for an artist collaboration website:
[http://sirius.modeselektor.com/](http://sirius.modeselektor.com/)

------
zitterbewegung
Django and SQLite for the backend and jQuery for the front end. And a $5 a
month server from pythonanywhere.com. Also using a splash page from glitch.com
using static html.

~~~
collyw
Out of interest did you ever have any problems with multiple users using
SQllite?

Its the common advice that it doesn't work well for multiuser scenarios but I
am curious if it is actually a problem for small scale sites.

~~~
neurostimulant
Even 1 million page views per day is only 12 page view per second on average.
Unless your website traffic is really peaky, I don't think you would get too
much trouble using sqlite over real db server. And if you do have a problem,
swapping db in django is really easy anyway.

Most sites I manage usually only got ~10x increased traffic during their peak
hour compared to their least busy hour.

------
dynamite-ready
I'm a bit confused by the title. Does the OP mean, 'tools and techniques to
create (do) UI'?

Or is he or she referring to the look and feel of the final product itself?

------
dugluak
back in 2007 I joined a company in a department where they wrote tailor made
websites for clients. One of the sites was built to generate reports for ~50
customer's accounts. It was a single webpage with 50 buttons having the
account name on each one of them. So you would see a bunch of different shape
buttons on the page, you click a button and you would be redirected to another
website. It was internally referred as Death By Buttons.

------
gameswithgo
This one is pretty weird, F# front end and back:
[http://websharper.com/](http://websharper.com/)

------
macca321
[https://theweekly.co.uk/ap2/index.html](https://theweekly.co.uk/ap2/index.html)

------
JDiculous
Any examples of websites with ZUIs? Looks interesting!

~~~
sowrabh
Prezi* presentations - Zoom reveal is the most interesting feature of Prezi

[0][https://prezi.com/product/](https://prezi.com/product/)

------
therealmarv
Google Maps has a ZUI in Chrome ;) more or less.

------
meremortals
[https://brutalistwebsites.com/](https://brutalistwebsites.com/)

------
atannen
[https://www.yhchang.com/](https://www.yhchang.com/)

------
christophilus
These days, it's pretty novel to just use HTML and very basic CSS with no
JavaScript.

~~~
non-entity
I've wanted to build an application like this for a while. Obviously nothing
that would be actually be used, but maybe a personal tool or something. For
many simple (probably most CRUD apps tbh) this would seem to work very well

------
intrasight
When you say "do", do mean "implementation" or "design"?

------
RocketSyntax
Python UI: tkinter. Very popular on stackoverflow.

------
jawns
A while back, just for kicks, I built a site whose UI is essentially a
slideshow that takes the form of a draggable map. The content is sort of like
a PowerPoint presentation, but user interaction is more like Google Maps.

[http://www.youmightbe.pressbin.com](http://www.youmightbe.pressbin.com)

It's not a particularly efficient way for users to traverse the content, but I
think it's fun.

The site gives an intro to Distributism, a "third way" economic model that is
neither Capitalism nor Socialism nor a mishmash of the two.

------
guhcampos
There's this thing called Macromedia Flash...

------
AkshatM
This is more of a joke answer, but r/ProgrammerHumour recently underwent a
spate of submissions competing to come up with the wackiest and "wrong" ways
to do common UI elements, such as the slider or phone number inputs.

A small album of the best and worst of these submissions:
[https://www.reddit.com/r/ProgrammerHumor/comments/6fdl8h/an_...](https://www.reddit.com/r/ProgrammerHumor/comments/6fdl8h/an_album_of_volume_sliders/)

~~~
itronitron
I'm surprised no one has created a _VAAS_ Volume as a Service

~~~
breakerbox
That's a great start up idea - Cloud based UI elements.

~~~
exikyut
With a feature where arbitrary aspects "update" from under you in ways you
could never expect and ensure beforehand are locked down in your favor in the
contract/agreement.

For example, a widget might have a compile bug where the CSS rules to
explicitly lay out component size only get included in media queries requested
with devices using such low PPI that you never catch it in testing because
your devices are not _icky_ enough. This "bug" might then be "fixed" in an
"improvement release" down the track that ships the explicit sizing to
everybody... including _your_ page layouts, which are now broken.

Or maybe you could ship a calendar control that includes a fuzzy date parser,
and then remove the date parser "because it was confusing too many users". All
emails from power users pointing out lost productivity because of their
inability to specify dates like "2 1/2 days ago" or "-2h", or having "2018"
map to today's date last year and "yesterday" also include the current time,
are quietly sent to /dev/null. The calendar control is updated to use Material
Design, two days of which are spent building a test jig to autoreload on 18
devices at once using remote debugging, as part of a subfeature sprint to
ensure a certain cubic-bezier transition animation (which 4 people have
collectively watched 537 times) "flows" correctly with the right... _twang_. A
further day is spent turning an Arduino into a virtual bluetooth keyboard to
ping the 18th device in the aforementioned testing rig; it stubbornly refused
to _not_ go to sleep, even when plugged in.

A decentralized bidding infrastructure could be implemented that uses Bitcoin
to allow users to vote on which UI designs they like the most by sending money
to different wallets. Much ado is had about how to rebuild a Merkle tree from
first principles on top of the blockchain in order to implement the wallet
tracking needed to power the aggregate collection needed to power the feature.
After A/B testing (and some shady network sniffing) finds the UI library is
only being used by people with 1Gbps (fiber/5G) Internet connections on
devices with 8-core CPUs, it is decided to simply download the entire Bitcoin
blockchain into the Web browser of every consumer of the UI toolkit to perform
the analytics about which style to load on startup. No testing is performed on
smartphones, and in the standup meeting for the sprint in question nobody
remembers to point out that 8-core ARM CPUs are not the same as 8-core i9s.
The stubborn team lead has sufficient karma to retain the feature even after
the stunned bugreports flow in.

------
thewway481
it's just a proof of concept, but this web site discussed a few weeks ago
absolutely blew my socks off:

discussion:

[https://news.ycombinator.com/item?id=20929801](https://news.ycombinator.com/item?id=20929801)

site:

[https://3dforreddit.com/r/pics](https://3dforreddit.com/r/pics)

From a comment:

"

How to use it Desktop: Click to start, WASD and mouse to move

Mobile: Dragging on left half of screen is move, right have is look

Append any subreddit to the url to switch subreddits

"

It should work in any browser but if you have a good GPU it will help a ton.

~~~
michannne
Crazy. I thought it was just 1 photo, then it turned into a gallery, then blew
my mind when I saw I could see other viewers, then blew it again when I
realized I could fly

~~~
bkanber
How do you fly?

------
ransom1538
Craigslist. Here is something novel: let html and browsers do their job. Let
your browser process simple html at light speed. Let GET be idempotent. Let
users be anonymous while getting information.

~~~
collyw
Hacker News is pretty minimal in terms of UI. I like it for that.

~~~
mrighele
The UI could be improved on mobile. The links are quite close one to each
other and I regularly tap the wrong one, especially when I want to hide a tree
of comments or a topic on the main page.

~~~
Epskampie
Also, for some reason code blocks are not full-width. Infuriating.

------
mister_hn
I think the weirdest way is using React. I mean, it feels so unnatural for me,
compared to the jQuery way.

You have to download thousands of packages, keep track of various dependencies
and their security holes, adding an overhead for auditing them.

HTML5 with jQuery IMHO still beats everything in simplicity and getting work
done fastly

~~~
benbristow
Try build a complex website with complex journeys and a component architecture
and you'll be begging for React.

It's probably because you haven't seen the light. I'd never ever go back to
using jQuery unless it was for a basic marketing site - even then I'd probably
think of using Vue if anything got more complex than a carousel on the page.

~~~
collyw
Keep the majority of the rendering server side and it isn't a problem at all.
Jquery for some UI enhancement.

~~~
rmdashrfstar
Why would I choose server side rendering? If I build the site in vue with the
most optimized output settings, append hashes to files for perfect caching,
drop the files in an S3 bucket, throw a CloudFront CDN on top of it with gzip
compression, and build the front end of my backend as a REST api sitting in a
lambda function that serves HTTPS requests, I never have to worry about server
costs being more than pennies a month unless I need to add on other services
to my backend.

~~~
jng
Am I the only one to whom this description sounds like some version of hell?

~~~
kls
Having lived thru the hell of trying to deliver web apps via a thin client
model I personally prefer rendering on the client for anything that is not a
static web page intended for content only (which now days is rarely the case).
Thin clients where an anti-pattern championed by the big server vendors, due
to the need for big servers. At the time they where justifying the
architecture based on the fact that PC hardware was expensive and thin clients
would reduce the need for high end PC's. They where trying to sell it before
the web, the web just gave them the vehicle to really push it. Those realities
are gone and, decent power in pc's is a commodity. If the web where invented
today, it would have been a mesh given the current realities of the
proliferation of computing power. Unfortunately it has the law of inertia on
it's side.

------
mosselman
I've heard that some people build UIs with thousands of dependencies, in
JavaScript that hits the server for text that is then parsed to object that
are then passed through all sorts of classes that each spit out HTML. They
also do some weird stuff with events like key-ups in order to re-render input
fields based on objects rather than letting the browser manage those kinds of
things.

Sounds pretty weird to me.

~~~
icedchai
Yes! Web development is "weird" because we (developers) are basically
constantly trying to put square pegs into round holes. Over the past ~25
years, a document delivery system has been perverted into a application
delivery system. The underlying, fundamental technologies were not intended
for "UI" app development.

~~~
krapp
99% of those "apps" are still just documents with client-side rendering,
though. And the web was designed with the intent of running code practically
from the beginning, albeit with support envisioned for multiple languages, so
programmatic elements in a website aren't really a perversion of the original
intent.

~~~
pgcj_poster
I didn't know that. Is there anywhere I can read about it?

~~~
krapp
[https://eager.io/blog/a-brief-history-of-weird-scripting-
lan...](https://eager.io/blog/a-brief-history-of-weird-scripting-languages/)
mentions support for multiple languages, including TCL.

And the possibility of scripts is mentioned at least as far back as HTML3[0]
in 1996, with the script tag being added as a placeholder element in HTML
3.2[1], and Java applets were already supported.

So while it wasn't there at the _very_ beginning, it's clear the architects of
the web didn't consider running code in the browser to be antithetical to its
purpose.

[0][https://www.w3.org/TR/WD-script-960131.html](https://www.w3.org/TR/WD-
script-960131.html)

[1][https://www.loc.gov/preservation/digital/formats/fdd/fdd0004...](https://www.loc.gov/preservation/digital/formats/fdd/fdd000478.shtml)

------
hemmert
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

~~~
fogetti
"Good design is as little design as possible." \- some German motherfucker

