Building the new Neutron Creations site
In case you missed it, we launched the new Neutron Creations site last week. Here’s a little behind the scenes look at how we built some of it.
If you haven’t had a look yet, go and have a quick poke around now. It’s quite a change from our initial single page design by Tim Van Damme and the later refresh by Elliot Jay Stocks.
This latest design comes from the thoughts of James Ritchie who we’ve had the pleasure of working with on several projects over the past few years and whom we trusted to come up with something modern & clean but with the scope to show off our development abilities.
The most visual element of the design was the logo animation on the home page. This went through many concepts and iterations, usually delivered to us as video renders from Adobe After Effects, which we then prototyped to see how they would perform. Here are a few of those prototypes.
While on the final site we use fallbacks and feature detection to ensure devices get an experience suitable for them, these prototypes do not and as such will probably only work in modern browsers. Please do dig around the code and ask any questions you have.
If you try viewing this prototype in Safari you’ll notice that the outer segments don’t animate smoothly due to a SVG animation bug in Safari.
Iterating on this a little we dropped the locking animation and used the same animation effect from the outer segment on the inner segments. We then dropped in (literally!) the navigation and link to the portfolio and were all pretty happy with it.
And being happy with that (albeit with a few minor tweaks) we moved on to the other, somewhat simpler, aspects of the design. But we’ll leave those for another time.
As always if you have any question do ask them below, and if you haven’t already do check out the site .comments powered by Disqus