Rojakcoder

Tech and Biz Ramblings

Projects & Experimentations

A collection of UI design snippets for inspiration.

Access control library for Java, JavaScript and Go.

Library for working with Google App Engine and Datastore.
Deprecated.

A simple Web app to help simplify the calculation of pro-rated salaries.

Plugin for swiping elements on touch screen devices.

UI Case Study 13

full image

The snippet that I want to extract from this design is the row of navigation buttons at the bottom.

navigation row

I like the way the navigation buttons blend in with the design by having some other copy (“Philosophy”) in the same row, and make it look and feel seamless.

navigation buttons
Active button with illustration of leaves

The active item in this navigation is also very well done in my opinion. It is highlighted by making it taller and a different colour from the rest of the menu.

Not only that, the active item is adorned by an illustration of leaves, occupying that empty space in the top-right corner of the menu item.

navigation buttons
Same button without the leaves

Compare this same image without the leaves — it does look a lot less interesting.

It still works, but looks a lot less refined.