Implement the Project and Iterate through Design Changes (Compact 2013)

  • Article

3/26/2014

The primary goal of the designer/developer contract is to enable the designer and the developer to work in parallel. The contract also enables the designer to send updated XAML files and assets to the developer and have them immediately work with the developer's code. If the developer has provided C# code-behind for the designer, the designer should always be quickly notified when the contract is broken and should be able to backtrack and fix the issue.

The designer’s primary work during the implementation phase will include the following tasks:

  • Refining the layout of screens and other user controls. The initial version of the Blend for Visual Studio project consists only of the elements called out in the contract. During implementation the designer will likely both refine the locations of these elements and add new visual elements like backgrounds and borders, which improve the aesthetics of the design, but not the actual function.
  • Changing the visual appearance of the various UI items. This includes selecting fonts, font sizes, border widths, and background gradients.
  • Refining and creating graphic elements. Having excellent icons and other graphic elements can make the difference between a UI that looks professional and one that looks amateur. The designer is likely to spend significant time creating and refining these assets.
  • Creating the animations. Great Storyboard and Visual State transition animations can delight end-users and draw their attention to the UI items that they have to see or act upon. Expression Blend enables very fine, timeline-based scripting of animations.

The developer’s primary work during the implementation phase will include the following tasks:

  • Writing the business logic that maintains the application’s internal state and its interaction with external systems. This is the underlying functionality that the developer would have to write, regardless of what type of UI the project has.
  • Writing the logic that populates the XAML-based UI with the relevant application state. The business logic that the developer works on will have data and data structures that correspond with UI elements in the XAML. In the example in Figure 1 in Start a Project that Involves Designers and Developers, the _AlbumList element is a list box that will contain one AlbumView user control for each album that is contained in the end-user’s music collection. The business logic will provide some way of getting this collection. Then the developer will have to populate the _AlbumList with all these albums.

Update the Project

Periodically, the designer and developer should take the XAML from the designer and the code-behind from the developer and see how the design looks and functions on the actual hardware. Early in a project you can do this infrequently, because the application will not be able to do much until the developer implements a significant amount of business logic. Later in a project you should test the design at least once a week. The benefits of doing this are as follows:

  • Problems with the contract are discovered early and can be resolved with minimal cost.
  • The designer can see what the UI looks like on the screen and how it performs on the hardware. This is very important on devices running Windows Embedded Compact 2013, because the performance and display on a desktop computer is very different from the performance and display on a device.
  • The team can see the progress of the project. Regularly seeing the latest implementation running on the actual hardware can encourage a team and give management and other stakeholders confidence in the progress of the project.

Update the Designer/Developer Contract

The designer usually has flexibility in refining the UI while working within the contract. However, the designer may discover a compelling design idea that does not fit into the current contract. In this situation, the designer and developer have to work together to make the changes that are needed.

For simple changes, the designer might have a particular change to the contract in mind. For more complex changes, the designer may simply have an idea of the behavior that the UI should have. In such a case the designer should work with the developer to determine what changes to the contract are required to achieve the desired behavior.

After the contract is revised and the developer and designer make the necessary changes to the Expression Blend project and C++ files, they can resume implementation.

See Also

Concepts

Designer and Developer Workflow in XAML for Windows Embedded