⬆️ ⬇️

Design applications for Windows Phone without a knife

It's not a secret that creating a design for an application under Windows Phone or Windows 8 takes much less time than under iOS or Android. And it's not just the specifics of the design. The main factor in saving time is a well-established algorithm for interaction between the designer and the developer. The tool that connects design and code is Blend, included in Visual Studio.



image



How it works?

As a rule, designers create layouts either in Adobe Photoshop or in Adobe Illustrator. When creating layouts in these programs, you can follow several rules that allow the developer to efficiently process the layout in Blend.



')

1. All objects must be drawn “paths” (path). If you are importing 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 layer / Rasterize Layer Style).



imageimage



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



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



4. Carefully group files into folders, all the names of layers and folders are best typed in Latin. This elementary rule will allow the developer to easily 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 encountered while working on projects for Windows Phonet and Windows 8.



Now about magic



What are all these rules for and why should they be observed? First of all, this allows the designer to forget about such a “painful” operation as cutting, redline. There are, of course, minor things, such as icons for an appbar (this may change soon), application icons, and splash splitting.



Designer screen:



image



image



Developer screen:



image



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 this has already been converted by Blend into code, all that remains is to transfer this code to the project.



image



Relying on our already quite rich experience, we can say that the time spent on the project has been reduced by two or three times.



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



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

Source: https://habr.com/ru/post/192370/



All Articles