This text is a free translation into Russian of the article “ Minimizing your designer footprint ”.

Introduction

With the advent of more powerful web platforms, it has become possible to create great opportunities and intricate designs. But when creating such applications, you should take into account the power of the user's computer, which will see your design, as well as the speed of the Internet connection.

This problem for web design is not new. It is always necessary to create such a design that does not require the user to download a large amount of information to view the page - so designers often use gif-images or a repeating background with sprites that store all the graphics in one place.
')
These principles are also true for Silverlight applications, but with the advent of many elements that were previously difficult or impossible to achieve, designers must take care of such things even more. As with all sites, reducing page load times is crucial for keeping the user's attention. You also need to keep in mind that your application should not heavily load the computer on which it will run.

Choosing the right approach

There are enough ways to minimize the “designer footprint” inside a Silverlight application. The proposed list, of course, is not complete, so a big request is to leave your comments with tips on how to make a beautiful and lightweight design.

Xaml vs Raster

To implement their ideas, designers have a large number of excellent tools and ways to work with them visually. The main choice that one has to make is whether to use vector graphics objects created with XAML or to apply bitmap images such as JPG and PNG in one’s work. In most cases, you will use both types - both vector graphics and raster to achieve a better view, but there are still a few tips for choosing the best option.

Graphic format	Behind	Vs	It should be used for ...
Stock vector	Scaled without loss of quality	Increases file size; drawn on startup (load time suffers)	Graphics that vary in size or available for viewing at different sizes
PNG	You can use transparency (alpha channel)	Image quality deteriorates when scaled	Icons; highly detailed images with transparency
Jpg			Photo or photorealistic images
Gif	Not available	Not supported in Silverlight	Not available

Vector (XAML)

Vector images are used for forms and objects created using paths from a series of points and calculations. The best feature of vector shapes is to scale to any size without loss of quality. It is very suitable for creating styles and images that do not require photorealism. After creating the form, the designer can use the “direct selection” tool to manipulate and adjust individual points to refine the form.

The minus of the vectors is that they are drawn at the time of launch. More complex vector images require the use of more paths and points. All this can greatly affect the amount of processor and memory resources for running the application on the user's machine.

PNG

It is the best choice for graphics of high complexity, besides, the use of the alpha channel will allow you to create stunning effects.

PNG is preferably used for computer-generated graphics, such as icons and images with transparent areas.

It should also be remembered that, using raster images, you lose the ability to scale the image without losing quality. Raster means that the image is tied to pixels - no calculations are made to create an image at the time of launch, which does not allow the image to be redrawn to a different size. This problem is solved by creating several images of different resolutions, but this leads to an increase in the size of graphic files.

If the image quality is set to 100%, then PNG files are great for use as images and lines with text created by a computer (this does not mean that you should not use lines and text created using Silverlight). Also, PNG is a good choice when you need to add shadows directly to an image, using the alpha channel and not using graphical effects, which I will discuss later.

Jpg

The JPG format is usually used when using photos or renders with photorealistic. The ability to create rich images, such as photos, with a minimum size is quite a weighty argument. However, JPG is quite difficult to use for text and lines, and the lack of an alpha channel can also lead to additional problems with image quality and adding them to the project.

Gif

Not available out of the box in Silverlight.

Graphic effects

Silverlight 3 allows you to use graphic effects that allow you to use objects at launch time to create shadows, blur and many other effects.

They look very good, but the load that falls on the processor and RAM can lead your great ideas to collapse. Each time an object with a graphic effect is redrawn (moves or uses animation), the effect must be recalculated.

Graphic effects should be used as little as possible, and it is better to avoid using them altogether, if possible. If these effects are very important for the realization of your idea, try to keep the number of animations to a minimum. It is better to always “sew” effects into PNG images. It is worth noting that only shadows and blur are available out of the box.

Style reuse

In large applications, the reuse of styles helps designers avoid inflating XAML code, as well as leave the file size and load time low, and also greatly facilitate subsequent maintenance of the application. Resource dictionaries are a great way to keep information about styles and brushes in one place, which allows you to apply these styles to many of your application controls, while keeping the XAML clean and easy to read.

Conclusion

These are just a few ways for you, as a designer, to help protect your work from negative consequences when creating them. I will be glad to hear your hints and tips on how to create projects that work smoothly and, at the same time, offer ample opportunities.

Thanks for reading.