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 1

image

This landing page design is from Dribbble

I like this landing page for how beautiful it looks using just simple shapes.

The use of gradients in the background, the high contrast element (the supposed lava on the ground) and the non-linear border elements are what I believe make this design stand out.

Albeit being a great design, I have my doubts about how feasible it is to translate this design into a mobile-responsive webpage. Regardless, there are elements in this design that I think are worthy take-aways.

page logo and nav menu options

The generous amount of space from the logo to the next closest element (the hero header) emphasizes the logo of the site despite its small size.

The same applies to the action icons at the top-right corner.

Call-to-action Buttons

call-to-action buttons

These two buttons are the only things that the user can see (other than the hero header and subheader) and interact with for a long while before they scroll to the next “front” element.

I have my doubt as to how useful this will be on an actual webpage because that is a lot of space that does not convey any information except to showcase the gorgeous background illustration.

Having said that, I think this technique will be useful for a product/image showcase where the product/image is the main focus of the page.

Content Section

first real content section

The bleeding over of the “lava” from the hero section to this content section is a nice touch. But it may prove difficult to replicate perfectly for mobile screens.

The use of the pastel colours help draw the readers attention to these three blocks amidst the whitespace. Although the “View” button labels could do better with higher contrast.

Irregular Borders

example of a section with irregular borders

The separation of this section with irregular borders add variety to the overall design of the site.

Irregularly-shaped Elements

more examples irregular borders use on other elements

More examples of irregularly-shaped elements which, again, add more variation to the design.

My concern with irregularly-shaped elements is its practicality - whether they can be implemented for a mobile-responsive use.

The placement of the call-to-action element is highly obvious - being right at the end and floating above the copy that is above it.

coloured icons in the page footer

The use of coloured icons in the footer add a level of richness that you do not expect from the footer of the page.

The choice of colours is well-chosen such that they do not stand out too much.