Wet Ink Design

Silverlight Website Template

About a month ago I posted a simple but incomplete website template on the Microsoft Expression Gallery and it got an amazing response. Within just two weeks of posting, it was one of the most downloaded Silverlight samples on the gallery. Did I mention that it was incomplete? Obviously people didn't care and I saw that there was some hunger for this sort of thing...especially from designers learning Blend.

So with some spare time I went to work on new web template created all within Blend 3 and without using one line of C# code. So much of the pushback from Flash designers wanting to wade into the Silverlight waters is that they now have to learn two new languages in XAML and C#. Its pretty easy to pick up XAML as long as you have some HTML background and some common sense. The C# is more of a challenge but I think closely resembles ActionScript 2.0.

First off, download the template and launch it in Blend 3 by pressing F5. Click on the Home Page link and you will notice some links on the left side of the template. These links were helpful in putting together the template and anyone wanting to build their own animated site might find them useful.

Flash designers will notice right away that I have used some animated masks and this is really the bread and butter of most flash animation artists. While the clipping path animations in Blend don't have all the abilities that a mask in flash has, you can still come up with some of what you want for animation. I have my fingers crossed for an actual full mask feature in Blend 4. In fact, I think if the Silverlight team doesn't get on the ball in this regard, they are going to frustrate some dabbling Blend designers beyond repair. Animated masks are used too heavily on the web for them not to put some priority in this area.

So take a look at my layout in the "Objects" panel and I'll explain how I set this up.

First you see a behavior in the Layout Root called [ControlStoryboardAction]. This directly controls the animation when the page first loads on the screen. Normally you would have to set this up in C# but thanks to this behavior you don't have to. You need to become very familiar with this behavior. You will learn to love it and its pretty easy to use!

After that you will notice all my canvas's. 'LowerBacks' is simply my animated backgrounds with each page that gets animated into view. The rest are the individual page sections themselves with all the elements on each page. The canvas lables should be obvious when figuring out what page it belongs to in the site navigation.

The site navigation itself is located in the bottom canvas labeled 'OpenAnimationAssets'. Each nav button has 5 behavior controls that launch the appropriate storyboard and close any others that might be open.

So each page then has its own 'open storyboard' as well as its own 'close storyboard' that can be called via the [ControlStoryboardAction] behavior that is associated with each navigational page button. Simple huh? Really its not that hard.

All of the editable web content is located in the canvas's located under the Layout Root. I have the Opacity set to 0% so you need to first select the canvas you want to work in and then turn its Opacity to 100% so you can see what you are doing. Make your edits and when you are finished, turn it back to 0% otherwise you will see it when you launch the page and that is not what you want.

Also, the template can work with any colored background. Simply select the layout root and edit its color properties.

I hope this will excite some designers out there to create their own site layouts and show them off to the rest of the Blend community. Obviously there is a lot more you can do when working with a competent developer but you don't need a lot of C# knowledge to put together a silverlight website. If there is any interest, I can create some more and put them out for you to download as well.

View this template here.

Download the source code here.

The Uber Glass Orb

Any photoshop designer worth his weight knows how to design a glass orb. I found a really cool one on one of my favorite photoshop tutorial websites and instead of creating it in photoshop, I decided to challenge myself. Let's see if I can make this thing in Expression Blend and add a rollover effect to it.

To be honest, most of the designs I see on the Silverlight sites are not created by designers but instead by developers trying to be designers. Let me be frank, most of tutorials for silverlight around the net are geared toward developers and not much emphasis toward good solid 2.0 modern type designs.

Go ahead and install Silverlight by clicking on the tab below. It only takes a second.

So I found the design for this glass orb on Good-Tutorials.com and just by looking at the design, attempted to recreate it. This blog post is not a step by step tutorial on how to do this in blend but just to give a run down, I started out with a sphere and added a complex gradient to get the reflection of the base of the orb.

Then I added a series of additional spheres and gradients on top of that. The reflection enhancements were created with paths in Blend 3 and they added the final touch.

While Blend 3 doesn't give you all the options for creating mind blowing graphics such as Photoshop or Flash does, you can still design very good elements for you Silverlight project with what it does offer. I can hardly wait for the next version of Expression Blend and see what further developements the Microsoft team puts together.

Feel free to download the orb at the following link and explore the solution in Blend 3.

Download Solution File

Please leave me any comments you may have concerning the The Uber Glass Orb on the archive page here: Comment Here

The Silverlight Magic 8 Ball

Ok so most of you understand that I'm a designer and not really a developer. I know enough about development to be dangerous I guess. But I have been tweaking a project in my head for a while that I wanted to build but haven't till now.

A few months ago I attended a C# for Beginners class at a local area college. We built a Magic 8 Ball application that I thought would be cool to build in Silverlight. After all, the one we built in class looked like your average grey battelship that most developers have no problem looking at. But for a designer like me with Marketing and Branding experience, I just couldn't in good conscience complete something like that and be ok with it. :)

So I had some spare time and opened up Blend 3 and got started on a design that would be halfway decent and once I finished, switched over to Visual Studio 2008. Now I admit that I had to be coached by a couple of developers at work on the C# for the back-end on this but I pretty much can grasp the concepts of their code.

The design in Blend 3 was pretty easy and I took advantage of its new feature of importing photoshop artwork on the Ball graphics used in the layout. The gradients were designed in Blend along with the button effects. The layout is a grid and the text boxes are laid out appropriately along with the buttons.

Feel free to download the app at the following link and explore the solution in Blend 3.

Download Solution File

You can view the working application on my website at www.wetinkpro.com/8ball

Please leave me any comments you may have concerning the Magic 8 Ball on the archive page here: Comment Here