Image for post
Image for post

7 Rules for Creating Gorgeous UI

A non-artsy guide to creating beautiful apps and sites

Introduction

Rule 1: Light Comes From the Sky

Image for post
Image for post
My favorite part of this image is the poker finger in the lower-right.
Image for post
Image for post
iOS 6 is old news, but it makes a good case study in light behavior.

Rule 2: Black and White First

Image for post
Image for post
Haraldur Thorleifsson’s grayscale wireframes look as good as lesser designer’s finished sites.
Image for post
Image for post
Image for post
Image for post
Classy grayscale.

Step 2: How to add color

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Single-hue gold theme from Smashing Magazine.
Image for post
Image for post
Single-hue blue theme from Smashing Magazine.
Image for post
Image for post
Countdown timer by Kerem Suer

A few other notes on color

Rule 3: Double your whitespace

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Left menu
Image for post
Image for post
More space in the top nav bar. The text “Search all music” is 20% of the height of the bar. The icons are similarly proportioned.

Still can’t get enough? Introducing… Learn UI Design

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Written by

Staying hungry, staying foolish, and getting stuff done. Independent UX/UI Designer. Teaches at http://LearnUI.Design