A while ago, like so many others, I started using Instagram as a quick and easy way to capture and share photos I took. The functionality was great; quick and simple to use.
With the posting to Twitter, Flickr, Facebook, etc. it felt like the photo only existed for those who initially saw the link or image. This seemed appropriate since these photos were in fact a moment in time with an expiration.
Eventually, I wanted to share my Instagrams with others who weren’t following me and after I had posted them. I wanted a gallery.
Nothing really existed for that, so i thought as a little exercise to continue learning jQuery I’d try and make a gallery for myself. Initially, I thought I could just use an Instagram API, if it existed, which it doesn’t. Eventually, I settled on just using the Flickr API to pull any Instagrams I had posted there.
This solution seemed the quickest and easiest way to pull off what I wanted. Yes, it’s dependent on me posting to Flickr and the fact that Instagram automatically tags images with “Instagram”, but it works.
The result is a site called GramJunction.com. Initially this was just for me, but I eventually added the ability for anyone to create their own gallery by entering the a Flickr username they post to from Instagram. For example, my photos can be seen at http://gramjunction.com/#mostlyalso.
I definitely learned more about jQuery and using the Flickr API. It was a fun little project and it’s nice to see that others have enjoyed the site. I’ve also seen some really interesting stats in the site analytics showing how much Instagram is being used all over the world.
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:
Directional keypad navigation
TV-optimized design
Using the Play/Pause button to start/stop “Slideshow Mode” (or the “P” key if your in a desktop browser)
Horizontal scrolling instead of vertical scrolling
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:
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.
For some reason the Next/Previous media buttons weren’t registering, which I was hoping to use in “Slideshow Mode”
This week, RJ Owen, Leonard Souza and I presented a multiscreen app we built for Adobe MAX. The app was a “social jukebox” that lets party attendees play a role in DJing the party. That is, they can vote for the songs they want to hear at the party and songs with the most votes get pushed higher in the song play queue. We built a touch-enabled desktop app that acts as the “host” for the music and then there is a mobile app that allows people to interact with the desktop application.
The apps were fun to build and we used a number of Adobe technologies to pull them off. We’re hoping to keep pushing the multiscreen experience to include TV using Adobe AIR and an app for iOS. In the meantime, you can check out the images of the app in this post, our slide deck and our presentation on Adobe TV as soon as it’s available. We hope to follow up with a series of blog posts on how we built these apps.
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.
Recently, I had the opportunity to create some skins for Adobe’s Open Source Media Framework (OSMF) Flash Sample Video Player. Even though this was a quick project, I thought I’d put together a post that talked a little bit about the OSMF, the sample video player, and give a summary of how the whole thing went from design to final deliverable.
When I first heard about this opportunity I was a little worried about how difficult it might be to implement any designs I might come up with into the video player. Then I learned that Adobe was working with my friends at RealEyes and that I had a chance to influence the way the skin template for the video player would come together. I was sold.
The nice thing about this project was that a lot of the functionality had already been thought through, so it was purely a design and implementation project for me.
The Design Phase
Every project starts by getting everything that’s in my head on to paper via sketches and notes. I also try to get inspired in some way. Between my sketchbook and some inspiration, I can start to formalize ideas and develop some themes based on goals for the project.
Initially, I struggled with designs, mainly because when I think of a video player, I think of something that should almost be transparent or evident only when I need it to be. At the same time, these skins needed to represent different levels of customization that can be achieved with the OSMF Sample Video Player.
The way I broke through this was to draw inspiration from the visuals that would be displayed through the player e.g. movies, anime, TV shows, etc. I began to explore the idea of having the video player fit the content it would be playing. That idea was carried through the sketches and into some more polished design comps.
I always try to give my designs names to capture a concept and for easy reference, so we’re not referring to things like, “that blue one with the dark glossiness”. The designs that were chosen to move forward with were Formula, Core and Lunar.
In addition to the initial designs, there was also some time spent on developing some color variations. I tried to narrow down the colors to a minimal color scheme of 1-3 colors to make it easy to customize the skins. It was color theory class all over again.
Production and Implementation
After going through a round of color variations and picking the final designs I got to switch into production mode. I do all my designing in Fireworks, so I brought the designed assets into the Flash skin template that RealEyes was working on. States, animations and other visual design elements were also added once I had the necessary assets in Flash.
All along the way I was testing how the designs looked in the player itself. As I started putting the skins together there was a great deal of collaboration between myself and RealEyes. The result was a skin template that had a nice structure, but also allowed a wide spectrum of customization. You can use a skin and make minor changes to colors and fonts, or you can dream up something completely crazy and implement it very easily. It was pretty fun to work with actually.
Wrap Up
RealEyes kicked ass bringing this thing together and I appreciated them using me as a sounding board for ideas around how the final skin template should work. Adobe’s OSMF team let us do our thing while giving great feedback and direction all along the way. We all wanted people without any programming knowledge to be able to jump into a template and bring their designs to life as easily as possible. I think we achieved that.
You can learn more about Adobe’s Open Source Media Framework on the website. Check there to find out where to access the skins and sample video player.
