Pattern Tap collects the best examples of user interface design from around the web and allows users to create and save sets for their own reference. I exchanged a couple of emails with the creators of the site, designer Matthew Smith and developer Chris Pollock, to learn about their experiences developing the site and what they have in mind for the future.
Jim Ramsey: How much does the finished product differ from your initial concepts of the site? If it's significantly different, what were the things that influenced the changes?
Matthew Smith: I've attached some of the original wireframes to illustrate my point, but I'd say that the basic premise of having a ton of images segregated into main chunks to make the images sortable and findable has always been there. The original idea came from my flickr collection where I had been storing screenshots I'd thought would be helpful to review when I started designs. I even geeked out enough to write an article about Collecting For Design at Digital Web. After looking through my flickr stats, I realized that there was some viability in having a site that was better suited to finding these patterns and leveraging them for inspiration and articulation in the design process.
The first thing that I figured out while working with a friend on the initial sketches, was that the main chunks (what I now call Collections) would easily become 70, 90, or 100s of Collections if we didn't control them tightly, yet there is always room for more granularity. Where a Collection might represent Navigation, you can imagine one would eventually want to accommodate for Horizontal Navigation, Veritcal Navigation, Organic Navigation, etc. We developed the concept of User Sets to allow for maximum flexibility in this area. I simply browse through the Navigation Collection and find anything I want to add to a Horizontal Navigation User Set. Another idea that wasn't in the original drawings was Following. It didn't materialize until we started to have to solve problems about how to make some User Sets more important than others based on their usefulness. In general, I'd say this was a great example of really needing to sink our teeth into the meet of this thing before we'd know if it needed a bit of salt or to go back on the grill for awhile.
Chris and I both found that getting the app together and running was a crucial point of change from philosophizing about how it would work, to actually trying to use it ourselves. I remember the day we added the images from my database. It felt like we'd made something living and now we had to take care of it. It was a great day.
Chris Pollock: Most of the initial idea for this project obviously came from Matthew. Pattern Tap is his brain child. One of the great things I appreciate about working with Matthew is the synergy that came at game time. He wasn't interested in just having me code. I gave real feedback that was taken into consideration and in many cases was included. Through this process Pattern Tap became more than just another development project, it was something I had ownership in.
JR: There's an interesting balance between the content created by a small set of authorized contributors and content created by users. How did you decide what the right mix would be?
Matthew Smith: Well, this is an interesting issue. Many people have come to the site thinking it was like scrnshots.com, or even like flickr, and that they'd be able to upload their own images. We toyed with that idea at the very very beginning, but it became clear quickly, that if we wanted to differentiate from any competition, and really to keep the quality of the examples extremely high, then we'd need to limit our content creators to a handful of Design Nuts. So the users aren't currently adding any content, though we hope to have a "Recommend to the Tap" tool available in the near future.
Our hope was that people would use the sets as light-boxes, the way that they would if they were at a stock photography site. They collect images into a set of their own name and theme. A few examples on the site now are Bold and Basic, or Serif Headings with Sans Serif bodies, but you could also create a User Set called "Apple" that represented your favorite stuff from apple.com.
Chris Pollock: This mix is absolutely what sets Pattern Tap apart. Sites that just take in everything and anything leave all the filtering to you. You still have to sort through the good and the bad. You have have to deal with the template that was created by someone just to get a quick SEO boost along side with a genuinely well developed site. Pattern Tap helps the designer to sort through all the junk. The analogy I like to use is a librarian. Pattern Tap has cataloged and qualified its content, making it pack more punch for the time you spend on the site.
Matthew Smith: Speed. I realized, about 24 hours before launch, that some understanding about the collections, user sets, people, and profile, might help the traction of the site. I quickly thought of using our banner space, and moving people through the site in a directional manner. It wasn't something I clearly had an inspiration for, but I've garnered so much from so many amazing designers that on occasion I actually have a decent idea or two :)
Chris Pollock: This bar actually answers one of your earlier questions about how the design is developed and tweaked. This was literally an eleventh hour decision that ended up being a crucial part of the launch.
JR: It seems like there's a lot of image manipulation that needs to be done in order to create the various thumbnails. What were some of the design and technical challenges associated with different types of screenshots?
Chris Pollock: Great question. This was something we had to work through during implementation. The images are processed on several levels to make sure that the cropping is good. One of the challenges we ran into was with long navigation bars. We didn't want to just auto resize everything down to say 300px in width and height, because those images would look like a thin line and nothing more. From a developers prospective, meeting these kinds of challenges is where it gets fun. Basically, we run the image through an algorightm that checks the heights and widths and their relationship to each other. If the height and width are out of proportion significantly (say 7/1 or something like that) then we process it differently than an image that is more or less square. The images that are out of proportion are croped in addition to being resized, so you don't end up with that "thin" thunbmail effect. The ratio was something we had to play with as we began to import Matthew's initial images into the tap. So far so good.
JR: The site has only been available to the public for a short time, but are there already things that you think need to be tweaked or changed? If yes, why?
Matthew Smith: Absolutely. We knew going in that we'd have a bunch of things to change, but we thought the approach of seeing what our users actually wanted instead of what we surmised they might want was a better approach, so we waited till launch. Its now clear that there are a few major things that we want to tweak, and a few minor fun things.
- Adding search to the Collections and User Sets (going to be interesting to get this right)
- Association between Collections and User Sets -- So that its easier to see how User Sets are created and how they can be leveraged
- Improve the visual styling of filtering so that the possibility of getting zero results is reduced
- Bring in some rockets, dragons, smoke, and cool sounds when you hover over things
- And a handful of other little tweaks to clean things up
Matthew Smith runs Squared Eye, and has a monstrous appetite for the tiniest details, whether they are design details or the kind found in the perfect pour of a fine Belgian Ale.
Chris Pollock is a PHP developer who works out of his home in Rochester, NY. He spends his time coding, visiting with friends or playing with his four boys and loving wife. Find out more about Chris on his blog.
Comments