Skip to main content

UI Design Notes

As a non-designer who has to design, I am putting together this collection of UI snippets of pretty design which are, importantly, easy to emulate.

The idea for this collection is to build up a repertoire of design techniques that can be easily applied. This is useful for those moments where you simply do not have the inspiration, idea or energy to think of something new.

"Good artists copy. Great artists steal."


Case Study 20

thumbnail of showcase

Sample design for a medical website with minimal textual information.

Tags: magazine

Source: Dribbble

Case Study 19

thumbnail of showcase

Sample design for an e-payments website.

Tags: magazine

Source: Dribbble

Case Study 18

thumbnail of showcase

A magazine look-and-feel.

Tags: magazine

Case Study 17

thumbnail of showcase

Unconventional treatment of photos.

Tags: photos

Source: Dribbble

Case Study 16

thumbnail of showcase

Colour scheme for "atas" (high-class) feel.

Tags: atas, luxury, high-class

Source: Dribbble

Case Study 15

thumbnail of showcase

Icons in design.

Tags: icons

Source: Dribbble

Case Study 14

thumbnail of showcase

Exaggerated shadows.

Tags: shadows, coloured shadows

Source: Dribbble

Case Study 13

thumbnail of showcase

Active item highlight.

Tags: button row, active, highlight

Source: Dribbble

Case Study 12

thumbnail of showcase

Another example where dots and accent colours spice up plain illustrations.

Tags: illustrations, dots, menuicon

Source: Dribbble

Case Study 11

thumbnail of showcase

Illustrations made less boring with dots and accent colours.

Tags: illustrations, dots

Source: Dribbble

Case Study 10

thumbnail of showcase

Techniques to make small icons work.

Tags: buttons, icons

Source: Dribbble

Case Study 9

thumbnail of showcase

Less commonly seen UI features.

Tags: features, interesting, icons, pills

Source: Dribbble

Case Study 8

thumbnail of showcase

Use of complementary colours to enhance simple icons.

Tags: icons, complementary

Source: Dribbble

Case Study 7

thumbnail of showcase

Brilliant use of design against a visually striking background.

Tags: background, colour, striking

Source: Dribbble

Case Study 6

thumbnail of showcase

Inspiration for navigation buttons.

Tags: nav, navigation, cta, numbering

Source: Dribbble

Case Study 5

thumbnail of showcase

Use of a solid colour for backdrop.

Tags: solid, colours

Source: Dribbble

Case Study 4

thumbnail of showcase

Ideas for button placement.

Tags: buttons

Source: Dribbble

Case Study 3

thumbnail of showcase

Some UI takeaways from a mobile screen design.

Tags: whitespace, label, shapes

Source: Dribbble

Case Study 2

thumbnail of showcase

I like this design for the use of accent colours over a non-white background.

Tags: accent colour

Source: Dribbble

Case Study 1

thumbnail of showcase

This design shows how simple shapes can construct a pretty landing page.

Tags: landing page

Source: Dribbble