Go out and create incredible! 12 rules for immersive website design

By , October 30th, 2015 , Tags: , 0 Comments

Go out and create incredible! 12 rules for immersive website design

Here comes the list of my personal thoughts to what you should do and not to create an amazing, immersive experience. All this is entirely subjective. Some points overlap perhaps, with some you’re probably not agree and some may contradict each other a little. This shows only the more that design is a subjective medium, with very fluid boundaries as to what is correct and what is not. This item is only my interpretation of things that I look when I evaluate a website. I will continuously update the following guidelines by more points. Here we go!

1. A clear value proposition

Perhaps it is also, without even explicitly say, but it’s very important that your website has a clear value proposition. Why do they exist? What is the purpose? This should be clearly communicated, either directly or indirectly. Any design decision should revolve around that purpose. Be consistent, let it all away, which could detract from the vision that you can do. When users land on your site, it should be immediately clear what your site has to offer and makes them. This can, for example, a clear description of the purpose to be like in the example below.Whatever your value proposition, it should be clear and meaningful for your users.


Creative Cruise  of Superhero Cheesecake relates his business idea – boat tours through Amsterdam’s canals – consistently into the layout for the site.

Creative Cruise has a clear value proposition, which is immediately clear: to promote a Amsterdam-based event. Although the layout looks almost like flyers with a really funny scroll-based experiences and applies the concept of agency-hopping on the canals of Amsterdam with a.

2. Easy Navigation

I can not stress enough how important a clear navigation. A clear navigation hierarchy provides a crucial framework for your site. Tobe keep quiet in other areas, but keep your navigation reasonably conservative, team by using a classical navigation patterns. Good navigation feels almost invisible and leaves emerge your content for it, and that’s what you want to achieve. You do not want that people waste time trying to figure out where you hid your menu; you want them to spend their time, play around with your incredible WebGL. Of course there are many exceptions where it makes sense to reinvent the menu or other UI patterns.Parking just make sure that it is clear and understandable within a couple of seconds, otherwise you risk losing some of your users.


Google Ideas  Hello Monday for Google relies on classic navigation to move the focus to the WebGL games.

Sat for Google Ideas Hello Monday on a simple, clear navigation that feels familiar.This allows the user to quickly find his way through different areas of Google Ideas and spend more time to play around with the cool WebGL globe.

3. It is not just about hover effects

I like hover effects, they are fun. But your website needs more than just cool effects to be exciting and memorable and to win a prize. Add effects and transitions so that they support your website experience, and not just because they look good. Styling should never stand in the way of a great UX.

4. Make at least in a region something new

Think about what makes your site unique. Attempt at least one thing, big or small, to do something different than other sites. What is like the X-factor of your site?What little thing will keep people from your site in your mind? A really cool transition, hover effect or a large sophisticated interaction? It could just be really well-written texts or a special tone. Just as in a pop song in which you this is a hook in the ear, you should have one thing that makes your site memorable.


The Happy Forecast  Clubhouse Studios entertains its visitors with a console game-like interface.

The Happy Forecast has a fun, game-like console interface, which is a small universe almost even. Funny and catchy!

5. Keep an eye on the load times

In the era of smart phones and constantly pops up notifications we have all taken the attention span of a goldfish. Load times are a big nuisance and should be reduced to a minimum. If no path leads past long load times, think about how you can load parts of the site so that it feels as if the experience had already begun.

6. Mach’s responsiv!

It does not make a lot of fun to put countless hours in a project if half of your visitors – the ones on the phone or tablet – can not properly use your site (if at all).Think of mobile and tablet surfers and develop an experience that works on any device. Of course there are exceptions, but ideally your project should run on as many as possible Devices equally well.


Die Website B&O Play  from Spring / Summer runs equally well on mobile and desktop devices.

7. Avoid consuming Transitions

Transitions are great, can be fun and exciting, but similar to hover effects they should serve a purpose. And there’s nothing worse than having to wait for the end of a transition to further surfing. Cut it short, subtle and turn it on only when it is relevant.

8. Keep your audience in mind when you DesignsT

A great digital experience is tailored to its target audience. Keep it in mind when you choose your design elements, colors, fonts, images et cetera. A website for young mothers inevitably sees different than one for business executives.

9. Schaff once a bond

Your site is competing with YouTube, Facebook, emails, phone calls, media articles and more. Basically, with the entire Internet. Schaff binding to your users when they access your site. This can be done with an interactive bodybuilders, like the Old Spice Muscle Surprise below, but can also be simply an arresting image, an interesting statement or beautiful typography be.


Old Spice Muscle Surprise  by Wieden + Kennedy for Old Spice & MediaMonks – the bodybuilders creates a personal approach to the visitor.

10. Help yourself to the latest technologies

Nothing is more exciting than sites that use the latest technologies for great effects. The case you raise the question, "How the hell did this?". If they are suitable for your project, think about whether you could try out a few new technologies or current can improve in something new.


Neymar Jr. CRAZY SKILLS  of Bascule Inc. for Panasonic – here a full FIFA game originated in the browser.

In CRAZY SKILLS Panasonic has created an incredible FIFA similar experience completely in the browser. How did they do that? (Maybe with WebGL.)

11. Do not forget the humor

Who does not like to laugh? When it comes to brand and the experience that you can do, fits, then you überleg how you can entertain your visitors with humor and cheer. If you bring people laugh, pays the end up getting out!


Legwork use funny, quirky illustrations to emphasize the playfulness both her agency as well as your mood.

12. Do not be shy to go new ways, even if they feel unfamiliar

Try new ideas. Do not be afraid to try something new, just because you’re not sure how it arrives. Take the opportunity. Sometimes not you will fail, but often – and it pays. No matter what happens, you’ll definitely incredibly learn a lot when you enter a new area. Katapultier you out of your comfort zone. The example of Way of the Desperados below provides an oblique, strange experience, but it works somehow.


Weird user experiences such as Way of the Desperados  of rESn & Wieden + Kennedy Amsterdam for Desperados definitely stay in the memory.

Vinod is an experienced front end developer and who has contributed to a cssmatter using WordPress, JavaScript, HTML, CSS and PHP on top of many other programming languages and frameworks. He is an excellent problem solver, and a great communicator as both a team member and a team lead.

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.