With the introduction of more powerful web platforms comes the ability to create more intense experiences and intricate designs. When creating these new experiences take into account the effect the application will have on a user’s machine and internet connection.
This is not a new problem with web design in general. There has always been a need to create designs that minimize the overall amount of data the user is required to download in order to view the page— whether it be using gif images or repeating backgrounds and sprites that contain all the graphics in one place.
These concepts are still valid with a Silverlight application, but with the introduction of many elements that were either difficult to achieve or simply not possible with previous web platforms, designers need to take more care when creating and implementing designs into a project. As with all web sites, minimizing the overall load times of the pages is important in keeping the users attention when browsing; but when implementing interactive elements into your application, you must also be conscious of the load on a user’s machine at run time.
Choosing the right approach
There are many different ways you can minimize your design’s footprint within a Silverlight application. By no means is this list complete, so please leave comments on how you keep the “cost” of your design down.
XAML vs RASTER
When implementing a design into a project, designers are given lots of great tools and methods in which they can create these visuals. The biggest decision to make is whether to use vector objects created with XAML or raster images such as JPGs or PNGs. Generally you will need a mix of both vector and raster to achieve your vision but here are some pointers on choosing the best option.
| Type of graphic | Pros | Cons | Use it when... |
| Vector | Resizes with no distortion | Increases file size; must be drawn at run time (hurts loading time) | Graphics that will be resized or viewed at multiple sizes. |
| PNG | Offers transparency (Alpha Channel) | Resizing distorts the graphic | Icons; Highly detailed graphics needing transparency. |
| JPG | Photos or photo realistic graphics | ||
| GIF | N/A | Not supported by Silverlight | N/A |
Silverlight Example of resizing different images
Vector (XAML)
Vector images are made up of shapes and objects created by paths from a series of points and calculations . The best part of vector shapes is their ability to scale to any size without distortion. This is great for creating styles and images that don’t require photo realistic detail. After creating a shape, the designer can use the direct selection tool to manipulate and tweak individual points and refine the object.
The downfall of vectors is they need to be drawn at run time. As vector images become more complex they require more points and paths. These calculations can have adverse effects on a user’s CPU and memory usage.
PNG Format
This is your best option for highly complex graphics, and its alpha channel should let you create some amazing effects.
The best use for PNGs are computer generated graphics such as icons and images that have transparent areas.
Keep in mind that with raster images, you lose the ability to scale the image without distortion. Raster means the image has baked in pixels—no calculations are made at run time to create the image so therefore the platform cannot redraw the image at a different size. There are workarounds to this problem such as creating multiple resolution images, but that increases the graphic’s file size.
If image quality has to be 100%, PNG files are best used for computer generated images and lines and text (not that you will use it over Silverlight’s provided line and text tools).
Another great use for PNG images is to integrate shadows directly into your image using the alpha channel and avoid using bitmap effects which I will get into a little later.
JPG Format
The JPG format is generally reserved for photos or photo realistic renders. Their ability to create rich images like photos while keeping file size to a minimum is a strong selling point. JPGs can however struggle with text and lines, and their lack of an alpha channel can create issues with quality and implementation.
GIF Format
Not supported in Silverlight out of the box.
Bitmap effects
Silverlight 3 offers bitmap effects, which can manipulate objects at run time to create drop shadows, blurring, and many more effects.
These effects can look amazing but the load that it places on CPU and memory can bring your great designs to a grinding halt. Every time any object with a bitmap effect is redrawn (moved oranimated) the effect needs to be recalculated.
Bitmap effects should be used very lightly or even completely avoided if possible. If these effects are needed to create your vision, try to keep the animation to a minimum. The better choice is always to bake your effects into a PNG image. Note: Only drop shadow and Blur are included out of the box.
Reusing styles
In a larger application the reuse of styles can help designers avoid XAML bloat, which keeps file size and loading time down, as well as helping with future maintenance of an application. Resource dictionaries are a great way to keep all your styling information and brushes in once place, which allows you to apply that style to multiple controls throughout the application while keeping your XAML clean and maintainable.
Conclusion
These are just some of the ways you, as a designer, can keep your designs from impacting a project’s experience in a negative way. I would love to hear your tips and tricks on keeping your applications running smooth and delivering great experiences.
Thanks for reading.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
