Category Archives: Projects

Live Messenger done with Silverlight 2.0 – Login Screen Layout


Sub Heading 4

In this post I will take the login screen mockup and create a Silverlight layout from it. But before I delve into the screens let’s talk about layouts in general.

When building applications one of the hardest things to get right is the layout of controls and how they behave when the application resizes.

When designers create there mockups they generally create screens that are snapshots taken at a single point in time. Some of the more experienced designers produce multiple mockups that show the same application behaving as they’d expect when resized at the same single point in time. I prefer the multiple mockup process showing the effect of resizing but at the end of the day it all depends on what your designers/UX people are willing to do.

“Colour the World” – my version of an iPod Touch Colour Picker done with SilverLight


Sub Heading 5

 

I shouldn’t have to tell you of the importance a great colour scheme has on the success of your application or web site.

To create that amazing user experience you have to have a great UI and one of the most important ingredients to a great UI is having a perfect “colour palette”.

Conceiving a perfect colour palette is an art form, great artists devote there whole lives to the study of colour (amongst other things of course).

I am not an artist, and my colour theory is shockingly poor.

I actually cheat when it comes to my colour palettes…  I use

1) Adobe’ Kuler – a RIA flash/flex application that helps you create a good colour palette with virtually no understanding of colour theory.

image

2) ColourLovers.com – a web based community that specializes in a colour palettes and patterns as well as the community around the palettes. They also have a javascript colour picker called Copaso, brilliant application.

image

Kuler also has community features but it is not as lively and involved/fun as ColourLovers.com. My preference is ColourLovers first then Kuler a close second.

I use both to conceive my colour palettes, BUT today I’m going to embark on creating my own colour picker and  palette community. I want to learn the theory behind RGB and Hue/Saturation/Brightness. I want to be able to look at a colour picker and know what those values actually mean.

I want to build this colour picker in such a way that it will look amazing on Apple’s iPod Touch or iPhone. I’m hoping that one day SilverLight will work on an iPhone or iPod Touch (here’s to wishful thinking)

Great Sample that got me started

 The fist step is to see what other’s have done. There is a brilliant sample that gave me most of what I needed to know regarding RGB (Red Green Blue) HSB (Hue Saturation Brightness). The “Scribbler” sample had exactly what I wanted in it for learning the in’s and out’s of basic colour pickers. I can’t find the link to the sample but if you “Google” it or “Live” it then you should be able to find it again. If you can’t shoot me an email and I’ll send you the copy I have.

Colour the World – SilverLight RIA

“Colour the world” is the name I’ve decided to give this SilverLight RIA.

I want to create a colour picker that has dynamic resizing so that it can scale to the size of an standard desktop application or an iPod Touch screen. (The version of my sample demonstrates this ability but the resizing is not 100% perfect)

Also the design of the screens are meant to compliment apple’s iPod touch, in that it has minimum clutter on the UI only showing the bare minimum that it can get away with.

Here are the screen shots of my SilverLight colour picker… It’s only the first version so expect it to have heaps of bugs and for it to change over time.

[screen 1 is the main colour picker screen]

image

[screen 2 is the details screen, shows the RGB/HSB information]

image

[screen 3 is the "save screen", let's you save it to the community where others will be able to use it or comment on it]

image

[screen 4 is the "community screen", let's you see what other palettes people have saved. Other than showing what others have saved it really is just a view of palettes, over time I will build out this communityh to allow for comments. For the demo purposes it will suffice]

image

[screen 5 is the same application but shown in a resized format, just resize the browser to play with it. As I mentioned earlier it isn't perfect but it will do for the demonstration]

image

Click the following image to play with the demonstration. You need SilverLight 1.1 to run it.

As always’ the source code for this SilverLight Application is free. Currently it sits in a very messy state, but still readable. It needs a lot of refactoring, I’ll save that for the next version (hopefully after SilverLight 2.0 is released).

Source code: My SilverLight Colour Picker Source Code “Colour the World”

You can find this in the “A Beautiful Website” section of this site, over time I may move it into it’s own area but for now it will sit there!

  

Conclusion

This was my first foray into the world of colour theory and I have to admit I’m loving it. “Colour the World” is a project I envision continuing to update over time,  ultimately adding new features that will rival those of “ColourLovers” and Adobe’s “Kuler”. I do this not because I want to compete with them BUT because it’s a great learning experience for me.

What amazes me is the ease at which I created this application using C# and Blend. This new world of SilverLight is really going to be huge, applications of the future are going to be immersive experiences that really captivate the visual senses. I can’t wait to see what other’s build !!! 

Please leave comments on what you think of the RIA, also remember to share what you can :)

Oh and if you like the article or application feel free to kick it :)  kick it on DotNetKicks.com