TiddlyWiki 5 Design Sketches from 2012

In answering a question from @arunnbabu81 in another thread, I dug out some old design sketches that I had done in the very early days of TiddlyWiki 5’s development, in early March 2012.

This one shows some ideas for the main screen:

Main Screen Sketch

I was very keen at the time to embrace the new era of touch devices, hence the UI controls that slide in from the side.

The icon at the top left brings up a view menu for choosing between several different overall views:

View Switcher Sketch

One of the views is Cecily, but I didn’t bother to mock it up given that I already had a reasonable prototype.

I also did a mockup of the command line view. The idea is that the pink background is what as typed by the user, and the blue background is the results. I liked the idea of interacting with scrollable interactive playground:

Command Line Sketch

A few months later I did this more polished mockup. The look and feel is heavily inspired by Bootstrap, which was very popular at the time.

Related, some time ago I assembled a video of the evolution of the TW5 user interface through the first couple of years of development:

17 Likes

Let me share my sketch. Back in 2014, I had my dream of designing a personal knowledge management tool, and become a first-year college student studying computer science.
I start learning web technologies by myself, and in 2015.6, I start to design my web app:

You can see the concept is similar to TiddlyWiki! A flow of cards, and widgets to create and automate cards.

I wish I know TiddlyWiki at that time! Because building such a web app is very hard for me at that time, and from 2016 to 2020 I pick it up many times and fail to continue it.

I think I get to know TiddlyWiki at some point in 2016-2020, but didn’t realize TiddlyWiki is actually a Knowledge Management Tool Framework, I still want to make my own tools… :crazy_face:
So when I had a chance to pick up TiddlyWiki in 2020 again, and realize the fact that TiddlyWiki is not only a wiki, it is a Framework like ReactJS that I can based on to build my App, I was very excited, and wish I could have know this earlier :rofl:

So I made TidGi App, and start writing many plugins to make TiddlyWiki close to the one in my dream and teenage time…And the design of TiddlyWiki is so close to my dream App, so I really don’t need to make many modifications.

6 Likes

I thought your diagram and @jeremyruston’s v. informative.

It is good to hear your story. I think it is valuable to have such accountings to forming a conceptual overview of why TW is so neat. There is a uniqueness in it that is hard to describe but is a radical salve to practical issues.

Just a comment, TT

3 Likes

It is very interesting to review how we got here.

It has only been in the last two months that I have discovered TW and I am very enthusiastic about it. It is like waking up to a new Porsche in the driveway, after having resigned myself to riding the bus forever.

The last significant personal site I built (twelve years ago, astonishingly!) seems to share an affinity with TW:

There’s a river, and the desire to overcome the page metaphor, and an attempt to use tags to organize everything.

I have used it all this time, but its architecture has not changed one whit. The tag structure was difficult to manage and I ended up letting the suggestion algorithm take care of it. The site is built on WP, with its metaphor of a “post”, or something one nails to a wall, vs a fish, which frolics in the river (with other fish!), and what a difference this makes to everything.

I am quite fond of it, but am now building a new site for myself in TW. :slight_smile:

I have been fortunate to work professionally for many years with a flexible and powerful CMS called ProcessWire. I am finding TW to exhibit this same deep sense of lucidity, dignity and generosity.

I’m so grateful for this project and for this renewed hope of collegiality and beautiful hypertext. Thank you!

6 Likes