January 28th, 2009

Before I go into detail about the benefits of Expression Design I should make it clear that there are tools and plug-ins to convert files from other design packages into the XAML format.

For Adobe illustrator you can use the AI>XAML plug-in found here with lots of examples to view.

The key benefit for using Expression Design is in the hand over to Expression Blend. At any point the designer can select any number of paths, an area or the entire page and export the selection into XAML. A range of choices are available to tailor naming, layers and fonts so that the XAML is as tidy as possible ready for Blend.

If the designs were created in an image based application such as Photoshop then the designer will be required to recreate any vector based graphics from scratch. This can simply double the workload.

If the designs were created using Illustrator and the above mentioned plug-in then the designer will be able to import their work into Expression Blend. However, not all effects are supported and some additional clean up work will likely be required, especially on large detailed graphics. Some masking and gradient effects for example can be lost during the conversion. This can be probmatic for 2 key reasons, the first, there needs to be additional time set out to check for missing effects/graphics and then to repair them, the second, once these graphics are in Blend they can not be brought back out into Illustrator which means any amendments to the design will require a repeat repair process or to be carried out within Blend.

There are some effects to avoid when using any package to design for Silverlight 2. Layer effects such as Embossed and Drop Shadow are not support yet in Silverlight 2. You can see my work around for drop shadows here.

So in trade for some upskill time up front you can save time on future projects keeping your design process smooth and reliable.

January 27th, 2009

Traditionally designers and developers have always been treated as very different people. Developers known for being analytical, precise, literal and logical often being seated in a group away from the imaginative, creative and conceptual group of designers. When these two groups work on a project together there is often process put in place to attempt to hand a project over from design to development with little interaction once the pass has been made

With internet applications getting richer every day, the need for user experience and quality assurance becomes more an important oversight. Not only do designers and developers need to be more aware of what the other actually does, but each party is having to help the other realize the limits and possibilities of new mediums available to them.

Microsoft Silverlight is one of these new mediums and plugs straight into Microsoft’s .NET framework, allowing deep functional purpose to lie behind rich user experience.

However, with risk of sounding like a super hero, with this greater power becomes greater responsibility to retain quality and manage user expectation. Sitting designers and developers side by side can help projects in many ways. When a new project is started it is important to assess and potentially relocate the team to ensure maximum communication can be obtained between designers and developers.

Help train each other

Both sides need to pick up new software and new ways of thinking that the other side takes for granted. For example, designers will need to pick up Source control and understand naming convention where as developers will need to understand animation through storyboards and dynamically through coding.

Foresight

Understanding your counterparts process, potential and limitations will allow both parties to design and develop applications realistically and on target.

Problem solving

Remember that each party has a good mix of opposing skills/way of thinking. Your counterpart may not always give you a solution to a problem, but they will often give you a good outside the box angle that can often lead to or spark off a new idea to your trouble.

Work Flow

The delay of a project going back and forth between design and development is minimized.

Team work

Getting to know your counterpart will help you understand frustrations on both sides better and allow for a more enjoyable work environment and hopefully a lot less finger pointing.

The Effects filter in Expression Design can not be used for Silverlight as they are not supported in the current Silverlight plug-in (SL2).

You can use a PNG image of a shadow to get around this, but this can cause problems if you require to re-size the object the shadow sits behind, especially if you need to re-size it non-proportionately.

By using a grid of 9 boxes in Blend we can create a perfect shadow for any rectangular shape that will re-size and maintain the shadows corners and keep a constant effect.

To start with we need to create a grid 300px by 300px with a rectangle inside. This rectangle needs to be set to stretch both horizontally and vertically. Next we need to set this rectangle’s margins to 20,20,20,20. Finally we will give this rectangle a solid colour of black set to 65%.

Next we will create 4 more rectangles inside the same grid. We need to arrange each of these 4 rectangles so that our first rectangle is surrounded above, below, to the left and to the right. We will do this by arranging the 4 rectangles as follows;

Each of these 4 rectangles are aligned to stick to the edge of the grid they connect with. They are also fixed to a width or height of 20 pixels depending on which side they sit on.

The next stage is to place 4 more rectangles of 20 x 20 pixels, one in each corner of our grid. Each of these rectangles are aligned to stick to their corner.

Notice at this point we can change the pixel dimensions of our grid and all the edges and corner squares retain their shape without distorting.

Our next step is to colour our rectangles up to give us our shadow effect. Each of our rectangles running along an edge will require a linear gradient going from black at 65% alpha to black 0% alpha fading towards the edge of the grid.

Our corner squares are going to require a little more work. Each corner will require a radial gradient using the same colours we used in the last 4 rectangles. But each radial gradient needs to be twice the size of the corner rectangle and offset to give a quarter circle shape.

This concludes creating the shadow effect.

The only thing left to do is to make our grid behave based on another object, like a popup window. We can now offset our grid to position the shadow, the example below offsets the grid by setting the Margin to 5, 5, -12, -12.