I’ve just uploaded one of the first revisions of the new blog design to team.silverlighet.net. It’s a more focused design this time and one in which i had the luxury of spending more time on than the one before.

In this post I’ll walk through some of the experiences I had designing it and hopefully provide an insight into the amount of effort that went into making it happen.

The Design.

image

We’ve got a campaign in market with the tagline “See the light” and It’s pretty righteous in my opinion. We had originally commissioned the design to a vendor, but I simply felt that it was heading in a direction opposite to our brands. In light of this (heh), I objected and volunteered to have a go at designing the look and feel myself.

 

It was accepted the next day, it was also my own stupidity for volunteering as all of a sudden I went from being a peer reviewer to now being the “vendor”.

Bad move if you have more workload than you can handle already.

Suffice to say, I decided to bring back the fun to Expression and Silverlight as I that our brands have somewhat become boring – mainly because I live and breathe them daily.

I went in the direction of creativity as when I look at the Silverlight branding to me in conveys experience starts here. I then look at Expression’s brand and it’s about well, expressing yourself in a creative way but also in a serious manner.

image

I then looked at our new Silverlight 3 posters and thought, it’s about time we went back to grass roots, put the ubiquity and press politics aside and just focus on how much enjoyment customers are getting from building with both.

Note: Why I choose Green for 3 was that when you combine blue & yellow, it creates Green. Actually It doesn’t it’s a myth, it really creates black. I just thought it was my inside joke given there’s a lot of myths floating around about the products anyway – call it my wit working in over drive.

When you create a RIA or Branded Experience, you can’t but help inject creativity into the mix, and I simply wanted a design that echoed this.

The Development.

image Given I’m also the vendor which translates now to being both designed and developer, I then had to come up with the goods of development.

I simply owe a deep amount of gratitude to both Graffiti CMS and jQuery as these two pieces are a C# blog developers dream.

I did hit a few “snags” though in the development lifecycle. The first being the fact that I needed more out of Graffiti CMS than it could offer out of the box, for example – I wanted to put a couple of extra fields in the comments and out of the box it’s not possible.

JavaScript Rox!

I then had to write my own bypass to the workflow, using LINQ to SQL, jQuery and JSON I went about my business.

Passing JSON back and forth between ASMX (Web Services) is somewhat a painful learning curve, but none the less I have it done now so chalk that up to lessons learnt.

image jQuery is by far the most superior JS framework I’ve ever used – i’m talking 10+ years of hacking JavaScript to mind you. It’s simple, elegant and flows naturally and am glad we as a company are supporting it more and more.

Graffiti CMS

Graffiti CMS, is simple and elegant for what it does. It lets me get on with the templating UX and less on hand rolling the codebase from the web.config upwards. I’ve reached out to Telligent to see if i can pay for the source code as I’d like to also contribute back to this blog engine as it in my view has way more potential ahead of it.

The Blog.

image Well you can now see the blog for yourself, live, there’s still a bit of rawness associated to it but that’s simply due to lack of content for now. As time marches on leading up to our launch, you’ll find a bounty of content soon enough to subscribe your RSS readers to.

Make a wish

A lot of or official announcements will channel through this blog, so part of the features was that I put in what I call the “Wishlist box”. The purpose of this box is to allow anyone whom wants to comment to aslo make a request to the Silverlight / Expression Teams. This data is feed monthly into our planning / review teams, so use it wisely.

image

Twitter.

I have a few ideas on how to integrate Twitter into the comments, I won’t say more as I want to execute first, tell second – suffice to say, I think it will be fun.

Comments.

The comments themselves use jQuery a lot, for me it was a case of wanting to do something different with blog commenting and so this is first part of the direction I’m heading. There’s more to come and as someone whom sprinkles my comments throughout the blogosphere, I have a few ideas on what I feel would be great if only blogs would change in xyz direction

example: The <textarea> grows as you type as well as there’s a bit of a paper with lines background. I wanted to encourage people to comment and also make them feel part of the blogs design as well.

Good Web Citizen.

Hanging out with some MVP’s recently convinced me that we at Microsoft need to take a more firm stand to becoming better web citizens. I decided to work the extra mile in this blog to ensure it validates with w3c and so if you run the site – as of the time of writing this – it will get the green validation tick.

image

The Bad.

I’m not happy about the navigation at the moment. I had to pull it today before launch, but it will be there soon. To me this is bad UX, but I hadn’t the energy to debate it further as it was either ship or hold up other campaign dependencies. Ship won.

No Silverlight.

image This blog is a great case study for jQuery, but it’s quite weird I don’t use Silverlight right?

I have the Silverlight bits half done, I’ll be adding them soon but I wanted the degraded experience up first, see how that’s baked and then roll out the Silverlight additions.

I’ve adopted this approach for many years, where I always started out with the basic HTML/JS experience. If no disruptions have occurred that are noticeable, i then roll out the Flash experiences. As all to often, when the site failed or people complained, the plug-ins usually get thrown under the bus first where it could simply be bad fundamental design.

Instead, layered approach is cheaper and more focused. It also provides a good baseline to determine the “before” and “after” in terms of measuring success/failure of a given plug-in based experience.

I’ll be layering more and more as time permits, but I’m excited about this design and am quite proud of it.

Check out the blog and leave your feedback!

http://team.silverlight.net