The next big thing: Web 3.0
The fact that websites abandoned drop shadows, shine, and reflections is something everyone has noticed for sure. But over the
past 5 years, flat design has also been evolving. Apart from the use of technologies such as artificial intelligence (AI), a key
goal is to make the web more accessible and personalized for users. On the Internet, this is frequently referred as a new era of
web design or Web 3.0. This can be successful if, above all, creative elements such as "blobs" are used properly, and thereby
content is brought to the front for the user. A very good insight into "blobs" can be found
here.
In addition, detailed 3D models of products or shapes enrich websites, if their visual content helps to better illustrate
certain functions or features. Another step towards Web 3.0 is the use of lovely illustrations that, in the best case, follow a
consistent style. The SVG graphic file can be quickly integrated into the responsive web without any loss of quality. We do not
only encounter typography on large posters, it is also an important component on the web. A good web design with a striking font
sets your website apart from the mainstream. 2D graphics and a new font are easily changed or inserted. However, how can website
operators keep up with the trends when it comes to moving content? Just this much: Minimal effort thanks to a specific tool!
Figure 1: Comparison of our let's dev website from 2016 in Web 2.0 and a current screenshot in Web 3.0
style.
Animation with LottieFiles
LottieFiles is an ideal tool to search for small animations for your own website. The little moving videos can be integrated
into the website or even into the own app due to their loading-friendly size and their scalability. In case an animation does
not match with the corporate design, all files can be edited, as well. This can be done, for example, either directly in the
online editor or via an additional plugin in After Effects, Adobe Animate, etc. Designers and illustrators have the possibility
to offer their designs (by using copyright) for free or for a small charge. A big benefit is the versatile integration of the
small files: LottieFiles animations are included as JSON files. Thus, they are supported by a wide range of browsers or even
operating systems such as iOS, Android, Windows, WordPress and many more.
Experienced designers and developers who completely rely on their own graphics and animated icons have the possibility to export
their creations directly from After Effects. The important thing here is to use a plugin called
Bodymovin.
The plugin is used directly in After Effects. With a few clicks, a JSON file is exported from the animated icon and, if
necessary, related SVGs and PNGs are also stored in a separate folder. JSON files have the advantage, unlike GIFs, of being
highly compact in their data size. Thus, an animation with multiple layers can be compressed by a whole 600%, while at the same
time the animations are loading up to ten times faster. Also, a small demo is available by the way here on our
website.
Figure 2: The Bodymovin Plugin can be exported via Windows > Extensions;
After specifying the export settings the JSON-file will be exported
3D-Modeling with Vectary
Vectary free modeling software dives into the 3D and AR world. More and more often there is immersive content to be discovered on
modern 3.0 websites, which leaves a special impression on its visitors. Also in connection with augmented reality, 3D modeled
shapes will become indispensable in the future. Vectary aims to provide a platform for beginners and to allow them to experiment
freely with the technology. Beginners can log in directly in the browser and have immediate access to a wide range of templates.
With clean shapes, a wide range of textures, and an easy-to-use lighting function, it takes just a few steps to generate content
worth seeing. The platform's founders have also announced that they plan to work more closely with LottieFiles, resulting in a
platform (as described above) where generated assets can be offered directly for use. Also, they plan to further develop the
export of 3D animations: Currently, due to their complexity, quite large files are exported, which can lead to longer loading
times and stuttering on the website later on.
Figure 3: No matter whether you're a beginner or an expert, Vectary allows you to create great 3D content
with simple shapes and preset textures.
