When creating a theme it is important to consider that the Flex 4 SDK also allows for Flex 3 components to be used side-by-side with Flex 4 components. This means that skin artwork you create for Flex 4 components won’t get applied to Flex 3 components. However, there is a way to repurpose your pixel-perfect artwork for use with Flex 3 component skins. Be warned though, getting things to work properly will require some technical steps in MXML.

Part of the Flex 4 SDK includes a special skin class called SparkSkinForHalo. This class allows  you to repurpose your skin artwork and assign it to a Flex 3 component. While it does take an additional effort to account for the Flex 3 components, the additional skins will help insure consistency for both Flex 3 and Flex 4 components. Let’s see how it works.

1. Create a new folder and name it HaloSkins.
2. Create a new file called HaloButtonSkin.mxml and save it into the HaloSkins folder you just created.
3. Open the MXML file that contains your Button Skin artwork for your Spark components.
4. Copy the all the markup and paste it into the HaloButtonSkin.mxml file replacing any markup that might be there.
5. Locate the line that uses the s:Skin tag and in its place use local:SparkSkinForHalo. You also need to change the State tags from s:states to local:states and add a definition for the local namespace.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<local:SparkSkinForHalo xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:local="mx.skins.spark.*">
 
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
 
<s:states>
 
<local:State name="up"/>
 
<local:State name="over"/>
 
<local:State name="down"/>
 
<local:State name="disabled"/>
 
</s:states>

1. Delete the RichText, which is the label for the Button, from the skin. The reason you want to do this is that Halo components already have a label defined as part of the component.
2. That’s all you need to do for the skin. Now, you need to assign the skin to the Flex 3 Button.
3. Go into your CSS file and create a new style declaration for a Button with the MX prefix.

1
2
3
4
5
6
7
8

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
mx|Button
{
skin: ClassReference('components.HaloSkins.HaloButtonSkin');
}

1. All that’s left is to test the skin. Add an mx:Button to your primary view and run your application. You should see that the Flex 3 Button looks the same as the Flex 4 Button. You may need to define the mx namespace.

Now that you know how to reuse your skin artwork you can take the same steps to make sure all your components for Spark and Halo look the same. For an extensive view at how to do this across all components you can refer to the sample skins provided as part of the latest builds of the Flex 4 SDK.

Note: You can make a custom theme using only CSS, but keep in mind that the CSS properties for Spark skins and Halo skins are quite different. Refer to the documentation for both SDKs to learn about what styles are supported or take a look at some of the sample CSS themes provided with recent builds of the Flex 4 SDK.

Think about your current television. What’s great about it? Well, a great thing about it is that it can provide an awesome viewing experience. You can be instantly immersed in that experience with very minimal distraction.

Now, what sucks about? For me, it’s finding content. Endless scrolling lists, crazy remote controls and complicated set-top boxes. Granted, I only look forward to a few shows a week, but still, when I’m looking to watch something and tune in I immediately get overwhelmed. I just want to view stuff that’s relevant as quickly as possible.

Some solutions I’ve seen try to solve this by allowing you to search. Which may be part of the solution, but I really don’t want to have a keyboard on my lap to go with any remote controls. I’d rather just get rid of all that.

So, what’s the solution? As I mentioned, some of the technology we may have heard about may already be prepping us for a solution, beginning with the apps on your phone. Think about it? The apps you choose to download already begin to create a profile of your interests. Imagine if there was a way for those apps to display their content on a TV as easy as going into landscape mode or taking a picture.

We browse a ton of content on our iPhones, iPads and iPods. Wouldn’t it be cool, for example, if I were in the ABC Player app and while I’m watching a show I could tap a “Play on AppleTV” button, which would immediately detect my AppleTV device and start playing that content right on the TV? Better yet, what if I’m playing Real Racing and want to switch my view to play on the TV? Simple, tap the “View on AppleTV” button and now my iDevice turns into a controller and my view is now on the TV!

How would this work? We’ve already seen something like this on the iPad when you connect it to an external display. When you do, a completely different viewing version of the app is shown on the external display, while you go into a different mode of the app on the iDevice. This same thing would be great for TV because the iDevice could turn into the most appropriate thing for the way it’s being used. The iPad becomes the game controller or the iPad becomes the remote.

There’s one thing missing though; the hardware/software that connects the iDevice to the TV. How about that UI-less device people are buzzing about that is supposedly priced for $99? That device could sync what apps you have (wirelessly I hope) and when you trigger a bit of content you want to engage with on the TV, that triggers the AppleTV hardware with the app and you’re instantly in game/viewing mode, whether it’s content from the device or streaming.

Throw in GameCenter, iAds, an awesome OS, the ability for publishers to dictate content, a ton of devices ready to go and you may have that go-to-market strategy Steve mentioned. With it, there’s an opportunity to bring a whole new level of engagement to the TV. Would you pay $99 to get that? I would.

Side note: I used a lot of screenshots from iPhone and iPad because it’s what I had access to, but a lot of this stuff applies to other mobile platforms.

Menu to select iPad Lockscreen Options.

Basically, instead of tapping the picture icon, there would be a more universal icon. When you tap on that you would see a popover with options for apps that support the lockscreen. These would be optimized views that did very specific things. For example, selecting “iPod” would shuffle songs like a jukebox, like this:

The iPod App as a Lockscreen

Other examples

Any app could be packaged with the optimized lockscreen view. These views would do one thing and provide no options besides switching to another lockscreen version of an app (and unlocking your iPad). Here’s some other examples:

QlockTwo – This is a typographic clock app. It would be awesome to be able to have this as an option and run as a clock on my desk while I’m not using my iPad.

Twitterific – This could show your tweet stream, but I think that might be a little extreme. It could show a single tweet from your tweet stream or maybe display your tweet stream in a different way that didn’t feel overwhelming.

This Day in History – Display a single view with a list of things that happened this day in history or maybe cycle through different events for that occurred on that day.

Dictionary.com – Could show the word of the day or cycle through a different word every hour.

Sure, something like this shortens the life of your monitor cause your screen would be on a lot more. Still, I thought it was worth mocking up.

You can see the images in higher resolution on my Flickr page.

knowledge games: games designed to help you get more innovative, creative results in your work. We’ll show you not only how to play knowledge games but how to design them so they fit your own specific work goals.

This got me thinking about how popovers might be used outside of applications and in the homescreens where your app icons live. Specifically, I was thinking of how I could use popovers to peek at specific content from an app instead of launching the entire application. For example, peek at recent emails, see what AIM buddies are online, etc.

Sure I could fire up the application and navigate to the information I’m interested in, but I’m lazy and am not interested in doing that. So, here’s some mockups of what I’m thinking. The popover could be displayed by double-tapping the app icon.

Peeking at Twitterific to see only recent tweets

Peek at AIM to see who's online

See what the current weather is like

The person who creates the app can dictate what shows up in the Peek functionality of the app, but the goal would be to have a minimal amount of interactivity. Otherwise, what’s the point? The user could just launch the application.

It would also be important to keep content to a minimum. For example, don’t show an entire Twitter stream, just show the most recent tweets. Maybe even limit it and have the option to see more tweets that launches the app.

Customization of each Peek view might be interesting, but it may not be necessary. For example, setting Twitterific to show recent replies versus recent tweets.

Dashboard and Widgets on the iPad

When you think about it, this feature mimics in some ways the Dashboard in OS X. So, if these views are already created, why not have a Dashboard app on the iPad?

To add these Peek views as widgets to the Dashboard app you could drag the icons onto the Dashboard app icon similar to the way folders work in iPhone OS 4. The only difference would be that the Peek views appear in the Dashboard now and the actual apps themselves don’t leave the homescreen.

It’s just an idea

Like any quickly executed idea I’m sure there’s flaws in this, but I thought it’d be fun to mock up. You can see the full resolution mockups on my Flickr page.

Communicating thoughts and ideas can be one of the biggest challenges in an industry that relies so heavily on visual interpretation and recognition. If you’re working on an idea by yourself, with a colleague or a client, it’s one thing to see an idea in your mind and another to get it out for others to evaluate. As a UX designer, sketching is a daily necessity. It’s one of the most valuable tools you can wield.

At EffectiveUI, we recognized just how important sketching is that we made custom EffectiveUI sketchbooks. They’ve evolved over the years in design and purpose. These sketchbooks were extremely popular within the company and beyond. When we’d visit clients they’d come to meeting with their EffectiveUI sketchbook in hand.

Then, along came the iPad. Everyone at EffectiveUI was excited about this new magical device. In fact, the concept for Ideate was born when Jonathan Branam gave me a call out of the blue exclaiming, “I want to build an iPad application”. After some brainstorming we decided to bring all the usefulness of our EffectiveUI sketchbooks to the iPad. We named the app “Ideate”.

Why take something so simply splendid and make it digital? Well, we wrestled with that a bit. Believe me, I love the smell of Sharpies as much as the next person. Give me a black pen and a highlighter and I can share ideas with the best of them. However, there are limitations that I kept experiencing when using good ol’ pen and paper. Those were the things we were looking to eliminate with Ideate. We weren’t looking to replace the sketching experience, but enhance it.

Every time I want to share a sketch I go to our copier/scanner, scan my sketch and email it to myself. I then email that on to someone. Or, I use my iPhone to snap a picture, but if lighting is bad, my sketch looks bad and that’s not good. It was this experience that drew us to making sharing sketches easy. The thought of sharing sketches right from my iPad to Flickr or via email really excites me.

Another thing I would do is draw out a template as a base for what I would be sketching and then make multiple copies to sketch on. For example, to accurately represent an idea for multiple states of a web application I would draw out a web browser, make copies of that and then sketch over those copies. The custom EffectiveUI sketchbooks alleviated some of this, but we thought it could be even better. As a result, we incorporated a wide variety of Templates you can load as backgrounds and sketch right over them. Bye, bye copy machine.

For every design, there are always sources of inspiration. I always bookmark sites, take screenshots, clip magazines and maintain my own little inspiration library. We wanted to bring this idea into Ideate as well. The web is an infinite source of inspiration, so why ignore that? You can clip images from the web via Safari, bring in images from your Photo Library or access Clips that come with the application to use as reference, provide inspiration or add to your sketch.

Designing and building an iPad application was particularly interesting, especially because we didn’t have access to the device. To get over this hump, Jonathan fashioned a prototype of wood, paper and boxing tape. Lo-fi, yes, but also incredibly helpful. He also made it so you could slide different printed Templates in and out. This prototype helped us make some valuable decisions, like the placement of the pen tray. It’s placed there so you can quickly switch between pens with your thumb (if you’re right-handed) as your sketching, but expect customization soon.

The process of bringing this application together was completely agile and while we cut features we made sure the application was still useful. One of the things that really helped make progress was relying on the user interface elements and guidelines Apple gives you to work with. They put a lot of thought into the interface behind the iPad, so we leveraged that as much as possible.

Hand Template

One thing we found and didn’t really expect was how useful Ideate is for other industries. As we were working on the application people in the company mentioned the idea to their doctors, architect friends and teachers. What we found is that the same ideas around Templates, sharing and drawing as a communication tool resonated with so many people. This pushed us to make more custom Templates to support these use cases we came across.

The way this app came together was quite the experience and a real testament to the kind of talent I get to work with at EffectiveUI. It was amazing to see a short phone call turn in to a finished application so quickly. We had an in-house concept artist create the Templates and Clips, development happening in-between client work and design changing on-the-fly as user feedback rolled in. It was fun.

Thinking through an iPad application and seeing it built has done wonders to help me understand what it takes to make something for this new device. Will Ideate replace the familiar pen and paper? No. The application is another tool that can be used to support your own thought process. For myself, it’s something I’ve been waiting for.

Ideate is available in the App Store for $3.99. You can learn more about Ideate on the website or follow @ideateapp on Twitter.

Here’s a random pic from outside last year’s Google I/O.