Tips for specifying visual UI for a Silverlight (or other) theme?

27 Jan 2011 - 3:46pm
2 years ago
7 replies
2083 reads
Tania Schlatter
2007

I'm working on the visual/UI design for an application that will use Silverlight components. I'd like the Silverlight visual UI to match the rest of the application. How do people recommend specifying visual design to developers for a theme in Silverlight or other? In the past I've marked up static Photoshop layouts with colors, type specs, measurements, etc., but wonder if there are other/better ways.

Any tips or references on this topic would be helpful.

Thank you!

Tania 

Comments

27 Jan 2011 - 4:24pm
VLTII
2011

Illustrator or Fireworks is better for working with WPF/Silverlight. While they can import a PSD file straight into blend, it mostly renders out a bunch of sliced PNGs (which isn't ideal, given that xaml is vector based).

On the other hand, you can give a developer an AI file that they can pull into Expression Design (Microsoft's equivalent of Illustrator) and export the paths as native xaml. You'll want to avoid layer effects and gradient meshes, but otherwise you should be fine.

28 Jan 2011 - 3:05pm
cherylta
2010

Proof any vector graphics from Illustrator carefully when you bring them into Expression Design.
I have often experienced colour shifts that need to be tweaked.



On Jan 28, 2011, at 01:33 PM, VLTII <leonterry@gmail.com> wrote:

Illustrator or Fireworks is better for working with WPF/Silverlight. While
they can import a PSD file straight into blend, it mostly renders out a bunch
of sliced PNGs (which isn't ideal, given that xaml is vector based).

On the other hand, you can give a developer an AI file that they can pull
into Expression Design (Microsoft's equivalent of Illustrator) and export the
paths as native xaml You'll want to avoid layer effects and gradient meshes,
but otherwise you should be fine.

27 Jan 2011 - 5:05pm
david.shaw6@gma...
2004

Hi Tania,
In my previous role we actually solved this issue by creating a new way of working with the development team.  The UX team (us) championed owning the UI layer (lots of reasons why that I won't go into detail here) and we worked hand in hand with the development team.  What did this mean?  It meant us using Blend to create the UI structure and having development integrate it.  Wasn't all easy, but it allowed us to really control the design of the application and maintain the vision through the engineering process.  
What I found with PS layouts, specs, etc is that our developers would build it EXACTLY like the static page.  So there were many times they didn't get the page flow correct, font type correct, etc.  It basically caused double work because we had to then have the developers work with us to "tweak" pixels.
This process isn't for every team, but it worked successfully in our case.
Hope that helps!David
On Thu, Jan 27, 2011 at 12:47 PM, Tania Schlatter <tania@nimblepartners.com> wrote:

I'm working on the visual/UI design for an application that will use Silverlight components. I'd like the Silverlight visual UI to match the rest of the application. How do people recommend specifying visual design to developers for a theme in Silverlight or other? In the past I've marked up static Photoshop layouts with colors, type specs, measurements, etc., but wonder if there are other/better ways.

Any tips or references on this topic would be helpful.

Thank you!

Tania 

(((Pleas
27 Jan 2011 - 5:05pm
Manoel dos Santos
2009

The best way to do this in my opinion is for you to create all the components in Expression Blend and share them as library resources. As far as I'm concerned this resources can be user in Visual Studio as well.

This will save a lot of development time and will be more certain that the components will have the expected appearance and behavior.

Manoel dos Santos

On 27/01/11 19:36, "Tania Schlatter" wrote:

>I'm working on the visual/UI design for an application that will use >Silverlight components. I'd like the Silverlight visual UI to match the >rest
>of the application. How do people recommend specifying visual design to >developers for a theme in Silverlight or other? In the past I've marked >up
>static Photoshop layouts with colors, type specs, measurements, etc., but > >wonder if there are other/better ways. > >Any tips or references on this topic would be helpful. > >Thank you! > >Tania > >

2 Feb 2011 - 10:34am
Tania Schlatter
2007

Thanks everyone for your advice!

2 Feb 2011 - 9:44pm
Lnajera
2010

I would also recommend putting together some wireframes with instructions on how all of the components come together. Include notes on functionality and behavior and provide it to the programmers along with the screen comps or Blend library resources. The thing to remember is that there are two sides to Silverlight, the XAML and the Code behind (c#). Depending on how good you are with XAML and building out these library resources, I would work closely with the programmers to form a strategy and process for preparing the assets or resources. 

Hope this helps.

3 Feb 2011 - 11:05am
cherylta
2010

Thanks for the info. That is really helpful. For now it is only one or two programmers I deal with for prototyping. But I have no doubt this will become more important as our requirements for our applications.

On Feb 02, 2011, at 09:59 PM, Lnajera <lnajera@mac.com> wrote:

I would also recommend putting together some wireframes with instructions on
how all of the components come together. Include notes on functionality and
behavior and provide it to the programmers along with the screen comps or
Blend library resources. The thing to remember is that there are two sides to
Silverlight, the XAML and the Code behind (c#). Depending on how good you are
with XAML and building out these library resources, I would work closely with
the programmers to form a strategy and process for preparing the assets or
resources. 

Hope this helps.

Syndicate content Get the feed