I should first note that there are already websites and mobile apps that fulfill this need, answering that important question of “when is the train coming?” But I think this experience still has room for improvement, particularly when it comes to the mobile experience. Specifically, I’m interested in reproducing the experience of quickly looking at a sign, both in its visual aesthetic and the quick-casual-glance nature of the behavior.

The solution? A widget on your phone’s desktop, showing train arrival times at the station of your choice. Wherever you may be, a quick look at your phone would give you the information you seek. Done as a design exercise, below are some mockups of what such an app/widget might look like.

Putting this idea into form, I first created a very literal translation of the sign that greets me when arriving at the Greenbelt metro. I designed this as an Android widget, taking up a reasonable four columns by two rows of desktop space.

Immediately I realized that Greenbelt is in a relatively rare situation amongst it metro station peers: it is at the end of a line, and all trains go in a single direction. A more practical widget solution would need to account for stations with trains going in multiple directions — and possibly, on multiple metro lines (i.e., green, red, etc). For design & layout, I found easy inspiration in the great UI work done by David Desandro and Ian Storm for their recent Next Metro app built for the 10kApart contest.

A nice look & feel for the widget in place, but a few more design challenges remain. How would users select the station to view, and how would they change to show other stations? Keeping this theoretical application/widget as simple as possible is the goal — so I believe a simple list would suffice. Let users mark certain stations as favorites, which would allow them to quickly find their preferred stations from the list of several dozen.

And there we have it! While not 100% of the UX details are in place, the vision for the widget (and background application) are set forth here. Would this be possible on Android, given, the unique ticker typeface in use? I’m honestly not sure. Any font would suffice, on a functional level — but my ultimate aim was to think about how the *look at the sign* experience we all know well could be directly translated on to the mobile devices we use every day.

It begins in mid-September 2009, where I found myself armed with a nagging curiosity about the show Lost – a show I had never once watched. For various reasons, the idea of the show intrigued me greatly. Somehow, in all the many Lost conversations I had overheard in years prior, I strangely managed to remember practically nothing in the realm of spoilers. Time travel, something called the smoke monster, and that someone died in season 3: these were the only items of baggage I had accumulated. Not bad.

The final season was only months away from airing. I knew that I had better take action soon if I ever wanted to take part in the experience of watching it live. It was the discovery that the whole show was available on Netflix’s Watch Instantly which spurred me to action. One rainy Saturday later, I was five episodes in to Season 1 and not looking back. In the end, it took me quite a big longer than expected to get fully caught up – but I was able to do so less than two weeks after the premiere episode of Season 6. And tonight, February 17, 2009 – I shall tune in live to watch LOST, fully caught up, for the first time.

I should note that in doing my preparation for this infographic, I decided to extend far beyond the start of the “open era” (1968) entirely for the amount of data. A post-1968 graph would give me much less to work with.

Otherwise I feel I should pay respect to the accomplishments of Rod Laver and Bjorn Borg: both of these men had utterly remarkable runs (both earning 11 titles in less than a decade), but neither becoming the true front-runner within the constraints of this graph.

I hope you enjoy! If you find this interesting, also be sure to check out this comparison of Federer and Sampras in their race to 14 titles. Meanwhile, here’s to Federer’s hard work… let’s see how far he can take it.

Overall, I found this experience to be wholly satisfying. Putting key ideas into sketches required an interesting use of my attention span: in addition to listening intently to the ideas being communicated, I was simultaneously forced to employ creative sketching solutions that would properly embody the most important parts of the talks.

Upon returning home from the Roadshow, I was quite surprised to find these sketches spanning 5 full pages of my notebook. Upon scanning the notes and adding a bit of chronological organization, I’m left with a sort of visual map of the workshop (as I experienced it). I hope these notes might be of interest to others who attended.

As for adventures in sketchnoting? I look forward to continued exploration when the proper circumstances arise in the future.

The final product is available as follows.  For additional notes about the techniques used to create these graphs, keep on reading.

Here are some tips & techniques I employed to put this together.

Have Your Data Ready

Before diving into Illustrator (or whatever your tool of choice may be), spend the necessary time finding all of the data you will need for your graph.  Go the extra mile to arrange and label everything properly — you may return to the data at a much later time and will be glad you did yourself the favor.  Aside from reaping the benefits of good organization, this step is additionally helpful in keeping the grunt work of data-fetching separate from the creative requirements of the task.

Start with the Simplest Graph Possible

An elegant, attractive graph is seldom created from scratch.  There are usually a number of tried & tested variations that must be wrestled with before arriving at the final product.  With this in mind, a good first step is creating some bare-bones, stripped down graphs to get bird’s eye view of the data.  This phase is all about finding the approach that will best server your original vision.  Sketches work great in this stage.

What is the story you want to tell with your data?  This is an important question to keep in mind, as different visualization approaches will yield different results.  Play around with things.  See what looks good as well as which data comparisons are intuitive and interesting.  Seek feedback from friends or colleagues who might offer a valuable opinion.

Using the Grid

Before long, it will be time to create your final, finished product.  At this stage, the very most important thing you can do to keep things looking straight and orderly is use Illustrator’s grid feature.  You’ll want to make grids visible (CTRL/CMD + “), as well as enable “Snap to Grid” (CTRL/CMD + SHIFT + “).  Additionally, you may want to go into Illustrator’s preferences to customize the grid spacing and subdivision width (which you can modify at any point).

Another useful tip to keep in mind when using grids extensively is enabling Overprint Preview (CTRL/CMD + ALT + SHIFT + Y).  This will have the gridlines appear on top of all objects & paths, allowing you to eliminate any guessing that might otherwise be required in keeping things properly arranged.

Using Layers Wisely

Keeping your objects arranged in layers is a huge time-saver when dealing with moderately complex projects in Illustrator.  This was especially true in my case of creating four separate graphs, each of which contained separate groups of objects.  For example: if I wanted to modify the color of the Roger Federer graph plots, I’d only need to target the layer “Federer” and all plots (on each graph) would become active.

Layers can also be locked, combined, or temporarily hidden to make document management easier.

Go Forth and Visualize

And that’s it!  Combined with a simple bit of color and typography, you can transform any crude visualization into an attractive graph.  Keep in mind that data in itself can be rather inert; though when arranged in a conscientious manner it can tell an interesting story.  Hopefully the techniques above can be of use in recreating your own graphs of a similar nature.

By the end of the plane ride, things worked out great:

Throughout the remainder of the post, I’d like to share an overview of the approach I took and the Illustrator techniques used to make this happen.  The result is not merely a tutorial, but rather a broad look at some Illustrator skills any user might find helpful in such a situation.

Start With What You’ve Got

First step when resources are short?  Make the most of what you’ve already got.  While in a perfect world I’d have access to the font on which the Capitals logo is based, in this case I’d have to make due with the letters (or rather, shapes) that make up the source logo I was starting with.

Fortunately, “Capitals” and “@davidpots” have quite a few letters in common.  My first move was to ungroup the shapes in the “Capitals” logo and move all letters that matched into their proper placement in their “@davidpots” counterpart.

After this first step alone, about half of the letters are already in place.  What’s left?  Creating the “@”, “d”, “v”, and “o”.  Onward we go.

This Shape + That Shape

To create the remaining letters, I would have to create custom shapes based on the contours of existing elements. This would ensure the overall look & feel of the logo remained consistent.

Starting with the “d”, I saw that the base contours I’d need already existed in the “c” and the “l”.  Through combining these two objects, the resulting “d” would retain the general shape of these other letters.

So far so good.  While the remaining letters wouldn’t necesarily be as simple to create, the basic premise & approach would be the same.

Take This, Tweak That, and Drop the Rest

Next up is the letter “v”.  After a moment’s investigation, it seemed the best way to recreate the bottom point of the “v” (with existing elements of “Capitals”) is through the upper-right corner of the letter “p”.

Unlike the creation of the “d”, this would require a bit more work.  Instead of simply combining two separate letters to create a third, I would instead be transforming & tweaking part of a letter and then getting rid of the rest.  I did it like this:

First, rotate the “p” 180 degrees…

Second, use the direct select tool to increase the height of the left “arm”

Third, use the Pathfinder’s divide function to get rid of excess shape at the top

And that’s it! The “v” is ready to be inserted into its namesake.

The exact same approach was used to create the “o”.  Starting with the already-existant “p”, (1) the shape is divided, as to get rid of the unnecessary bottom stem.  (2) Next, the remaining “corner” is duplicated & rotated 180 degrees.  (3) Finally, the two remaining pieces are moved into place to form the “o”.  Voila!

Round the Corner(s) & Tie Up Loose Ends

The final and most challenging letter to create was the “@”, which would require the most alchemy of the bunch.  In summary, my plan would be to first (1) create the interior shape of the symbol, and second (2) use an external stroke to create the “wrap around” shape of the symbol — this would ensure the curves were 100% right-on. Here’s how I made it happen:

Creating the inner shape
The first step was creating the inner shape of the “@”.  Locating all I would need in the base of the “d” contour, I simply created a dividing line and used the Pathfinder’s divide tool to make a clean cut:

Rounding the Corners, Part 1
So far so good — but I realized that I would need to round out the corners on the right-hand side of the shape I created (lest the sharp/jagged run wild and free).  To make this happen, I first (1) spotted an existing corner “curve” in the “p”, (2) used the Pathfinder’s divide tool to isolate this corner, (3) and finally shifted this over into the contour of my original shape.

Rounding the Corners, Part 2
The previous “round the corner” approach was used one more time for the upper-right corner of the shape.  This time I used an existing corner from the “a” to make it happen.  Same basic steps:

Creating the Outer Wrapper
In order to create an outter wrapper for the “@”, I decided to use the object’s stroke.  This would ensure the curves remained consistent in both contour and width.  To make this happen, I first (1) gave an exterior stroke to my original object. Next, (2) an additional stroke of then wrapped around the shape again.  Finally, (3) after expanding the strokes into proper shapes (Object > Expand), I used the Pathfinder’s divide tool to get rid of the undesired middle “red” section.

Finishing Touches
The very last step involves tweaking the lower-right section of the shape to complete the “@” transition.  This involved (1) using the Pathfinder’s divide tool to once again get rid of the undesired portion of the outer wrapper.  (2) Next, I created a small curved shape to join the two shapes, which was (3) moved into place and combined with both shapes to complete the task.

And We’re All Done!

And there you have it!  All shapes have now been created.  I needed only to align the items as desired and save my final product (which I now proudly wear as my Twitter profile pic in support of the team).

Could this have been arrived at quicker if I had the original “Capitals” font to work with?  Of course!  But that is removed from the point: this was instead about the challenge of a self-imposed quickfire task which forced me to think quickly & make the most of the resources at hand.

In closing, I must of course bestow the Caps with all the good luck I can muster for game 7 against Pittsburgh.  It has been a truly epic series so far, and I trust Washington is going to bring it home to DC with their best performance of the series.  Let’s go Caps!

Things seem quite different as an adult, especially one living in the early 21st century. The future no longer waits quietly over the horizon, but is instead standing at the doorstep. At times, peering ahead one or two decades seems somewhat unfathomable, as our lives change so much with each passing year. How to put it all into perspective?

The solution is simple: turn to a media futurist!

Particularly, I speak of media futurists Gerd Leonhard and Glen Hiemstra, the work of whom has left me recently fascinated. It isn’t that they talk about the things that will happen, but rather the things that are happening right now in the realm of media. That is, anything and everything pertaining to the web, music, video, technology, copyright, sharing and so forth.

Life in the information age will be quite fascinating, and it is great to have thinkers like Leonhard and Hiemstra working hard to help us make sense of it all. Curious to hear what they have to say? A great introduction to both Leonhard and Hiemstra can be found in the FutureTalks series of conversations. The pair share their ideas and thoughts on several different media-related topics, as listed below. I have included links to each conversation in both video or mp3 form.

Otherwise, the blogs of both Leonhard and Hiemstra are great places for regularly updated views and news. Do yourself a favor and check them out… you will not be disappointed!

The Future of Media (Hiemstra)
54 minutes | mp3 | video

The Future of Media (Leonhard)
53 minutes | mp3 | video

The Long Tail
11 minutes | mp3 | video

The Future of Communications
14 minutes | mp3 | video

The Future of Entertainment: Music and Media
12 minutes | mp3 | video

User Generated Content
13 minutes | mp3 | video

Commercial vs. Shared Culture
13 minutes | mp3 | video

The Future of Advertising
12 minutes | mp3 | video

Beyond Web 2.0
12 minutes | mp3 | video

Technology vs. Copyright
13 minutes | mp3 | video

Media Megatrends
12 minutes | mp3 | video

More coming soon.  For now, enjoy the video!

The Past? It’s a blur…

Rewind a few months back, when a gathering forever of accumulated eye strain had finally pushed me to the limit.  I bit the bullet and went to see my opthamologist.  After a few visits, he advised I get glasses.  Fair enough!  I’d be able to see, right?

My next move was a stroll on down to a few nearby retail eyeglass shops, where I was consequently shocked.  Glasses are expensive.  Really expensive.  Even the ones on the lower end of the scale at the cheapo store.  Throw in some extra lens fees and not much help from my vision plan?  The final count was way up there.

Looked like I didn’t need glasses that bad.  And so it went, week after week of me refusing to give in so easily.  But then it happened — a happenstance reader comment at the bottom of a random blog, and my glasses life was changed forever!

But wait, there’s hope!

I had found a post titled Adventures in $40 Eyeglasses, and leaving me hugely intrigued.  I read the post, scoured the comments, followed the links, rinsed and repeated.  This was exactly what I had been looking for.

Long story short?  You can order glasses online.  The very same glasses you’d get at any of the chain/retail places.  And they’re cheaper… so much cheaper.  Reading comment after comment and post after post, I was as good as sold.  Glasses for $40, give or take?  Where do I sign up.

Too good to be true?

In actuality, this all sounded like a great idea, but part of me was hesitant.  Enough so, actually, to not jump to action for a few weeks.  The obvious drawback to ordering glasses online is not being able to hold the frames in your hand, try them on, and extending your trust to some random online store to get your prescription right.

When all was said and done, it all happened for me over the course of a wave of sudden motivation one Saturday afternoon.  I was suddenly determined to just do the thing: get online, find a pair of glasses, make the order, and let the chips fall where they may.

Placing the Order

I ended up settling on $39Glasses.com, which I chose because of a 10% off coupon (and excellent reader feedback, of course).  I dove into the glasses catalog, picked literally the first cool pair I saw, and hit check out.  I wasn’t messing around.

The first test was entering my prescription.  I wondered: would this website’s order form have all of the necessary input fields?  After all, a prescription looks kind of scary.  Bunch of strange words and degree measurements… and yet, upon loading the web form, they were all accounted for!  Good sign.  I entered my digits and proceeded.

The second trial was that of deciding upon lens quality.  It works like this: if you get the default (cheapest) lens, there is no extra fee.  Above it, there are all sorts of ways to supersize your ocular aids.  I was going to keep it simple and go with the default.  I hoped it would do.

The final trial was that of measuring the distance, in millimeters, between your pupils.  This sounds scary, easy to mess up, or otherwise a nuisance — but it was in fact the easiest trial yet.  I grabbed the ruler, put it on my forehead, and looked in the mirror.  A quick confirmation of my measurement from my wife and I was set (even alone, you really cannot mess this up).

Deliverance

That was it.  The order was placed on a Saturday afternoon.  The total cost, after saving 10% but adding on a small shipping fee, was right around $40.

The package arrived on Tuesday.  I opened it up and was at once surprised.  The glasses came with a carrying case that was not a piece of junk.  Solid, sturdy, and strong…  alright.  But what about its contents?

I opened the treasure chest to reveal my new glasses.  Upon picking them up, my first thought was wow: they actually have some weight to them!  I was half-expecting the cheapest plastic known to man, but this was certainly not the case.  I put them on and have been happy since.

Whole Lotta Recommendation

Nearly four months later, I have only good things to say.  The glasses have held up extremely well, even with the relative rough use I put them through.  Even with their plastic lenses, there are no scratches or blemishes as of yet.  All screws are still tight, nothing loose or wobbly.  In fact, I’m wearing them right now!

In the end, I would have to whole-heartedly endorse the online-glasses course of action.  Though I used 39glasses.com, countless readers elsewhere have had similarly glowing things to say about other online retailers.

So, do yourself a favor!  If you need glasses anytime soon, check out either of the links below as a starting point to locate the best retailer & product for you.  You will find plenty of links to retailers within:

• Adventures in $40 Glasses (blog post)
• Glassy Eyes (blog, forums, reviews, etc)

Ironically, as countless as online tutorials may be in number, there are few available resources devoted to teaching designers-in-training exactly how to make the most of tutorials. The importance of this, I believe, goes beyond any individual tutorial you may stumble across. The finest tutorial in the world won’t do a thing for a student who has no desire to truly learn the subject matter.

While I make no claims to be the finest designer in the land, I do have the immediate experience of having been a devoted student of design for the past few years. I have worked through countless tutorials — some for better, others for worse — and in all my of journeys have taken away a few useful lessons.

What follows might be called a theoretical approach to making the most out of a tutorial. Depending on your relative skill level and familiarity with the tool in question, the specifics of this approach may be more useful for some than for others. However, the underlying framework remains applicable across the board, whether you are a novice or an expert, no matter what the tool in question.

Preface: Finding a good tutorial to work with

The crucial first step in tackling a tutorial is finding a good tutorial to work with. The specifics of this approach will vary depending on your tool, but there are a few important considerations that seem universally applicable.

Above all, try to find tutorial resources that are (1) maintained by a single person (or small group of people); and (2) consistent in the quality of their tutorials. Try to avoid sites that offer “hundreds of tutorials” collected from various different sources: these sites tend to lack consistency and seem stale. Sites operated by a single individual (or small group of people) usually provide quality content, as well as the opportunity for rich feedback from both the tutorial author and regular visitors to the site.

For Photoshop and Illustrator, I recommend the following tutorial resources as some of my favorite:

• PSD Tuts
• BittBox Illustrator Tutorials
• Web Design Wall :: Design Trends & Tutorials
  
• Veerle’s Blog :: Tutorials
• Computer Arts Tutorials (UK Magazine)

To go along with the steps below, I have chosen to follow a recent tutorial at PSD Tuts: creating a grunge poster. I have not had much experience with the grunge aesthetic, so I thought this might be a good example to work with.

Stage One: Follow Along Exactly

Once you find a tutorial, a good first step is to follow it exactly step-by-step. In the context of the stages I will describe later, it is important to following along and imitate exactly what the tutorial demonstrates (down to the last detail). Why? To shut off your creative mind. In this initial stage, the main objective is to go through the mechanical steps.

Don’t bring thinking into it yet. Keep it technical. This will lay the groundwork for the future stages, where the technical skills are assumed and the creative energies are beckoned forth. If you try to do both of these things too early, you risk running into more than one wall at a time, something sure to stop you in your tracks and rob you of the benefits you’d otherwise gain from completing the entire tutorial process.

Particularly in Photoshop, you will find that many tutorials ask you to apply a certain filter or layer settings. In this first stage, mimic the settings they give you straight away. Don’t worry about the “why?” or “what does this setting do?” questions just yet. The concern here is to imitate each action in a timely manner.

If you do have any questions or ideas you would like to explore further, take a moment to write them down — you’ll get to them later. This first stage is not the best time to follow every side-trail, or you will easily get knocked off your primary task and lose track of your greater objective.

You may get stuck at one or more places in the tutorial you choose. For whatever reason, you may not be able to follow along smoothly, whether it be because of your own skill level or an area where the tutorial isn’t clear. No matter what: do not get hung up over little details. The most important thing in this stage is to get through the entire process. If you messed something up, take note of it: you will have a chance to improve the next time around.

For the tutorial I have chosen to follow, the result after this first stage is below. I followed the instructions as closely as I could. While there were a few points where I wasn’t able to follow along exactly, but I stayed on target and reached the end. As you can see, things aren’t 100% identical, but for the most part I stayed on track.

Stage Two: Get Innovative

Finished working through the tutorial for the first time? Good… but don’t think you’re done, for the work has just begun. It is at this stage where amateurs will move along, leaving behind the skills and techniques they have just been introduced to. For aspiring professionals, the real work now begins.

In stage two, the primary goal is to go through the tutorial again, but this time you will deviate from the prescribed course and begin to introduce subtle changes to the exercise. Use different colors, images, brushes, and assets of all kinds. While the underlying approach to the exercise remains unchanged, you will begin to make the work your own. This is when you will take the time to explore the tangential paths that beckoned during stage one.

Unlike the first stage, it is important that you do not race through this second phase. Take some time to explore and play around with things. Ask questions about why the original tutorial makes certain choices and what purpose these choices serve. Begin to think about where you might take these techniques with your own work in the long run. If you like, you can steer yourself away from the principles that don’t seem to make sense to you, and guide yourself toward the ones that seem revelant. You are still bound to the tutorial, but you’re gaining an increasing amount of control. Continue to work through until the exercise is finished, yet again.

Below is my progress after completing stage 2. I used the same general grunge approach (along with the stripes), but mixed up the color and made the text a bit more relevent to my own website. I was sure to spend some more time with the filter settings, as well as making sure I nailed the white stained border that I missed out on in the first stage.

Stage Three: Make it Your Own

In this final stage, you will approach the blank canvas one final time. This time around, however, you are off the leash: take the techniques you have learned and fully make them your own. It is up to you: anything is possible.

By all means, do not necessarily expect your final product to resemble the original tutorial at all. Rather, this might be thought of as an ordinary graphic exercise that happens to use techniques you’ve just learned.

Perhaps the most important aspect in this final stage is to make your work relevant to you as a designer. How can these techniques be used in my everyday work? How might future projects benefit from these skills? Be sure to ask these questions, thinking long and hard about the answers. You have wrestled with and tamed the knowledge in stages one and two, and now is the time to follow through with the education process.

My result after this third stage is as follows. I have decided to build off of my result in stage 2 and build a website layout around this design aesthetic:

In the end, your design arsenal will be bolstered with yet another technique waiting to serve your needs. There will always be more to learn, but the least you can do is make sure you are retaining the techniques you’re introducing yourself to. Going through these three steps will help ensure this happens.

Conclusion: Sharing Your Work & Final Thoughts

A tremendous benefit available to all internet-equipped designers these days is the ease with which users might share their work, even from tutorial exercises. This gives you a chance to not only showcase your budding talents, but also get feedback and ideas from others who have followed the same tutorials and utilized the same techniques.

This is something I have only just started to explore, but the possibilities (with Flickr alone) seem very promising. Two of my favorite tutorial resources, BittBox and PSD Tuts, each have Flickr groups for user-submitted images. Very handy indeed!

• PSD Tuts Flickr Group
• BittBox Flickr Group

So: go forth, conquer, and share!

In the end, it seems that the most important thing to keep in mind when thinking about tutorials is that the techniques covered are ultimately meant to serve our design needs. While discovering these tutorials and techniques may be easier than ever, it is much more difficult to fully assimilate them into our design arsenal.