The document discusses using biomimetics and nature as inspiration to improve web design. It suggests considering the golden ratio or divine proportion for layouts. Nature can also provide inspiration for color palettes. While not advocating for literal replication of nature, visiting the zoo is recommended before designing to gain insights. Overall, nature provides 3.8 billion years of examples to draw from to create more intelligent and sustainable design.

1. Improving the web
experience through
biomimetics
Martin Tomitsch
Design Lab / University of Sydney

2. Biomimetics
Designing with 3.8 billion years of field
testing done for you

7. biome.com
Tin Sheds gallery,
until 6th September

8. How does nature solve this?
More intelligent and sustainable design
through the emulation of nature

13. Devine proportion
The rule of thirds

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

16. http://www.thismanslife.co.uk/projects/phiculator/

19. Colours
Inspired by nature

24. http://colorhunter.com/

26. Animation
Flocking birds

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

30. Jason Beaird – The Principles of Beautiful Web Design

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

32. #nature #ixd

33. Improving the web
experience through
biomimetics
@martintom
#nature #ixd