Improving the web experience through biomimetics

  • 507 views
Uploaded on

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

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

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Improving the webexperience throughbiomimeticsMartin TomitschDesign Lab / University of Sydney
  • 2. BiomimeticsDesigning with 3.8 billion years of fieldtesting done for you
  • 3. biome.comTin Sheds gallery,until 6th September
  • 4. How does nature solve this?More intelligent and sustainable designthrough the emulation of nature
  • 5. Devine proportionThe rule of thirds
  • 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. http://www.thismanslife.co.uk/projects/phiculator/
  • 8. ColoursInspired by nature
  • 9. http://colorhunter.com/
  • 10. AnimationFlocking birds
  • 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. 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. Jason Beaird – The Principles of Beautiful Web Design
  • 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. #nature #ixd
  • 16. Improving the webexperience throughbiomimetics@martintom#nature #ixd