Four Rules for Good Web Design

by Ted Boyer

Four Rules for Good Web Design PDF - http://markusvogl.com/web1/web_4rules.pdf

Rule #1 Symmetrical - bad

Screen Shot 2015-09-17 at 8.38.13 PM

Spotify Taste Rewind - https://spotify-tasterewind.com/

Asymmetry of layout is used in this site to give a more interesting feel.

Rule #2 White Space - good

Screen Shot 2015-09-17 at 8.34.59 PM

Made - http://www.made.com/

Negative space and padding is used in this e-commerce site to help the viewer focus on the products being sold.

Rule #3 Less is more

Screen Shot 2015-09-17 at 8.38.22 PM

Truth Labs - http://truthlabs.com/

This design agency puts their purpose as the focal point of the homepage, while making secondary information available when you click through.

Rule #4 Contrast is key

Screen Shot 2015-09-17 at 8.35.32 PM

Lowdi - http://lowdi.com/

Contrast of color (warm yellow vs. cool blue and black)

Screen Shot 2015-09-17 at 8.36.41 PM

Bloomberg Business - http://www.bloomberg.com/

Contrast of direction/position (center & horizontal element vs. off-center & vertical element)

Screen Shot 2015-09-17 at 8.37.46 PM

The UK Energy Consumption Guide - http://www.evoenergy.co.uk/uk-energy-guide/

Contrast of size (large vs. small data)

Screen Shot 2015-09-17 at 8.37.24 PM

Van Gogh Museum - http://www.vangoghmuseum.nl/en

Contrast of texture (rounded sans-serif type vs. textured background)

More about...