Websites as we know them are going to change very soon. The days of text, images, and basic interactions in a 2D browser window have served us well, but virtual, augmented, and mixed reality experiences are getting better all the time. Developers and designers need to think beyond the browser window and prepare for an immersive future.

Many have been very skeptical about VR and AR in the past because despite grand promises about what they would achieve, they’ve mostly failed to deliver on the scale that the industry hoped for.

But it’s different this time: industry leaders like Meta, Apple, and Microsoft are pursuing a range of different mixed reality projects; they see the opportunity and are dropping hints about what’s next.

In a survey from Perkins Coie LLP and the XR Association, nearly 9 in 10 respondents said that by the year 2025, immersive technologies—including augmented reality, virtual reality, and mixed reality — will be as ubiquitous as mobile devices.

That’s a bold prediction, but it could be our new reality.

Use Cases

VR and AR aren’t a logical fit for every website, and that’s fine. There’s no need to force an immersive experience on something better suited to a standard viewing experience.

But when they’re done right, 3D experiences can add a lot to your website. Check out the demo experience from Mozilla, the 3D tours from Matterport, and the immersive storytelling from Within.

Here are a few areas where these technologies shine:

Retail – VR can be used to provide a virtual showroom where customers browse through products. AR can even bring the products into your home by showing you how a piece of furniture will fit in your room, what a painting will look like on your wall, or in Apple’s case, how a product will look on your desk.
News – Coverage of events can be enriched by providing a 360-degree view and placing viewers in the center of the story.
Training – AR can generate virtual overlays over physical equipment so employees can have hands-on training that’s more effective.

Define Your Platform

Adding immersive experiences to your website will require various skills based on what you’re trying to create. Whether you’re new to web development or are a seasoned developer with many years of experience, the main difference from classic web development is that you’re switching from a 2D to a 3D experience. Development in VR/AR is much closer to developing 3D video games than creating web applications.

First of all, you need to decide on the hardware that you’re building for. Are your viewers mainly using computers, smartphones, or a headset like the Oculus Quest? Each hardware category offers a different set of capabilities for what’s possible.

Next, when we look at 3D engines and frameworks on the market, some big names like Unity, Unreal Engine, and CRYENGINE stand out. Most of these engines were spun out of game development and are based on programming languages like C, C++, or C#. While very powerful, they’re overkill for anyone trying to create a basic immersive web experience.

The good news for web developers is that the WebXR Device API is an open standard specified by the W3C with a JavaScript API that makes immersive experiences possible in the browser. So if you already have a background in web development, you can use your knowledge of JavaScript to get started.

There are some useful frameworks and platforms that make working with WebXR more convenient:

A-Frame – A web framework for building 3D experiences.
React 360 – A framework for the creation of interactive 360-degree experiences that run in the web browser. As the name already suggests, it builds on React and reuses the concepts you already know.
Amazon Sumerian – A managed service that lets you create and run 3D, AR, and VR applications. Since it’s integrated into the AWS ecosystem, it’s also possible to add AI-enabled elements into your generated world.

Create Your Content

No one wants to read long blocks of text in 3D. Since we’re talking about visual experiences, it’s logical that the emphasis should be on creating content that is pleasing to the eye and interesting to look at. What works on a normal website probably isn’t going to feel natural in a 3D environment, so you need to decide what visuals you should create to suit the format.

What high-resolution images and assets do you need? Can you add videos? How about 360-degree videos? Will viewers just be looking at something, or will they be able to interact with it?

You also can’t forget about sound because it’s a critical part of immersive experiences. What music and sounds should you create to make the content come alive?

Not everyone is going to have the latest and greatest device or 5G coverage. The requirements for bandwidth and transmission quality are much higher with 3D content. A few milliseconds of latency can go unnoticed on a typical website, but in a VR/AR setting, it can make the experience laggy or unusable.

Try to optimize your content to be the highest quality it can be within a reasonable file size. If the experience starts to suffer from too many assets downloading at the same time, it’s better to create a more streamlined experience that maintains a high performance rate.

It’s important to consider your hosting infrastructure, as well. This shouldn’t be a big problem, but it is worth mentioning that you need to add new content types to your configurations, and your CDN needs to support these new types, too.

Make Your Content Flexible

When we’re talking about getting your website ready for immersive experiences, we’re not just talking about having people scroll through your regular website in VR. That isn’t compelling for your audience.

The idea is to take some content that’s already on your website and separate it from the presentation layer so you can use it in a 3D environment or any other platform that you want. Classic content management takes place in silos, which means you cannot easily reuse the content from your website.

This separation can be achieved by using a classic database, but if you want developers and content teams to collaborate, a headless CMS is front-end agnostic and more user friendly.

Start Experimenting Today

Building 3D content experiences may seem intimidating, but as we’ve seen, you likely already have the web development skills necessary to get started and try out some different ideas.

What you build today will prepare you for the 3D future of tomorrow.

Featured image via Pexels.

Source

The post How to Prepare for the Immersive Web first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

There are some interesting shake-ups on the horizon for ecommerce: Experiential shopping, Virt-ical worlds, Au naturale models.

We’re starting to see signs of them already — many of them spurred on thanks to the events of 2020. Below, we’re going to explore what’s going on with these new ecommerce trends and technologies and take a look at a bunch of sites that are setting really cool examples for each.

1. Experiential Shopping

With many stores, either closed to in-person shopping during the pandemic or their capacities severely limited, online shopping and BOPIS became much more attractive options for consumers.

That said, buying something like a pair of jeans or a new pair of glasses is much different than the pack of toilet paper someone’s bought for years. There are just some things you have to try to know if you’re going to like it and make sure it fits.

Augmented reality and other immersive shopping tools are bringing those “try-on” capabilities to people’s homes.

There are a number of technologies built specifically for this purpose:

Obsess is a particularly noteworthy one. It’s an ecommerce platform that enables retailers to build virtually immersive shopping experiences. Charlotte Tilbury is one such retailer that is taking advantage of it.

At the end of 2020, Obsess announced that it had received $3.4 million in seed funding, so expect to see more Obsess-powered ecommerce sites and apps.

ByondXR is another platform that empowers brands to design immersive experiences for online shoppers:

Retailers like Lancome, Procter & Gamble, and Calvin Klein have used ByondXR’s immersive commerce technology.

Another option is offered by Matterport:

This technology is interesting as you’re not just creating a virtual store. You can also design a 3D model of a brick-and-mortar shop that in-store shoppers can use to get in and out quickly.

2. Virt-ical Worlds

There’s a new trend brewing, and we see it most commonly on websites for fresh and youthful brands. I wouldn’t say it’s nostalgic design, per se, though there are certainly some elements reminiscent of the bold, in-your-face style of the web in the late ‘90s and early ‘00s.

No, I think what we see here is a creative reimagining of our world.

With so many people having spent time in their homes and with their faces glued to screens, there’s been a blurring between our VIRTual and physICAL worlds. This new web design trend is one I’m going to call the Virt-ical World. While parts of these sites look like the websites we’ve designed in years past, there are motion, color, and sizing elements that feel more like a trippy virtual simulation.

Let’s look at some examples.

Starface is a company that creates acne-fighting products.

This is one of the more experimental designs in this set of examples. Still, it’s one that shows us how far the boundaries can be pushed without totally compromising the online shopping experience.

Billie is another company having fun with this trend. I’d say this is on the opposite end of the spectrum.

For the most part, this ecommerce site looks similar to other small retailer sites. However, the fun, candy-colored palette, the bobbing products, and the color shifts add a somewhat surreal element to the design.

Catching THEO is another ecommerce brand playing around with this Virt-ical World.

See what I mean by this style feeling somewhat nostalgic? Thankfully, this site commits to today’s good, clean, responsive design while only using some of the more fun and quirky elements from the past.

Au Naturale Models

When I talk about au naturale models, I’m really referring to the makeup-less faces, relaxed hairstyles, and casual apparel that we’re seeing ecommerce models don these days.

I think it’s safe to say we have the pandemic to thank for this. And it’s not just because many of us took a more casual approach to getting dressed during the week. It’s also because the pandemic wiped away the glitz and glamour from many of our lives.

I don’t know about you, but it was kind of nice seeing fewer Instagram influencers flaunting their luxurious lifestyles and more real people rocking their matching pajama sets. I think brands have sensed this change in mood over the last year, and they’re now putting forward their own simple and casual styles for us to connect to.

There are tons of ecommerce websites we’re seeing this on in 2021.

Here’s Dove’s homepage, where they specifically call attention to the lack of digital distortion in the photo:

Thinx also uses more natural and realistic-looking models to show off its undergarment products:

Madison Reed takes a unique approach with this trend:

While the hair color brand does a great job of using diverse models around the site, it also has this scrolling bar showing off its customers’ very natural and real faces.

Wrap-Up

It feels like ecommerce trends and technologies are changing at a rapid pace these days. To help you stay on top of what’s new in ecommerce, stay tuned to this blog for more interesting news and changes to the landscape.

Source

The post What’s New in Ecommerce, February 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot