Mar 14
Expression Design 2 Beta – HUGE Improvements
I’ve had a chance to play around with Expression Studio 2 Beta for about a week now and I can tell you there are some huge improvements in the new releases. Today I’m going to limit my scope to Expression Design 2 Beta. It’s only fair considering how harshly I criticized the first release of this program.
I have yet to experiment with the XAML part of this program so these observations are purely based on my experiences with Design 2 as a design program.
Pixel friendly
If you read my other posts on Design you’ll know that the first iteration of the program operated on a pixel-free basis meaning that it allowed you to export bizarre image sizes like 19.325 px and so on. Although this wasn’t a problem if you were designing vector graphics for vector applications, it was a huge pain if you were desiging for export to bitmaps. Well, those days are gone my friend. Design 2 not only works in pixels if you want it to, but it snaps to pixels as well so you avoid exporting white space.
Clean bitmaps
Another big issue I had with Design 1 was the horrendous quality of the bitmap exports from the program. When I first blogged about it, the Expression Design dev team actually contacted me directly because they couldn’t believe their own eyes. But sure enough, the program was mangling bitmaps to such a degree that they were pretty much useless. Well, once again the dev team listened and the new bitmap exports are crystal clear. I’ll post a new set of exports when I find the time but I can tell you right now that they are on par if not better than PhotoShop.
Effects outside the artboard
One weird thing about Design v1 was that the applied effects didn’t function outside the artboard. I guess it makes sense in some ways but for an Illustrator guy like myself it was just damn weird. And it did occasionally lead to problems. In Design 2, the effects are no longer artboard-bound which means you can create elements with effects, store them off the artboard and still see what you’ve done to them without having to drag them back in. You can also make crop areas outside of the artboard and export these elements to bitmap, XAML or whatever you want.
New exports
Whereas before you had to tur off the layers you didn’t want to export, you now have several export options in the export window. First off you can export everything visual on the artboard like you could before. The second option is Export Selected which lets you only export the currently selected element on the artboard on a transparent background. The third option is Export Slices which lets you export a series of slices in one click. Simple improvements that save a lot of time.
Sub-layer control
Coming from PhotoShop and Illustrator I found it incredibly annoying that you had no visibility and locking control on the sub-layers in Design. This has been fixed and you can now toggle visibility and lock on all sub layers independently. Again a sublte improvement that makes a world of difference.
So far the Design 2 experience has been a joyous one for me. I have yet to encounter any bugs and the program is more functional than the original. There are still things it can’t do but the inclusion of proper layered PSD importing makes these shortcomings less of an annoyance. I am currently desigining a new website using only Design 2 Beta and once it’s up and running I’ll give everyone a full run through of the experience.
For now I highly recommend getting the upgrade.
Nov 15
NaturesCarpet.com – 2nd Expression project live to the world
Finally, after weeks of designs and redesigns my second Expression-only project went live to the world last week. The site – for Vancouver based carpet retailer Colin Campbell & Sons’ new line called Nature’s Carpet – was entirely designed and coded using Expression Design and Expression Web (apart from the tacky Flash intro which was done in Flash). I think this site is far superior to my first Expression project iZufall.com because this time I knew of some of the pitfalls and I learned some valuable lessons on the way.
You might remember that I had a problem when exporting my Design elements for use in a html environment. Expression Design is a vector based program that does not constrain to true pixels. Coming from a PhotoShop environment I made the stupid mistake of eyeballing my designs when creating iZufall and by the time I discovered my error I was too far in to change things around. As a result there were some whitespace issues with the site.
Not so with Natures Carpet. This time I took the time to set all the margins and sizes using guides before starting on the actual design work. This requires that you know roughly what the site is going to look like but then all my designs start on paper so that’s not too difficult. With all my margins set beforehand it was easy enough to make and export graphical elements that fit snugly in my divs without creating unnecessary white lines where they shouldn’t be.
Unlike the iZufall project I chose to start this one completely from scratch: A blank html doc and a blank css doc. Such an endeavour would have been unthinkable in my pre-Expression days but knowing how powerful the css functionality in the software is I felt comfortable starting from scratch. Setting up all the styles was a tad tedious to start off with but once things got going it was quite pleasant. More than ever before I am now a big fan of anything CSS.
One of the neatest things I built for this site (if I may say so myself) was the nav bar on the left side. As you’ll notice when clicking around the entire nav bar is a simple list with tons of styling. It took me a while to figure out how to make the different levels work properly and how to make the current page appear selected all the time but in the end it all worked really well.
Due to lack of PHP and .NET support on the server side the site remains straight html at the moment but I designed the css code to be compatible with future database implementation so that any transition will be pain free.
I’ll post some examples of how I made the nav bar and current page selections work later on when I am in front of my own computer. For now take a trip around the site and see what you think. I’d love some feedback.
Aug 25
Video Tutorial: Editing and Uploading the Zufall Side Buttons
Click here for a full screen version of this video.
Here (finally) is my second video in the Zufall series. It was meant to be a walk-through of the implementation process but then I ran across a small problem and decided to make a video about how I fixed it instead. Zufall part II about Expression Web is still on it’s way but this should tide you over.
In this video I demonstrate how I created the side buttons using Expression Design and how to do some quick alterations to the site in Expression Web using the fantastic CSS features. It’s quick and dirty but should give you a small glimpse of how to do things.
The reason why it’s taken so long for me to post a new video? Expression Media Encoder is damn near impossible to use! I’ll be ragging on this in a separate post once my head cools but just to give you a small taste it took 17 tries to get the video above to export to below the magic 22mb that is required for Silverlight streaming. And it wasn’t for lack of trying. But like I said, more on that later. For now I hope you get something out of my most recent video and be sure to check back for more.
Aug 06
iZufall Project – From Concept to Design using Expression Design
It took way too long but now it’s here: My first video tutorial covering the overall design process of the iZufall.com website using Microsoft Expression Design. In the video I cover the overall design idea, how to import vectorized graphics form Adobe Illustrator and some other neat little things in the program.
Staying true to the Microsoft Expression experience the video is a Silverlight application hosted on Microsoft Silverlight Streaming. As you can see from my previous post I had some difficulties actually creating, uploading and posting the application but then a little bird tipped me off to this article that explains how to post Silverlight Streaming apps using iFrames and now it works splendidly.
So, without further ado, here is the first video. If you want a larger version to see all the small intricacies click here to openn a separate window. I advise you to do so so you can see what I’m doing.
Just a note: You’ll need to install the Silverlight RC plug-in to be able to play my video. It’s a small 2mb download that is completely safe, free and platform independent. You can download Silverlight by clicking here.
Jul 30
Zufall is Live! First project using only Microsoft Expression Suite is on line
When I promised Microsoft I was going to use their new Expression Suite exclusively when designing my next project I wasn’t really sure what I was getting myself into. A colleague put it quite bluntly: “Are you a masochist?” I don’t think so and after finishing the Zufall project I have to say my early fears were largely unfounded.
I will blog more extensively on the experience in using Expression Design and Expression Web to create this site (which by the way is for a neat little game called Zufall which is like a Magic 8-ball for your life) and create a couple of videos of the process so you can really see how these programs work and how I use them, but for now I’ll just leave you with some basic comments.
The entire site is based on a style sheet built from scratch using Expression Web. This is quite a milestone for me. In the past I’ve shied away from the CSS and often altered existing scripts rather than startig my own. But Expression Web’s ingenious live CSS functionalities make style sheet building a breeze and the result is rock solid (I hope). I had some issues with the classic Internet Explorer vs. the rest of the browsers when it came to margins, borders and such but I found a way of working around this using divs (something that is surprisingly easy in this program).
As I’ve mentioned before there are some issues with exporting from Expression Design. The bad edges and artifacting problem is persistent and as a result all the graphics on the page are huge lumbering PNG files rather than small nimble JPGs (thus the slow load speeds). I managed to work my way around the worst of it by putting some lines behind the logo (see image) but you can still see the rough edges if you look closely. It is worth noting that upon hearing of my exporting problems Microsoft contacted me and asked for my files to see if they could reproduce them. The are currently working on fixing the exporting problems and it will be interesting to see if they are able to solve them for the next build of Expression Design.
Another problem I’ve mentioned before is that Expression Design lets you export ridiculous sizes that don’t actually exist. Because Design is a vector based program it doesn’t conform to standard pixel widths and that means that if you’re not careful (i.e. if you do what I did) you end up designing a page with graphics that don’t really fit. This causes some annoying problems that will anger picky people like me best illustrated by the two grabs I’ve attached here. Notice how there is a small line between the curve graphic and the rest of the page? 
Or the line between the button and the white area? These were both caused by Design exporting graphics that were for instance 124.39 pixels wide. Of course the .39 does not compute in any rational sense when it comes to the web so lines appear. To remedy this problem one has to be very careful when laying out the designs so everything works on a pixel-by-pixel basis (or design the whole thing for Silverlight).
Take a moment and visit the site (www.izufall.com) to see how it looks on your computer and drop me a comment if you find anything you like / wonder about / hate / think doesn’t work.
More to come…
