Thursday Theory: The Pros & Cons of Big Website Headlines
Thursday Theory: What Makes Great Typography?
A Guide to the Vignette EffectHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
Most websites feel to us like they are websites – that is to say, a collection of graphics and text arranged in an attractive manner. However, some websites go beyond this, and become more of a ‘web experience’ than a basic web design. By ‘web experience’ I mean sites that completely immerse you, and make you forget that you are browsing a website.
It’s a fine art to make your visitors unconscious to the fact that they are browsing a website, to make them truly feel like they are in a different environment or setting. To achieve this, designers seem to use some, or all of the various techniques laid out below:
3d elements and depth/perspective:
Often immersive designs will make use of 3d elements (be it photos or illustrations). By breaking from the traditionally flat, 2d web experience, and making the page seem to be 3d, they are able to draw the viewer in on a whole new level. This can also be achieved by juxta-positioning 2d elements to create depth. For instance, you can have 2d elements overlapping each other, and shrinking as they move into the ‘distance’, – this creating a feeling of perspective.
Textures
Textures are great for immersing a visitor in the ‘feel’ of a certain environment. If the website feels like a collection of surfaces, rather than images, it will feel a lot more real to your viewers. Textures also help evoke the relevant moods for each setting. For instance, if you’re trying to immerse your visitor in the environment of a motorbike shop, then leathers and metals should help them feel more involved in this setting than regular flat photos and blocks of color.
Photos
Often immersive designs will use huge photos (often taking up the entire background) in order to give the visitor a kind of panoramic view. This works best with large landscape scenes, used particularly on holiday/leisure sites, as your internet browser becomes like a dream view from a vacation.
Breaking Conventions
A great way to make a web page more immersive is to break traditional website conventions. By departing from regular web design practices, the viewer will not pick up on these traditions that trigger the response ‘this is a website’. For example, very immersive websites rarely include any white backgrounds. White backgrounds are the most popular website background color, and whilst they are good for readability, they do create a very flat feeling. Immersive ‘web experiences’ fill these white backgrounds with photos, textures, or darker colors, so that the viewer’s eye is drawn further into the page, rather than viewing it as a flat whole.
Other conventions include breaking traditional page layouts, whereby instead of presenting the traditional logo-top left, menu – top middle, layouts explore other possibilities.
What’s your opinion
Of course the following examples are just websites that I feel particularly immersed in. I would love to hear your opinions on what makes a truly immersive web experience, and if you agree with my points, or examples.
Examples of Immersive Design:
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
13 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
I have to say the Bug World Experience site is my favorite. The video integration is just so cool. Immersive is a good word for it.
the bug world is so interesting and grabs your attention right away. Great example of web experience.
The first one is great. I’ve just completed a garden center website, wish I’d seen this before and taken some ideas from it.
I reccomend this one too. We went there last spring, and after seeing their website I was even more spellbound
Skjerjehamn
That’s interesting how the Bug World one seems to be a favorite. It wasn’t one of my favorites from this list, although it is an awesome design. I really like the Villa Bianca Hotel site, the flying birds animation is incredible.
Irene: Yeah that site has a pretty nice background image. Thanks for sharing
.
…
Great list,
I really like the Schneider Garten website…
Keep up the good work.
…
It’s amazing when you look at how websites have changed, the use of textures, photographic backgrounds etc has really changed how websites are viewed. You’re no longer looking at information on a web page, the web page is an environment made to look like something real that you can interact with.
I love Bulls Boars n Barra!
Thats some awesome collection. Loved it
Adam: Yeah I totally agree with you. It makes you think – how are websites/designs going to evolve in the future. I’m willing to bet that they’ll become increasingly immersive. Todays designs are far more immersive than those of the 90s.
Thanks for adding my http://bentlyreserve.com – it’s a fun design that’ll expand even more throughout the year with event photos:)
No problem Brady! It’s a really great design, I look forward to seeing the expansions
.
The list has great designs, but i think it´s a shame publicating and supporting sites like: http://bullsboarsnbarra.com.au/
athought it has an acceptable design it estimulates violence against some kind of animals. I don´t thing this is good for the PSDFAN image.
nice samples of immersive sites.
sadly the bug site is down now and i didn’t get to see it.
i got a job doing a virtual exhibit, i.e. a web version of a museum exhibit. i assumed that the museum industry would have tons of amazing web sites and tools for creating immersive web experiences by now, but have been surprised that there’s not really a lot out there.
if you have more resources on this topic 2 years later, i’d be curious to know.
cheers