Bitbots Toys Sideways Design

BitBots Toys is weird. It kind of reminds me of those old horror movies where the doll comes to life. Seriously, that picture below kinda freaks me out.

But the website is pretty awesome. Except for the “buy online” link, it’s all one page with some beautiful Javascript/jQuery coding.

Scrollbars

So here’s something that I wasn’t expecting: the no scrollbars. It’s a great idea for two reasons: 1) Side-scrolling is hideous and unusual. By removing the option to scroll, this website comes out unscathed despite its sideways motion. 2) The links become necessary again. I’m one of those people who like finding the alternative way of getting somewhere (ie. I and a few cohorts snuck onto the wall around Jerusalem, Israel at night, even though we could have gotten on during the day when it was open… just for the challenge…). But this website doesn’t have another option: the links are the only (real) way.

Page Transitions

 This website’s Javascript makes my soul happy – although it would be happier if he coded the page changes in jQuery. The transition is smooth and beautiful – and it changes speed (easing). Its like he made his website one huge Javascript slideshow. Another good decision: he kept the “pages” in order, regardless of which link you choose. So if you click on jinny 6″, it goes all the way past the “series zero” page and to the “jinny 6″” page. I like that. It keeps you grounded in the website so you don’t feel lost.

Fixed Elements

The developer didn’t have to make these fixed, but I’m glad they did. Both the logo and the bottom bar are fixed in place as the rest of the website slides past. He gets away with it because of the sideways motion; although I’d  be interested to try a fixed logo on a vertical design just to see if it would work.

Colors

Each “page” focuses on a different color, with the overall vector design and bottom bar keeping the website linked. Notice the first page (top picture) has a Hawaiian-like theme, the second page a forest-like theme, and the third page a rocket theme. I can’t honestly see any real connection between these themes, but the vector style holds them all together.

Bottom Bar

As with most websites today, this one uses a beautiful grey bottom bar to add in those “extra” links. Clicking on any of them bring up a small box with information in them. Note: Buy Online takes you to another site…one that isn’t quite designed. The lightbox fading transition for the small box is a nice touch.

Because of the unusual navigation and one-page design, the bottom bar includes not only the classic links: email us (would have like a form, personally), register, social media icons; but also the rest of the links for the website. It seems like the main pages were about describing what the product was, and the bottom links were mainly how to connect and/or buy the product.

Most importantly, I like this website for the last page:

“Human brains get weighed down with all the things they’re trying not to think and obsess about; Did I leave the gas on? Will I have enough money to pay the rent and buy LA Noir this weekend? What will happen if the Sun explodes? Why are Curly Wurlys getting smaller? 
Sometimes you have to sip your over priced, unethically sourced mochafrappacapoeirachino and smile through it all. Give up the anxiety and take your Bigtop to the circus, they have clowns and dancing bears.” – Jon Burgerman

So true, Jon Burgerman, so true.