Application design for Windows Phone without a knife

It's no secret that creating the design of an application for Windows Phone or Windows 8 takes much less time than for iOS or Android. And the point here is not only the specifics of the design. The main factor in saving time is a streamlined algorithm of interaction between the designer and the developer. The tool that connects design and code is Blend, which comes with Visual Studio.

image

How it works?
Typically, designers create layouts in either Adobe Photoshop or Adobe Illustrator. When creating layouts in these programs, you can follow several rules that will allow the developer to efficiently process the layout in Blend.


1. All objects should be drawn "paths" (path). If you import objects from illustrator into Photoshop, always insert objects through the “Shape Layer”.

image

Thus, the PSD layout will contain three types of objects:
  1. Text blocks
  2. Path objects
  3. Raster objects


image

2. If any effects are applied to the layer, they must be rasterized (right-click on the / Rasterize Layer Style layer).

image image

Otherwise, when converting to Blend, all applied effects will disappear.

3. Try to use native Segoe fonts . Or, as an alternative, Windows system fonts. Using unique fonts is not forbidden, but in such cases, a more dense work with the developer is necessary so that everything is displayed correctly.

4. Carefully group the files into folders, it is better to type all the names of the layers and folders in Latin letters. This elementary rule will make it easy for the developer to understand when he begins to explain to you where in your file something is wrong.

5. Do not use the “tab” and numerous spaces for beating when formatting text blocks. In general, try to avoid all kinds of crutches.

This is not the whole list of rules, but only the list that our designers have encountered while working on projects for Windows Phones and Windows 8.

Now about magic


Why are all these rules and why follow them? First of all, this allows the designer to forget about such a "painful" operation, such as slicing, marking (redline). Of course, little things remain, such as icons for the appbar (in the near future, this may change), application icons, and splashing.

Designer screen:
Developer screen:
The result is an identical display of layouts.

For the developer, these files are also a great gift. All styles, fills, font sizes, indents, everything that developers do not like so much, all of this has already been converted by Blend into code, it remains only to transfer this code to the project.

image

Based on our already quite rich experience, we can say that the time spent on the project was reduced by two to three times.

The above scenario is a compromise. Ideally, the designer should create the project directly in Blend, and then at the output the developer will receive not only the layout styles, but also the transitions, and the functionality of the main elements.

The information was shared by e-Legion designer Vladimir Morochkovsky ( http://morochkovsky.ru/ ).