Skip to main content

Case Study 14

full image

The takeaway from this design is the use of large, exaggerated coloured shadows in the design.

It is used so much that one can be mistaken for thinking that the background colour isn't white.

search button with coloured shadow

The first use of the coloured shadow that you can see is the search bar.

The heavy, coloured shadow encompasses the whole field such that there is no need for borders around that field.

The only issue here is replicating the same effect in CSS. I suspect you need more than one shadow definition to achieve a similar effect.

can illustration

The designer isn't afraid of using the coloured shadow effect - you can see it every in the design.

button with coloured shadow

Even the button too. As I've mentioned in previous snippets, having one coloured shadow may look off, but if the whole design is made up of it, it's just "normal".

If there's one gripe with the design, it is with the shadow of the orange can crossing over into the title.

shadow of one element crossing over into another

To achieve this effect in production (i.e. with actual CSS), some experimentation is needed. Probably a negative top margin offset on the following title.