Zim Wiki — Visual Redesign

Zim Wiki is per­haps my most favorite note­book app for Linux that I heav­i­ly depend on. So I’ve tak­en lib­er­ties to see how it can be improved. 🙂

It’s extreme­ly func­tion­al and pro­vides me every­thing I need. The only thing it seems to lack is focus, some­times look­ing clut­tered the more text you have on-screen. So I won­dered if I could change the appear­ance slight­ly and make it look a bit more focused with­out nec­es­sar­i­ly need­ing extreme changes in fea­tures.

Currently it looks like this (after slight­ly cus­tomiz­ing the pan­el arrange­ments).

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

So here are my rec­om­mend­ed changes:

1) Padding / Whitespaces. It allows the eye to be drawn through the void and onto the one shin­ing star. Having just enough white­space can make the con­tent more focused, clear and beau­ti­ful.

2) Linespacing. Simply for bet­ter read­abil­i­ty. I per­son­al­ly rec­om­mend 2 times font-size, but in the mock-up I’ve put 1.75 just to test things out.

3) A few pix­els of padding to the left and top of the Index, ToC and oth­er side-pan­el con­tents. A bit of padding to the right of the Search bar to make it just slight­ly more acces­si­ble. (Little things add up)

4) Get rid of GTK’s unnec­es­sar­i­ly bulky / dou­ble / triple lines at the docked wid­gets like Index and ToC.

5) Shaded pan­els. I don’t know who came up with this idea, but shad­ed pan­els seems to allow the eye to dis­tin­guish between con­tents more eas­i­ly than hav­ing every­thing uni­form. It seems to make every­thing look ordered and clean­er.

So it may end up look­ing some­what like this:

zim mockup

There! Looks beau­ti­ful now. Wonder what it would look in a iOS-ish Zukiwi theme?

You’ll notice that I made a few changes here too. Most impor­tant­ly:

1) Slightly chang­ing / reorder­ing the but­tons on the tool­bar. Not too impor­tant.

2) Heading-for­mat col­or change. Not every head­ing needs to be “green”, because it end up snatch­ing away atten­tion at almost every point of read­ing, and there would be no way to dis­tin­guish dif­fer­ent kinds of Heading in the hier­ar­chy. A larg­er, black and bold font for Heading 2 would suf­fice as it is to make it suf­fi­cient­ly dif­fer­ent from the main text (extra green isn’t nec­es­sary). A slight­ly fad­ed col­or for Heading 3. But this is just con­cept, so we could obvi­ous­ly come up with ways to dis­tin­guish ten dif­fer­ent kinds of Headings too.

3) There’s no need for Underlining. xP

zim mockup1

Only thing miss­ing? Word-count at the bot­tom. But I can live with­out that. 🙂


Leave a Reply

%d bloggers like this: