A business’s website is one of the first places users visit to find out more about it. Impressive web design creates a strong, positive first impression. The importance of good web design has become so important that frontend developers are transitioning into digital product designers using 3D to create an innovative, exploratory online experience.
3D adds depth, realism, and novelty between the human world and digital space with decorative items being replaced by functional UI controls. Users are looking for more than just scrolling through information. They want to be engaged, entertained and part of the design.
Communication is Everything
The main purpose of a website or a social media page is communication. These platforms provide a direct channel between a company and its followers. Like everything else, the way communication takes place needs to be up to date with eye-catching imagery, user interactivity, and fluidity.
Mobile UI has been an inspiration to this transition, yet futurists predict that mobile will be mainly used for e-commerce and decision-making while web design will be a space for relationships and storytelling. Below is an example from “Les Animals” of how they use 3D imagery, interaction, and storytelling as a unique communication tool:
Micro Interactions
Micro-interactions and conversational interfaces immerse the user into the online experience. Similar to navigation within a game, the website is designed so that visitors are directed to click and drag points on the screen changing the view of the camera, the objects in the scene, and if the design is based on the story – the stage of the narration. Micro-interactions need not only be beautiful but also convenient and beneficial. They are key for a company’s understanding and feedback on how the user explores the site, what the users like and what they don’t like. By paying proper attention, a company can create a unique experience for the user and at the same time gathering data for even better design. Nomadic Tribe created an online story filled with micro-interactions from the beginning until the end of the tale.
Product View
Let’s face it, there is nothing like seeing a product in real life – or is there? Designs are becoming so accurate that being able to see a product in 3D from a computer is enough for a decision-maker to put the product in their “maybe” or “buy” list. Want to buy some new spectacles, or perhaps a house in a foreign country? It is already possible and once VR becomes more popular in the market, it will be easier for consumers to gauge how suitable a product is from inside their living room or anywhere else in the world.
The Senses
3D has opened up a whole world of sensory engagement. Touch, visuals, and audio now make sense together. Before, overwhelming music and visuals were not a popular feature on product sites. Most of the time the style was subjective with many users preferring not to listen to the music or get distracted by moving images. Often times the music and visuals stopped and started again depending on where a user clicked. Requests to make the “mute” button larger or to remove to music and visuals completely began to rise from web developers to their clients. With 3D, the story has changed and all these features serve a purpose. Adult Swim takes touch, visual and audio to the next level by having a page on their website dedicated to music. Listeners scroll through 3D images to find the music and visuals that they want to tune into and begin their journey.
Companies looking to strengthen their relationship with the user should begin investigating 3D and digital product design as a tool. For more information on 3D, check out our coding challenge: getting started with 3D web design here.
Getting Started With 3D Web Design
So how do you go about implementing 3D in your next web project? It’s actually easier than you think thanks to WebGL and 3D frameworks such as Three.js that abstract away a lot of the complexities of 3D programming.
Why WebGL and three.js?
“WebGL brings plugin-free 3D to the web, implemented right into the browser.” (Khronos.org)
Yes, once upon a time, developers needed plugins to host basic 3D graphics on the web. The GPU (Graphical Processing Unit) hardware required accelerated architecture so that programmers could create 2D and 3D features on web browsers, IOS and Android. These plugins included Adobe FLASH and AIR APIs that were not web-standard, not everyone had it and it was not popular among web developers. In 2011, WebGL – a Javascript API that renders 2D and 3D interactive graphics using a regular <canvas> element compatible with all web browsers without the use of any plugins – was released. In 2015, Adobe stopped updating FLASH and urged the public to switch to HTML5 which has several features to support 3D graphics and 3D CSS.
Three.js is an open source library for WebGL with a strong community of developers. In short – literally – three.js simplifies code that would be complicated and long in WebGL. For example, look below at the screenshots. The first is written in three.js and the code reaches line 104. The second in WebGL reaches line 286 – almost triple the length. Three.js takes care of repetition by internally calling WebGL while showing a simpler API.
How do I create 3D web designs?
There are a number of steps to complete in order to get to your finished digital design.
- Scene
- Camera
- Vertices, Faces & Edges
- Mesh
- Lighting
- Object & Mouse Events
Scene:
Similar to a movie, the designer must set the scene of the experience. It contains characters, lights and a camera. The camera only sees part of the scene at one time and with both WebGL and three.js what the camera sees is what you are then rendering to a <canvas> .
Camera:
WebGL and Three.js differ when it comes to cameras. WebGL is low-quality 3D and doesn’t really need cameras. However, there are different types of cameras found with three.js with the perspective camera being the most commonly used. Another popular camera is the Orthographic camera where the image is fixed no matter the distance of the camera. Testing and debugging cameras can be cumbersome, but luckily three.js has a CameraHelper that can be added to your scene.
Vertices, Faces, and Edges:
When coding objects, you begin by drawing the outline or the geometry of the object by using vertices (points), faces and edges.
You can add as many vertices as you need to create the building blocks and shape of the object. A triangle needs three vertices whereas a square needs four. A more complicated object like a cat requires multiple vertices and becomes time-consuming. Before adding any objects, consider the length, weight, and complication of the code. A simple 3D shape might be better rendered from a 3D animation software beforehand – for example, Blender or Unity.
Mesh:
Once you have the outline of your object, you need to give it properties. Will your cat have fur? Will it be long or short-haired? Mesh is the geometry and the material put together to create the final design that can be added to your scene.
Lighting:
Lighting – or as some call it “shaders” – can make or break the design and sophistication of a scene. The different built-in lights from three.js include:
- AmbientLight
- PointLight
- DirectionalLight
- SpotLight
These lights will affect the material(s) of your object in different ways depending on the light-type and the material-type used by the programmer.
Object and Mouse Events:
We have our scene, cameras, and lights. Now it’s time for action. By using a combination of DOM and parallax, programmers can allow users to interact with objects and change the view of the camera in the scene. Other tricks to check out include requestAnimationFrame() – raycasting – JS object with URLs and emissive shading.
So! Show us what you can do by creating your own little masterpiece and sharing the link in the comments box. Join the biggest web design trend of 2019!