Creating a Gmail-like Interface with Webix

An app logic well done is only half a job accomplished. The other half is designing such a UI that would enhance the functionality of the app and make it rational and easy to navigate. Besides, it’s important to create a nice-looking interface to make apps recognizable and visually appealing.

Gmail has one of the most recognizable interfaces on the web. It’s neat and clean and can be used to rationally organize the massive app contents. In fact, Gmail UI can be used not only for email management but for other tasks as well. If you would like to know how to recreate such an interface and don’t know where to begin (or in case you are just curious), follow me. I’ll show you how to implement Gmail’s approach to designing interfaces with the Webix UI library.

Designing the Layout

The first thing is planning the layout. Basically, the whole Gmail page consists of four main parts. So, let’s create the following panels:

a top panel topHeader for the logo and avatar;

an app panel appHeader that will be a toolbar with buttons and other controls;

a sidebar panel for navigation;

a tabs panel infoTabs for displaying lists of data.

Next, let’s change the height and width of the panels according to the planned contents:

Top Options

Gmail UI has a big Compose button placed above the list. Let’s add a similar button as well:

var topOptions ={
rows:[{ view:"button", value:"Compose"},//list]};

At this stage the top part of the sidebar looks like this:

It looks OK, but it could look better with a bit of built-in CSS. Let’s align the button and style it. button_raised is a Webix CSS class for 3D-styled buttons, that will give the button the desired Gmail-like look.

inputWidth:120, css:"button_raised"

Next let’s give them more space with the padding and the margin, so that the contents didn’t stick to the left border:

Bottom Tabs

The list of categories doesn’t take much space on the sidebar, so you can place something useful below it. In Gmail, you can see a contact list and other extra features there. Let’s do the same and create a MultiView for displaying this element of the UI.

Note that in Gmail UI the bottom tabbar, not the top tabbar, is used. The sidebar definitely looks better if the tabbar doesn’t clash with the list above:

Initializing the Top Panels

The Top Panel

The top panel is a suitable place for logos, avatars, and other main app info. If there’s enough space and you feel like it, you can place a couple of handy controls there, just like it’s done in Gmail.

First, let’s place a logo and a user avatar on the left part of the panel:

The avatar is actually a div with a white letter on a colored background.

As you see, there’s a lot of space left, so let’s use it for a search control and a small icon button. By the way, on a white background, the search control may look better with only the bottom border. You can style the search control with your own CSS class, but a suitable class already exists within Webix. To use it, let’s create a form view instead of a simple layout and place the controls inside:

The App Panel

The app panel is the toolbar of the app. In Gmail, most of the controls are placed there. Besides, they are divided into two groups and put onto the opposite sides of the toolbar. Let’s create a similar toolbar:

If you want to structure your data further and display them in separate lists like it’s done in Gmail, you can create a multiview with a top tabbar. To improve the design, you can add a light-gray margin around each tab by changing the type of the layout to space:

Conclusion

Gmail interface is not the only one worthy of being noted, though it’s one of the most widely-known UIs in the world. This quite simple and clear approach to design can be used for a number of web apps, moreover, it’s not difficult to recreate and enjoy. The example with Webix can be further modified and used for real life apps.

If you are interested in further reading on UIs, consider these articles: