UI Practicum #9. Three-Column Layout in Web Apps (Video Teardown of Tito)

Published August 11, 2016 by Jane Portman

How do you organize your web app when you have multi-level navigation and tons of settings to manage? Here’s a good example to learn from. Today we’re doing a brief teardown of Tito, simple and powerful event management software that has become the industry standard lately.

Watch the video on YouTube


When working with complex web applications, follow these rules:

  1. Three-column layout is a great way of managing objects (like customer lists and customer details) without loading separate screens for each one.
  2. When using a three-column layout, make sure that the column content is simple enough. Otherwise, the layout will look overwhelming.
  3. Always think strategically about the order of items in your menu. Place the most important item first.
  4. If you’re including an important second-level menu (like Customization sub-menu in Tito), place this item first — so that this menu is visible straight away.
  5. Once again, think whether a dashboard is really important or not. Consider combining brief stats with the main object list, like Tito does on their homescreen.

Curious what event I’m managing with Tito? It’s an evening workshop on designing web applications which will take place in London, August 31st, as part of my training tour. View details and book your ticket here.

Want more content like this in your inbox?

Join 8,000 awesome people on my mailing list — SaaS founders, product managers, designers & developers who are business-driven and want to build better software.