improving the web experience through biomimetics
DESCRIPTION
Slides from my talk at What Do You Know hosted by Web Directions - August 2012, Sydney.TRANSCRIPT
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