Pixel Lab Silverlight Site Launched
Funny how your own site is always the lowest priority when your job is to create websites for other people. It’s like the auto mechanic with the broken down car. Well, last week (while I was on vacation with the family) I was finally able to sneak a couple of hours to get the site for Pixel Lab (that’s my budding young company) out the door. You can see the (kind of) finished product here.
I say kind of because I haven’t had a chance to build out the “case studies” section under services yet and, frankly, that’s probably the thing people want to see. For now, I’m just happy to have something live! Case studies will be coming soon.
It’s fun to be your own client. The design reasoning went something like this: first of all, it’s a lab, so it needed to be kind of sciency. For me, the quintessential science feeling happened in labs in the late 50s and 60s. The feeling I wanted is something like Flubber meets Heisenberg. So, I was drawn to retro science photographs and equipment.
It turns out that there is also a very strong design aesthetic associated with that era: the International Typographic Style is an an aesthetic that has, arguably, become an archetype of design. It’s instantly recognizable as Design (notice the capital “D”). International typographic (sometimes called “swiss style” or “swiss typographic”) is known for strong order, use of grid, black and white imagery, bold colors and, most of all, Helvetica (and a handful of similar fonts).
So, I was settling in on a style: swiss typographic + retro science stuff. It was a nice package, all from the same era. To move the aesthetic forward a little, though, I introduced a second font (the one that matches the Pixel Lab logo) for the main headings on each page and I built out some gradients (some softening on the pixels in the logo and highlights on the zoomed in content), and added a bunch of motion. Then I went about building content.
For fun, I also played around with some sound. I’m not normally a fan of a lot of sound, but my wife had to talk me down from actually using music! So, I got a little caught up in the whole sound thing I guess. In the end, sound is off by default because I still haven’t gotten it quite right (plus as we all know, sound can be a little annoying if you weren’t expecting it). I really like how sound can influence a mood though. The song I was trying to cut up for a soundtrack, by the way, was “Don’t Give Up” by Whites Boy Alive. It’s a cool song and the perfect mood for the site. I think my wife was right, though, that not many people can pull of a soundtrack on a website (although, for the record, Scott Hansen can).
At a technical level, I learned some stuff about sound and wrote some handy code that is worth sharing so expect a forthcoming post on Silverlight and sound effects.
Incidentally, the design happened quickly on this one. It was much less labored than other designs that I’ve done with myself as the client. I’ve been trying to figure out why that would be. Perhaps inspiration just struck, but I also keep being reminded of Hillman Curtis and the emphasis that he places on discovering a theme. With this project, I discovered the theme early on and I think that may have made the difference.
Either way, it was a fun project and, even if there is still a little more to do, it feels great to have it live. So, let me know what you think!
17 Comments
Florin / MAY 15 2009
Awesome job dude! Real work of art.
Love the colors. :)
Pavan Podila / MAY 15 2009
Looks awesome Robby. Best wishes.
Bobbi Perreault / MAY 15 2009
Nice work on the site. I don’t know if the contact form is working , though.
We need some more great examples of professional usage for Silverlight tecnology.
Tom / MAY 15 2009
First impressions: I usually don’t like this style of site (the 100% Flash feeling) but this is very nice. The animation doesn’t feel too obtrusive but you still gave an option to turn it off – great! The theme really works well. The site is easy to understand and navigate. Not exactly sure how to describe this but it feels like it makes sense spatially. Browser history/navigation is good. Lots of nice little visual details: the custom loading indicator, subtle parallax, oscilloscope flashes, slide-out fortune, custom font. Performance-wise, it loads fast, feels smooth during transitions, and doesn’t waste CPU time at idle. IMO leaving sound off by default is always a wise choice that demonstrates restraint and respect for the visitor.
The contact form was very inviting but I figured I’d comment on the blog post – this is how I ended up at the site after all.
Thanks for sharing! I’ll be using this as an example of a good site made with Silverlight, and also an example of good attention to detail.
John Stockton / MAY 15 2009
Incredible!
I know what you mean about those that build never building for thenselves but you really pulled it off. Also, I agree that the sounds aren’t quite fully baked, but they are moving in the right direction.
This is a great example of what can be done with Silverlight, thanks!
Mike / MAY 15 2009
Nice site! definitely one of the more polished sites in Silverlight I’ve seen so far. My only complaint is that there is no “go back to the homescreen button” when you go into one of the main views (about, services, contact). Took me a while to realize that the buttons at the top right did that. would be nice to have a back button on those major screens but its not really a big deal
Rui Marinho / MAY 15 2009
Hello, as always you have some great work here.. really like your design ideias, and the new website is very nice to the eye, also it stays simple, fast and with all the necessary material.
Nice to have some good works in silverlight to take some inspiration :)
best regards.
Luke Puplett / MAY 15 2009
Hi Robby – I groaned in that way you do when you see something cool for the first time: that subtle parallax. The overall aesthetic is very nice, although I’m interested in how you will tackle SEO.
As for sound and transition (and music), 2Advanced set an example:
http://www.2advanced.com/
-thanks, Luke
Dave / MAY 15 2009
Hey Robby…
Love the site… love the little touches.. the expanding out from the color boxes and keeping the color theme… the blip(s) on the scope, the fortune from the cookie!
I kept trying to find a zoom spot on the main graphic :)
Definitely a great example of a site done by someone that knows what they’re doing!
I look forward to reading and seeing more…
-Dave
Hims / MAY 15 2009
Really great! Awesome!!! Can you please provide me the code for this?
senthilnathan sk / MAY 15 2009
superb site. makes me to learn the design side of Silverlight :-)
Kurt Brockett / MAY 15 2009
Thanks for writing up the inspiration behind the site. It just adds that much more depth to the “announcement” email. I like the sound and would say to go default on especially given that it’s not music but only goes when interacted with. As long as the audio toggle is prominent you should be good to go.
I’m not sure about the music background as it just reminds me of myspace (um not that I’ve ever been on there).
Great job and you should take more “vacation” to work on cool stuff.
Kurt
Robby Ingebretsen / MAY 15 2009
Thanks for all the nice comments guys! Yeah, taking “vacation” is pretty fun. I’ll try to write up some of the other lessons learned while putting it together. Overall, though, it’s a really simple site. If I can find time to clean it up, I’ll even post the source :).
Vinney / MAY 18 2009
Really great website! I love the transition animations and the subtler environment morphing induced by the mouse movement. There appears to be an incompatibility with Google Chrome. It does not respond at all.
Really liked the concept for and execution of the contact and services pages. The fortune cookie really drives it home. It gives me an idea for a fortune cookie web app for Facebook or something.
As for the SEO issue, you could technically have an HTML version of the site display along with the “Download Silverlight” graphic which, I believe, would be discovered by the search engines. At least thats the idea that I’ve been playing with :)
All and all, a great start! Way to push the Silverlight envelope! It’s obvious why Microsoft asked you to give a 3 hour presentation on design at MIX!
Vinney / MAY 18 2009
Robby, I wonder if you had struggled with the idea of starting this project using SL2 technologies knowing that SL3 is just right around the corner? I have been really battling the decision to begin development on a new SL project mainly due to the built in forms authentication of SL3.
How do you deal with the onslaught of rapid Silverlight releases?
Justin / MAY 20 2009
Robby, nice work! (BTW: Checked on Chrome first and it didn’t work …) But slick interaction design. Can’t wait to see the case studies.
Smith / OCT 27 2009
You’re right Justin, very good work :)