Gorgeous beakers at Dragon Labs. Click the image for a full view.Time for another inspiration post. This post is long, long due. I remember when I first saw Anand Sharma’s work at Dragon Interactive. I was stunned by his clever gradients, pixel precision, cross-fading animation and level of detail put into everything. I remember wrongly thinking that his site used Flash because of the smoothness of his animations, and clever way of producing text shadows. No, he does it all in HTML, CSS and JavaScript.
Dragon Labs
While I certainly tip my hat to his work on Dragon Interactive, I think everybody, their Aunt Bea, and their pet snake have too :) I’d like to talk about some of the work I’ve seen him doing on an upcoming site called Dragon Labs. Anand has showed me his work as he has progressed with this design.
Bubbles boil up hover effect on a beaker at Dragon Labs.
First let me say, that he has given me a whole new definition of “meticulous.” Everytime I thought the design was complete and looked great, he’s spend another 3 days on it and make it better. His level of detail, perfectionism and devotion to a design is flawless. Every time a revision is made to one of his designs, its for the better and often introduces on more sparkle to dazzle the design. He thinks and researches each one of this designs in a way I’ve never done before. Typically, I start with a canvas and start designing. Anand researches his subject like a Jedi knight preparing for battle, knowing his enemies’ weakness, studying his target, preparing, waiting, until the right moment. This most of all impresses me about Anand. He designs because he loves it. He designs it right. He is meticulous.
I could rant more on process, but I think it important to see what I’m talking about. Anand has made his “sketches” public on his flickr account. There you can comment on his work, view samples from his portfolio and work that he has done on Noisefreak, Girl Gamer, Dragon Interactive and more.
Another thing I have noticed about Anand’s work is how he uses PNG images and scales them for the browser size. With a large resolution monitor, the beakers at Dragon Labs are large and gorgeous. When a user resizes their browser, they are in for a treat. Anand has used percentage based CSS dimensions on the beakers to scale them according to the browser dimensions. What does this mean? Well, other than being ridiculously and insanely rad looking, there is no cutoff. The beakers stay in view and seem placed right on the “shelf” for large and small screens. Awesome. Also, you’ll notice a bubbling effect shown above on the Octopus beaker. No, this isn’t an animated GIF image. This is a frame-by-frame animation of a PNG image of bubbles. You can see three frames of this PNG “filmstrip” here. Too flippin’ cool.
What is Dragon Labs?
YShout Shoutbox Administration Panel at Dragon Labs
Dragon Labs is more than a pretty face. Its a community offering. It’s some of Anand’s best work put out for you to learn from and use in your own projects. Want to know how he did that great crossfading effect on Dragon Interactive? That’ll be there. Want to see an insanely cool implementation of a “pulsing” shoutbox admin panel? Yup, that’s there, and more coming. Anand will be putting quite a bit of his genius work up there, a sort of tutorial-like, one-way blog of sorts.
Follow him
So what do you do with people that have more talent in their left pinky finger than you do in your whole body? Follow the leader. Read their blogs, study them, learn from them, follow them on twitter. You know what to do.
I agree – Anand’s work is amazing. Dragon Interactive is definitely an inspiration worth mentioning.
This is great. Anand is great. You are great. Details are grrreat.
Wow, just wow. Cannot wait for the site to launch. Great write-up to.
Every time I see something from Anand I can’t help but be inspired. The attention to detail is out of this world.
Bring on Dragon Labs. I want to know what’s in that secret sauce!
Wow, they very pixel perfects graphics. Their website is stunning. Reminds me slightly of atebits attention to detail.
Thanks for writing this up Rogie. As soon as I read your “I just crapped my pants” tweet, I was looking forward to this inspiration post. :)
@Joseph This is the one! Anand is seriously talented and I’m glad you read this!
@Rob Word dude. I totally agree with you.
@Jason Thanks for commenting on the write up. I know my writing style isn’t superb, but at the least I hope it conveys what I feel.
Really inspired! Nice job man, congratulations!
So, you are a Jesus’s follower too?
Regards from Brazil!
Thanks a lot Rogie, and everyone else. I really appreciate your comments—it’s what keeps me going.
Also, for the record, Yuri did all the javascript stuff for Dragon Interactive and most everything else like the shoutbox login.
There is no bubbling effect in the beaker above in Safari 4 beta or Opera 9.64, nor does it apear on dragoninteractive.com. Where should I be looking?
Other than that, everything looks great, Anand, and I applaud you for not using Flash.
I like you’re site. great work.
za za…great site.
[...] 11. Komodo Media [...]
[...] 11. Komodo Media [...]
[...] 11. Komodo Media [...]
[...] 11. Komodo Media [...]
I agree he is one of the greatest web designer I know of! I recently found his work and was blown away.
[...] 11. Komodo Media [...]
[...] 11. Komodo Media [...]