Archive for July, 2008

SEED Magazine on Flickr

Wednesday, July 23rd, 2008

With a presentation I’m going to be giving on Data Visualization at 360|Flex with Tony Hillerson and the recent Edward Tufte visit to Denver, I’ve had a lot of data visualization on the brain. I’m always on the look out for good examples of visualizations that solve a problem well without going overboard.

One of the designer’s at EffectiveUI turned me on to a magazine called “SEED“. SEED focuses on “Science is Culture” and it’s a really well-designed magazine that initially caught my eye with some nice diagrams and visualizations. It has a really great sense of design all-around with details that I enjoy discovering.

SEED Magazine

The best thing is that some has taken the time to go through issues of the magazine and post them on Flickr. The photos capture the magazine in a printed state rather than it being flat artwork which also adds a nice feel. The above image was taken from that Flickr photostream.

Check out SEED Magazine on Flickr

Scrnshots.com for Sharing Screenshots

Tuesday, July 22nd, 2008

Ethan Eismann pointed out a useful site, called Scrnshots, that allows you upload, comment and tag screenshots. I love these types of community sites that help open a discussion around design. They make it super easy for you to contribute by providing a desktop application(shown below) that allows you to make screenshots and upload them all from your toolbar. You can also share your screenshots via links or embedded widgets.

Scrnshots Desktop

What’s interesting is I was just talking to some designer’s at EffectiveUI about creating a site very similar to this, but with some additional functionality. I’ll probably end up using this site a lot, but there’s some features I think would really make Scrnshots stand apart from something like Flickr.

I’d like the ability to post iterations and have them be connected. I’d love to be able to post a sketch, get feedback, post a refined mockup with revisions, get more feedback, refine, get feedback, etc. Then, at any point someone could review the entire process I went through from sketch to final execution. Being able to see the thinking that went into something is where most of the value lies.

Being able to have comments point to specific parts of the screenshot would be cool too, kinda like ConceptShare. Maybe even a comparison overlay view to to get down to the details.

I can really see this site used for a variety of things, like filing bugs, reviewing designs, concepting, etc. In some cases, maybe I’d like to make some things private. Then I can share designs for internal purposes.

Scrnshots is one of those site I could browse for hours, kinda like LogoPond. Now all I need is some time to find and upload a bunch of designs that never made it beyond the concept phase.

Gumbo (Flex 4) Skin with Transitions

Sunday, July 20th, 2008

In my last post I created a skin example based on the new skinning approach coming with Flex 4. It was a simple button skin that had two states, multiple icons, filters and used FXG for some of the graphics. I thought I’d expand on that example to include transitions.

Over the weekend I noticed a new build of the Flex SDK popped up with some new samples, like a CircularScrollBar, and some Gumbo Effects (amongst other things). I decided to make a Button skin with transitions that included a Resize and Fade Effect. Here’s what the 2 states look like:

Flex 4 Transition Skin

The transition between the up and over states resizes the skin vertically then fades in the Sun/Cloud icon and the static temperature text. When you roll off the Button the transition plays in reverse. The transitions are pretty easy to implement if you’re familiar with working with Transitions and Effects currently in Flex. However, it will be nice to have Thermo to see exactly what your transitions are doing in real-time, especially for making more advanced composite effects.

During the process of putting this example together I experimented with using the includeIn property to only show content in certain states. Eventually I took it out, but that’s another option for showing/hiding content rather just messing with the alpha and scale. Plus, you’ll be sure that content will only show up in a designated state and not mess with the layout.

If you’re interested in what I did to get this sample to work you can download the source here.

Jumping Into Skinning with Flex 4

Thursday, July 17th, 2008

Last week a lot of new information came out for Flex 4 (Gumbo). One of the major changes we’ll be seeing in the next version of Flex is how you skin components. After doing some reading on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex 4.

Skinning in Flex 4 is drastically different than what we do today. Instead of having to work with a single graphic to represent the skin of a component, skins can be composed of multiple elements, like text, images, FXG graphics, transitions, filters, transforms, states, etc. You create your skin in a separate file and compose the skin elements together using MXML markup. This makes skinning so much more versatile so you can do things like layer graphics on top of labels, add multiple icons, create unique transitions and more.

Just to get started, I thought I’d just create a Button skin that began to illustrate some of the benefits of this new way of skinning. Here’s an image of the skin I ended up creating:

Flex 4 Button Skin

It’s a relatively simple skin (or is it?). If you look closer you’ll notice some things that aren’t possible to do in Flex 3 without making a custom component or using OpenFlux. Here’s why:

  • - There’s two icons. One is the cloud, the other is an arrow.
  • - Notice the Glow Filter on the text. How many times has a designer or yourself wanted to throw that in a Flex application only to have to scrap it ’cause it would take too long to implement.
  • - It may be hard to see, but the highlight on the Button is actually an FXG graphic layered on TOP of the Label and the 2 icons.

Those reasons are just the beginning of why I’m looking forward to skinning in Flex 4. You have so much more control and it’s easy to do. However, that may have been the case for me because I use Degrafa so much.

This was just a “getting started” exercise for me and I plan to get into more dynamic things like transitions, working with transforms, maybe adding some 3D, experimenting with Pixel Bender filters and working with skins for other components, like Lists. Definitely fun stuff.

In case anyone’s interested, you can download the source here.

More Details on Gumbo (Flex SDK)

Monday, July 14th, 2008

Gumbo (Flex SDK)There’s more information starting to filter out about Gumbo, the next iteration of the Flex SDK. A lot of Flex developers were excited after seeing Ely Greenfield’s presentation at MAX last year and it’s great to see things starting to take shape. There’s a lot of change under way and I’m sure the Flex and Thermo teams are moving ahead full steam with an eye on this year’s MAX Conference.

Of course, the things I’m most interested in are the ways they’re improving designer/developer workflows. As I mentioned previously, there’s a lot of stuff that has to happen to make that collaboration smooth. Here’s a few things that caught my eye:

FXG
FXG is the graphics markup that will allow you to compose graphics for things like skins and visual displays. This is similar in concept to Degrafa, but with more focus on Thermo and the capabilities of Flash Player 10.

Skin Parts, States and More
All these features surround the new approach to creating components in Flex 4. With skins being separate you’ll be able to do a lot of wild stuff without feeling the current constraints you may be experiencing in Flex 3. Things are going to get a lot easier.

Advanced Animations
A lot of designers and developers I’ve spoken with have had issues working with Effects and Transitions in current versions of Flex. Animations are being reworked to be more versatile and support both component and non-component objects like FXG, colors, etc. I definitely like the sound of “intelligent” and “blended” effects.

New Text Elements
I use HTML text a lot in applications to support styled and dynamic text. It’s great to see additional support coming for <div>, <span>, etc.

This is all really great stuff to read and I can’t wait to see it come across in code. I’m also looking to see how this all integrates with Thermo. For more information, check out Deepa Subramaniam’s post with a round-up of links.

Iron Man Article on the UIRC

Sunday, July 13th, 2008

Iron ManIt seems everyone was a-buzz when Iron Man was released in theaters not too long ago and rightfully so. When I saw the movie I was amazed by the visual effects and details that seemed to go into every minute of the film. Being involved with UI design I couldn’t help but stare at the intricacy of the interfaces that Tony Starck interacted with, whether while he was building the suit or when he was controlling it from the inside. A lot of work went into that.

If you’re interested in some of the background of the design of the HUD and POV systems, the UI Resource Center (UIRC) has posted a great article based on an interview with Kent Seki (Pixel Liberation Front), the Visualization and HUD Supervisor on Iron Man. I actually had the opportunity to sit in on the interview and I think the dynamics of the interview carried pretty well into the article. It was great hearing the thinking that went into things like the evolution of the suit, the way the HUD was treated as a character in the film, and more.

Here’s a great quote by Seki describing part of their process, which I think can apply to a wide range of design:

When you can justify all the visual elements, then you know you’ve done your job because you don’t have to worry about anything being random. We took out all randomness and made sure we had a purpose to everything. That way, when we consciously decided to do something that is random, we knew we were doing it for a reason.

You can read the article in its entirety on the UI Resource Center website. If you haven’t checked out the UIRC before, it’s a great source for articles on a variety of topics surrounding the world of user interface technologies and design.

skinClass or ClassReference for Flash Skins

Tuesday, July 8th, 2008

Today I came across something interesting while trouble-shooting an issue with Patrick Hansen, a designer/developer at EffectiveUI. Patrick was creating skins for a Flex application using Flash. One Button skin had some very intricate and rich animated artwork that extended beyond the “actual” bounds of the skin. That is, the animation had artwork that was masked so it would only appear within the viewable area of the Button skin. Below is a simple example I made to illustrate what I mean.

Button Skin with Mask

Button skin artwork that extends beyond the bounds. Unmasked and masked.

The animation appeared fine in Flash, but when it was applied as a skin to a Button the skin shrank in size (see image below). This was because the Button took into account the artwork that was masked in Flash. This made total sense. To fix it I thought, “Well, we could just use the bounding box technique that has been outlined in several Flex Component Kit Tutorials.” Easy enough.

Button Skin without bounding box

Button skin without a bounding box. The red is the “actual” bounds of the Button component.

If you’re not familiar with using a bounding box in Flash to define the bounds you’d like your Flash artwork to adhere too, the concept is simple. Basically, you create a box, make it a MovieClip (called “BoundingBox” or something), give it an instance name of “boundingBox” when it’s on the Stage and then use it to define bounds of the Flash content. Kinda like this:

Button Skin with bounding box

Button skin with bounding box (red) applied.

We did all that without any issues. However, we hit a snag when we tried to apply the Button skin that had this bounding box to an actual Flex Button component. We were trying to apply the skin by embedding a skinClass through CSS like this:


Button
{
skin: Embed(skinClass="Button_skin");
}

The Flex application would just hang. The trick to getting it to work was to just use a ClassReference like this:


Button
{
skin: ClassReference("Button_skin");
}

Everything compiled fine when using ClassReference. The skin looked exactly as it did in Flash and used the bounding box correctly. Cool!

The scary thing is that “Skin Import Wizard” in Flex automatically uses skinClass and most designers who use Flash are probably used to working with masks and artwork that extends “beyond the bounds”. The thing is that to a designer or developer it could appear that the skin is the issue, but in fact it was just a matter of switching the Skin Import Wizard default of skinClass to use ClassReference.

Just to make sure it wasn’t a fluke I made a quick test (view source enabled). If you wanna make the app break, just switch ClassReference to skinClass as shown above. Am I just doing something wrong?

Writing a Book? These Tools Might Help.

Sunday, July 6th, 2008

Authoring a book is no small feat, especially if you’re diving into writing one for the first time. During the process of writing “Creating Visual Experiences with Flex 3.0″ with Andy McIntosh, we tried and used a number of applications to make the process easier. There were several areas we had to overcome, which included: communication, writing, revising, collaboration, versioning and distribution. I thought I’d share some of the tools we evaluated and what we learned using each of them, also what worked and what didn’t work.

First off, there doesn’t seem to be THE perfect tool out there for authoring technical books. We came across “all-in-one” applications that were great for non-technical writing, but focused more on the author than the entire process of putting a book together. There are a lot of roles that get involved besides the author(s). There’s technical editors, peer reviewers, production, senior editors, etc. and they all play different roles. Some people don’t even get involved until half way through the process. All that said, here’s some of my notes on various applications we evaluated and/or used while putting our book together.

Communication

When Andy and I first started writing the book I lived in California and he was in Colorado. Every few day we’d discuss the direction of the book or review each others work. To avoid any additional phone charges we’d use some applications for chatting. Some of these might seem obvious, but hey, they work.

SkypeSkype
I’m sure a lot of people are familiar with Skype, but I’d say we used it 90% of the time to talk to each other. The quality was awesome and since I was already in front of my computer it made it really easy to jump into a quick call.

iChatiChat
If you’re a Mac user you know iChat. We would use this a lot, but not really for voice chat. We’d use the screen-sharing feature to review material, walk through a sample or collaborate. The quality of the screen-sharing was really smooth and worked great.

Writing

As you can imagine we spent hours upon hours in front of our computers writing. From the get-go we wanted to find an application we could easily work in without getting frustrated over things not formatting correctly. We also need an application that could export to MS Word because that was the format required for reviewing.

BuzzwordBuzzword
What better way to write a book about Flex applications then in an actual application created with Flex. Awesome, we thought. We started writing the book in Buzzword, but gradually discovered it was not to be. There were a couple things that didn’t work for us.

First off, there’s no way to create Text Styles, so we could predefine how text should look for Captions, Headers, Chapter Numbers, etc. We needed that in order to make sure formatting was consistent.

Then there was the horizontal sliding toolbars for paragraph formatting, list styling, images, etc. We dug the toolbars at first, but a lot of what we did revolved around formatting, so we were constantly having to switch between toolbars and wait for them to slide open. Sure, it only takes a second, but those seconds add up.

Sometimes we couldn’t remember which feature was in which toolbar, so sometimes the wrong one would get clicked and then you’d have to click another one. It would have been great if we could have dragged a toolbar out and have it take the form of a palette so we could quickly access the features we needed.

The last thing wasn’t a big issue, but it still came up. To use Buzzword we had to be connected to the internet. This was an issue when I was traveling, specifically while in mid-flight. In those situations I would usually work in another application then copy and paste it into Buzzword when I got a connection.

Eventually we gravitated away from Buzzword, which is a bummer ’cause I liked being able to collaborate on stuff.

Google DocsGoogle Docs
We had the same issues with Google Docs as we did with Buzzword. Google Docs does have Text Styling features, but they’re predefined. It also appears Google Docs is integrating with Google Gears to enable you to work off line. This may have helped us, but it’s just barely getting rolled out now.

Both Buzzword and Google Docs were great for the “pre-writing” or smaller parts of the book, like putting together the book outline, bios, proposals, etc.

PagesPages
Eventually we settled on using Pages. It had everything we needed and was super easy to export to MS Word without any loss of fidelity. Sure there’s no smooth way for collaborating, but we figured our ways around that.

One thing I’m keeping my eye out is for a web version of iWork that ties directly into MobileMe. It would be even better if the desktop version of Pages could sync directly with the web version. Throw in some iChat and you’ve got complete collaboration.

Pre-writing

The stuff I’m calling “pre-writing” are beginnings of chapters, code snippets, thoughts, ideas, links, etc. In our case this type of writing was a collection of thoughts and ideas of what we felt would work in the book, like an evolution of the outline. We’d then take those thoughts and start forming them into chapters. There’s a few apps we found that worked great for this.

JournlerJournler
Journler was an application I started using right around the time we started the book writing process. I would use it to capture ideas, images I came across on the web, sample UI scenarios, links, or whatever else caught my eye. I could assign categories and tags to the content and it would automatically list all the resources (images, links, etc.) in another panel, which made it easy for browsing. Best of all, it was freeware and worked with WordPress. Now it looks like you have to pay for it.

EvernoteEvernote
I didn’t use Evernote at all while writing the book. In fact, I don’t think it was even available then. Evernote was introduced to me by Tony Hillerson while we were working on our 360|Flex preso at the EffectiveUI offices. I just started using it and it seems to have real potential. It’s a desktop application that lets you freely write, capture web pages as text, capture images and more. What’s really cool is it syncs selected Notebooks with the service online, so you can access them on the web as well. Another cool feature is that it will scan photos for text, so you can search for text in photos.

It would be nice if text in photos could be translated to live text for editing. I’m think for handwritten notes, content I took a picture of in a magazine, etc. Being able to highlight areas in text would be nice too. I’d also like to be able to share notes with others, so they can edit them as well.

These applications work great. However, sometimes you can’t beat a pen and a pad of paper. Especially when trying to figure out what illustrations or diagrams should look like.

Distribution

When I say distribution I mean getting files to people so they can be reviewed, edited, etc. There were a lot of people involved in the process and they all needed to have the most current version of every bit of content.

Email
We very rarely used email because it was pretty much inevitable that it would get blocked or get stuck in someone’s junk folder. Plus, using email meant once you got that email you’d have to put it into some kind of organizational structure that may be completely different than someone elses. Probably not a big issue, but we wanted to try to keep things as organized as possible.

FTP
When we first started trading files we used FTP. This quickly became a hassle and had the potential to get real unorganized real quick. Plus, our Pages files would get uploaded as directories instead of files, so we would have to zip them up.

BasecampBasecamp
Eventually we settled on Basecamp. It was really easy to keep things organized with the latest version and make sure everyone was notified when the files they were most interested in were updated. Once we started using Basecamp the process became much smoother.

DropboxDropbox
We didn’t use Dropbox while writing the book, but I just started using it and I’m liking it so far. Basically it creates a folder on you computer where you can drop files into and have it sync up with their servers. You can then access those files on the web, share folders with people, add new folders, etc. This is kinda like .Mac, but it’s free (so far). I could see Dropbox fitting into the whole file-sharing thing depending what you were trying t accomplish.

Conclusion

There’s the rundown of the applications that played a role in the process of writing the book. During this process Andy and I kept brainstorming on the “Book Writing Killer App” that would incorporate all the features we needed for ourselves as authors, but also for all the other roles involved. For example, giving technical reviewers certain access rights to do what they needed to, but then also give us the ability to easily address their feedback.

Again, this is my first book authoring experience, so I’d love to hear from others if they had any applicaions they found to be helpful.

The New ScaleNine Design is Live

Saturday, July 5th, 2008

I’ve been wanting to redesign the ScaleNine site for a while now. As soon as I finished the book I immediately started to take advantage of my new found free time to work on a new design. After about a 1 1/2 months of getting in some hours of designing and coding here and there, the result is what you see now. Let’s do a before and after comparison:

ScaleNine 1.0

ScaleNine (old)

ScaleNine 2.0

ScaleNine (new)

There are drastic differences between the old and new designs and I’m pretty happy with the results. The new structure and organization of the site is going to allow me to do a lot more with content. The homepage specifically will allow some great flexibility for things I’m thinking about doing in the future.

I still have a bunch of content to add, including submissions to the gallery and showcase area. One thing I was sure to have in the new design was the names of the authors who created and submitted themes to the site. I constantly had to correct people who thought I made all the themes on ScaleNine.

So, there you go. A new look for ScaleNine.com. Stay tuned for some more updates in the coming months.

 

Thermo is Half the Story

Friday, July 4th, 2008

Everyone is getting excited as more details come out about Thermo. I’m sure the number of email requests to get on the “super pre-alpha” have flooded Adobe inboxes. The reason is that Thermo is looking to solve a huge gap in designer/developer workflow. This gap exists across pretty much every development workflow in various shapes and sizes, so it’ll be interesting to see what Adobe comes up with.

Thermo looks like a great tool, but it’s only half the story. The other part of the story (a big part) is what Flex 4 (Gumbo) is doing to make all the things in Thermo possible. You know, the code that’s generated behind the scenes as a designer is turns artwork into a working interface, adds transitions, etc. There’s a lot of work being done on Flex 4 to make Thermo look good, but each component, Flex 4 and Thermo, is vitally important.

Adobe Flex 4

If you were at last year’s MAX and saw Ely Greenfield’s presentation on “the flex roadmap”, then you probably know what I’m talking about. After MAX I tried to explain to people what I saw in his presentation, but it usually just wouldn’t come across. Now, on Adobe TV there’s a video of exactly what Ely was talking about. In the video he changes the way a component looks and acts all in a skin file. I assume this would be done by designer’s in Thermo so they don’t have to touch any code. This is also the same presentation that inspired Ben Stucki to create OpenFlux.

Adobe Flex 4

I showed this video to another developer and he asked, “Well, what will there be left for me to do? Create data and clean up Thermo code?” To him, making custom components was the fun part and now it seems part of that responsibility is falling on designers in Flex 4. The thing is, you can’t do everything with Thermo and Flex 4 out of the box, like turn a List into a spinning globe. I think things will definitely change to allow designers to have more control, but developers will now be freed up to do even more innovative things.

Things are definitely going to get interesting. Check out the video here.