Creative Use Of Video in Web Design: Background Videos

Since its early days, video has been one of the most powerful and efficient tools of visual communication. It is able to deliver a direct and clear message to a broad audience as well as focus viewers on something particular. A visually appealing video is an excellent way to present a product, service or brand and take user experience to a much more interactive level. For this reason, elegant, creative and professional videos are becoming increasingly popular in Web design today.

Some designers go even further, creating Bluray-like experience in the browser, with interactive navigation menus, soft transitions and exceptional visual effects — all supported with background videos. This can be done with Flash or HTML5, however, most websites incorporate background videos using only Flash. To enable the rich cross-device experience, it is worth considering adding fallback-videos for those users who have a browser that does not support Flash. Nevertheless, we didn’t want to go into technical details just yet and wanted to see what actual approaches designers take within their websites.

 

The performance of a website including a background video depends significantly on the speed of the user’s internet connection. Video backgrounds certainly do not fit in every setting; they wouldn’t be meaningful in online magazines or blogs. However, they can work really well in entertainment and certain corporate settings which are supposed to communicate artistic qualities, exclusivity, branding or even high quality standards. As you will see, they work very well in portfolio websites, fashion websites and promotional campaigns. Below you’ll find a showcase of good and not so good websites that implement this dynamic eye candy at full screen.

Fashion Websites: Clothes, Shoes, Jewelery

Bulgari B.Zero1
Bulgari, an Italian jeweller and luxury goods retailer, uses a background video to showcase (or “celebrate”) its new B.Zero1 line. Although the implementation is natural and done well, once again there is a strong potential for making the browser slow that would cause the website to run less than optimally. This may be the reason that Bulgari avoids using background videos on every page and use small versions instead; but then those videos feel underwhelming as a result, given the grandeur of the products being sold. The overall feel is very much like on DVDs, with interactive navigation menus, soft transitions and visually exceptional graphics.

Uniqlock
Uniqlock is an advertising campaign for Uniqlo, one of Japan’s largest casual wear retailers. By including the video dance routines, time-signal music and clock utilities, the designers craft a unique experience using the background video technique. This is a virtual 24/7 presentation of Uniqlo clothing done with creativity and style. It won one of six Black Pencils in the online advertising category at the D&AD Awards 2008 in London.

Gudrun og Gudrun
Gudrun og Gudrun is a hand-made clothing brand by two knitwear designers from the Faroe Islands. The designers use background video to showcase their fashion show, and they use it throughout the website, with subtle transitions via various elements. An interesting use case, even if somewhat taxing on some users’ systems. The site is a bit older than others, yet it still is interesting and attractive.

Jay Jays Dance/Off

Dance/Off is an interactive 3-D online catalog for the new line by youth fashion brand Jay Jays. This website is truly exceptional in concept, but not so in execution. The 3-D approach is innovative but also makes the website (which is effectively a fashion ad) impractical. Without 3-D capabilities (and that would be most homes thus far), users would find the videos pixelated and visually unappealing. The interactive element is also conceptually intriguing, but with the long loading time and numerous instructions for using the website, most users would probably just move on. Besides, the page takes way too much time to load, even on the broadband connection. A nice touch: you can navigate the website using your keyboard.

Yves Rocher: Tout le Film

“Ce qui est essentiel rend belle” is a promotional short video that anchors this website. The video challenges the taboo of sexuality at any age, highlighting its biological benefits. The rest of the website is subtle and stylistically simple, making it easy on system resources. The video doesn’t start playing automatically, but requires user to click on the large green “Play” button first. Simple and user-friendly.

Louis Vuitton Journeys
Louis Vuitton Journeys is an advertising campaign features three soccer legends, Zinedine Zidane, Pele and Diego Maradona. The intro to the video plays a little too fast to catch everything as it loads, but otherwise it is handled well. The video navigation and transitions are smooth, and the videos themselves are somewhat interactive.

John Galliano
John Galliano is a Gibraltarian-British fashion label; here, the video begins on the main page and takes over your sound and drains your system resources. The navigation is a little too fluid, making it difficult at times to quickly jump around to where you want to go. As you move deeper into the website, the background becomes less system-intensive, and each page opens in the current tab, freeing up the sound and CPU from the home page. The video introduction on the front page is interesting and not too obtrusive, but the music should not start automatically when the page is loaded.

Valentino

Valentino is an international clothing company based in Italy. It does a much subtler and less intrusive variation on this technique. Although video elements play throughout the website (e.g. on the “Haute Couture” page), the home page does not automatically start a big video until you select one navigation item. And because you are prompted to begin the videos, your sound is not taken over until you decide. More user-friendly, better, cleaner design.

Byblos
Byblos is an Italian fashion house that uses video backgrounds very subtly. The splash page is a single frame, and sound runs continuously through the website unless you turn it off. But once you get past the splash page, the only really resource-sapping videos are limited to certain sections of the website, namely the “Runway” section. This feels like a more natural use of this technique; the whole website is not overly resource-dependent and prone to lagging on slow connections.

Nike: M6
Jordan Melo’s sixth signature shoe by Nike is the subject of the background video featured here; it is a multi-part behind-the-scenes look at the new product design. Once again, there is a potential lag issue because the videos are very big and looped continuously. Rather than automatically transitioning from one video segment to the next, the website could just as easily have paused and prompted the user to move on, giving them a breath to digest what they just saw. Controls for pausing the videos are available, so the user has the option, but automatic pauses would have helped here.

Anti Sweden
Anti Sweden is a Norwegian fashion brand that subtly employs background video to complement its minimalist approach. Without the heavy graphics and sound that usually accompany this technique, the website is not as resource-intensive as some others, which is a nice change. The website demonstrates how the technique can be a lightweight yet completely engaging concept.

I Surf Because
The “I Surf Because” site is part of Billabong’s digital marketing campaign. Here, Billabong uses a background video on the home page to push its campaign, but the technique is absent on deeper pages. This makes the website more CPU friendly, even though the embedded YouTube videos inside feel a bit lacking after the effect of the home page. An interesting idea: sometimes videos pause, show a tagline allowing for a comfortable reading and then continue again.

Vibram FiveFingers (Be cautious: NSFW!)

FiveFingers is a shoe brand manufactured by Vibram, which has conceived an entire website driven by background videos. The execution is certainly interesting. With unique fluid navigation elements throughout the website, this interactive video features both the product itself and relevant data, making for a truly unique concept that is perfect for this technique. The splash page lets users choose if they want to see a normal site, a full-screen site and if they are on low bandwidth connection.

Sam Edelman
Sam Edelman, a fashionable shoe brand, shows that one can achieve certain level of interaction without videos. In this case, subtle animations are used instead of streaming videos. The overall website is understated, as is the tone and theme of the background video, which is nicely done. Also, no sound takes over your system, a refreshing change up till now. A nice alternative to video backgrounds.

¹⁶

Car Websites

Toyota Avalon¹⁷
The promotional website for the Toyota Avalon is a fully interactive trip through five destinations and five of the vehicle’s features. The website creatively employs background video to some of its fullest and funnest potential. A promotional website which is essentially an interactive show-off with rich, creative, sophisticated imagery and navigation. Created by North Kingdom¹⁸ (Stockholm, Sweden) in collaboration with Saatchi & Saatchi LA (Los Angeles, USA).

¹⁷

Scion¹⁹
The official website for the Toyota Scion is another website where video background seems a bit underused. The website does not take over your sound to add to the video background, although numerous video transitions feel like they should have had sound; thus the videos feel lacking or somewhat broken in parts. Other videos open in smaller separate windows, once again feeling like a missed opportunity to employ the technique. By the way: the font size on the page is way too small.

¹⁹

Beverages And Food Websites

LemonAid²⁰
LemonAid is an organic drink made entirely of a few organic, fair-trade ingredients, and the company uses a retro-styled background video to tell everyone what it’s all about. On entering the main website, system resource usage goes up significantly, which for some users will mean a bit of drag on the video and sound. Despite this, the concept is fairly simple, and the implementation works well for the product. One major drawback: the font size is way too small.

²⁰

Hennessy²¹
Hennessy is a well-known French cognac brand. The video background gives this website a fitting elegance but with a twist. The video is resource-intensive in some areas and simpler in others. In both cases, the visuals are quite vivid and remarkable. Overall, a good, elegant fit for the brand.

²¹

Russian Standard Vodka²²
Russia’s leading premium vodka is low key and unobtrusive with most of the information on its website; the main section automatically scrolls through a selection of promo material. The navigation is context-sensitive, being displayed only when users hovers over the menu. You can click on the video to pause it.

²²

El culto a la vida²³
“El culto a la vida” is an advertising campaign for Havana Club, a brand of rum made in Santa Cruz del Norte, Cuba. Background videos are employed for several uses throughout the website. With everything from live footage to interactive elements, the videos fully complement the look and tone of the brand.

²³

Tub Gin²⁴
Tub Gin is a premium gin brand that uses video to humorously project its grungy and tough image while providing useful product information. Your CPU will take a bit of a hit as you peruse the various offerings, but given how entertaining the website is, you will barely notice it.

²⁴

Battle of the Cheetos²⁵
Battle of the Cheetos is a promotional online multi-player game with a low learning curve, but still complex enough to keep users engaged. Notice how well various video-elements are incorporated in the Flash-movie, vividly inviting the users to join in. Developed by North Kingdom¹⁸ (Stockholm, Sweden) and Goodby, Silverstein & Partners²⁶.

²⁵

Asylum626²⁷
Asylum 626 is an advertising campaign for Doritos, which went with an interactive horror experience for this campaign. The “treatment” is available only between 6PM and 6AM and users can book an appointment to “participate”. According to the website, the experience is a scare that is too personal for the cinema. But for all the time required to go through the website, one ends up seeing little correlation between the product and these overproduced horror sequences.

²⁷

MyAmoy²⁸
Amoy Food, one of the food and sauce brands in Southeast Asia, uses background video to complement its interactive promotional website. The site allows you to actually visually add ingredient and see them being prepared. Get ready to lose some time in the recipe-maker section, which is the highlight and focus of the campaign.

²⁸

Music And Dance Websites

White Lies²⁹
White Lies is an alternative rock band from Ealing, west London, that uses background videos to play its music videos while the user browses the rest of the website. Designers have made a poor choice for the resolution of the displayed video: at large resolutions, it looks very pixelated and blurry — even a bit larger resolution would work much better. Most navigation actions do not disrupt the playing either, because external links open in new tabs, leaving the slightly resource-heavy video to continue playing. Also, even though the website is for a music band, the website opens with the sound muted by default, which is a nice change.

²⁹

Sick City Club³⁰
Sick City Club is an indie rock quartet from Birmingham, England, that employs the technique of playing its videos while the user looks around. New content slides in from the side, never disrupting or creating lag for the video. This is somewhat unusual among the websites featured here, most of which have elements that are complex or resource-heavy. The elements here seem to be simple and lightweight, which suit the website well.

³⁰

Tomato Jaws³¹
Tomato Jaws is an electronic band from the Ukraine. It uses background video for ambience as the user engages with the unique navigation. The difference here, though, is that the music videos that play in the background are not necessarily theirs. In fact, in a bit of short-sightedness, the band’s music videos open in smaller players while the background video continues, thereby draining the CPU even more than necessary and causing both the music and background video to skip and drag.

³¹

Arcade Fire: Neon Bible³²
Canadian indie rock band Arcade Fire employs video backgrounds in a fun and unique way for its Neon Bible interactive music video. The website looks sparse at first and it features just a single music video, but with several interesting elements thrown in so that the viewer can sort of play along as the video plays. Still a bit heavy on resources, even for such a minimal approach, but that is to be expected.

³²

Radio Soulwax³³
“Part of the Weekend Never Dies” is a documentary about Radio Soulwax’s summer 2006 tour, filmed by director Saam Farahmand. The website features a particularly creative use of background video: it enables the user to create their own mix by triggering various loops and video clips from the click of the mouse. While resource-intensive, it is an interesting use case.

³³

Destroy Rankin³⁴
To celebrate Youth Music’s 10th birthday, 70 of the world’s greatest musicians and visual artists have created a groundbreaking body of collaborative artwork based on Rankin’s iconic portraits of musicians. Simple, artistic and a worthy complement to the photographer’s work.

³⁴

1001 Attitude³⁵
1001 Attitude is a dance school in Montfermeil (Paris) that uses background video to show its students dancing and, at times, warming up. This is a good use for a dance school, but the video is stretched to fit the background and so becomes distorted, which is unfortunate because it detracts from the elegance of the effect.

³⁵

Random Dance³⁶
Random Dance, an internationally renowned British dance company, puts background video on full display on its home page. As you move deeper in, a smaller video player is used, which fits the flow and structure of the website.

³⁶

Hotel, Restaurant, Bar and Nightclub Websites

Iberostar³⁷
“On vacation, we’re all stars” is the slogan for the Iberostar Hotels & Resorts campaign featuring Antonio Banderas. A partly interactive background video walks you through a virtual tour of what your actual experience at a resort would be like. The tour is an interesting way for hotels to deliver this experience.

³⁷

The Wood³⁸
The Wood is a brand new bar/restaurant in the heart of Brussels and the famous “Bois de la Cambre.” The designers use background video to craft a soft atmosphere, which seems to fit the feel and decor of the restaurant in its unique woodsy way. The navigation plays into the rest of the website’s structure wonderfully, tying together the whole experience.

³⁸

Jazzownia Liberalna³⁹
Jazzownia Liberalna is a music club and restaurant that uses this technique in a stylish way. Adding various elements outside of the menu, the owners have gathered a lot of information on the history of jazz and displayed it in an simple interactive timeline of sorts. The rest of the website appears fluidly over top of the video. Breaking from the background once or twice might actually help here.

³⁹

Byblos⁴⁰
Byblos is a dance club in Porec, Croatia. It uses video background not only to show footage of the club itself, but to establish the tone and attitude of this hotspot. The website is hard on the system, but you are told that from the start, so be prepared. The transitions and overlays fit right in with the background, and they work well together and don’t detract from each another.

⁴⁰

Advertising, Design Agencies and Film Studios

Razorfish⁴¹
Razorfish is an interactive agency for marketing, experience and enterprise design. Its use of background videos is both subtle and nearly unobtrusive in implementation. With minimal sound and graphic-heavy inclusions, the website is smooth and fluid throughout.

⁴¹

Less Rain⁴²
Less Rain is a digital creative agency with offices in London, Berlin and Tokyo. Its site uses background video to complement the ambience of the rest of the website. However, as on other websites, the videos in the gallery open in a separate player, rather than in the background (where the main video stops playing). With the kind of work being showcased, a bigger presentation seems more suitable.

⁴²

1stAveMachine⁴³
1stAveMachine is an NYC-based CGI, visual effects and animation studio that uses video background to enrich its website experience. Video sequences that play in the background do not always complement the navigable elements; they make the content displayed over top of it illegible in many instances.

⁴³

IDEAL Production Company⁴⁴
Ideal Production Company is a motion-design studio from Warsaw, Poland, that uses an interactive navigation element to enhance the background video employed throughout the website. This navigation also seems to be the reason that most videos on the website play in a smaller separate player. Still, given the nature of these videos, the smaller presentation does work here.

⁴⁴

BlackBeltMonkey⁴⁵
BlackBeltMonkey is a German communications and interactive design agency that has a subtler variation on background videos. While adding unique and whimsical interactive elements, the designers manage to keep the background from interfering with the content almost perfectly. There are some instances of text and background colors matching, rendering some of the headings partially illegible.

⁴⁵

Marketel⁴⁶
Marketel, one of the largest advertising agencies in Quebec, Canada, uses background video and with a responsive hover element to boot. The stylish background adds sophistication, and it remains active during all of the other interactions on the website. But when the television ads run in the gallery, the background can create a heavy lag for some users.

⁴⁶

Designkitchen⁴⁷
Designkitchen is an interactive design agency that delivers award-winning digital branding across multiple channels: social, viral, mobile and Web. It uses background video throughout its website, with various supplementary videos depending where you navigate to. The videos, especially in the news section, repeat themselves (sometimes alternating, but rarely) making them a bit distracting. Also, the portfolio has some white text against a white background, creating some difficulty there as well.

⁴⁷

Lukas Lindemann Rosinski⁴⁸
Hamburg-based advertising agency LLR (Lukas, Lindemann, Rosinski) also takes a minimalist approach with this technique and its overall website. With their unique and responsive navigational elements, the designers instill a sleek yet stylish feel throughout the website and leave a lasting impression.

⁴⁸

Working Element⁴⁹
Working Element LLC is a collective made up of directors, photographers, writers, compositors, editors, photo illustrators, designers and cinematographers. The site uses background video to show the truth of its name. But as the large still gallery opens up, the video continues to play behind it, feeling a bit overstimulating. Again, the idea has promise but could use some tweaking.

⁴⁹

Metaproject⁵⁰
Metaproject is a creative agency based in New York. Its background video is in some ways subtler and in other ways grander than others we’ve seen, but never intrusive or distracting, which is not always easy to achieve as we have seen. The transitions are smooth, and the background varies with the pages and projects in the gallery.

⁵⁰

MediaNovak⁵¹
Media Novak’s background video is handled impressively, with little overstimulation. But it drops the ball in the portfolio section. The background fills with a wall of thumbnails, but it scrolls too quickly at times depending on the position of your mouse. There is no resting point. When you open a window, the wall continues to scroll behind it, which can be distracting or unpleasant for some users.

⁵¹

Filmhouse⁵²
Filmhouse is a film production studio that uses a combination of background video techniques throughout its website (ranging from moderate to heavy use of system resources as well). As on other websites, this one opens up the videos in its portfolio in smaller windows, even shutting down the background entirely. But after the grand tour of the facility in the background, these smaller portfolio pieces feel a bit underwhelming.

⁵²

About:blank⁵³
About:blank uses this technique harmoniously throughout. With the fluid, smoke-like effect playing through a halftone overlay in the background, the website comes across as sleek and well crafted. And the fact that the video continues to play without impeding the readability of the text over top of it shows how well this effect can be implemented with such simplicity.

⁵³

BM8⁵⁴
BM8 Bildmacht is a Hamburg-based film production studio that uses background video in two distinct ways. First, you can play with its portfolio of projects, which opens in the full browser window; and once you enter the website, the background is a continuously flowing video that entertainingly introduces you to the company. The videos are also available as lightboxex, so you can skip to specific parts or simply let them play through.

⁵⁴

From Scratch Design Studio⁵⁵
From Scratch’s background video is heavy and as results it often causes problems with navigating the website. However, the implementation here shows some interesting ideas. For example, while the videos in the portfolio section open in smaller windows, separate from the page, they do not feel like a break in the flow of the website. The transition feels like a natural fit.

⁵⁵

Hipopotam Studio⁵⁶
This small talented design studio of two people from Warsaw, Poland, implements this technique site-wide. Thus, the lag factor can get a bit much at times. However, when viewing projects in the portfolio, system usage drops rather significantly; even though video is used here, it is done in a subtle yet still interactive way.

⁵⁶

9elements⁵⁷
9elements uses background video for its main website and all accompanying material but abandons it on its blog. The background on the main website does not distract in any way from the content displayed over top, which is nice to see. Fluid transitions make for less chance of video disruption.

⁵⁷

GDSH⁵⁸
GDSH’s background video is very subtle, almost imperceptible. Whereas many sites displayed above use the technique as a focal point, here it serves simply as the background, and without interfering with the content, as a background should.

⁵⁸

Further Examples

We Choose the Moon⁵⁹
We Choose the Moon is a real-time immersive, interactive website for the John F. Kennedy Library and Museum. It commemorates the 40th anniversary of the Apollo 11 mission, the result of JFK’s pioneering vision to land the first person on the moon. Background video is implemented so that the user can track the entire mission through its various stages, with interactive stops and elements added along the way.

⁵⁹

Lost in Val Sinestra⁶⁰
The Lost in Val Sinestra is a viral marketing campaign by Swisscom to promote its TV offerings. It allows users to create a personalized movie trailer starring their Facebook friends or with pictures uploaded from their hard drive. The website adds interactivity by allowing users to choose their cast and the thrill-level for the story. To get the most out of the experience, use a big cast.

⁶⁰

Philips: Cinema⁶¹
Parallel Lines is a Carousel short-film project to promote Philips TV sets. The films explore the most popular genres of filmmaking — including drama, action, animation, sci-fi and thriller — a nice examples of a site using video to provide a very memorable, rich user experience.

⁶¹

Neave Television⁶²
Neave Television uses background video to present a truly original and entertaining concept. A series of seemingly context-free, weird and bemusing video clips are presented one after the other, allowing the user to skip to the next clip with the click of the mouse.

⁶²

MTL12⁶³
MTL12 is a documentary television series (12 episodes) about Montreal and the people who live there. A stylized and interactive take on the background video technique gives this website its unique look and feel, highlighting the project and its segments in the process.

⁶³

Newturn Group’s Webart Exhibition⁶⁴
The first online art exhibit website of the Newturn Group streams resource-heavy background video leading up to and following the event. However, the videos can lag a lot and be at times unwatchable. The website gets a bit lighter once you start browsing around and move away from the main videos.

⁶⁴

Aaron Ohlmann⁶⁵
Aaron Ohlmann is an editor, producer and documentarian with an interest in projects that focus on the arts, political structures and social architecture. His website has a scaled-back, resource-friendly background video. But given the appearance of the home page, we expected to see each project in the same format; unfortunately, the other videos on the website open in a smaller player.

⁶⁵

Yodabaz⁶⁶
Yodabaz is the portfolio of Basile Tournier, co-founder of Web creation studio FCINQ. Once more, we have a main background video element that acts simply as a background, with the website’s other elements seamlessly laid over top. The background is integrated into the website without any interference or lag.

⁶⁶

EagleClean⁶⁷
EagleClean is a specialist cleaning company based in Central London that takes a subtle, minimalist approach with both its website and background video. It effectively markets its services with quick, once-over cleanings now and again to clean up any smudges on your screen. A creative use of the technique.

⁶⁷

Wim Vanhenden⁶⁸
Wim Vanhenden is a creative Internet artist from Belgium who uses background video not only to highlight his previous work, but to enhance the art project built right into the website. Upon prompting users to type in their thoughts and other information, the website searches the Web for related images and morphs them into an artistic background slideshow.

⁶⁸

Futuretainment⁶⁹
Futuretainment: Yesterday the World Changed, Now It’s Your Turn is a book written by Mike Walsh. Background video is used somewhat obtrusively on the website, looping repeatedly through a series of short segments. The segments themselves are so repetitive that they become distracting, and most of the footage is grainy and pixelated which is not a good thing.

Walt’s Warning
Walt’s Warning is a first-person interactive experience website from Sony Pictures for Breaking Bad. Using background video to suck the user into the show’s world, the designers add another element of interactivity with responsive mouse-over scrolling. Overall, the experience is short-lived and a bit high on the resource-sapping end of the spectrum.

What Do You Think?

As you might have noticed, this article doesn’t really go into details explaining how to actually implement cross-browser video backgrounds in Web design, but if you’d like to have it as a follow-up, please let us know in your comments below.

Also, in general, what is your opinion of background videos in Web design? Do you think that it makes sense to use it? If yes, in which particular designs? If not, why not?

Read more »

Creative Free Icon Set for Web Developers: Coded

Today we’re excited to present you a new icon set called Coded. Designed with web developers in mind, Coded features 25 high-quality icons ranging from 512×512px to 32×32px. Designed by Thomas McGee of WinePress of Words², this set has been released exclusively for Smashing Magazine and its readers.

The Coded Icon Set makes an excellent addition to any website, especially those inspired by the trade of web development. Perfect for your next client’s site or for showcasing your own web development — these icons are useful for every coder.

Download the Icon Set for Free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sub-licensed or rented. Please link to this article if you want to spread the word.

³

• Download the icon set for free (zip, 5.1 Mb)

Behind the Design

Here are some insights from the designer:

“Coders and developers have unique responsibilities throughout each work week. From implementing client ideas, to expanding and coding personal endeavors, there’s much work to do at any walk of a web developer’s career. With this, there are tools a developer uses and trusts through these daily challenges. Inspired by such tools and the tasks they help tackle, this set has been crafted to fit the commonly used files, formats, and resources coders of any kind have come to rely. Whether used on your next client’s site, or for accenting your own coding ventures, we’re confident this free icon set will make an excellent addition to your library. Enjoy!”

Thanks, Thomas! We truly appreciate and respect your time and your efforts!

Read more »

Free SEO Accounts From My SEO Tool

How Can My SEO Tool Help You

As a web designer, you may have been in and out of the SEO trenches more than a few times. When it comes to creating a new website design and content, focusing on SEO is not a simple task. It’s hard enough to know what your SEO strategy should target, but it is even tougher to manage and track its results. This was the motivation behind My SEO Tool - Online SEO software specifically developed for web designers.

Real-Time Traffic, Ranking & Activity Updates

The most important aspect of SEO is understanding your current situation. My SEO Tool keeps you informed by providing real-time activity updates.

Easy On-Page Optimization

Follow the optimization wizard to quickly identify & fix SEO issues. You will be amazed how little changes can affect your rankings.

Build Links Quickly & Effortlessly

Getting other websites to link to yours can be tiresome & repetitive. My SEO Tool simplifies this process by breaking it down into bite-size tasks.

Track the Results of your SEO Campaign

My SEO Tool allows you to track rankings and traffic over the entire life-cycle of your SEO campaign.

Create or Improve your SEO Service

Interested in offering SEO to your existing clients? Use My SEO Tool branding features to customize your interface and generate specialized reports.

Read more »

Learning to Love HTML5

It seems that new resources and articles for teaching and promoting HTML5 are popping up almost daily. We’ve been given HTML5 templates in the form of the HTML5 boilerplate and HTML5 Reset (although they both go beyond just HTML5 stuff). We’ve got a plethora of books to choose from that cover HTML5 and its related technologies. We’ve got shivs, galleries, and a physician to help heal your HTML5 maladies. And don’t forget the official spec.

From my own vantage point — aside from a few disputes about what the term “HTML5″ should and shouldn’t mean — the web design and development community has for the most part embraced all the new technologies and semantics with a positive attitude.

Flickr Photo by Jeremy Keith

While it’s certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace. I’m personally in the process of gaining a better understanding of the subtleties of HTML5′s various new features, so I thought I would discuss some things associated with HTML5 that appear to be somewhat confusing, and maybe this will help us all understand certain aspects of the language a little better, enabling us to use the new features in the most practical and appropriate manner possible.

The Good (and Easy) Parts

The good stuff in HTML5 has been discussed pretty solidly in a number of sources including books by Bruce Lawson, Jeremy Keith, and Mark Pilgrim, to name a few. The benefits gained from using HTML5 include improved semantics, reduced redundancies, and inclusion of new features that minimize the need for complex scripting to achieve standard tasks (like input validation in forms, for example).

I think those are all commendable improvements in the evolution of the web’s markup language. Some of the improvements, however, are a little confusing, and do seem to be a bit revolutionary, as opposed to evolutionary, the latter of which is one of the design principles on which HTML5 is based. Let’s look at a few examples, so we can see how flexible and valuable some of the new elements really are — once we get past some of the confusion.

An

Isn’t Just an Article

Among the additions to the semantic elements are the new

and

tags, which will replace certain instances of semantically meaningless

tags that we’re all accustomed to in XHTML. The problem arises when we try to decipher how these tags should be used.

Someone new to the language would probably assume that an

element would represent a single article like a blog post. But this is not always the case.

Let’s consider a blog post as an example, which is the same example used in the spec. Naturally, we would think a blog post marked up in HTML5 would look something like this:

Title of Post

Content of post...
Content of post...

 

 Comment by: Comment Author

 Comment #1 goes here...
 Comment by: Comment Author

 Comment #2 goes here...
 Comment by: Comment Author

 Comment #3 goes here...

For brevity, I’ve left out some of the other HTML5 tags that might go into such an example. In this example, the

tags wrap the entire article, then the “section” below it wraps all the comments, each of which is in its own “section” element.

It would not be invalid or wrong to structure a blog post like this. But according to the way

is described in the spec, the

element should wrap the entire article and the comments. Additionally, each comment itself could be wrapped in

tags that are nested within the main

tag.

Below is a screen grab from the spec, with

tags indicated:

Article tags can be nested inside article tags — a concept that seems confusing at first glance.

So, an

element can have other

elements nested inside it, thus complicating how we naturally view the word “article”. Bruce Lawson, co-author of Introducing HTML5, attempts to clear up the confusion in this interview:

“Think of

not in terms of print, like “newspaper article” but as a discrete entity like “article of clothing” that is complete in itself, but can also mix with other articles to make a wider ensemble.”
— Bruce Lawson

So keep in mind that you can nest

elements and an

element can contain more than just article content. Bruce’s explanation above is very good and is the kind of HTML5 education that’s needed to help us understand how these new elements can be used.

Section or Article?

Probably one of the most confusing things to figure out when creating an HTML5 layout is whether or not to use

or

. As I write this sentence, I can honestly say I don’t know the difference without actually looking up what the spec says or referencing one of my HTML5 books. But slowly it’s becoming more clear. I think Jeremy Keith defines

best on page 67 of HTML5 for Web Designers:

“The article element is [a] specialized kind of section. Use it for self-contained related content… Ask yourself if you would syndicate the content in an RSS or Atom feed. If the content still makes sense in that context, then article is probably the right element to use.”
— Jeremy Keith, HTML5 for Web Designers

Keith’s explanation helps a lot, but then he goes on to explain that the difference between

and

is quite small, and it’s up to each developer to decide how these elements should be used. And adding to the confusion is the fact that you can have multiple articles within sections and multiple sections within articles.

As a result, you might wonder why we have both. The main difference is that the

element is designed for document structure and portability. This simple way to view the differences certainly helps make the two new elements a little more distinct. The important thing to keep in mind here is that, despite our initial confusion, these changes, when more widely adopted, are going to help developers and content creators to improve the way they work and the way content is shared. element is designed for syndication, whereas the

Headers and Footers (Plural!)

Two other elements introduced in HTML5 are the

and

elements. On the surface, these seem pretty straightforward. For years we’ve marking up our website headers and footers with

,

or similar. This is great for DOM manipulation and styling, because we can target these elements directly. But they mean nothing semantically.

“The div element has no defined semantics, and the id attribute has no defined semantics. (User agents are not allowed to infer any meaning from the value of the id attribute.)”
— Mark Pilgrim, Dive Into HTML5

HTML5′s introduction of

and

elements is the perfect way to remedy this problem of semantics, especially for such often-used elements. But these elements are not as straightforward as they seem. Technically speaking, if every website in the world added one

and one

to each of their pages, this would be perfectly valid HTML5. But these new elements are not just limited to use as a “website header” and “website footer”.

A header is designed to mark up introductory or navigational aids, and a footer is designed to contain information about the containing element. For example, if you used the footer element as the footer for a full web page, then in that case copyright, policy links, and related content might be appropriate for it to hold. A header on the same page might contain a logo and navigation bar.

But the same page might also include multiple

elements. Each of those sections is permitted to contain its own header and/or footer element. Keith sums up the purpose of these elements well:

“A header will usually appear at the top of a document or section, but it doesn’t have to. It is defined by its content… rather than its position.”
“Like the header element, footer sounds like it’s a description of position, but as with header, this isn’t the case.”
— Jeremy Keith, HTML5 for Web Designers

And the spec adds to Keith’s clarification by noting:

“The header element is not sectioning content; it doesn’t introduce a new section.”
— The header element in the HTML5 specification

These explanations help dispel any false assumptions we might have about these new elements, so we can understand how these elements can be used. Really, this method of dividing pages into portable and syndicatible content is just adding semantics to what content creators and developers have been doing for years.

Headings Down A Different Path

Prior to HTML5, heading tags (

through

) were pretty easy to understand. Over the years, some best practices have been adopted in order to improve semantics, SEO, and accessibility. Generally, we’ve become accustomed to including a single

element on each page, with the other heading elements following sequentially without gaps (although sometimes it would be necessary to reverse the order).

With the introduction of HTML5, to use the new structural elements we need to rethink the way we view the structure of our pages.

Here are some things to note about the changes in heading/document structure in HTML5

• Instead of a single

  element per page, HTML5 best practice encourages up to one

  for each

  element (or other section defined by some other means)

• Although we’re permitted to start a section with an

  (or lower-ranked) element, it’s strongly encouraged to start each

  with an

  element to help sections become portable

• Document nodes are created by sections, not headings (unlike previous versions of HTML)
• An
  element is used to group related heading elements that you want to act as a single heading for a defined or implied section;
  is not used on every set of headings, only those that act as a single unit outside of adjacent content
• To see if you’re structuring your document correctly, you can use the HTML5 Outliner
• Despite the above points, whatever heading/document structure you used in HTML4 or XHTML will still be valid HTML5

So, although the old way we structure pages does not amount to invalid HTML5, our view of what constitutes “best practice” document structure is changing for the better.

Block or Inline? Neither! (Sort of…)

For layout and styling purposes, CSS developers are accustomed to HTML elements (for styling and layout purposes) being defined under one of two categories: Block elements and inline elements (although you could divide those two into further categories). This understanding simplified our expectations of an element’s display on any given page, making it easier (once we grasp the difference between the two) to style and manoeuvre the elements.

HTML5 evolves this concept to include multiple categories, none of which is block or inline. Well, theoretically, block and inline elements still exist, but they do so under different labels. Now the different categories of elements include:

• Grouping Content
• Text-Level Semantics
• Sectioning Content
• Form Elements
• Embedded Content

I certainly welcome this kind of improvement to more appropriately categorize elements, and I think developers will adapt well to these changes, but it is important that we promote proper nomenclature to ensure minimal confusion over how these elements will display by default. Of all the areas discussed in this article, however, I think this one is the easiest to grasp and accept.

Conclusion

While this summarizes some of what I’ve learned in my study of HTML5, a far better way for anyone to learn about these new features to the markup is to pick up a book on the topic. I highly recommend one of those mentioned in the article, or you can read Mark Pilgrim’s book online.

These new elements and concepts don’t have to be confusing. We can take the time to study them carefully, avoiding confusion and dispelling myths. This will help us enjoy the benefits of these new elements as soon as possible, and will help developers and content creators pave the way towards a more meaningful web — a web that, to paraphrase Jeremy Keith, ‘wouldn’t exist without markup’.

Read more »

Post-Production Trends in 3D Visualizations

Post-production might well be the most under appreciated part of creating 3D visualizations. It gives you the power to easily make some changes; put in the sky you like, add some dirt, make the colors more vibrant and even correct some little mistakes in your 3D mesh.

Most of the traditional 3D artists tried to do as much as possible within their 3D package since these packages were not focusing on post, but rather on the 3D products themselves. Rendering masks for the different color corrections one would like to do was a painstaking job of fixing the lighting and materializing — making artists choose to do most of the work in 3D (such as adding dirt and textures) and so leaving only color correction for post-work.

The techniques and styles of correcting images in post-production have changed a lot over the last couple of years. First, we shall take a look at some of the trends and techniques that are happening right now. Next to that, we will take a look at the most impressive architectural visualization shot that CGI has ever seen and at the post-production in that shot. Next to that, the trend it started in terms of post-production.

Different Styles of Post-Production

This is what a 3D image should look like according to the corporate industry. Basically, what you do is the following: take a render, do some minor color correction and add some glow. Despite the fact that this is mostly considered standard, it should belong to the past. There are a lot of techniques out now to create better looking, more beautiful images with the help of post-production software. Let’s look at some examples.

This image, created by a Dutch company called “Trazar” explains exactly what the “standard” is. The image looks great and a client would absolutely love it because the building is so clearly visible, but it looks too perfect. So to a 3D specialist, it still looks fake.

Some things that immediately come to mind:

• Everything is completely balanced; you can see the sky clearly (it is not too bright), but you can also see every little detail in the shadows.
• There is a blank spot at the horizon, which is odd, because it’s situated in the middle of a city.

Here is another example, made by a company called “Archiform”. This render too looks very realistic, but still doesn’t look quite as good as it could with some heavy post production.

Same thing here:

• The colors are too vibrant.
• The glow of the sky makes the trees blue

Degraded Photorealism

A synopsis to explain what I’m talking about. Degrading your images in post with scratches, vignetting, lens blur and many more things, making your image look more like a photo taken by a (bad or old) camera that uses film rather then a 3D render. What we make in our 3D packages can look perfect: our edges can be exactly 90 degrees (or 89 for that matter), our tabletops can be completely clean without dents in them, as well as that we can produce images in low light condition with an ISO of 6400 without a single drop of grain in the final images.

This technique focuses on how to overcome the perfectness of 3D. It is unmistakably the most popular post-production trend at the moment used in non-corporate 3D visuals. Let’s look at the only example needed to illustrate this technique. This video is made by Alex Roman, a 3D visualization expert.

The Third & The Seventh by Alex Roman.

Now, the first thing that’s noteworthy is that everything except the people and the birds is 3D. The art of 3D visuals has come a long way and if we would give a good 3D artist one year of free time on his hands to make whatever he wants, this is what he would come up with (at least, “Alex Roman” did).

Alex Roman’s “The Third & The Seventh” shook-up the 3D world by using a great cinematic style to make the architecture stand out. Most of the time, you don’t even realize it’s 3D.

So, what part of this is done in his 3D package, and what part is done in post? To let Alex answer the question himself, here is another video of the composting breakdown. He shows a wireframe or smooth shaded view of the model inside 3D studio max, after that the bare render. Each next frame includes a new step of post-production.

Composting Breakdown (T&S) by Alex Roman.

As we can clearly see he replaced the sky, added people, corrected the color and added some other visual elements in post. Those things are purely decorative. What really sets the mood, is the use of vignetting, lens flares and lens blur. He makes it look like this was a movie shot in the early nineties. Don’t get confused, it is not only the post-production that made this mood happen (cameramen wearing somewhat classic clothing, etc.), but this is certainly something that helps a lot! This movie would have been completely different if it hadn’t been corrected in post.

Techniques

Let’s discuss how we can achieve this effect, and look at the stuff that will work, and how the same stuff, applied in a wrong way, won’t work. In the examples below, these effects have been exaggerated to see the difference clearer. I’ve had to limit myself to a couple effects since it is simply too much to discuss all of the techniques that can be used. The ones I’ll describe below should get the basics though.

Large view

When using old cameras with film, there are pictures that often show grain in the darker areas of the image because the film won’t pick up the details in the darker part of the image. This effect can easily be achieved in our post-production package. I used photoshop in this case.

Do:

• Make the effect barely visible, only noticeable if you look good.
• Use plugins like “NIK color effects” that can simulate actual grain from a certain film. This will boost the credibility of the grain.

Don’t:

• Add noise in brighter areas of the image, this will look unrealistic.
• Overdo it. Some noise is good, but don’t make it disturbing, the end product should still look good.

Large view

Vignetting can have different causes in photography. The main cause is using a cheap lens / camera. Most of the time this effect is unwanted, but sometimes it can create an image that centers your eye, or guides it to a specific part of the image.

In post, we can use two types of vignetting; one brightens the middle of the image, the other darkens the edges. Normally, the second one is used, since the 3D render still has to maintain its function of showing the subject properly 6mdash; if it’s too bright, this isn’t always possible.

Do:

• Add vignetting to your renders! It looks cool.

Don’t:

• Tell your client about is, they won’t like that you are degrading otherwise perfect images just too make them look cool. If you use this effect moderately, they probably won’t even notice.
• Overdo the effect. This will make your image look very dark, and might not fit its purpose.
• Add them when you are rendering studio setups and such. The effect needs to be believable. Studio cameras are often setup to not have vignetting; so when applied in this case, it won’t look realistic but rather disturbing.

Large view

Chromatic aberrations are caused by a lens that refracts the light spectrum in different ways on different places. Like with a prism, the light will disperse and fall on the sensor incorrectly.The effect will occur more on wide-angle lenses rather then tele-lenses.

It’s is a very subtle effect and will pretty much only show up in the corners and on the side of the images (unless your camera equipment is really bad). If you look in the circle drawn in the image above at the black beam, there is a red, blurry line next to it, that’s chromatic aberration (CA).

Do:

• Use it (heavily) when you have rendered with a wide angle lens and adapt the amount of chromatic aberrations when using a tele-lens.
• Make sure you use the correct color slider; the most often occurring colors of CA are red and green. In photoshop, you can also make blue and yellow ones.

Don’t:

• Overdo the effect (again? yes again!). This is really important. All of these effects should be only very subtle to make them work. You are trying to make it look like a stylized photo, not like you screwed up your image in post.
• Add it in the center of the image, it will look disturbing instead of realistic.
• Add it in the beginning of the post; make sure to make this one of your last steps so that the colors of the aberrations are not effected by your color corrections.

Large view

This is were the fun begins. Color correction. The most common thing is to look at “lomography” photographs; they have huge amounts of saturation, produce those artifacts we want to see, and still manage to look stunning. This step is somewhat personal, and I can see why some people don’t like this effect, but I personally like to take this step over the top.

In this image I’ve added a bunch of adjustment layers:

• Three gradient maps (set to various blending modes).
• One color balance.
• One black & white layer set to soft light.
• A levels adjustment.

All of the layers have a very low opacity (less than 25%) to make the effects subtle, but visible. A little side note; before I added these, I made sure my image was “correct”. No overexposed areas, no huge amounts of contrast and no unsharp areas.

Now, all of these effects standing alone might not be very cool, but added together, it gives a completely different feel to the scene.

Large view

One thing to keep in mind, is that the render you start out with, has to look good already. It has to look somewhat photorealistic to make these effects work. If you start out with a simple render with simple materials that on its own doesn’t look convincing; you should work on those qualities first. After that, you can let yourself go in post to degrade the images again.

Next to the effects described above, there is a ton of stuff you can add; blooming, lens flares, haze, depth of field, motion blur, etc. I have just scratched the surface here. Check the “More to Read & Watch” section for some tutorials and interesting articles.

Hybrid 2D / 3D Visualization

Another upcoming trend is to use 2D in conjunction with 3D to create pictures that look like they were painted or drawn, but were the geometry was made in 3D. This movie is made by CMI studio — this technique is relatively new and uncommon, but I think it’s noteworthy simply because it looks great! Let’s look at an example of this technique:

If you take a good look at the movie, you will find a lot of things that are peculiar, and normally don’t happen in a 3D company. The rendered image is printed out, drawn over, the drawing is scanned, and that is the one getting color. So the 3D part isn’t visible in the end product at all! Check the “More to Read & Watch” section for some “making of” videos. I think this is one of the upcoming new things that will become greatly used in the upcoming years.

Wrapping Up

The last couple of years, the amount of post-production has grown, most things are easier to add into post, than in your 3D package.

Despite the fact that it has been growing in the corporate way (Because that’s where the money is), I think artist will start showing more of what they can do in post, and the companies buying 3D renders will soon realize that stylized images look much better than the plain, blend ones without some sort of a feeling too it. Adding real-life imperfections to your renders should be something that has to be done a lot more often.

Nothing in the world is perfect, your 3D renders shouldn’t be either!

Read more »