Zim Wiki – Visual Redesign

Zim Wiki is perhaps my most favorite notebook app for Linux that I heavily depend on. It’s extremely functional and provides me everything I need. The only thing it seems to lack is focus, sometimes looking cluttered the more text you have on-screen. So I wondered if I could change the appearance slightly and make it look a bit more focused without necessarily needing extreme changes in features.

Currently it looks like this (after slightly customizing the panel arrangements).

Screenshot from 2014-12-04 21:19:16

So here are my recommended changes:

1) Padding / Whitespaces. It allows the eye to be drawn through the void and onto the one shining star. Having just enough whitespace can make the content more focused, clear and beautiful.

2) Linespacing. Simply for better readability. I personally recommend 2 times font-size, but in the mock-up I’ve put 1.75 just to test things out.

3) A few pixels of padding to the left and top of the Index, ToC and other side-panel contents. A bit of padding to the right of the Search bar to make it just slightly more accessible. (Little things add up)

4) Get rid of GTK’s unnecessarily bulky / double / triple lines at the docked widgets like Index and ToC.

5) Shaded panels. I don’t know who came up with this idea, but shaded panels seems to allow the eye to distinguish between contents more easily than having everything uniform. It seems to make everything look ordered and cleaner.

So it may end up looking somewhat like this:

zim mockup

There! Looks beautiful now. Wonder what it would look in a iOS-ish Zukiwi theme?

You’ll notice that I made a few changes here too. Most importantly:

1) Slightly changing / reordering the buttons on the toolbar. Not too important.

2) Heading-format color change. Not every heading needs to be “green”, because it end up snatching away attention at almost every point of reading, and there would be no way to distinguish different kinds of Heading in the hierarchy. A larger, black and bold font for Heading 2 would suffice as it is to make it sufficiently different from the main text (extra green isn’t necessary). A slightly faded color for Heading 3. But this is just concept, so we could obviously come up with ways to distinguish ten different kinds of Headings too.

3) There’s no need for Underlining. xP

zim mockup1

Only thing missing? Word-count at the bottom. But I can live without that. 🙂

Leave a Reply