My first encounter with Simurai’s work was with the tilt-shift text effect he pulled off using just CSS. Yes, the same thing you see in the image above. I was in awe, and he was instantly in my list of awesome designers to follow.
So who is Simurai? His real name is Simon (which when merged with Samurai, produces Simurai), a Swiss designer currently working at a design firm Refunk, in Amsterdam. When I asked him to show me some of his professional work, he withdrew. Reason: His work involves working in Adobe Flash.
Because of the HTML5 vs Flash “war” going on, I was forced to take the other side when I started to post my CSS3 stuff. Now in my Twitter bio it only says “Designer”. Some people hate Flash so much that it makes it impossible to be taken serious in the standards world. I find it pretty sad having to be so schizophrenic about it. Maybe I just shouldn’t care anymore.
Just two weeks ago, he took a strong stance defending Flash:
Please, Flash haters, take off the pink glasses and wake up! I understand that the current state is not perfect, but thinking that HTML5/web standards is gonna solve all the Flash problems.. well, that’s quite.. ok, I’m gonna say it.. quite foolish. And in the case of ads, it could become even worse.
To make his point, he posted two demos, of the same ads, each constructed in badly written HTML5 and the other in highly tuned Flash, the results of which are obvious. I must admit I have chided on Flash myself, but I hope it doesn’t mean designers have to hide their work. But we’ll leave the politics out for now.
Although I’m not sure which specific Refunk projects Simurai worked on, he’s really great in figuring out how to drive HTML and CSS not just technically, but with a great aesthetic sense. He’s published experiments producing pure CSS image blurs, refractive glass effects, and of course, the recently published umbrUI featuring the rocker buttons.
…after I discovered that CSS3 can do animations, I did a photo-only tumblr theme called Organ. Nobody really cared until Cameron Moll posted it on his blog and I got asked to create an official theme. It got featured in the theme garden and I was like… wow… it seems people really like this CSS3 stuff.
I was of course curious to know what kinds of tools and software he used to create all of his magic. You would assume that every designer has a dual screen display, graphic tablets, and a designer lampshade to do anything at all.
At my day job I work on a Mac Pro with a huge 30″ screen. But at home, where I do all my CSS3 stuff, I have just a 13″ MacBook. In a split view (code/live preview) it can feel damn claustrophobic. But maybe it’s also a good thing, because there is no feeling of having to fill up all that space. You get to concentrate more on the details.
To create the experiments he’s been using Macrabbit’s CSSEdit, which offers the splendid live-view for editing code while seeing your results rendered in an actual browser.
I kinda just throw properties in there and start tweaking the numbers till I get to some interesting result. Without Live Preview, I would have to save the file, switch to the browser, refresh, switch back to the editor and start over.
Okay, so you got the hardware, and the software. But what about execution?
I’m pretty much self taught. Before I started my web design career, I was a sales clerk for 10 years. Now when I look back, I could kick myself not going to an art or design school. But maybe that’s also a good thing, because I’m used to keep learning on my own. And I guess that’s also the most important tip to people just starting out. Once you’re done with school you have to keep learning. Not a forced “study” like in school, but you need to love trying out new things. Technology is moving so fast, sometimes it can be quite overwhelming to keep up.
HTML5 and CSS is certainly an exciting technology and I’m always thrilled to learn something new in that field. With the right audience (this blog sees negligible IE traffic), it’s a great way to deploy these new technologies for a real audience. And I have to thank designers like Simurai who have been pushing the field with their crazy experiments.
To know more about Simurai, visit his blogsite, keep an eye on his Dribbble shots, and without fail, follow the very resourceful tweets of @simurai on twitter.