Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
  • 💬 Discuss

Like this article? We recommend

Working with Developers and Designers

A challenge that many designers and programmers face is the handoff from the concept drawing to the final product. The final result is often very different from the original diagram. Microsoft's Windows Presentation Foundation addresses this challenge. The link that allows this is a technology called XAML (eXtensible Application Markup Language). It is an XML-based language that allows you to convert drawings. The converted drawing will look exactly the same, but cannot be programmed against in Visual Studio 2005.

The following XAML is a line drawn on a canvas:

<?xml version='1.0' encoding='utf-8'?>
<Canvas Name='Doc1' Width='612' Height='792' Background='White' xmlns='http://schemas.microsoft.com/winfx/avalon/2005'>
  <UIElement.RenderTransform>
   <TransformGroup>
     <TransformGroup.Children>
      <ScaleTransform ScaleX='1' ScaleY='1' Center='0,0'/>
      <SkewTransform AngleX='0' AngleY='0' Center='0,0'/>
      <RotateTransform Angle='0' Center='0,0'/>
      <TranslateTransform X='0' Y='0'/>
     </TransformGroup.Children>
   </TransformGroup>
  </UIElement.RenderTransform>

  <Canvas Name='Layer_1' Width='612' Height='792'>
   <Path Canvas.Left='105.124' Canvas.Top='103' FillRule='NonZero' StrokeThickness='0' Stroke='#FF000000' Fill='#FF000000' Data='M 201.376,0C 183.953,4.43408 166.224,7.60455 148.516,10.7126C 127.018,14.3494 105.399,18.1152 84.6281,24.7453C 73.5752,28.2358 62.7847,32.7488 52.5936,38.2708C 40.0736,45.413 28.452,54.738 19.3244,65.8937C 13.3709,73.1702 7.81322,82.0934 7.47555,91.489C 7.32135,95.1501 8.5031,98.9518 10.4031,102.085C 21.4569,118.805 36.536,133.025 52.8322,144.695C 77.1963,162.143 104.198,175.577 129.844,191.08C 147.4,201.811 164.295,214.094 178.773,228.715C 195.87,246.433 212.987,264.573 226.166,285.37C 234.406,298.374 241.194,312.754 244.358,327.821C 245.588,333.78 246.187,339.889 246.287,345.973C 246.182,351.22 245.011,356.61 242.631,361.289C 239.392,367.657 234.198,373.023 228.678,377.559C 219.56,385.049 209.17,390.841 199.437,397.513C 192.346,402.373 185.349,407.825 180.251,414.746C 173.789,424.102 170.895,436.89 172.967,448.07C 174.786,457.644 176.05,467.32 177.21,476.996C 179.382,495.961 181.04,515.435 187.857,533.266C 192.103,544.372 199.555,555.084 209.474,561.64C 229.367,574.014 252.478,581.949 275.67,585.258C 296.08,588.246 317.653,587.594 337.456,581.823C 346.769,579.109 355.783,575.059 364.015,569.929C 370.013,565.883 375.099,559.901 377.859,553.213C 382.312,542.548 382.918,530.42 382.608,518.866C 382.17,502.544 379.732,486.332 378.791,470.031C 378.467,464.019 378.377,457.981 378.702,451.97C 379.298,439.81 374.645,427.961 372.376,416L 372.376,416C 375.079,427.972 380.151,439.755 379.976,452.027C 379.86,457.986 380.157,463.957 380.683,469.894C 382.107,486.204 385.025,502.381 385.945,518.726C 386.611,530.559 386.47,543.02 382.227,554.086C 379.172,561.93 373.563,569.139 366.68,573.985C 358.857,579.079 350.344,583.256 341.497,586.236C 321.197,593.075 298.803,594.584 277.512,592.222C 252.319,589.406 227.06,581.332 205.331,568.275C 196.028,562.33 188.281,553.406 183.277,543.565C 174.632,526.567 171.742,507.006 169.259,488.099C 167.673,475.343 166.242,462.546 163.801,449.927C 161.229,436.306 164.676,420.696 172.516,409.264C 183.28,394.544 200.559,385.882 215.477,375.394C 222.014,370.798 228.659,365.669 232.829,358.852C 235.149,355.06 236.414,350.472 236.488,346.027C 236.403,341.743 236.043,337.45 235.35,333.222C 232.918,318.055 226.152,303.545 217.977,290.542C 205.22,270.253 188.578,252.572 171.998,235.267C 159.468,222.523 145.012,211.613 129.927,202.029C 102.905,184.691 73.9834,170.207 48.1252,151.175C 31.2193,138.731 15.6629,123.596 4.31574,105.936C 1.48061,101.115 0,95.1465 0.565926,89.5826C 1.6538,79.2897 7.74037,69.6808 14.4754,61.8216C 24.3323,50.3195 36.7563,40.7886 50.0818,33.5853C 60.2411,28.3767 70.9124,24.0345 81.8753,20.8481C 103.505,14.7186 125.882,11.4185 148.16,8.39941C 165.966,6.06543 183.797,3.66992 201.376,0'/>
  </Canvas>
</Canvas>

The XAML seems complex, but it can be easily done by a developer. The ability for the designer to easily migrate a complex design directly to the developer will hopefully open the opportunity for better-looking software.

  • + Share This
  • 🔖 Save To Your Account
Illustrator CS Killer Tips

Like this article? We recommend

Illustrator CS Killer Tips

Discussions

comments powered by Disqus