Skip to main content

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.