Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Meta Code | Quadrantik View

Quadrantik View

27 Jul Quadrantik View

An excerpt from my earlier post on Codepen:

I’ve called this layout a Quadrantik View. The name comes from the symbiosis of the math quadrants of the Cartesian plane and my nickname. I know, I’m bad with naming the stuff :/ Quadrantik takes an array of 4 renderables and displays each of them full-screen. At the middle of it (coords [0, 0]) is placed a surface, which is tightly coupled with a draggable. That surface, (or a knob, as I call it) is used for dragging the view and expose the neighboring Quadrantik panels. The knob will snap to the corners of the screen, to show the panel in it’s full size.

Tablet offers a wide space for gesture motions and Quadrantik is created with that aspect in mind. It offers an experience which shines in this particular device category. It will, of course, equally work on a smartphone and your desktop, but the highest value is delivered in the range of tablet sized touch-enabled devices, as it takes full benefit of the wide motion gestures and extra space. The UX value of Quadrantik gradually drops as the physical screen size becomes smaller or larger, until it gives no extra value or even hinders the experience.

You can find the source on github.

This design allows you to create layouts that fit our multitasking nature – you can now separate the views from controls and even allow other applications to be exposed in your panels. An example user story: a twitch stream of a LoL tournament. During the tournament the channel becomes a wall of flood and usually makes no sense to use or even follow. On the other hand, a partially exposed Quadrantik panel could contain your personal tweets, contacts and other communication goodies, another panel could be showing a twitch stream which you are now able to comment live with your friends only. And the rest of the panels could offer an info about the competing teams, player stats and other relevant context data for easy reach. The design allows you to keep everything at one place, without needing you to switch apps to achieve the same.

Jasonals, from #famous IRC channel has created a nice menu with floating items, which would probably fit nicely with Quadrantik view and be used as a knob. Check out his awesome work: Jasonals App-Menu

And here I simply use it’s method .setQuadrant to switch to a random quadrant every 1.5 seconds: