Trends are constantly changing and evolving, especially on the internet. One such trend that is gaining traction is the use of 3D elements in websites.
The Beginning
With the release of WebGL in 2011, 3D elements became a real possibility for the web. It allowed users to create objects in a 3D space, and display them through a browser.
This website has some good examples of what people were playing around with in 2011.
Since then, technology has advanced and people are now able to create a wider variety of 3D models for their web sites.
How are they added?
There are a variety of different ways that 3D elements can be added to a web page. With each method able to give a different feeling to a website or brand. A few of these methods are; building a 3D model within the webpage using WebGL or similar, creating a 3D asset elsewhere and adding it in, and photography/videography.
When using WebGL or canvas in JavaScript, you can make a 3D object directly as code and render it through your browser. This method allows you to create a more customised interaction with the user. This Halo Visualiser by Active Theory is a fun example of the 3D interactions you can create using WebGL.
3D models or assets created elsewhere and added to the site as an image or animation can also be an effective method. This can be done without WebGL and is generally achieved through the use of PNG, BLOB or other image file types. This website by the MekaVerse is a great example of how 3D images and animations can enhance a website.
If creating 3D models isn’t your thing, another way to give the illusion of 3D is to take photographs or videos with flat backgrounds. This generally entails using a single colour background, with no obvious transition from floor to wall. Some photoshop may be necessary in post processing but this method can be very effective in product advertising. This example from Partake foods is good in that the products stand out from everything else on the page.
Mixing 3D and 2D
There are many brands nowadays using a combination of 3D and 2D elements when designing their websites. Doing this allows them to give emphasis to particular parts of their site. Good examples of this come from websites that sell something, as using 3D to make a product pop is more likely to get people wanting it.
Benefits
Using 3D elements on a website has many benefits, including helping your website to stand out, and increased interest from users. It has a ‘wow factor’ that flat 2D websites can’t offer. As well as this, it is more likely to keep your users coming back for more.
More and more brands are using 3D elements in some way in their websites and advertisements. It’s many benefits could enhance your brands digital presence.