artypapers - 0 Comments
Feb. 22, 2009
At the end of October '08, I set out to design a little app to make the CalTrain schedule more useful. My goal was pretty simple: Create an iPhone-friendly webapp that could show the number of minutes until the next train. I chose a webapp over an iPhone app because I wanted to get something up quickly that could be accessed anywhere.
At the time I started to sketch the first version of the design, I was watching a lot of TV, primarily home improvement and design-related reality programs. This led to a fascination with hardwood flooring, baseboards and wallpaper. I'd seen an interesting digital representation of the last two elements in the beautiful Facebook application called Pixels. Using that as inspiration, I created the first iteration of the app:
This version lasted for a few weeks but I quickly discovered a lot of problems with the design. First, it was slow. Downloading the hardwood floor over the Edge network was painful. Second, it was amazingly difficult to read. The stop names were so small, I'd often forget to flip between stops when making a return journey. Third, the information available was mostly useless. I had a feature in this version where you could click into the later trains for more detail but even that felt like too much work. Finally, there wasn't a way to get to older train information. So, if trains were delayed, there wasn't an easy way to look back for the numbers to ensure that train included your stop.
The second major iteration was the result of a couple things. The first was a desire to remedy the usability issues of the first version and the second was a new fascination: Wall-e. Namely, the controls available on the Axiom for things like setting the position of the sun or providing status information to the captain. A lot of details critical to pulling off a successful interpretation of that style were very difficult given the constraints of a simple, lightweight web page. So instead of an extension of that style, I settled for something in its spirit with big chunky type, huge North/South control and the menu is meant to reflect lit retro buttons.
In terms of practical goals there were some clear wins. Speed was improved by using fewer images, readability was improved with more contrast on important data, more useful data was available and exposed through a new menu navigation and schedule view.
This version was available for many weeks but it too presented interesting problems. To start, there is a technical limitation with mobile Safari's implementation of the viewport. So, to accomplish something like a menu system pegged at the bottom you have two options: a div with an overflow scroll that requires a two fingers to operate or a bucket of scripts to fake a viewport. I went with the two finger scroll but soon realized the downfall of that choice: coffee. See, I'm a coffee junkie and everyday I pour a togo mug and walk that to the station. It is extremely difficult to hold an iPhone, a cup of coffee and two finger scroll your way through a full schedule of trains.
That interaction was so cumbersome I had totally stopped using it and other critical features! The entire app was limited by a singular yet huge shortcoming. So, I decided to consider making a native iPhone application again.
By the time I started to think about correcting the challenges posed by the latest set of features, it was clear that some things were plain unnecessary. Refactoring the IA was step one, iPhone app or no, and a few simple sketches illustrated the core elements and important workflows. What you needed was to set your stops, see the next train, see the direction you are traveling, how to change that direction and how to access the full schedule if the next three trains don't provide you with enough information. Boom. Done.
Stylistically, instead of aping someone else's style, I went with my own. Using colors from an abandoned Artypapers redesign, elements from the prior two designs that worked the best, and attempting to speak to the roots of the app by aligning towards a more European transit style the latest version is really close to something simple, useful and beautiful. The only element that fell flat were all my attempts to design a map icon. So, for now, I've recreated the brilliant map icon from the beautiful and elegant Everyblock.
If you live in the Bay Area and have a chance to use the CalTrain app, I'm interested in your feedback in terms of bugs (it's very much still in beta) and the UI.
artypapers - 1 Comment
Feb. 08, 2009
Launching the tenth version of Artypapers got me thinking about its designs through the years. Astute visitors may have already noticed that I've been carefully archiving the index page for each major iteration in the site's footer.
What you may not know, however, is how and when each version came about along with what my motivations were for each design. So, here are a series of snapshots to describe that intent:
Version The First - Late 2003
The only design to have been built with tables arty|papers 1.0 featured a crazy handcrafted pixel font, the first public version of scribble and the since deprecated photo.lab photo album viewer. The design itself was small, dark and moody -- not unlike myself at the time. At this point, getting access to scribble was extremely important and the index was little more than a way to achieve that.
Version 2.0 - Late 2003, Early 2004
Dabbling in CSS when doing so was still considered controversial, I launched arty|papers v.2. This was also when I created the first version of the Artypapers' Blog known at the time as the ap.log. Somehow I decided that the '.' branding was cute and carried it to certain products but not cute enough to carry it across everything. This is very early in my career when I was essentially a programmer who dabbled in designing things and I couldn't have given less of a shit about branding at this point.
Overall the design becomes bigger, consuming the entire page, but it still holds true to the colors of the prior versions. I actually still like this design quite a bit.
Version Three - Early 2004
Featuring experimentation with a more vertical page layout the third version chilled out the harsh dark vibe and, apparently, demonstrated that I'd learned how to use the drop shadow tool in PhotoShop. The navigation needed more room to expand because this was around when I launched the first version of the CSS Help Pile (then known as the "Hack" pile), the set.log and a more formalized framework for account management.
Most of the work I was doing at this time centered around figuring out the underlying development framework for the mini applications I was developing. Having more ideas for little apps than bandwidth to build them all necessitated creating something agile and easy to handle things like authentication, preferences, etc.
Version Fo' - Early 2004
I think this version lasted like a month or something. It looks like I removed a ton of functionality and obscured a ton of content. Probably the colors and hover states resonated with me and that drove to this actually launching.
Version 5 - 2004
Dots. Hovers. Arrows. Tabs. Drop shadows. Gradients. Awards! The fifth version of arty|papers was a turning point to be sure. Designed in a hotel room while pseudo attending NCECA 2004 in Indianapolis, this version was the first to start to pull content from the mini-applications forward into the overall site experience because of a renewed attention to information architecture. This design basically shifted the site from being a set of pointers to something much more tangible and unified.
It was also the first version of the site to get wider recognition and was featured in the CSS Beauty design showcase.
You may also notice the screenshot of Side Job Track off to the right at the top. I could probably do a post about the major iterations of that site's index designs, as well, because it went through a similar series of iterations and had its own lessons to teach.
Version Si... WTF?! - Early 2005
While this version is admittedly shocking, it was a critical version in the site's evolution. Here, I moved away from the arty|papers branding for the first time, started to explore alternative logo treatments and began to explore my overall usage of light, mood and richer graphical treatments. This design didn't -- and shouldn't have -- lasted very long but it shook me from my paralysis that resulted after the high praise surrounding version 5 (lots of abandoned designs that weren't "perfect") and set the stage for later designs.
Version Se7en - Mid 2005
After the sixth version of the site, I decided to take color a little more seriously and wanted to somehow recreate the success from the 5th version of the site and carry forward the important lessons from the 6th. This led to basically blowing the doors off the color palette, keeping the highlighted application section, other applications section and carving out a column on the site for just the latest content. That content being essentially feeds from the increasingly popular CSS Help Pile and the intermittent ramblings from the ap.log.
Looking back at this design, it looks totally dated and crazy to me but at the time it was featured in Stylegala and a few other design blogs surfaced it as an example of good design. It pretty much solidified my meager standing in the design community for a brief, wonderful moment.
Branding-wise I started to evolve to the current single word site name: artypapers. I preferred to type Artypapers in text but the logo looked better in all lowercase... that inconsistency always bothered me.
Version 8 - Mid 2005
This version of the site is still one of my favorites. I love pretty much everything about it. The colors are totally vibrant, the IA separating the applications from the blog content, the introduction of the little icons for each application and the coupon for Side Job Track (see the glow behind the SJT screen caps? Brilliant!).
I also created a pretty decent grid layout that helped each distinct section have its own voice while maintaining a pleasant harmony overall. Worth noting is that I essentially flipped the application versus content screen real-estate. So, the content got much more attention and the applications much less. This version was also pretty quiet in terms of design awards and general recognition. Hm. Although, it might have made its way to CSS Beauty again. I can't remember.
Aside: The footer section is particularly humorous to me because it's not unlike the auxiliary column design used on Facebook currently (see right column on home.php). I didn't design Facebook's rounded gray box implementation, but I'm not a fan of it. Maybe that's because I already did that design so many years ago. :P
Number 9 - Late 2006
This widely popular version of the site was featured in design galleries, blogs, web 2.0 style guides, featured in .net magazine and received more random praise than I can even begin to quantify. Taking styles from a long since abandoned application (do you remember Mix/?), this version was playful and fun. It benefitted from a few things I'd been slowly refining overtime: vertical layout, color, type, iconography, story telling and branding. I never felt that just the artypapers was enough to carry the site and the subtle off-kilter teardrops are meant to mimic the "a|p" branding of designs past. Adding some gloss, dimension and bright colors didn't really hurt, either.
I had a lot of fun with this design, even taking it to the extreme when crafting that year's Artypapers Awards. The colors also speak back to the popular 7th version of the site's design with its use of greens, browns and hot pinks.
Version X - Early 2009
I wanted to kick off this year with something completely different. Having spent so many years slowly building out a glossy style, I wanted to take a step back and shore up the basics. This means tighter usage of grids, more attention to type and creating a portfolio that I can use to demonstrate my skills as a designer beyond the superficial.
So, I flattened the logo, I dropped all but one color and I finally have a possible solution for the logo that bridges the gap (literally) between the Artypapers the plain text and Artypapers the logo. Type purists are probably shaking their heads at this one, but I just love the play on "Arty" versus the "papers".
One could argue I probably could have tightened everything further but once again I was stuck with perfection paralysis and decided to move forward without waiting for it to be perfect. This is so simple and clean and refreshing that it opens more for the future and leaps over the hurdles I created for myself in the last major iteration.
I'm super excited for what's coming next.