Felix Corke's Blog

Expression Newsletter Article - A Step-by-Step Introduction to Styling, Templating, and Animating in Expression Blend

felix.corke — Wed, 19 Nov 2008 16:37:00 GMT

Just a note to say my first part of a six part Silverlight tutorial for Expression Newsletter has just been sent out, you can read the full tutorial here:

http://expression.microsoft.com/en-us/dd279541.aspx

- hopefully after this tutorial you will be familiar with the basic concepts of styles, templates and storyboards within Blend and produce a styled control like this:

Next time, we'll add some advanced styling and animations, but this should be a gentle introduction to Blend for noob designers and developers interested in designing for Silveright, WPF and Surface!

Please let me know how you get on with the tutorial, this is how my colleague Sari approached the tutorial - showing how free you are to be creative in Blend!

Silverlight and Flash side-by-side font display comparison

felix.corke — Mon, 03 Nov 2008 21:31:00 GMT

Nothing too exciting about this, I am building a Silverlight project for a client and thought I'd compare how the Flash player and the Silverlight plugin handle font display.

Without tweaking any advance settings, here they are - guess which is which then right-click to see the answer ;)

The font used is FF DIN Medium, embedded.

Designing a Silverlight 2 Beta 2 Skin with Blend - Free download (with source files!)

felix.corke — Mon, 14 Jul 2008 09:36:00 GMT

Click here to view the Silverlight Skin demo
You will need the Beta 2 plugin from here.

Since Silverlight 2 Beta 2 came out and trashed my Beta 1 skin that I'd lovingly hand-crafted in code view, and with the new June preview version of Expression Blend with the super-helpful Visual State Manager (VSM) I decided to have another crack at the skinning process using the new tools and controls available.

First up was a look at the VSM, using Scott Gu’s handy walkthough – this seemed simple enough, basically it allows you to visually style controls as you would in WPF, rather than all hand-coded like you had to with the previous versions of Silverlight. One of the biggest helps was that all the applicable/available states for the controls are listed for you in VSM, and adding transition times to state groups as well as individually was a real help.

Also the new controls merit a quick intro, the ones I looked at were the Tab Panel & Tab Items and the Grid Splitter (See Tim Heuers post on how to add them to your project as they aren’t included by default). Also available are the Date Picker and the DataGrid, although I didn’t skin those as for now you can’t style them visually in Blend – as CorrinaB says in her post:

Next, ToolTip is no longer stylable. I plan to create my own ToolTip control that is stylable in the near future, but until then you'll have to make do with the default style we provide for you. Lastly, you cannot style the Calendar, DatePicker, or DataGrid controls in Blend. In fact, you can't include style xaml for Calendar and DatePicker in a project you plan to open in Blend or none of the UI will render (this problem will be fixed in the future).

I may come back and add custom styles later in code but it seems like it may be quite time-consuming. Talking of Corrina B, I can’t emphasise how helpful and informative her blog is. If you want to get started in Silverlight styling, download her skin and get dabbling. I used her Slider control xaml as a basis for mine as I found that particular control quite tricky to get right on my own.

One cool new feature is that you can customise the loading screen so rather than the boring default loading screen you can brand it and style it and give it a meaningful progress bar. You can read about how to make your own here: silverlight.net/quickstarts/BuildUi/SplashScreen.aspx

All in all, Silverlight 2 Beta 2 is a big improvement, and the VSM & June edition of Blend will make Silverlight a lot more approachable to visual designers.

You can view a demo of my skin here and download the project here (.zip 2.5Mb)

silverlight streaming test!

felix.corke — Tue, 25 Mar 2008 17:46:00 GMT

My first attempt at 3D animation using Maya, hosted with silverlight streaming

Remixing Mix - how I redesigned VisitMix.com with CSS

felix.corke — Sat, 09 Feb 2008 15:34:00 GMT

Microsoft MIX is a trade show for emerging Microsoft technologies. It differs from most trade shows by lavishing millions of dollars on parties, scantily clad ladies and a hefty bunch of nerding and talking about nerding, in Vegas. Basically, if you're going to be at a computer software corporate event, this is probably going to be one of the better ones.

So, trying to avoid the £3,000 or so the trip will cost, I'm optimistically entering the MIX08 redesign compo which, in the same vein as Zen Garden, you have to take their html and without touching it recreate the page using your own CSS & images; a valuable lesson on how using clean HTML means you can take any well architected page and completely redesign it with just one style sheet.

There have been some fantastic entries in the gallery so far - my money is on the brilliant MIXos by nate bates.

View my entry online visitmix.com/2008

So, here's how I did it starting from the top:

The logo

I always start with the branding, I normally like to redraw the logo in Illustrator (why does no-one ever have a vector version of their own logo?), this gets me into the brand vibe and means I get transparency and scaleability. This mix logo was an easy one, only four shapes and some text, easily redrawn using a grid.

Layout

Then I had a play with the existing stylesheet to see what could be done with the xHTML elements - as you are not allowed to touch the code you are constricted by the quality of the structure and by the dynamic areas that have to have elastic heights such as the news feeds. After figuring out a rough layout idea, I drew a grid in an illustrator document, to fit into a 960px wide container suitable for 1024px resolutions.

Then I did one of my favourite little tricks, in my web browser I went to the MIX homepage and File > Print > Save page as a PDF. This gives me all the editable text and layout of the current site in a document that illustrator supports natively.

Once open in Illustrator, I tidied the text into blocks and copied them over to my layout document, and positioned them in my grid.

Graphics - First stage

With my layout roughly defined and my logo redrawn, I was starting to get an idea for the look and feel of the page. I worked out a neon colour palette based on the pink of the logo, offset with a black background. I took a load of the cubes from the redrawn logo, coloured them in the new palette and randomly scaled/rotated/postitioned them into a cluster. This would set the theme and the tone of the site.

CSS - First stage

With my framework in place, I had a good base and style to work from, the rest of the job was divided into refinement and build, normally concurrently. First, to sort out the text and the layout. Using the brilliant SKedit html editor on my mac and Expression Web on my pc, I started a project and copied down all the template files and created a new css. I always use css reset, and have a handy snippet that I always use as a base for new sites to clear all the default styles that I have developed over the years, although Yahoo (developer.yahoo.com/yui/reset) and Google (code.google.com/p/blueprintcss) offer resets which are also a very good starting point.

That done, I created a MIX stylesheet containing all my new styles. I set all the text to SegoeUI, serif and set the background to black, and the width to 960px. Using the excellent Firefox extensions Web Developer Toolbar (chrispederick.com) and Firebug (getfirebug.com) and IE developer toolbar - all free and all essential plugins - I laid the divs out using floats/blocks/widths/heights as per my design.

Graphics - Second stage

The black was sitting too heavily, so I lightened it to #555. I also had a flash of inspiration, and decided to go down the 3D route. Rather than firing up Maya (overkill for this project) I decided to use Illustrators 3D Extrude and Rotate filter. It took about an hour to do all the blocks and get them looking just right. Once done, there wasn't enough definition or contrast between the cubes, so I added a large black glow to the shapes.

I used the same technique for the RSS logo so it would fit in better. I also used some of the 3D blocks to make a new register button, Signal image, and for another cluster in the footer.

The design was really starting to take shape, and it was time to look at the layout of the body text and news. Dark background shapes really separated the sections and defined the areas. I used this technique in the navigation bar too. I added some detail with icons and the RSS logo. I also added the new TAO, Signal, blog bling and keynote speakers images.

It was going to be a heavier-weight page than I would normally create with all these images, but I guessed the target audience would be mostly tech savvy and therefore likely to have broadband.

CSS - Second stage

It was time to add all the background images to the stylesheet, and tweak them until they looked like the layout. I set the Participation <P>'s and H3s to display as blocks and to float next to each other, rather than in a list to give it a unique yet elastic layout should new/longer articles are posted. I added more colour and a 1px dotted border to surround and separate elements, and added icons as background images to headers.

I used some underused css tricks such as text-indent to lay the icons out so they wrap well, and font-variant: small-caps to change the Venetian text to look more formal. I then set the :visited, :hover and :active states of the links which can be overlooked, but are vital for usability and it gives a nice bright green flash of confirmation when a link is clicked which looks great on the padded links of the nav bar.

I used quite a lot of transparent PNGs as link backgrounds, with darker versions of the same image on :hover to give a roll-over effect without resorting to javascript.

After a little more polish I checked the CSS using the w3C.org CSS validator and fixed a couple of bugs until it validated, then checked the design on IE 6, IE7, FireFox, Safari, and Opera on Mac & PC. Unsurprisingly, IE6 didn't take a shine to the transparent PNGs and gave them a solid white background. It also had some box model issues and broke the layout. As the developer who built the HTML page hadn't included an IE6 javascript transparent PNG fix, I decided to go down the controversial * html element {} hack which only IE6 uses to set all the background images to none, and narrowed some column widths. This is hardly a perfect solution but it degrades pretty well and looks a damn sight better than it did before. The site also scales pretty well across all browsers without wrecking the layout much - good for accessibility (and for my dad who whacks his text-size up to massive so he doesn't have to use his glasses to browse the web).

I would like to have tidied the CSS and removed some redundant styles, and optimised it a bit more, but it worked, it validated and it was cross-browser compatible and I was running short of time.

Conclusion

To make this competition easier next time round, I would ask that the HTML supplied would include an IE6 javascript transparent PNG fix as mentionned above, dropped the use <br> tags (I had to flatten these using line-height:0;), tried to avoid the overuse of .reStyle classes, and more semantically split up the content and divs (I would have grouped the news and events items into div.newsItem or similar) to give greater control over the page.

Otherwise, it was an interesting and satifying exercise in re-skinning a site, and having spent the last year focussing mostly on XAML/WPF/Silverlight and Flash, it's been great to practice CSS and restriction-free design again. So, best of luck to all the entrants, there are some brilliant redesigns - and who knows, maybe I could meet the winners there - fingers crossed!.

Essential freeware

felix.corke — Mon, 08 Oct 2007 09:37:00 GMT

Here are a few free apps - mostly design oriented - that I have come to rely on over the years which really increase general productivity.

launchy
http://www.launchy.net

Absolutely essential shortcut/launcher app that sits in the background, and is called up on Alt+Spacebar. When you hit this shortcut, a list of applications/recent docs/control panel items will appear from the first character you type, eg, typing mi will show Microsoft Excel, Word, Powerpoint and recent files made with this software

shellxt
http://free.firmtools.com/shellextension

Again, essential for all designers on XP, this extension adds a preview of any bitmap graphic file (JPEG, TIFF, PSD, PNG, GIF, BMP, etc) in your context menu, from your desktop, file browsers and even open and save dialogue boxes. This is great for checking images before you write over them

ps hot launch
http://www.pssoftlab.com/pshl_info.phtml

This is a file/folder launcher, it crosses over slightly with launchy. I use it to launch my file server, my documents, my desktop and a couple of browsers. Once you get used to it, firing up your browser from Ctrl+Num0 for example will become completely subconsious

font browser
http://www.stcassociates.com/lab/fontbrowser.html

A 22Kb .swf file that you can keep on your desktop that previews all your installed fonts at a glance

send to ftp
http://www.snapfiles.com/get/sendtoftp.html

Another context menu extension which once you set up an ftp address, you can right click any file and upload it your server in an instant. Great for hosting screenshots for example

PSPad
http://www.snapfiles.com/screenshots/spad.htm

A very powerful HTML editor - see the link above for screens

pixie
http://www.nattyware.com/pixie.html

A great lightweight (9Kb!) colour picker, which lets you copy to your clipboard a hex-colour from anywhere under your cursor

jruler
http://www.spadixbd.com/freetools/jruler.htm

Another lightweight tool for measuring screen distances

quicksilver (mac only)
http://quicksilver.blacktree.com

If you have a mac, install this. It will change the way you work for ever, and it's only a matter of time Apple introduce something like this into their OS. It acts and works like Launchy (see above) only infinitely more powerful and customisable

doodim (mac only)
http://www.lachoseinteractive.net/en/products/doodim/download/

A cool app which darkens your screen to various degrees, only revealing the front most window - ideal for watching movies or when you want to concentrate on the document in hand and hide the background clutter.

Note: I have only tested these on XP and OS X 10.4 where applicable so your mileage may vary depending on your setup.