All posts

Meet the Visual Style Builder CTP

It's alive.

Before anything else, it's a preview, so it may burn you. You've been warned!

Colorization

Surprise, surprise! I hope you didn't see that one coming. I've had a hard time keeping the secret...

Bang! WebBlue has a pinkish cousin...

Every color that you may desire. By moving a humble slider that rotates the color wheel. Simple as that. And if you don't know what you're looking for, there's a "surprise me!" "randomize" button, just to make your life easier.

Fine-tuning

fine-tune

If the colorization was not enough, or you want some elements changed, you can do so for the Grid, PanelBar and Window controls. We'll be adding more controls at a regular basis, that's a promise! Hopefully, all controls should be added for the Q2.2009 release.

Just a note about editing the box model:

box-model

The interface is the same as in Firebug - margins/borders/padding can be edited by clicking on the numbers and editing the value (as in the screenshot). Editing border color is done through clicking on the border (the black/orange part) and selecting the color through the color picker.

System requirements

You'll need IE7+ or Firefox 3. Exported skins will work with IE6 - it simply does not support the editing. Chrome has some weird issues with the fine-tuning interface, and they will to be resolved soon.

Silverlight 2.0 is required for the colorization interface, importing skins or uploading background images.

Feedback

You know the drill! It's beta - therefore, there are no support tickets; forums are always open for discussion, and of course, blog comments are welcome! Also, tag your tweets with #vsb ;-)

Facebook Twitter DZone It! Digg It! StumbleUpon Technorati Del.icio.us NewsVine Reddit Blinklist Add diigo bookmark

Comments  9

  • 19 May

    This is AWESOME

    Steve

  • 19 May

    Good job, Alex! I have been waiting for the style builder for a long time... now playing with it.

    Adam

  • 19 May

    Very cool :)

    Neil

  • 19 May

    Alex, you sly dog, you!

    This looks absolutely fantastic! The hue and saturation sliders were a brilliant idea. It really allows great control over creating a color scheme closer in relation to a clients product as a base without having to spend the time tweaking every individual style. Then most of the ground work is done and after a few extra tweaks you can really have a great new look. I'm loving this. I think your customers (as well as ours) will be very excited to see the extendability and freedom you've given over the look and feel while keeping the process as simple as possible. It also allows for easy adjusting to those last minute 'oh hai - I can has purplez instead?' requests we are all too frequently given. Thanks for sharing. Now hurry up and finish! :D

    P.S. I will never.. ever... ever tell our clients changing the skins on their products will be this easy - what are you trying to do to us?! ;)

    Marcus Manning

  • 20 May

    I thought it would never happen, ever since Telerik announced this I've been longing for it.

    Thank you, thank you... 

    Olivier Vanbiervliet

  • 20 May

    Looking good  -  obviously some work to be done but when done it will be superb.  Good idea doing as a website as it must be a lot simpler than as a Windows App.

    It would be nice to have the hue/saturation shift be applicable to all controls rather than the selected control.

    Jon

  • 20 May

    Thank you for the positive feedback, guys! I am very glad that you are so positive.

    @Marcus: I'm actually having some thoughts on how far should one push such projects :-) They can in fact eat some revenue... And I won't be surprised from tickets like "I used to estimate custom skins for $x, now I can not...". I hope that this won't cause a front-end econocalypse. In any way, I hope I'll keep my job at least until I finish the project :-P

    @Jon: Thanks! The web app can be updated very easy - and is completely under control.
    We've been thinking about color shifts for all controls with one slider, and setting common options (e.g. fonts) - while it's not included in the plans for the official release, it certainly will be the first thing thereafter.

    Alex

  • 22 May

    Cool, nice job.

    Also, wow, it is incredible how much this works like our own tool (mentioned a few times in previous blog post replies by me). Down to the colorizing bit, albeit we take that a step or two further.

    An awesome 'preview' (start?) by any means. Keep it up!

    PureCode

  • 22 May

    Oh, also, instead of seeing 'custom skins' as extra revenue (which compared to the actual application one develops for revenue should be very little), use it as a part of your sale. Often one presents their design/ideas to management, and management goes for 'looks' over 'functionality' most of the time (the higher the management, the more true that statement is).

    Show them how easily one can go from an initial, fairly 'decent' skin to an amazing skin in a single click, and then tell them that skins are so easy to create, you'll toss a few in there for no additional cost. Trust me, that can work wonders for your sales, anything free will make them very happy, if that free bit means little work on the development-side of things (eg, your work), then it might actually increase your revenue.

    PureCode

Post a comment
  1. Formatting options
       
     
     
     
     
       
  2. Security image