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 20

full image

This case study was selected because of how the designer manages to make an attractive site even with very little information.

Look at this section — there are less than 100 words here, and only 4 hues of flat colour. Yet it is already pleasing to the eyes.

a section of the page design

One reason why I think this design works is the use of lines as the motifs for the site. Notice how the icons are drawn using single, somewhat bold, lines? These lines are repeated in the small headings. (Even if there is no text in the heading!)

motifs used in the site

Another aspect of the site that I think help makes it look more refined is to let elements “cut over” into another one. This helps to reduce the single-dimension feel that would otherwise be very apparent.

overlapping example 1
See how the text and button "cuts" into the photo.

The graph and the phone mockups “overflows” into the next section. The touch of the dotted lines help to make the mockups feel more important as the main showcase piece rather than just simple mockups.

overlapping example 2

A few more techniques are employed to give more depth to the design:

    - Image grids that are not strictly aligned. (Figures 4A and 4B) - Irregularly shaped photos. (Figures 5 and 4A)
    non-aligned grid
    Figure 4A
    non-aligned grid
    Figure 4B
    non-regular shaped photo
    Figure 5