Your SlideShare is downloading. ×
0
Improving the webexperience throughbiomimeticsMartin TomitschDesign Lab / University of Sydney
BiomimeticsDesigning with 3.8 billion years of fieldtesting done for you
biome.comTin Sheds gallery,until 6th September
How does nature solve this?More intelligent and sustainable designthrough the emulation of nature
Devine proportionThe rule of thirds
1 Decide on a width – eg 960px2 Divide your width by Phi – eg 960/1.62 =593px = width of main column3 Subtract main column...
http://www.thismanslife.co.uk/projects/phiculator/
ColoursInspired by nature
http://colorhunter.com/
AnimationFlocking birds
1 Consider the divine proportion for your layout2 Use nature as source for your colour palette3 This is not a call for ske...
1 Consider the divine proportion for your layout2 Use nature as source for your colour palette3 This is not a call for ske...
Jason Beaird – The Principles of Beautiful Web Design
Images sources and referencesJason Beaird – The Principles of Beautiful Web DesignLotus effect http://www.flickr.com/photos...
#nature #ixd
Improving the webexperience throughbiomimetics@martintom#nature #ixd
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Improving the web experience through biomimetics
Upcoming SlideShare
Loading in...5
×

Improving the web experience through biomimetics

605

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
605
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×