Design.PBS: The blog of the designers of PBS Interactive.

Jonathan Harris, a digital artist who comes from a programming background has changed the way I think about the web and digital storytelling. His bio says, "He makes projects that reimagine how humans relate to technology and to each other." I am most interested in the way that he chooses to visualize information. As technology rapidly evolves and people get more involved with machines, it seems that today's artists deal with a sort of anticipation and anxiety about how fast things can change and how quickly we must adapt in order to keep up. Harris's work comments directly on this as he works on issues of isolation, the passing of time, history, and in one project (I Want You to Want Me) the world of online dating and the way that people portray themselves through the internet in order to find a "perfect match" amidst all the chaos. He has a very keen eye for design and has revolutionized the idea of a web page for me, making it a canvas with no boundaries. Here are a few of my favorite of his projects that I think do an incredible job of connecting design and technology, visual and interactive--people and machines!

"We Feel Fine"

This is a great new type tool for the ipad. It's got a pretty sweet color scheme and of course great functionality, not to mention all the pretty type. Best of all the fonts that are featured are all free to download! Check out the links below for the full review and font downloads.

If you work in the web industry you know that it's all about sharing these days. Not just your life in digital format but content from videos, news, and articles--anything a web site can serve up is often shared and at PBS Parents that is the consensus; we want to make it easy for folks to share the content they feel should be shared. According to the following infographic, with 500 million users on Facebook and another 106 million users on Twitter, not enabling a way to share is just plain negligent.

Which is why we decided to upgrade and customize our AddThis sharing tools.

Providing quick and easy access to PBS KIDS programs on PBS Parents was the overall goal of this project. With thirty-five shows to showcase, the only suitable option was a manually rotating carousel.

Thumbnails can be scrolled with the use of previous and next buttons. When rolling over any thumbnail, the caption or the title of the thumbnail will slide up. Each image and caption linking to the programs' page.

The PBS iPad video app is the first iPad application from PBS to be released. Since it's launch it's appeared on the iTunes top-pick lists including its most recent appearance as iTunes iPad App of the Week!

In the past week, a new blog was launched by PBS Parents called Kitchen Explorers. I was faced with the challenge of bringing dynamic content onto a static page. That meant no PHP or other programming languages could be used to achieve the goal. Instead, I turned to jQuery and JSON.

The Method

I thought of using RSS feeds (using Google Widgets), I thought of iframes (and grimaced as I did so), I even tried jQuery but none of it initially worked the way I needed it to. The big problem was formatting the content the way it needed to be without using a bunch of CSS hackery. The biggest challenge was displaying an author image and a dynamic comment count. I found lots of PHP solutions but as mentioned above, none of those would work for the PBS Parents homepage.

Carsonified is brilliant in putting together these online conferences, we get to watch some of the best speakers at the convenience of our space and theirs. Recently, we attended their UX Online Conference with a terrific line-up of four sessions by: Cennydd Bowles, Leisa Reichelt, Aza Raskin, and Dan Rubin.

The preface to all the sessions were to make the user's life better and not just satisfy business goals as we have to remember only happy customers can make any business better.

Nathan's thoughts on "Undercover User Experience" by Cennydd, "Being an undercover UX designer sounds smart not to mention gratifying. You may not be tackling the most glamorous parts of a product at first, but it gets you in, applying design skills to something that's less than perfect by giving it organization and establishing rules - making a better user experience. It's a gratifying way to slowly and effectively create change.

Adding Unrequirements to a brainstorming session could become useful in discovering a projects needs. What are the things that we're NOT adding? Things we want to stay away from and avoid, along with all the things we DO want to add.
Perhaps we add unrequirements to our next brainstorm session and see where it doesn't take us ;) "

I was interested to listen to Cennydd talk about the idea of experimenting with six different solutions for a specific problem using Adaptive Path's design exercise on Six Grids: Six Ideas. Coming up with the first three solutions are easy, and it's usually the ideas that's already floating around in your head, but beyond that it could get adventurous. I like to explore that.

I felt Leisa hit the nail on the head about "DIY Design Research", that we don't have to lean ONLY on Usability Labs or hiring an agency to get feedback on our designs. And also gave affirmation to the idea we are toying around here about user-testing concepts and verbal ideas even before we have anything formal in paper.

Nathan mentioned that, "Aza Raskin spoke about getting people excited about a product or design, and how to inspire participation in the design process. He says a designer should not attempt to create a vision for the whole thing, just the beautiful part. Sharing this vision will get people on board with an idea. After all, it's the style and the sexy party that appeal to the designer's DNA, right? Once we share our vision and get people excited about creating something new, we're ready to begin. Aza explains that it's the starting point that gets users excited. "Let them begin" My take away is that encouraging participation is key in the designers ability to generate awesomeness through design collaboration - whatever form it takes."

Erin had similar thoughts on Aza's session, "I thought the emphasis on prototyping in the most basic stage was fascinating, for instance Aza's example of how the creator of the palm pilot started by carrying around a block of wood. I think too often we only explore ideas in a very linear way, on paper or on the computer, but actually creating something tangible from day one, when you know you end result will be tangible is an idea that seems to have been lost, at least in the early stages of idea and design formation."

Some of my fave notes from Aza, " To Design is to Inspire Participation", "Value of an Idea is 0, unless it can be communicated", "Prototype: To Convince yourself and others of an Idea".

Jen Huls on "Hands on Prototyping"; "I found the presentation on high-fidelity prototyping the most interesting. I like the idea of giving users the ability to see the finished product without the added concern of cross-browser testing, or completely coding a page in HTML/CSS/Javascript. Just coding the areas of concern or interest for user testing seems the best use of time and resources. As Dan Rubin pointed out in his presentation, 'even inactive elements tell a story'.

I also feel it's beneficial to have the ability to change repeated end-user issues on the fly. If you can correct as you go, it allows end-users that follow to focus on other areas of the site that may not be working the way one hoped. It also leaves one less thing to worry about during the OawvInRaf4 phase."

Overall, I think all the four speakers provided valuable thoughts on our everyday web issues..and we thank you for inspiring us~!

As we continually switch gears to work on newer products for the iPhone and the iPad, and since our team have done some of the legwork, we would like to share the resources we found on the intertubes.

Design PSDs:

Download The iPhone GUI PSD Here

Download The iPad GUI PSD Here

Courtesy of http://www.teehanlax.com

Other Resources:

A Flickr Set of Dissected iPad UI Conventions
Notes on iPad UI conventions culled from public sources (mostly Apple promotional videos)

iPhone UI Element Guidelines
Documentation from iOS Reference Library

iPhone Interface Guidelines/ Metrics by Martin Ebner
Human Interface Guidelines based on Apple's iOS Documentation

iPad UI Element Guidelines
Human Interface Guidelines based on Apple's iOS Documentation

iPad Wireframe .eps file by Sarah Parmenter
Sarah Parmenter is a UI/Web Designer and Speaker: Her blog has some useful insights as well.

Free Icons for iPhone & iPad applications
Designed and optimized for use on toolbars and tab bars in iPhone & iPad apps.

go crazy!

One of Yahoo!'s best practices for speeding up your website is to combine files to reduce the number of HTTP requests. These days, I use JavaScript and jQuery on every single site I work with, and it's easy for me to get a bit lazy and forget to go to the trouble of combining all of my JS and minifying it. Plus, once I do that, every time I make a change to the JS, I have to do it all over again. It's kind of a pain.

So today I finally created a simple way to make this part of my workflow easier. I love using UNIX to work -- vim is the best text editor I've ever used, and I love the flexibility and power you have when using secure shell (SSH) to access a server rather than relying on an FTP program. I'm no veteran of the command line, but the great thing is that even very simple tools can improve your life as a web developer enormously.

I wanted a script that would quickly and easily grab all the JS files in a given directory (I always keep all my JS in a /scripts/ directory off the webroot), minify them using YUI Compressor (which dramatically reduces filesize), and combine them all into one file.

Here's how you can do the same thing.

Every epic tale has a beginning. For me, the story of the PBS KIDS Tecmo Super Bowl Championship began twenty years ago, in a small farm town in rural Nebraska.

The Beginning

I had a friend in the town where I grew up who owned a Nintendo. My parents didn't believe in video games, a policy that fueled, unfortunately, an appetite for them so strong that when I went to friends' houses, I didn't want to do anything but play Nintendo. This was a source of significant tension, as my friends wanted to spend their time doing other things; they could play whenever they wanted, after all. They would play me, bored, for as long as they could bear - I couldn't compete with them as a rank novice - and then try to drag me outside.

This friend in particular used a ruse about the black square plug that connected the Nintendo to the outlet. "It's too hot!" He'd say. "We have to turn it off now or it might break." The box on the end of the cord did indeed grow hot with use, so I reluctantly complied, but I would frequently hector him about whether it was cool enough to go back to playing.

In his dark, wood-paneled den, in his stack of gray Nintendo cartridges, was Tecmo Super Bowl, a game that would loom large in video game history. Tecmo, a Japanese company, put out the first sports game to license the names of both the NFL teams and players. It was an amazing game, simple by today's standards, of course, with simple, easily grasped controls and surprising depths of strategy. All players had individual stats - strengths and weaknesses - and teams had unique characteristics. Successful at the time, it has become beloved and enshrined in the years since, replayed endlessly on emulators by the adults who played it as children.

As a ten-year-old back in Nebraska, I found it an intriguing but frustrating game. Each team had eight plays - four rushing, four passing - but I struggled to carry any of them out. I was immediately sacked most plays, or I threw the ball to a covered receiver or even out of bounds. There was so much going on the moment a play began that I struggled to even figure out which player I was controlling, let alone where to move him. I finally managed to complete a few runs, and, upon making a touchdown, there was a dramatic animation of a player spiking the ball and the words HERSCHEL WALKER flashed on the screen.

HERSCHEL WALKER! I didn't know much about sports, but I had inherited a hand-me-down of a purple, Vikings jersey with the name "WALKER" on the back of it. I wore it for a couple years till it became so many threads; I hoped that somehow it would endear me to the sports-obsessed kids I went to school with. (Sadly, only a 49ers jersey would have helped me much back then.) But the effect of this connection was electric: I'd taken that famous name and played him to glory!

I tried playing against my friend and discovered that as soon as I called a play, I was sacked. Once. Twice. Three times. I punted. He threw long for a touchdown. I called a play: sacked! "What are you doing?" I demanded. He laughed. "I'm diving for your quarterback!" I don't think I played through that game. Tecmo Super Bowl was abandoned.

Twenty Years Later: The Tecmo Super Bowl Championship

BISHOP, the Creative Director at PBS KIDS, where I now work, has a little Nintendo setup at his desk. A small TV that still produces a picture as well as it did when it was made (about twenty years ago) with a quiet, lonely dignity and a top-loader Nintendo provide an instant trip back in time for those moments when we need to remember what it was like to be first lost in the magic of games.