15. 1 Decide on a width – eg 960px
2 Divide your width by Phi – eg 960/1.62 =
593px = width of main column
3 Subtract main column width from total width
– eg 960-593 = 367px = second column width
28. 1 Consider the divine proportion for your layout
2 Use nature as source for your colour palette
3 This is not a call for skeuomorphic design
4 Don’t replicate nature – use it as inspiration
29. 1 Consider the divine proportion for your layout
2 Use nature as source for your colour palette
3 This is not a call for skeuomorphic design
4 Don’t replicate nature – use it as inspiration
5 Visit
the zoo before your next web
design project
31. Images sources and references
Jason Beaird – The Principles of Beautiful Web Design
Lotus effect http://www.flickr.com/photos/ubookworm/396913158/sizes/o/in/photostream/
Biomimetics examples http://www.designboom.com/contemporary/biomimicry.html
Kingfisher http://www.flickr.com/photos/oldbilluk/6058706620/
Honeycomb image http://www.flickr.com/photos/trblmkr/317526681/
Honeycomb chair http://www.neublack.com/art-design/biomimicry-in-design/
Logo and credit card examples: http://www.designerfreelance.net/golden-ratio-in-design/
Twitter redesign: http://www.flickr.com/photos/twitteroffice/5034817688/
Nature inspired web design: http://www.weberica.net/web-design-en.html
Nature inspired web design: https://www.mint.com/
Nature inspired web design: http://www.adventuredrop.com/
Color from photographs http://studio7designs.com/create-color-palette-from-photographs/
Gradient http://www.flickr.com/photos/jonwiley/2952276218/sizes/l/in/photostream/
Boids http://www.flickr.com/photos/bennettklein/4707452705/
http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
Book cover http://unmatchedstyle.com/news/book-review-principals-of-beautiful-web-design.php