Skip to main content

Moving forward! - Dialing phones, and designs featuring Kirigami

Hello everyone, it's been all-too-long!
I am proud to announce the end of the semester! Exams are finally all done, but that only means the real fun can start. And so many things to come and do!

I'm also happy to announce one of the first new features! Marble Maps now supports in-app phone calls! If you're browsing the map, and come across a nice looking shop, you can easily access their phone number, and give them a call right there!
This task has been very useful to establish a lot of the inner workings, and also gave insight to a lot of UI elements that could be structured differently.

But with that question of layouts and design decisions, came the question of what tools to use to achieve them. On that note:

Behaim Globe with Kirigami

Kirigami is a QtQuick based components set that brings a lot of useful reusable components to QtQuick UI's. Among these we're easy to create menus, unit based scaling, drawers and all sorts of navigation options. It was a lot of fun exploring all these pieces we could fit together to create a user-friendly interface. As a way of getting to know Kirigami, I was tasked with giving the Behaim Globe app a small redesign using these components.
The info bar now comes in an overlay form (with a small black tint), which makes it clear that it's the focus point (and doesn't compete for space with the globe), and should be closed for easier navigation on the globe. It is also now flickable, which allows the user to easily close it, even with one hand, without having to find the exact button. The button to open the menu previously moved from the top left to the bottom right depending on the orientation of the screen, is now fixed at the top left to avoid confusion.

The Behaim Globe app.

The redesigned app.

Kirigami has a lot of interesting solutions and components, one of these being the OverlayDrawer, which I used to replace the old bottom menu. Below I have highlighted some other features that Kirigami offers, that may prove to be very useful.

Button styles, notifications, and menu variations, such as the OverlayDrawer.

Progression markers, and swipe-revealed secondary actions. Also note the central "Main Action" button, as another great way of guiding the user to the main purpose of the page.

Side menu, with checkable items, submenus; context-based actions that are relevant to the current page.

Kirigami provides several menu solutions, such as context-based actions, which the Kirigami Gallery app showcases better than the few examples I have provided ever could.

Pros of using Kirigami

  • Navigational options are readily available and easy to use, including actions, context-based menus, drawers and sidebars
  • Units make scaling more intuitive
  • Several components that can be used "out-of-the-box", such as headered lists with different varieties on how the header stays or moves out of view, secondary actions on swiping, progression meters for both defined, and undefined amounts of time


  • Since the built Kirigami files need to be included in the app, this requires another step to be added to the compilation process (namely installing Kirigami as detailed here, to the same folder as the build of our app). 
Overall this experience has led me to have a strong support of Kirigami, and I think it would be a very useful tool to use in crafting an even better Marble Maps. Stay tuned to hopefully see how some of these tools come together in action! See you on the next post!


  1. Hey Judit,
    Thomas here, he main interaction designer behind Kirigami and author of the Kirigami Human Interface Guidelines. I'm happy that you like our work on Kirigami and are going to use it for Marble Maps!
    Before starting to design your Kirigami-based UI, I'd recommend reading the HIG ( ) to see how the components were intended to be used together.
    You are also more than welcome to join the Kirigami Telegram group ( ) to get input and feedback on design as well as technical questions.
    Looking frward to a Kirigami-based Marble Maps!


Post a Comment

Popular posts from this blog

Compare and Contrast - Marble Maps and other Map applications

Still knee-deep in exam territory but our dreams fly high ahead! Let's take a moment to compare Marble Maps to some of the other available Android Map applications. This will help us find places that need some polish, and features that we need to add.

So without further ado, Google Maps - Maps.Me - Marble Maps
Google Maps Routes have a drag & drop system for managing the order of the locations.A menu has frequently used options such as a quick button for reversing the order, as well as route options. Adding a stop can be done with through the menu, not just by clicking on the map.
The side bar has several options, including Tips and Tricks under which a contribution option can be found, as well as a Send feedback option which is great for user made reports. Help menu offers a forum of problems with most frequent ones at the top. Maps.Me Has an Introduction that showcases some of the main features. Uses Empty States pattern when showing empty Bookmark Sets. Offers already existing emp…

Starting up!

Hey there Everyone!

Time sure has ran quite passed, and GSoC has finally started! I've been stumped with exams, and will be for a few weeks still, but please gear up to join me on my adventure with GSoC 2017. While still a bit behind with all this schoolwork, I'm determined to finish and catch up ASAP. So much to do and see!
Last years SOCIS I had quite a blast with meeting Marble, you can read all about that over here, but this year shall come with its own challenges as we are tasked to update the Marble Maps UI.

Marble Virtual Globe is an open-source globe that allows users to explore  a 3D model of Earth, Mars, Venus, and the Moon, with a wide-variety of maps ranging from political to topographic. This year we will be focusing on its Android version, Marble Maps, and in my case, I am tasked with tidying up the UI, adding features and making sure it's all up to Material Design standards!

Some images of the current Marble Maps interface.
In the following posts I shall deta…