Mother Nature in Web Design
by
Chris Smith,
How can we make designs feel more like the natural world and less like something created on a machine? Here are a few ideas...
Randomness
I've created a few pens on Codepen recently which involve JavaScript generating random elements in the DOM. Add a new element and assign it random position, dimensions or scale.Furball Tie Fighter Waves Random Circles
Whilst these were just playing around, I am interested by the idea of bringing an element of randomness into designs. There's a real feeling of the natural world or at least being outside in allowing things to be created and move around of their own accord or, at least, appear to.
Position
To do this we can use JavaScript to assign elements a random position. Set position:absolute and then generate random numbers for left and top values within the confines of the viewport width and height.Movement
In nature things don't generally move in a linear way. They accelerate, reach their desired speed and then decelerate again before stopping - its not sudden. Similarly, things don't just appear or disappear but gradually fade in or out of view or move in gradually from outside the range of vision. Things don't always stay upright. They turn and sway. They're affected by wind outside.Keyframe animation with transforms, especially translate and rotate, can help make things move quite subtly giving a very natural feel.