Silverlight for Designers (Part I): Compelling Experiences
DELIVER COMPELLING USER INTERFACES WITHOUT RESORTING TO BITMAP GRAPHICS BY UTILIZING REAL VECTOR GRAPHICS, GRADIENTS AND ANIMATION
Customers have come to expect compelling, functional and easy to use interfaces wherever they interact with a company, whether it’s on a mobile device, on the web or in the physical world. Designing a user interface from scratch each time is both time consuming and an unnecessary burden on the designer. While bitmap graphics offer great functionality and control for interfaces that will only ever be used at a single resolution and at a single given size, in today’s multi-screen, multi-device, multi-resolution society this translates to is a huge amount of extra work for the designer.
Silverlight utilizes vector graphics that are resolution independent and allow the designers original graphical work to be quickly resized and layouts optimized for different screen sizes and resolutions, while still retaining the capability to use pixel based graphics where appropriate.
The animation capabilities of Silverlight are easily accessible through Expression Blend and allow the designer to add texture to the application in regards to how elements appear on screen and how they react when the user interacts with them.
INTEGRATE HIGH QUALITY VIDEO TO BUILD BRANDED MEDIA APPLICATIONS WITH VISUAL IMPACT AND ADVANCED FUNCTIONALITY
Creating an effective high quality branded video experience involves bringing together many different elements to create visual stunning and exciting experiences. A responsive and compelling user experience, high quality, stutter free video, the capability to utilize animated graphics, video overlays, ad-insertion technologies and easily customizable interface elements are a few of the many pieces which when combined form the overall customer experience.
The Silverlight platform, Expression Encoder and Expression Blend together enable designers to quickly build the type of high impact Silverlight video experiences people expect on the web today. Expression Encoder, shown in Figure 18 below, takes the uncompressed edited video files and prepares them for the web by encoding the video to the highest possible quality utilizing the latest high quality and high performance VC-1 codec gives the designer the control they need over their video whether encoding, individual, batch or live video. Powerful XAML overlays, the ability to add markers that can be used to trigger advert or text overlays at a given point in video or enable other elements within the Silverlight application or web page to be updated and changed giving designers unprecedented scope to build impactful web video experiences as we saw earlier this year with NBC’s web coverage of the Olympics.
Expression Encoder can automatically wrap the finished video in a complete predefined Silverlight video player template. The video player can be based on one of the many included templates or built from scratch using the interactive design features of Expression Blend.
Expression Blend gives the designer the ability to quickly build the look and feel of the Silverlight video player experience, adding subtle animation, DVD like navigation and a full range of fully customizable video player controls, the designer can bespoke the player for each individual application quickly and effectively. The finished template is then ready to be applied as part of the encode process with Expression Encoder dramatically increasing the productivity of the designer.
EXPLORE BRAND NEW PARADIGMS LIKE DEEP ZOOM TO CREATE NEXT GENERATION INTERFACES TODAY
DeepZoom allows designers to investigate completely new ways of navigating through an application or web experience. No longer are designers constrained by the resolution of a customer’s screen or hampered by limitations in the display capabilities of their chosen delivery technology. DeepZoom not only raises the bar on how images should be viewed and interacted with on the web, but also saves bandwidth by only delivery the precise amount of detail needed at a given resolution.
What makes DeepZoom compelling for designers is the fact that a DeepZoom image is treated the same as any other image within Silverlight. It behaves like any other Silverlight image and can be controlled by the standard Silverlight animation metaphors with the added capability of being panned and zoomed in-place in the page.
DeepZoom can already be experienced on sites such as the Renault Laguna Coupe (http://www.laguna-coupe.com/silverlight) and Kelly Blue Book (http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspx ).
