Rojakcoder

Of Linux, Programming, and Singaporean 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.

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

Plugin for swiping elements on touch screen devices.

UI Case Study 4

full image

This mockup has a few aspects of the UI that can be used as inspirations in my own UI design.

The menu in the side bar shows the link of the current page as a coloured link among the rest of the links that are grey.

The hierarchy of the links is also clearly distinguished by the size and colour of the labels.

side bar menu
Extract 1

Card Design

This card design has several aspects worth pointing out.

card design
Extract 2

First, the use of a faint horizontal line to separate the header material from the description helps to add a little visual richness.

Second, the placement of the “Send a direct message” button at the bottom of the card uses a “ghost” button design so that it does not grab all the attention of the card.