Improving the web experience through biomimetics

1,126 views

Published on

Slides from my talk at What Do You Know hosted by Web Directions - August 2012, Sydney.

Published in: Business, Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,126
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
11
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Improving the web experience through biomimetics

  1. 1. Improving the webexperience throughbiomimeticsMartin TomitschDesign Lab / University of Sydney
  2. 2. BiomimeticsDesigning with 3.8 billion years of fieldtesting done for you
  3. 3. biome.comTin Sheds gallery,until 6th September
  4. 4. How does nature solve this?More intelligent and sustainable designthrough the emulation of nature
  5. 5. Devine proportionThe rule of thirds
  6. 6. 1 Decide on a width – eg 960px2 Divide your width by Phi – eg 960/1.62 =593px = width of main column3 Subtract main column width from total width– eg 960-593 = 367px = second column width
  7. 7. http://www.thismanslife.co.uk/projects/phiculator/
  8. 8. ColoursInspired by nature
  9. 9. http://colorhunter.com/
  10. 10. AnimationFlocking birds
  11. 11. 1 Consider the divine proportion for your layout2 Use nature as source for your colour palette3 This is not a call for skeuomorphic design4 Don’t replicate nature – use it as inspiration
  12. 12. 1 Consider the divine proportion for your layout2 Use nature as source for your colour palette3 This is not a call for skeuomorphic design4 Don’t replicate nature – use it as inspiration5 Visit the zoo before your next webdesign project
  13. 13. Jason Beaird – The Principles of Beautiful Web Design
  14. 14. Images sources and referencesJason Beaird – The Principles of Beautiful Web DesignLotus effect http://www.flickr.com/photos/ubookworm/396913158/sizes/o/in/photostream/Biomimetics examples http://www.designboom.com/contemporary/biomimicry.htmlKingfisher 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.htmlNature 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
  15. 15. #nature #ixd
  16. 16. Improving the webexperience throughbiomimetics@martintom#nature #ixd

×