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 5

full image

I included this design for its use of a solid, flat green as the background colour of the app.

It is not often that a solid flat colour can be pulled off in the background, especially not one with such high saturation.

A close-up of the screen below shows the actual mockup more clearly.

It is precisely because of the high saturation of such a low luminosity hue that allows the white copy to be clearly legible.

Among the white copy and coloured background, a black circle stands out clearly as well.

extract of one screen

This mockup begs these questions though: “Will the mockup be as pleasing if the photo of the plant is swapped with something else? Will it work with a photo of something that has no green at all?”

To find out, I have replaced the plant in the mockup with a random photo from Unsplash.

swapped with random image
Plant photo swapped with a random photo from Unsplash

Photo credit: unsplash-logoSajjad Zabihi

Not nice at all. Simply slapping any random photo in place of the plant image is plain ugly.

What if we mix it up a bit by placing this photo within the photo of a tablet?

swapped with a tablet
Place the photo within a physical device

Tablet image by OpenClipart-Vectors from Pixabay

Personally I think the addition of the tablet makes the whole thing look better.

I do think that this clear segration of the background colours works well with a “physical” object that casts a shadow as though it is on a table. Furthermore, who is to say that this wouldn't look better with a gradient on the green such that the lower part is darker, giving some kind of depth perspective to the interface.