improving the web experience through biomimetics

Improving the web experience through biomimeticsMartin Tomitsch Design Lab / University of Sydney

BiomimeticsDesigning with 3.8 billion years of field testing done for you

biome.com

Tin Sheds gallery, until 6th September

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

Devine proportion The rule of thirds

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

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

ColoursInspired by nature

http://colorhunter.com/

AnimationFlocking birds

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

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

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/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

#nature #ixd

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