Juan Sanchez

A month ago I received a Google TV by way of the Adobe MAX conference. The point was to get people to start developing apps for the hardware using AIR for Android. For me, I was just excited to get something for free to play around with.

Once my Google TV arrived I went to set it up thinking it would take no time at all. Just hook it up to my TV and that’s it, right? Well, it was a bit more complicated than that. The first time I set it up I kind of half-assed it cause I just wanted to start messing with it. I accomplished that and then kinda forgot about it for a day or so.

My attention turned back to the Google TV after I had heard about the iPhone app and some of the other interesting things people were saying about it. This time I reworked my entire stereo, TV and set top box setup around the Google TV.

After all that there were some things that I really liked and other that were pretty flawed. I’m not going to get into those things in this post, but one of those things that caught my interest was designing/developing web apps optimized for TV.

I’ve been interested in designing apps for TV for a while and in many ways there are similar things that parallel designing for mobile devices, i.e. screen size, inputs, context, etc. As far as development goes, I started thinking about why I got this Google TV in the first place; to develop using AIR for Android.

However, there were some really great examples Google put out of apps built using HTML/CSS/JS. I decided to make a TV-optimized web app using that route, not only to learn how to design for large screens, but to also give myself a project to get into more jQuery.

As far as what app to build, I decided on making a Dribbble app because Tyler Gaw had already put together a great jQuery plugin for the Dribbble API called Jribbble. Using that plugin I just started throwing stuff together and designing as I went. Google put together some great documentation for both designing and developing web apps for GoogleTV that I kept referring back to.

After some random hours spent in my free time spread out over a few weeks I finally had something to release. I named the app “Jumbbbotron” and it works on both GoogleTV and WebKit browsers. I haven’t tried on other things like XBox, Wii or Boxee. It looks great on the iPad and other tablets too, although there are some interactions and bugs to work out on that front.

While building Jumbbbotron I was also able to incorporate some key things that helped the TV-optimized experience:

1. Directional keypad navigation
2. TV-optimized design
3. Using the Play/Pause button to start/stop “Slideshow Mode” (or the “P” key if your in a desktop browser)
4. Horizontal scrolling instead of vertical scrolling
5. Using local storage for preferences

Overall, I felt I met my goal of learning more about designing for TV and more about jQuery to create a nice TV-optimized experience. There definitely some fine-tuning left to be done, which I’ve started logging. I also found some areas for improvement on Google’s part, that have also been mentioned elsewhere, like:

1. The ability to specify a bookmark image for a web app, kinda like when you add a bookmark to your home screen in Mobile Safari. Right now if you bookmark a web page on Google TV you get a screenshot of the page.
2. For some reason the Next/Previous media buttons weren’t registering, which I was hoping to use in “Slideshow Mode”

Visit the apps web page or play with the app

Now I’m bummed about buying a new computer because I can clearly do everything I need on an iPhone.

via YouTube - Photoshop 1.0 on the iPhone!.

Recently, I gave a talk on why Adobe Fireworks is the de facto tool I use for designing applications and websites. People seemed to be amazed at how well Fireworks is set up for designing for highly states-based projects and how quickly you can make broad changes so quickly.

During the presentation I went on a tangent about how Fireworks should be *the* design companion to Flash Catalyst, because the applications map nearly one-to-one in the way projects are organized. Much better than Photoshop and Illustrator, which you can currently import into Flash Catalyst.

Anyways, I thought I’d run through in more detail (a.k.a. ramble about) some of the reasons why Fireworks should tie more tightly into Flash Catalyst more than other applications. Lately, it feels like Fireworks has been given little to know attention and I’d like to see that change.

Vector and Bitmap Editing

One of the things I like about Fireworks is the Vector and Bitmap editing environment. This means vector precision for artwork and powerful bitmap filters and effects. The reason I like this that I can bring vector artwork from Illustrator into Fireworks and have complete access to all the vector points. I can do bitmap editing with images I might bring in from Photoshop. I can copy/paste artwork directly from Fireworks into Flash. All this just makes it easier for me to produce a design for Flash, HTML, iPhone, or whatever.

If I could import a Fireworks file into Catalyst and Catalyst could use all of Flash’s powerful vector and bitmap rendering without any loss of fidelity, that’d be awesome.

Pages, States and Layers

If you’ve played around with Flash Catalyst you may be familiar with Pages and States. Maybe you’ve thought, “Man, it’d be great if there was a design tool that mirrored the Pages and States of Flash Catalyst”. Well, there is. It’s called Fireworks. Check it out:

Fireworks Pages and States

Catalyst Pages and States

If you’ve never used Fireworks, Pages and States is a super powerful feature. It makes my life so much easier keeping things organized. It pains me to see the files of designers who’ve created designs for apps/websites in Photoshop and Illustrator (I used to be one). So many files and layers to navigate. Here’s a little diagram I put together showing how you might organize a file in Fireworks.

Basically, Pages are major views of your app and States are the sub-views (like things expanded/collapsed, tile/list view, etc.). Everyone knows what Layers are (Fireworks has them too). Symbols are used for common elements, like Buttons, Navigation Bars, etc. Styles are things like Drop Shadows, Gradients, etc. saved together as a Style for easy application to other artwork.

Sharing to Pages and States

Another feature that is common across Fireworks and Catalyst is the ability to share artwork across States. In Fireworks you can share across Pages too. This means that if I have a common element, let’s say an icon in a button, and I want that icon to show up across all States, I can just share that Layer to all States. Again, this is a great way to optimize your workflow when a client asks you to make some kind of global change.

Symbols

Many Adobe applications support Symbols. A Symbol is like a group of artwork, but when you change the artwork it changes across every instance of that Symbol. For example, I can make a graphics that represent a blue button into a Symbol. If a client says, “Please make the blue in the buttons grey” I just drill into the Symbol, change the colors and anywhere I used that blue button symbol would now turn to grey. Symbols really help insure consistency as you design, just as you’d like to maintain consistency in an application you might be designing.

The way I think about Symbols in Fireworks are almost like components in Flash Catalyst. In Catalyst, if I turn artwork into a component, that component has States and I can change the State of that component from outside the component. I’d like to see this translate to Symbols in Fireworks, so I can define some States within a Symbol and then change a Symbol’s state without being inside the Symbol.

The thing is, Fireworks already let’s you define States within a Symbol. However, I have no way of changing that State from outside the Symbol. Even if it was just a little combo box that showed up when I selected a Symbol so I could change the state, that would be awesome. And, when I brought my Fireworks file into Catalyst the States would map 1:1.

Rich Symbols

Rich Symbols take regular Symbols to a near component level. I can make a Rich Symbol that has a space for variable text, define States, etc. and then changes any of those properties from a panel in Fireworks. However, it’s a pain in the ass to make them. I would like making Rich Symbols as easy as converting artwork to components in Fireworks. This coupled with a solution to my bitching in the previous Symbols section would make me a happy guy. And, again, this would integrate well with Flash Catalyst.

9-Slice Scaling

If you’ve worked with Flex or checked out CSS3 stuff you’re probably familiar with 9-Slice Scaling. You define some grid lines in a Symbol which dictate the way artwork scales. This is that magic feature that prevents your rounded corners from flattening out. It’s a great feature that should carry through importing from Fireworks into Catalyst.

In fact, I think it’s the only app where 9-Slice can be used on a text box, so as you scale artwork that has a text box in it the text box with scale rather than the text. It’d also be nice to see better/advanced text handling in Fireworks, kinda like the Text Layout Framework, which should import flawlessly into Catalyst.

Prototyping

Right now, I use Fireworks to prototype HTML apps, iPhone apps, desktop apps, etc. The built in features for this are great for getting something together really quickly, but I feel like they could be taken a lot further by carrying that functionality over to Catalyst. Just ditch that functionality in Fireworks in favor for using Catalyst’s strengths of a interaction design tool.

So…

I think there’s also a lot of untapped potential for Fireworks, but I’m more concerned that Fireworks will get killed off. If I had my way I would make it the design companion to Catalyst and drop support for Photoshop and Illustrator in Fireworks just because Fireworks and Catalyst overlap so much. I know those both drive revenue more than Fireworks for Adobe, but I’m talking if I could wipe the slate clean and focus on a specific workflow versus making every app under the sun work with every other app.

For all I know maybe all this stuff is coming in Fireworks CS5 or CS6, but I just thought I’d call out some of the things I, as a heavy Fireworks user, would like to see as part of the future for the product.

…one of the things our grandchildren will find quaintest about us is that we distinguish the digital from the real.

via LukeW | iPad Apps: Physicality and Heightened Realism.

This looks like an awesome eBook reader. Sounds like the company who makes this app is going to be bringing textbooks to Apple’s iPad too.

via Iceberg Reader.

Every designer I’ve talked has had an issue trying to present to clients remotely, especially on interactive projects like websites or apps. Clientshow is trying to tackle this with an application that makes it easier to present to clients, schedule reviews and insure everyone’s on the same page when it comes to design.

via CLIENTSHOW.

In a way, it kind of reminded me of ConceptShare, which I’ve used in the past and seemed to work great.