IMMERSIVE UX DESIGN


We as a group, feel that visuals are one of the most important tools that can be used as a designer, to really capture the attention of your audience, and make their journey meaningful and memorable.

What is parallax scrolling?

The parallax effect have become a trend in the web design world. The effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience.

Oh, this is just a picture of a puppy, isnt is just super cute! (i couldnt resist)

This is parallax!

Show pictures

to draw attention

Finding the right imagery for your site and using it appropriately has the potential to increase traffic. And more traffic on your site can lead to more business.

And write something cool here, not like Lorem ipsum, thats lame, write about... cool stuff, like... Ferraris! Yes keep on scrolling, there is still more to discover

Ferrari F458

Use of good animation

Duration and speed of the animation is crucial! When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
If you want to know more about optimizing your animations, this website has some good points.

One apple a day, keeps the doctor away #VeryCliche. Well that is not even the point... just scroll God Dammit!

WHAT

NOT

TO

DO

01
DON'T
CREATE
UNNECESSARY
DISTRACTIONS

Motion directs attention, thus we don’t want to create scrolling effects that will distract users from focusing on what they should be focusing on the screen. If a motion creates a distraction from the target content, it’s not the best place for scrolling effects.

02
DON'T
FORGET
THE
BRAND
IDENTITY

Motion adds characters to the design. To create a coherent experience browsing the web, we should try not to include effects that express a different feel and brand. For example, elements bouncing into the page might not add value to a serious business website.

03
LESS
IS
MORE

Less is more is still valid here. When everything on the screen moves around and changes shapes, it might be worse than having no motion at all. Try not to use too much motion and effects on the same screen and too many different kinds of effects on the same webpage.

Now "On scroll animations" don't just have to be limited to text or images, they can also bring life to objects your audiences meets along their way. It help them feel more involved almost as if they are watching a movie or playing a game.

VRROOOOOOOM

IMMERSIVE
WEBSITE
EFFECTS

Scrolling video

A smart effect, that allows the user to control a video via scrolling. This engages the user, and makes for a fun and interactive website. Two key elements when attracting a customer e.g.

Exploding view

A modern way of showing a product. It works well for companies that are producing phones, cars etc. The user has full control of the animation via scrolling. A perfect example of using this is Apple with their new Macbook.