Category Archives: Uncategorized

Calligra Suite

On April 11, Calligra Suite came out — forgive me for taking so long to write a post about it.

It turns out that I don’t hate the UI as much as I thought I would, though I still prefer that of both Google Docs (and, to a lesser degree, LibreOffice) by a considerable amount. The suite is still in its infancy, you can tell, but it also feels incredibly smooth, fluid — it’s built with new technology, you can tell.

What really excites me about Calligra is its modularity — it’s coded in such a way as to keep the UI as separate from the backend as possible, uses Flake as a library for objects, which means that objects should look and behave the same in every module of the suite, and these things make it much easier to develop new modules for the suite, to port the suite to other devices, and to create custom UIs for these devices.

Boudewijn Rempt describes it in depth in this video:

Too bad Calligra doesn’t have a design team… :)

P. S. I’ll be happy if you use/tweak/share/spread the calligram above — get the source code at this link. CreativeCommons Zero, as always, though be aware that the trademark law for Calligra still applies.

Making the clipboard usable

When I was a kid, I didn’t know what the icon with the scissors did. I didn’t know what the icon with the two papers did. Even after I learned what copying and pasting is, even after I knew the common “Ctrl+C”, “Ctrl+X”, and “Ctrl+V” shortcuts, I still didn’t know what those scissor and paper icons did. I once mistook the scissor icon for the “Crop” button and was surprised when the whole image disappeared.

I wonder if anyone out there ever found the two clipboard icons intuitive. What do scissors have to do with the clipboard, anyway?

Being a stickler for consistency and clarity, I set out to make a more usable set of clipboard icons. My goal was to connect the clipboard icons visually, so that anyone could quickly tell that the icons belong together. I also wanted to make the functionality obvious: I used the standard “move” and “copy” symbols, as cutting is simply moving to the clipboard and copying is copying to the clipboard.

Can you tell which one is Cut and which one is Copy?

Notice Google Docs’ New Style Management?

I’ve just noticed a revamped style drop-down in Google Docs. Apparently, it’s been there since February 7th. It makes customizing styles simple, plus it gives a preview of the style (font, bold, italic, underline, and size up to a certain limit).

It’s probably the best style gallery that’s out there to date. If only it weren’t so limited…

Go check it out. :)

Looking for an icon designer

The LibreOffice design team is looking for an experienced icon designer to oversee an effort to create a flat icon set for LibreOffice. The designer wouldn’t have to create any icons (although he would be more than welcome to), he would simply help craft guidelines and act as a mentor and a guide for inexperienced icon designers wanting to contribute.

Would anyone be interested in taking on this role?

There’s no pay, although if a designer wanted some monetary compensation, we could start a Kickstarter project.

Why we still need Wave

Observing how people have been slowly abandoning e-mail and moving to closed communication systems that merge the features of chat and e-mail — Facebook’s Messages, Apple’s iMessage, and even social network posts (though these were designed for a different purpose).

I really hope that an open-source alternative that seeks to define a single message standard arises soon — something like Google’s Wave, only less complex and with a better UI.

Anyone in the FLOSS community interested in reviving the project?


You might have noticed that my tablet UI proposal is missing rulers. That’s because I wanted to make rulers contextual: if a user inserts a tab or taps within the empty space where a tab is, a tab handle and a horizontal ruler should appear, allowing the user to adjust the tab width. Or if the user inserts a floating object (image, table, shape, …), rulers should appear. Or if the user selects a page, he should be able to adjust the margins.

I also thought that maybe there could be a single “ruler mode”, where the user is able to adjust all the lengths and widths within the page (margins, column widths, indents, tabs). I’m wondering: should this mode be triggered by selecting the page? Then the user could get to this mode much faster.

Possible page selection modes


With the ruler shown, the user would able to edit the units it uses. With an object selected, the user would also have the ability to type in the object’s distance from the margins. Here’s a mockup of what it could look like for a selected tab:

What do you think?


Since the tablet version of LibO is going to come before the phone version and since the Android design site is now up, I thought I’d work on mocking up a tablet UI for LibO. Here are the beginnings of that work, called frivl (meant to sound non-serious, in stark contrast to Office and iWork). So far, I’ve only mocked up the file browser and Writer in landscape mode on a smaller tablet screen.

More on the official page.

Let’s get the overflow menu out there

This is really a first for me — I’ve never turned a concept into something that was implemented, nor have I witnessed, in all the time I was subscribed to the LibreOffice and mailing list, a UI concept that originated within the design team being turned into actual code, despite there being quite a few. (On the other hand, several UI concepts initiated by developers, like “special indicators“, were fine-tuned and further developed by the design team.)

So I’m asking you for help — if you know how to get this done, please say something. If you have any comments, suggestions, or can further refinement to the Overflow menu whiteboard, your help is very much appreciated. Developers wanting to work on this and willing to initiate a rich discussion on the developer list would be great, too. :)

More juicy goodness

Just when you thought two UI concepts (one for the desktop, one for tablets) were enough, here comes a third one: Zest UI, for smartphones. (Zest means both “the outer peel of a citrus fruit used for flavoring” and “enthusiasm”. :) )

I also updated the two other UI concepts. I plan to talk about the changes soon (although, as always, that depends on whether I have the time and energy).

The three source files (open in Inkscape) are here: Citrus, Frivl, Zest.

On a less related note, here is an interesting source for GNOME mockups, along with all the Adwaita UI elements in theming/widgets: (click on the “Zip” button to download the zip file). I sometimes use portions (like the Gnome Shell bar) for my mockups. I thought I mentioned it before, but looking through the archive, it seems I didn’t.