Official Release

We would like to announce the official release of our web application prototype, Sprout! For the past twenty weeks we, the Xamlhouse team, have been hard at work exploring Microsoft Expression Studio software and the Microsoft Silverlight plug-in. Sprout, does not mark the end of our journey as interactive designers and developers, but rather the beginning to our careers.

Today we begin our real exploration, but we leave behind our knowledge via our blog, in hopes that it may help others who are designing for, developing for, or just enthusiastic about Silverlight.

Launch Sprout
Learn About Sprout

Please keep in touch.

Regards,

Xamlhouse Team

More of the interface…


Since our goal is to keep usability at the forefront, we’d really like to stick to a clean design that is easy to follow. Things like the color-coded sections, straight-forward icons and open typefaces all play into that. These are prelims of the gallery and calendar sections that we’ll begin to incorporate into Blend once we get them finalized. Any thoughts or feedback?








-Matt

Since we have comprised a web application design that is sufficient on its own, we are running into difficulty designing a logo. We have however, decided on a name for our application, which is sprout.


The nature of this application is to create a sense of community that promotes growth and support within a select group of users. This organic theme brought us into our first round of comps in our logo design process. Most of these designs had curvilinear elements that complemented a simple and clean serif typeface. They were very nice, however they seemed to be a bit too organic and curvy for our more ridged accordion interface.


We are now trying to stick with our simple san-serif typeface, while incorporating a more abstract element that gives the illusion of growth without being too literal. Here are some of the designs we have created along our logo quest.





-Sarah

All of us at Xamlhouse decided to create an easy to use accordion navigation system, that which would house all of the main information within our Silverlight application. Originally, we had decided to go with a vertical accordion, however for our first round of design comps I thought it might be fun to try a horizontal based accordion navigation.

This accordion will be split into three main sections Calendar, News, and Gallery. I went with the horizontal navigation because it allowed the icons to be accompanied by text, solving the problem of anyone not understanding what the icons stand for. Once a section has been selected by the user the two unselected categories would then transitions to their closed state, fully revealing the selected section. As you can see, we are still brainstorming on names for our application, hence the “Cool Name” in my design comps.

We are hoping that the simplicity of the accordion navigation system will unclutter the page, allowing the user a more pleasant experience. I went with a clean flat vector look with the graphics to promote customization, as well as to take a step away from the trendy overly glossy graphics. This accordion is meant to be a shell to house all of the information, so I was trying to make it as simple and clean as possible to avoid the design competing with the content. Ideally the user will be able to pick their own three color, color scheme.

Please feel free to leave feedback, for we would love to hear your opinions. Do you like the idea of a vertical or a horizontal accordion? How do you feel about the accordion in general, in regards to a simplified user experience? Do you like the flat vector based graphics, or do you hunger for gloss? We appreciate all your comments and feedback, for it helps us to create a more user friendly application.


-Sarah

As I dive deeper and deeper into Expressions, mainly the Design and Blend components, I’m starting to see what aspects were implemented as an attempt to make for a smoother workflow from a design aspect. To begin with, there are very few menus in which you’re required to type or scroll lengthy menus and sub-categories to make changes to things. Many of the design modules are created in a way that changes are made with simple mouse interactions. For example turning drop shadows on an off was done in a pulldown menu as opposed to a separate window to alter layer styles in Photoshop. Anything that requires a varying intensity, like opacity and hue/saturation, is done through sliders with live updates so that you can quickly and efficiently make changes in real time with ease.

Things try to get even more design oriented in Blend when timeline animations, events, and triggers come into play. RIT’s New Media Design program give us more than a taste of actionscript in the many programming based project classes that we take over our time here. Other design folks may not have as much experience. Knowing that, the typical event functions like onRelease and the subsequent methods within that onRelease are completely gone and replaced with a set of pulldowns. Instead, you create what you want to happen on the timeline, select the item you want to target, and then what action you want to assign to it i.e, onMouseClick or onMouseOver. Once again, this is a really great option for those who can visualize what they want really well (a designer) but aren’t a person who can program it really well (a developer). Even certain implementations that are usually completely on the developer side, such as tooltips, are turned on with a checkbox and a text entry of what you want it to say.

In total, the ways in which Microsoft attempted to create an interface more geared toward the designer is starting to be realized. I look forward to continuing the exploration. As of now, the things I’ve created have been semi-arbitrary so I haven’t gotten the full depth of the programs just yet. The true test will arrive when implementation of the final project comes into play. It’ll be quite interesting taking everything I’d usually attempt to do in Photoshop and do it in Design.

-Matt

Being accustomed to Adobe’s Creative Suite, I was expecting the transition to Microsoft’s Expression Collection to be somewhat difficult. To my surprise, everything was pretty self explanatory, and relatively easy to use. Unfortunately, at first I thought Microsoft’s Design program was lacking in some of the functionality that I am used to in Adobe Illustrator and Photoshop.

For example, when designing in Microsoft’s Design program, I began to search for the functionality much like Adobe Illustrators Pathfinder Pallet. On my first attempt inDesign, I was able to overlay two objects and subtract one from the other, yet I could not do much besides that. When using Design, to subtract an object from another, you must place the object that you would like to subtract in a layer above the object it is to be subtracted from, then select both layers and go to Object > Compound Path.

Yet after further exploration, I did find the Pathfinder-like functionality contained within the Object > Path Operations menu. This gives you five options, Unite, Front Minus Back, Back Minus Front, Intersect, and Divide. This gave me a big sigh of relief. However, I could not figure out how to group layers, seeing as every new object you add to your composition is added to it’s own layer. This left me with a complex design and hundreds of chaotic layers. I did some research and found that you are supposed to be able to use the alt + G keyboard shortcut to group layers, which I had already tried. This might simply be due to me working on a Mac through Parallels, yet either way I have no ability to group layers, which is incredibly frustrating.

Besides the grouping issues, I have found no real difficulties in navigating my way through Microsoft’s Design Program. Yet, I must admit my comfort still lies with Adobe. No offense Microsoft… and kudos to creating a pretty simple user interface, for I remember my first time using Illustrator and Photoshop, and it was not all together a delightful experience.

-Sarah

There is so much talk out there right now about Flash vs Silverlight vs Flex, will Silverlight be the Flash/Flex killer or will it just die out and never get adopted? I guess we will just have to wait and see, but in the mean time, here is my view. (I will try to be unbiased as possible).

Silverlight 1.0 can be compared to Flash:

They both have 2d animations/graphics with audio and video, both have Mac/Windows/Linux Compatibility. Silverlight uses text format, while Flash uses binary format. Silverlight doesn’t have built in UI (sliders, radio buttons, etc.) but Flash does. Silverlight’s XAML code can be indexed by search engines, Flash… not so much. But Flash knows what it is doing when it comes to the visuals, Silverlight… not so much.

Silverlight 2.0 can be compared to Flex:

Silverlight is to Microsoft as Flex is to Adobe. Flex and Silverlight 2.0 are both Rich Internet Applications. Flex can use the Adobe Integrated Runtime (AIR) to run those web apps on the desktop. Silverlight 2.0 does not provide desktop application functionality (that’s WPF’s job). Flex is currently building in support for the .NET framework. Silverlight works effortlessly with the .NET framework.

Performance:

Performance wise, you should check out bubblemark.com. It not only compares Silverlight and Flash/Flex, but other RIA’s like Java.

Conclusion:

Adobe has got the designers in the palms of their hands, and nobody takes care of its developers like Microsoft. Silverlight benefits from the developer side, Flash/Flex benefit from the designer side (Flex being a bit more developer oriented than Flash). But if Microsoft is planning on cashing in on the designer goodness, they need to completely ‘wow’ those hardcore designers, and pick their brains to figure out what would make their life as a designer easier.

Overall, shouldn’t we all work together? We all know the whole designer/developer relationship is hard to work with… designers don’t know how developers work; developers don’t know how designers work. So instead of trying to 1UP each other, why not collaborate? The web has forced developers to think more about design, but let’s face it; developers could care less whether or not the color scheme is monochromatic or complimentary. As a developer using Expressions Blend, I find myself modifying the XAML code instead of using the design tools, it’s simple….for developers. Developers can create amazing things using .NET and Silverlight, but it certainly won’t be pretty.

-Jess

For those designers among us who’d prefer not to slog through Microsoft’s Expressions Blend to produce viable vector work in XAML, Michael Swanson has developed a very useful plug-in for Adobe Illustrator which quite simply and accurately exports Silverlight XAML files.

http://www.mikeswanson.com/xamlexport/

This method has, of course, it’s advantages and it’s drawbacks. The AI>XAML plug-in is limited by the current capabilities of XAML. The plug-in does a splendid job of exporting basic Illustrator geometry:

-strokes, fills & gradients
-opacity & visibility
-blends & envelope distortion
-clipping (via) masks & pathfinder/compound shapes

Unfortunately, though, this means that many of the capabilities of Illustrator files are not currently supported:

-native text (all text must be coverted to outlines, prior or XAML export)
-patterns (fills)
-image effects (no drop shadows, blurs, etc.)
-stroke brushes
-opacity masks

So while the plug-in is robust, and adds the ability to create vector work in illustrator (which is much easier, espescially for designers used to living and breathing Adobe), it lacks support for the polished finishing touches that have become a trademark of interface design. For effects like drop shadows, one must create a raster image to use instead, or try to ‘fake’ it by layering translucent shapes behind the artwork.

-Kevin

I have been designing and developing with Adobe product for my entire college career. This experimentation with Silverlight is the first time I have had to switch to another design and development software package.

My first experience with Microsoft Expressions Suite was good, as I found a lot of conveniences that do not exist on Adobe’s software. The features that stood out to me were the integration of 3D models through .obj files from Cinema 4D and the Events tab that made it very easy to see what coding options were available to the object I had selected. I was also happy to see that all of the “layer styles” in Adobe Photoshop were available in Blend.

Then I realized that I was creating graphics for WPF, not Silverlight. This was not clear to me when I first started, I thought that the options in both were interchangeable. So I downloaded the Blend 2 December Preview, and realized that all of those amazing options were stripped away from me.

I understand that Silverlight is in alpha, but WHY DO I HAVE TO WORK WITH SUCH PRIMITIVE OPTIONS! I can’t even add drop shadow or bevel to my graphics. I have to create them from scratch, which slows down my workflow a whole lot.

We actually planned to add 3D graphics to our final project, but now we will have to put in frame-by-frame animations if we would like that option. This is fine with me, as Adobe Flash does not support 3D outside of the Papervision plugin, which I think has a ways to go before it looks good. I just thought that having real time rendered 3D graphics was something that would set Silverlight above Flash.

I just hope that in the next Blend 2 Preview Microsoft will bring the Silverlight options up to the WPF level.

-Jim

So to explore a little deeper into Microsoft Expression and Visual Studio, I began searching for videos, since we’re all getting a little lazier as bandwidth expands. I found some videos from the Silverlight 1.0 Fire Starter conference that proved to be quite useful.My favorite part is the video segment “Silverlight in the Future” that has this slide about 2 minutes in. Im not sure what “civilright” 2.0 is quite yet, but I’m super excited to find out, as it must be something quite amazing in the making!

    



















But back on subject… This is a great place to start and get your feet wet, and offers a good overview. I also suggest the free Blend videos on lynda.com.