O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Improving the web experience through biomimetics

1.218 visualizações

Publicada em

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

Publicada em: Negócios, Tecnologia

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

×