A nice wintry advert that’s been showing on STV recently.
The original ad that Direct Savings were using showed how loft and cavity wall insulation actually worked, in a particularly dry style. So the idea was to inject a bit of personality and life into the 3d proceedings and not get too wrapped up in the technicalities. Who cares how it works? It’s going to keep your house warm!
This somewhat creepy animation of the Funhouse is here for a reason. Read on.
Now that you’ve finally settled on a website design that you really like, here’s a question for you. What does it look like on a mobile? And I don’t mean ‘is it pretty?’ If you’ve used any hand-held device to look at websites designed for desktop computers, you’ll know that it’s a frustrating experience.
Yes, you can zoom in to read any text but you’ll very likely need to do a lot of scrolling around the screen. As for the expensive brand video you had created, you can pretty much forget about that working. Most web video players are Flash-based and mobiles don’t support Flash. Even the html5 players have all kinds of quirks, meaning they might work on the iphone or a Blackberry, but not on Android. Then there’s the ipad to consider. Your Flash banner and other animation won’t work in a mobile or ipad.
So what’s the solution? Some sites have parallel mobile-specific versions running on a sub-domain, so for example you might see the equivalent of this type of url: mobile.funhousegraphics.com. That’s fine if you’re Twitter.com or something equally huge, but for the rest of us this has implications for Search Engine Optimisation. A sub-domain is a standalone website, therefore you would be splitting your web traffic between two different sites, an SEO faux pas.
This is where mobile-friendly website design comes in. The real answer is to dish up the exact same content from the same place using two different design templates. For example, I created the creepy web video of the Funhouse above and encoded a single version of it. But that single video will display differently depending on what device you run it on. Looking at a desktop monitor? It’ll fill most of this central column. Try scanning the image below to load this post in your smartphone:
On a mobile you’ll see a compact version specifically designed for hand-held devices. (That doesn’t explain why it’s creepy. I just felt like it. Halloween or something.)
Likewise the image below, showing the compact version of funhousegraphics.com in an Android window, will itself be resized to fit a hand-held screen. So the mobile version of this site has all the video and functionality of the desktop version and serves up the very same creepy content, but with its own compact layout.
But hang on, don’t you need to build an app for people to download in order to dish up a proper mobile-friendly website? No, you don’t. Unless you want your mobile version to do something radically different from the desktop version (not just looking different, but having a different function) you won’t need to think about apps.
Mobile usage has been increasing dramatically and as the phones themselves get more sophisticated, people are expecting more from them. It’s up to web designers to find ways of delivering content to fill this need.
This animation begins with the exterior of the new Edinburgh International Conference Centre atrium extension, currently under construction. After moving through the ground level, the camera travels to the subterranean levels and that’s where the unusual features are. Because not only is the main hall built directly under the building next door – the also under construction 7-floor EICC office block – it also has a technologically innovative engineered floor which allows the space to be used for many different types of events.
I followed the architects’ plans showing how the floor was subdivided so that with the touch of a button the space could be transformed from a flat floor banquet to raked banquet to full arena, with many other variations. Despite the challenges, I think it was a lot easier for me to build in 3d than it would be in reality.
The new office block extension to the Edinburgh International Conference Centre is a seven-story building but also has three sub-zero levels. These connect through to the new atrium extension next door and ultimately to the EICC itself. It took me some time to get to grips with the architects’ drawings but once I had an understanding of the floorplans and all the associated information I started building the 3d model from the inside out.
This sequence dispensed with the usual 3d flythrough procedure of a single camera perspective, instead opting for a multi-camera edit. It’s difficult to create internal and external lighting in the same scene but that’s what was called for, as well as 3d figures to populate the scene. We rendered the animations in HD, which certainly kept them crisp, and the result was projected onto a huge screen in the EICC.
It will be very strange for me once the building is complete and I visit for the first time.
This is an architectural rendering of the new extensions to the Edinburgh International Conference Centre, currently under construction in Scotland’s capital and due to be unveiled in 2013.
Building the 3d models in itself was quite a challenge. The glass atrium building connects directly to the existing round-turreted EICC, but the seven-story office block to the right of it also connects to both buildings through a complex series of underground corridors and halls. (I’ll upload the interiors in a seperate posting.)
These exterior scenes try to illustrate the level of detail that the architectural plans demanded. Even once the modelling was completed, there was still the lighting and texturing to work on in order to try and replicate what the architects had in mind. Not to mention rendering. (The completed piece is 5 minutes long.) Every time I thought I’d cracked it, it turned out there was another corner or nook that I hadn’t noticed. Like the roof garden for example. Oh yeah, then there was a little thing called Edinburgh Castle in the background..
This animation piece was commissioned by Sky Television for a management conference and was screened at the massive O2 Cineworld in London. The video above shows the rushes I created for them and the video below shows how these were used in the overall presentation by Edinburgh’s LA Media.
The idea was to illustrate the communication process between customers, engineers and sales staff and the fibre optic line effect connected the various satellite points in the galaxy.
It wasn’t the simplest of tasks, most notably because of the very short timeframe involved. It’s not every day you get asked ‘can you build us an inter-connecting galaxy by next week?’
I’ve created a lot of 3d maps over the years and it’s always difficult thinking up fresh ways of presenting them. This one for Connoisseurs Scotland uses a similar technique to the one I built for Cairn Energy earlier this year, complete with fluffy clouds.
The idea was to present a selection of venues represented by Connoisseurs Scotland as the finest luxury spots Scotland has to offer, and locate them generally on the map.
This was used as part of an overall presentation for the group to promote Scottish hospitality. Which actually does exist.
If you’re reading this two years from now, you might be wondering what the fuss is about. Html5 is standard isn’t it? Well at the time of writing, Html5 is far from standard. It’s brand new and still has lots of issues. And one of the biggest is – how does Html5 handle video?
An explanation for non-techies. To date, video on the web has been dominated by Flash. But with Apple’s announcement that Flash would not be supported on the Ipad, it became clear they are trying to force the issue on the idea of an alternative.
For people like me who produce a lot of web video, there’s no simple answer as to how to encode clips that will satisfy both the older browsers like Internet Explorer and newer ones like Chrome. At this point, both support Flash but only the newer ones can handle Html5. So you could carry on using Flash for a while, but once they start actively dropping support for it, as in the case of the Ipad, you need to start looking at alternatives.
So the unusual thing about the video above is not its content, but the fact that it will play in any browser you choose, including the Ipad. The way that you see it is dependent on the browser you’re using. If I’m wrong and it doesn’t work for you, please let me know. And let’s see where we are in two years time.
To see how the video plays on your mobile, scan the image below to view this post in your smartphone:
This is a 3d reconstruction based on a court report into a road traffic accident. The details of the accident itself have been omitted.
The scene clearly demonstrates the power of 3d animation in conveying a large amount of information in a short space of time. Court reports are generally commissioned by solicitors or insurance companies and can be forty pages long or more. They are based on many documents including witness statements, physical evidence, terrain maps as well as weather conditions, lighting conditions, road surface and visibility information. Calculations and analysis are made based on the laws of physics and applied mathematics. It is the job of the 3d animator to portray this analysis as accurately as possible.
The ability to place multiple cameras in the scene is a huge advantage of 3d accident reconstruction. Once the mechanics of the scene have been built, driver’s eye views, witness views, overhead views, moving cameras can all help to illuminate the situation.
Cairn Energy held their Annual General Meeting this week and had been looking for ways of spicing up their annual reports. As the reports detailed their oil and gas exploration work in the Indian subcontinent and in Greenland, it made sense to illustrate these areas with maps.
There are a hundred ways of making maps, and apparently last year they did it with Powerpoint slides, but this year I created these animated 3d flythroughs for them, complete with fluffy clouds.
Overnight their share price soared by 8%. I reckon it was the clouds that did it.
I'm Greg Moodie, a freelance graphic designer and SEO consultant based in West Lothian, just outside Edinburgh in Scotland. Trading as Funhouse Graphics since 1998, I specialise in 3d animation and search engine marketing for websites.
