We ran a little behind on our release schedule, but that's only because we wanted to deliver the best upgrade we could create.
All customers have been sent an email with a link to the upgrade. If you haven't received it or are having trouble, please email us from your registered/purchase email address.
Upgrade highlights include
- Full orientation support for TabControl
- Full orientation support for Expander
- NEW - ToggleButton skin
- NEW - ListView/GridView skin
- NEW - Toolbar skin
- NEW - GroupBox skin
- NEW - RichTextBox skin
- More efficient animation of existing skins
- And several minor tweaks and bug fixes
All new purchases will automatically receive the 1.5 version instead of 1.0.
You've all seen how cool the new hyper-animated Discovery theme is. Now, you can choose to buy it ahead of time - get to play with the latest Beta 2 (much more powerful, efficient, and fun than Beta 1) and use it in actual deployments.
We're providing an early adoption program where you can purchase the theme (and variations) for the reduced limited time price of $159 for a single user license (multi user packages are also available at a highly reduced price). Please contact us for details or to purchase the early beta. This early adoption program is available only until 6 April 2008.
All early adopters will receive the final release for free when we release Discovery in mid-April.
To try a hands on demo Download Discovery Beta 1 Preview EXE (86.2KB) (Beta 2 is, of course, far more advanced)
Reuxables Phase 1.5 Upgrade
The long awaited Phase 1.5 upgrade for the current Reuxables themes is now finally complete and we're performing final efficiency checks and design tweaks. Here are the new features of the upgrade:
- Full orientation support for TabControl
- Full orientation support for Expander
- NEW - ToggleButton skin
- NEW - ListView/GridView skin
- NEW - Toolbar skin
- NEW - GroupBox skin
- NEW - RichTextBox skin
- More efficient animation of existing skins
- And several minor tweaks and bug fixes
Themes that will contain these updates are: Candy, Frog, Fusion, Glass, Metal, Paper (including the entire Alpha Pack).
All existing users of these Reuxables Themes will receive a download link this weekend.
Thanks to the overwhelming response, all beta tester slots for the upcoming release of <WTF/> are now filled.
Keep watching the blog - we hope to publish more info and some demos of WTF's new functionality shortly.
We're almost done with WTF. But we need YOUR help. We have a need for a few beta testers. To apply, please use the contact form on this blog. All beta testers will get free copies of WTF and a discount coupon for our Reuxables products.
I'll be posting more info this weekend about some more new features we ended up adding to WTF:TransitionContainers, and our roadmap for WTF 2.0.
EDIT: Sorry, all available slots are now filled. Thanks to everyone for the great response.
We're very excited to announce a new partnership with our friends at LICAS digital - a digital interactive company based in the UK.
Our goal is to combine Nukeation's expertise with LICAS' interactive entertainment power house and create some compelling solutions.
From the press release:
LICAS Digital CEO Liam Cassidy described the formal arrangement as a significant step forward for both companies; “I’m excited and very proud to be working closely with Nukeation. We have benefited tremendously from our close-ties with Nukeation behind-the-scenes these last two years, so it’s a pleasure to formalize that partnership moving forward.”
The partnership begins with marketing and distribution collaboration on the newly-released Reuxables – a rich collection of custom-built designer themes for software applications built upon Microsoft® Windows Presentation Foundation™ (WPF). Reuxables is the first in a catalogue of projects scheduled for release throughout 2008, closely followed with the launch of an ambitious new high definition advanced-training media service for 3D graphics professionals. Codenamed "Eidos", this service will be augmented with high-quality full-color publications. “This will be a busy year with several key releases designed to enrich the workflow and resources available to software developers and design professionals,” added Cassidy.
Find out more at http://www.licasdigital.com
Here's a sneak peek from one of the advanced 3D training videos from Codename "Eidos":
Our upcoming theme (the first of the Phase 2 themes) is nearing completion. Featuring hyper animation and lots of BitmapEffects, here's a preview of Beta 1. Do note that many aspects of this theme are still under development and will change as well undergo numerous visual enhancements and bug fixes.
NOTE: This is the "Better Quality" version which requires decent graphics hardware. The final version of the theme will ship with a "Better Performance" variant that will be suited for low-end machines. We will also provide special code to help you switch between the themes easily during runtime.
Download Discovery Beta 1 Preview EXE (86.2KB)
Nukeation is known for its web design, graphic design, and user experience services, but what few people know is that our roots are in animation, 3D graphics, and traditional art work. (Before it's introduction into the world of UX, back in the mid-90s we were known as Atomic Diaper Productions... don't ask why)
To familiarize you with that side of Nukeation, let me tell you about an internal project we've been running for a short while. Project "NE" started as a solution to a very boring afternoon and quickly turned into a full scale project to create a digital spokesperson for Nukeation.
Images copyright © 2007-2008 Nukeation Studios. All rights reserved. Setup and render in e-on Software's Vue 6.5 xStream.
These test renders show a work-in-progress version of "NE" or Annie. We're using some of our advanced XAML components, Silverlight 2.0, 3D animation, and (thanks to some friends in Hollywood) professional voice over to give life to Annie. While such a project is more than common in the 3D CGI industry, we hope to give Annie a functional role in the world of UX that will make her very unique.
Annie will be the "face" of Fingertip as well as play a functional role in it.
A bugfix to the Paper Theme has been made available. This update addresses some drawing issues found with the Treeview, ListView, and other controls.
Users of the Paper Theme and Alpha Pack can use the same download link in you order confirmation email to download the latest version.
If your download tries have expired, please email support [@] nukeation [.] com and we'll reset them for you.
The most difficult thing to create is a design that pleases everyone. It is nearly impossible. But the next best thing is to create a wide range of themes that meet different needs.
So we're asking you! What do you want in a theme? Is there a cool design you've seen that you'd like to see in a WPF theme? Is there any specific functionality you want?
Comment here or email us at info [at] nukeation [dot] com. We'd love to hear from you!
I've encountered some designs in WPF apps that utilize a "fade out gradient", that is, a two stop gradient with one being 100% opaque and the other being 100% transparent.
However, often some developers have chosen to leave the "fade out" stop of the gradient to the default color. After all, it is 0% alpha, so what does it matter right? Wrong.
If working on a black background if the "fade out" stop is left to WHITE and faded out, irregular color fades occur. Same goes for a white background and a BLACK fade out stop.
Here is an example to better illustrate. We have a green gradient that fades out on the left. In the first gradient, we have a default (BLACK) fade out stop. In the second we use the same color as the visible stop for the "fade out" stop. See the difference yourself - the first gradient has black banding in the middle.
Nothing earth shattering, but keeping these little things in mind will always make your app look all the more professional.
One of the main hurdles we had to overcome was to make it easy for users to customize reuxables themes to their liking. Developers that beta tested reuxables mentioned that more often than not they'd only need to change the colors rather than the shapes of the controls.
So we opted to keep global brushes. You can read more about Global Brushes and how to use them in my article in the Expression Newsletter Feb '08 issue.
The main concept is explained in the diagram above. We have two Color objects created as named resources. A LinearGradientBrush is created by binding the GradientStop to the color resources. The control (Button in this case) uses that Brush as its background. We often use more complex structures where the base color for all controls and brushes is a single color and separate vectors create the shading via monochrome brushes - like with the Glass themes - so changing a single color (instead of two) changes the entire theme.
Reuxables comes with full source code. http://www.reuxables.com
The Microsoft Expression Newsletter's Feb issue just got published today. You can read Part 2 of my article here.
The previous part can be found here.
We're overwhelmed by the response the Phase 2 image got us last week. One particular question I kept getting was "What does hyper animated mean?" So rather than explain how animated the theme will be, let me show you!
Download the Teaser EXE (77KB)
Discovery will be one of 3 premium themes. The premium themes will be built with a higher quality and will require a slightly larger amount of RAM and video memory. Here's a sneak peek at some of Discovery's features:
- 9 Themes in One Pack - Lime [Default], Dark Green, Blue, Cyan, Red, Orange, Monochrome, Violet, Magenta.
- Low-end system compatibility mode (blurs and animations can be toned down automatically)
- Multiple image based backgrounds for each theme style in 3 resolutions (640x480, 1024x768, 1920x1200) to provide that extra touch
- Edit a single color value to change the entire the theme to your liking (just like with all our existing themes!)
Keep watching this feed. We'll be posting more demos soon.
And tomorrow we unveil something that will "nuke your app"...
You think we'd tell you?! ;)
I often get these ideas while I'm waking up. This one is called "Dynamic Animateable Value Lookup".
This value lookup is partially like DataBinding. Right now, we can write Property="{Binding Path=XYZ, Element=ABC, Mode=Default}" and the property will take its value from Path (the property) of the element (Control). However, this is not animateable without animating the original property.
Let me give you an example:
<StackPanel HorizontalAlignment="Stretch"> <Rectangle /></StackPanel>
Now, the StackPanel uses "Stretch" for HorizontalAlignment and therefore does not expose a direct physical double value in XAML. If I wanted to animate my rectangle's Width from 100% (which would be equal to the Width of the StackPanel) to 0px, it would pretty much impossible (as far as I know) in XAML. I'd have to go to code-behind and write the animation in VB or C#.
Here's how a lookup can help...
On Time 00:00.00 / Frame 0
<Rectangle Width="{ValueLookup Path=Width, Element=StackPanel}"/>
I could then, in Blend, go to the Time 00:00.7 (Frame 7) create a keyframe, and then enter a manual value, like 0 or 10 in the Rectangle's Width property. What the runtime would do is on reaching frame 0 it would do a lookup for the current width of the StackPanel control and pass on that value to the Rectangle's Width as a ByVal variable rather a ByRef variable (not an accurate description, but you know what I mean) and then that value would be a physical double and could be animated in accordance with the other keyframe.
Such "once only" lookups can be very valuable. Now, developers might choose to do this in code rather than having a new feature like this. And while yes it is easy to do this in code behind, you have to remember the separation of XAML and procedural code is mandatory for separating design and code - especially when working with a designer. If the Designer had to go write in procedural code, then it would be a mess to manage - especially if you intend to have your own code in there.
EDIT: Please see the comment on this blog post by Paul Shmakov, where explains how my Rectangle issue can be solved with the current release of WPF! Thanks, Paul. Wow, looks like the WPF team DID think of almost everything.
Our goals with reuxables is to provide a comprehensive set of themes for WPF and Silverlight applications. Our first phase was to provide a new, inexpensive, and comprehensive range of themes. All of them are currently available at www.reuxables.com
Next, in March, we intend to release 1.5 versions of all these themes, as well as the Phase 2 themes.
The image above shows a beta preview of DISCOVERY, one of the 3 premium Phase 2 themes being developed right now. The Phase 2 themes will have only animated versions and will aim for an extreme animated UI experience.
The 1.5 update for existing themes will cover bug fixes, performance enhancements, and provide theme support for some legacy controls - such as the Toolbar - that does not exist in the current release.
All existing users will receive the 1.5 versions of the Phase 1 themes for free, as well as a large discount for the Phase 2 themes.
In March, Beta 1 of Silverlight 2.0 will also be released and we intend to provide full Silverlight versions of all Phase 1 and Phase 2 themes. We will provide regular updates to coincide with future Silverlight 2.0 Betas and CTPs and an early version of the RTM edition. Preordering details will be posted soon.
By popular demand, we are keeping Paper Lite available for one more week. Grab it while it lasts.
Here's my wishlist for the next release of WPF (in no particular order).
Frame-based Animation Support out of the box
WTF:Animation was created to fill this gap. Frame animations are a must for achieving complex effects without having to spend too much memory resources among other things. It is safe to assume many a graphic designer will feel awkward in Blend without this feature.
Window/Page level triggers
Some time back I posted about the need for page/window level triggers. I think that would be very helpful. See my old post for more info.
XBAP to work out of the sandbox / better integration with ASP.net
I really love XBAP. It may not seem like a good idea for broad online release, but in contained environments such as intranets and corporate networks, XBAP makes a lot of sense. Everyone uses the same XBAP from a single location. It has the full toolset of WPF Win Apps, but runs in the browser.
The current sandbox structure it runs in limits it greatly though. I'd love to see some better integration WCF/WebServices and ASP.net itself. It would be a very powerful combination.
Blend Modes (please!!)
It has been 3 years since I started yelling about this. I want blend modes in WPF! How does Microsoft expect designers to do awesome stuff without blend modes? Read my really old post to find out more.
WTF:PowerImage was created to supply at least one blend mode through hacks.
Make 3D objects interactive and have a full event-model like normal controls
3D Objects are too static in the current WPF releases. I'd love to see a basic 3DObject class that can be inherited by all 3D meshes imported on to the form. An event model, even a very simple one, would greatly help push 3d implementation in regular software.
3D Charts are just one example of 3D in software. Z-space (depth) based distribution is an awesome time saver and enhances visualization in many scenarios. All the "carousel" controls we've seen so far only simulate depth by using ScaleTransform and TranslateTransform, but with REAL interactive 3D objects we could see some amazing things.
I'll try to post some examples soon.
New Controls: 3D versions of the Panels (Stack, Wrap, Grid, etc.)
If we're going to have 3D objects that can be interactive, then we need 3D implementations of the Panel controls. Sure, you can import 20 different 3D controls into the current Panels, but with each object comes a bunch of lights, a camera, a 3D Viewport and other things. All those objects give you a high overhead - especially for low-end systems. You also can't do camera movements if every object uses a different camera.
With the controls I'm talking of, you'd create a 3D viewport which would have the lights and camera. You add a container like a StackPanel. Then you can add multiple meshes/3D objects to the StackPanel.
Interactive version of VisualBrush
VisualBrushes are great. They help a lot. But perhaps the next release could have a more powerful version of the VisualBrush where interaction with the controls of the source of the Brush is also possible.
Out-of-the-box Window dragging capabilities
How many times do we have to create a huge Thumb control and add the drag code in its events.
Out-of-the-box Vista Glass support
It's not hard to implement. But it is time consuming. I think this support should be given right out of the box. A property like the Margin property where you give the coordinates for the glass, and it is applied for you.
Customizable Page-Navigation frame
This would be nice. Page frames can be nice, but they stick out in branded apps with their silvery shine. They really should be customizable.
Anyone on the WPF team wants details, feel free to contact me anytime.
It is not often that I get to take part in a project this exciting. I've been talking of "extreme" UX and now I can finally start talking about it.
Today, we created a new team at nukeation that is in charge of nukeationFingertip - an initiative to create groundbreaking new user experiences for many common problems that lack a decent solution. We are fortunate to be working with some incredibly smart people who will add their expertise of their respective fields to our UX expertise and the result will be, as someone put it today, "really fun to play with".
Projects code named "Nukium", "Black Folder", and "Griffon" are part of the initial offerings. Stay tuned, as we'll be posting more information and screenshots soon.
Technorati Profile
The limited time offer for the free Reuxables Theme "Paper Lite" will end at 23:59 (IST) February 17.
Download now!
Some people (designers, mostly) gave me crap for my post "tips for designers", but I have one more (and a few more for later):
DO NOT COMPRESS JPEGs AT 90%!!
I'm often left aghast by how people will start compressing their JPEGs to the maximum. I'd highly recommend using as little compression as possible. Sure, compress until the file size is acceptable, but please don't maximize the compression just because it will give an even lower file size! The compression ruins the image quality very much.
Use PNG. Especially if you're sending it to your designer.
For a limited time, we are offering a "lite" version of
Reuxables Theme: Paper.
Paper Lite includes two themes from
Paper - Blue Static and Gray Animated and all its features, except:
- Compiled DLL instead of source code (therefore, not customizable)
- A bit of manual code required
- Only 2 themes instead of 4 (1 static, 1 animated)
- Zero Customization, you can only use the themes as they are
Download DLL (38.4KB) | Download Demo EXE
You can use the theme for commercial applications as well.
With the undersea cable problems and my average net speed being about 15k/sec, I am presented with ample time to think and write about UX. Something I haven't been able to do for quite some time.
Last night, I had a short exchange in the private MVP discussion list about Differentiated UX. And more specifically, actual examples of differentiated UX's and the reasoning behind them. Below are some modified excerpts from my emails:
It is very easy to go overboard when creating a super cool UI. But to have a good UX and a differentiated UX, we don’t have to go recreating the wheel. We just need to identify as many areas of our own applications that can benefit from an enhanced UX. Not think of universal UX concepts that would benefit every application. That is what component vendors do and that ends up creating only a mediocre UX.
Think of this in terms of a website. Using a CMS like DotNetNuke is so easy and it lets you quickly get things done, but there is only so much customization possible because to benefit the most number of users, the creators must stick to a one-size-fits-all template. A custom CMS, while much harder to create in comparison would be built specifically for the site in question and therefore would have more originality and flexibility.
One aspect of DUX I’m messing with is windows. Mainly modal windows. If we compare more recent applications to something from the Windows 98 or 2000 era, the number of modal dialogs has gone down. SysTray popups have removed the need for so many message boxes and other modal dialog based notifications. Often modal dialogs are not really needed. In many cases where files will be stored in only one place, the Open/Save dialogs can be removed completely. Windows Live Writer does a good job with that.
Taking again the Open/Save dialog example, see the image above. This is an in-page implementation of an open/save dialog. The design consideration here was to quickly identify the “slot” you want to save or open. Filenames were not a user-relevant element, so we did away with it completely. Extra info would be provided by a large Super Tooltip. We also use physical focus by blurring everything else so as to give this “dialog” total focus.
One thing I specifically mentioned was that blind usage of 3rd party components is more or less putting the UI and the UX in a box and limits creative UI. Take the DataGrid for example. In certain business scenarios, it makes perfect sense. But developers often become too eager to just slap a grid on the window and bind it to the data source. It’s so easy. But it is often unproductive for the end-user (even if they themselves don’t know it).
In this project, we were given an existing medical application front end and were asked to “idiot-proof” it. The app used DataGrids for a list of visits of the patient. No way would an inexperienced user – especially under stress or in emergency situations – be able to quickly navigate a grid and understand the data. So we implemented a customized DataBound template of the WPF ListBox (not even ListView).
This is a simple List, but look at the DUX/features:
- Big icons (with totally different colors for each state) quickly relay the status of each item without needing textual data.
- Large easy to click items.
- Column Name is repeated in each item, so if the user is looking at an item at the bottom of the list, the eye doesn’t have to travel all the way up and see which column it is. It may seem like a very minor time saver, but when a single app is used all day it ends up saving a lot of time.
It was still just as easy to bind to the DataSource.
One last example: LogiDine. This is a restaurant reservation system app we did for ASPSOFT. And do note, this is Windows Forms (in .NET 2.0) not WPF! Just about everything uses OwnerDraw code. But the main DUX feature here are:
- In-page “Add Customer” dialog, avoiding the modal dialog. Especially since this would be needed frequently.
- A NumericUpDown control is nasty for quick input. So we added preset buttons next to them. Clicking a preset would quickly input the value in the spinner.
I've been writing a lot about very high end ideals and concepts for UX. But how does it all relate to the average developer?
So here are some realistic UX goals that we aim for, and recommend for you too.
Minimizing the number of controls on the screen
Try to limit how many controls are visible at once in a single window. Use Tabs or dialogs to distribute the controls.
Random tip: Avoid using a GroupBox when possible - it adds to the clutter.
Clearly convey messages, and use visual cues instead of, or in addition to, text whenever possible
When writing dialog box texts - especially for messages or questions - be very clear and use simple language. Having an icon - a relevant icon next to the text can increase cognition by a significant magnitude!
Refer to the sections "Use custom message boxes", "Get the tone of your text right", and "Simplify recognition with Icons" in my article "How to create the best UX for your application" for details.
Think like the user or get someone to do it for you
The user thinks very differently from the developer. Mostly because he or she often doesn't have a clue about how to do things in the app. If you can't think like the user, then get someone - possibly fitting the target audience description - to test your app. You don't need to do full usability testing if you don't have the time or inclination. Just make sure your app's features and its usage is obvious to the user. If something isn't, then you're doing something wrong.
If you can't do graphics, then don't! Get a designer
This is very important. And not just because my alter ego is a designer. If you know you can't do design, then please don't. Get a designer. Enough said.
And most importantly: Don't mistake UI for UX and vice-versa
It is an unfortunate fact that people think of UX as nothing more than a pretty UI. No, UX encompasses the interface and its behavior. Especially the behavior. UX means making things more user friendly and easy to understand; to better the overall experience of using the software, not just the look.
Some time back, we made a public beta available for <WTF/> or WPF Transformation Framework (formerly, WPF Transition Framework).
The project started as a simple means to add animated transitions without having to create Timelines. Basically, you just created a WTF powered Canvas, set the animation type and duration, and you're done.
WTF Transition Containers Code Sample:
<WTF:TransitionCanvas Name="TransitionGrid1" FireOn="OnLoad" Duration="500">
<!-- Add your controls here -->
</WTF:TransitionCanvas>
From the feedback we received and some other gaps in WPF we encountered ourselves, we set out to add more power to WTF before releasing the final version.
The image above shows the new WTF:Animation control and the WTF:PowerImage control.
The WTF:PowerImage is bound to the WTF:Animation exposed frame (ImageSource), creating an animation with the Add Blend Effect
The new features include:
WTF:TransitionContainers
You are no longer restricted to using just the canvas. You can choose from TransitionBorder, TransitionContentPresenter, TransitionDockPanel, TransitionGrid, TransitionStackPanel, and TransitionWrapPanel. With TransitionContentPresenter you can apply transitions to ANY control in the WPF ecosystem!
Each TransitionContainer is an inherited control, therefore it is extremely easy to replace existing containers in your UI with these.
New Transitions
Enjoy a vast range of transitions including:
- FadeIn
- FadeOut
- BlurFadeIn
- BlurFadeOut
- SlideIn
- SlideOut
- BlurSlideIn
- BlurSlideOut
- ZoomIn
- ZoomOut
- BlurZoomIn
- BlurZoomOut
- RotateIn
- RotateOut
- BlurRotateIn
- BlurRotateOut
New Transition Functionality
Sequence multiple transitions with the WaitBeforeFire property. Instantly disable animations during resource hungry operations. Integrate transitions more easily with Transition status events such as TransitionFiring, TransitionFired, and others.
WTF:Animation
Add traditional frame-based animations with the new WTF:Animation control. Full support for 32-bit transparent PNG for creating animated controls and more. Control the playback directly from XAML or from code-behind.
Features include:
- Loop and Back-Forth Loop options
- 32-bit transparent PNG animations
- Exposes current frame for direct DataBinding with other controls such as WTF:PowerImage
- Load frames from embedded resource or direct files
- Select between Performance and Quality rendering modes
- Inherits all features of the WPF Image control
WTF:PowerImage
Use the powerful ADD Blend Mode (aka Hard Dodge) on your images. Use WTF:PowerImage to apply the Add effect to the WTF:Animation control!
The ADD blend mode is used by designers to create glow and other effects. WPF does not support Blend Modes, so WTF:PowerImage provides a workaround.
Keep watching this blog for more demos.
Release Information
<WTF/> will be available in two editions: a full featured retail version, and a free express edition. <WTF/> is scheduled for release near the end of Feb 2008.