We’ve fixed a pretty big problem with search not showing the correct number of results. We weren’t including tags, types, or styles in our search index, which is where most of the relevant data is! A search for “backgrounds” would only come up with 5 results. But now that we’ve fixed it, you’ll find 311. Much better!

And to whet your appetite, we have two big improvements are on the horizon: uploading and faceted search. More PatternTap awesome coming soon to a screen near you!

Tab bar is updated at smaller sizes to include text. 

We’re excited to announce that Pattern Tap has finally been updated to a new style and way of working. It’s been a long time in the making and there have been a host of things I’ve learned along the way.

As with any redesign you’re sure to disappoint some and thrill others, but I am hoping that what I’ve designed and what the Army of Bees guys have built, will stand the test of time, even as we seek to improve.

Major Changes to Pattern Tap

Updated Site Structure
We’ve switched from a purely “finding” oriented structure to being able to search and find using tags and search together. There are major improvements we need to implement to make this really work well including a better search engine and faceted tagging so that you can look through the “iOS” platform, to find all images tagged with “lists” for instance. Any recommendations or feedback on this are greatly appreciated.

Converting Collections to Type Tags
In an effort to work with better more known nomenclature we dropped the term “collections” in favor for a more ubiquitous term “tags”. We needed tags to be separate though so we opted for Type Tags describing areas or parts of a site like footers, headers, lists, typography, navigation, etc. Style tags are used to help you find kinds of style you need inspiration for like gradient, black, clean, simple, nuance, texture, etc. 

No More Sets, Just Tag Everything
The first Pattern Tap wasn’t really designed for 26,000 users so the sets were sort of janky and unusable. We opted for a simpler approach of just having tags that represented what people want to keep. Just add images using the (+) and then tag them as you need or want. Simple. Get it done. 

Responsive Layout
We now have a fully responsive layout which allows you to use Pattern Tap fluidly on all devices without hindrance.

This last week we launched what will be the basis of the future of Pattern Tap. It’s a responsive style design that conforms from wide screen down to mobile with care for a correct hierarchy along the way.

We’re using media queries to accomplish this, and sometime after the break we’ll get our frontend dev, Michael Meyer, to let you know more about how this was achieved on the code side of things.

From a design perspective, my aim was to find a grid that worked well at many levels, and the foundation was a 320px grid. It matches the 320x480 of the iPhone 3, the new retina 640x960, it fits the iPad in both vertical and horizontal positions and alters the columns accordingly, it fits all kinds of wider screens and helps utilize the space in a way that is consistent with what the app is for. Useful inspiration finding and education on web design patterns.

Here’s an example:

Please welcome J.D. Graffam to the Pattern Tap moderation team

J.D Graffam, of the web design team Simple Focus, is the first of our recruits to help moderate and curate the quality of Pattern Tap submissions. As busy as Squared Eye has been, I’ve been unable to keep up with all the submissions at Pattern Tap. J.D. kindly volunteered to help us keep up with the submissions and be a vital part of the Pattern Tap team.

Thanks again J.D.! We’re glad to have you on board :)

For the next version of PT, we’ll most likely be needing different thumbnail sizes to reflect the needs of the design. The current PT is written in PHP, but PT is going to be written in Ruby going forward (alpha.patterntap.com is already written in Rails), so I decided to take a gander as what’s out their for image manipulation in Ruby.

For raw image manipulation, there is RMagick, ImageScience and MiniMagick. I may end up using one of those directly, but most likely I’ll be using a higher-level library that provides more functionality (storage to S3, accepting uploads, etc) in addition to just image manipulation. For these types of libraries, there is Paperclip (most people’s go-to), CarrierWave, and Dragonfly (awesome on-the-fly capabilities). All of those libraries have their pros/cons, but I decided to play around with CarrierWave a bit since I haven’t used it before.

Outside of handling uploads and storage, CarrierWave does have some nice wrappers around ImageMagick functions that I wanted to play around with.

I used this script to play around with CarrierWave.

Here are some before and after shots of a couple of images using resize_to_fill.

Before:

After:

Before:

After:

Hello Pattern Tappers,

Please forgive our brief hiatus. We’ve been tied up with other things, namely a small naming challenge with another quality Pattern Library application. That’s not all though! We’ve been working on pulling on our favorite information architect, usabilty freak, and web strategist @emilysmith into our Pattern Tap project in order to capture some good usability testing and see how we can respond in the coming weeks.

A few things that are on the top of our list:

Redesigning
The current design was a great experiment in user interface and interaction. It was inspired heavily by FFFFound, Tumblr, Buamai, and Dropular. While the site has received some great positive responses, it has also received a handful of critical feedback and we’ve seen some serious usability problems. Not to mention, the design simply doesn’t scream Squared Eye style, and well, that’s dang important to us. So, we’re going back to the drawing board, and looking to prototype more quickly and get something fresh out to you in August/September.

Pagination
Our uber cool constant pagination (Tumblr/Twitter style) isn’t appropriate in this instance. It doesn’t work nearly as well as a more traditional pagination. We broke the “pattern” and it was a poor choice. Lesson learned.

Hover States on Images
These have been too intense and in the wrong direction. We found that by darkening the image we were de-emphasizing the image rather than highlighting it. That will be addressed. 

UserSets vs Tags
We’re looking at dropping UserSets in favor of universal and personal tags. It’s a more common and uniform way of thinking and we think it will be more helpful over the long term.  

Education
We’ll be looking at treating the overall vision of Pattern Tap as a true educational resource, and cementing the fact that we are NOT a web gallery for your style inspiration, but rather a design solution archive for specific User Interface Patterns. 

iPhone, iPad, Information Architecture, Ecommerce, Web Applications
At this stage we’ve been focusing on web design solutions, but in the near future, we’ll be addressing a much broader focus one subdomain at a time. We’ll be covering iPhone and iPad design, information architecture design and practices, ecommerce solutions, and web application design solutions.

There’s lots around the corner, so stay tuned, and as always, PLEASE add your insight and feedback at GetSatisfaction.com/PatternTap.

Thanks!

Matthew Smith 

Just a quick note to let everybody know that we just enabled the ability to browse by collection or tag. You can check it out by clicking the Browse item in the main navigation bar.

The list of collections and tags takes advantage of CSS3 columns, so make sure you’re using a recent version of Safari, Chrome or FireFox. :)

Also, people are starting to give great feedback. Keep it coming!

Please help support Save Our Gulf by purchasing this great tee. $10 of the proceeds directly to Save Our Gulf. Purchase Here.

We knew we’d be learning a lot in our first week after launching alpha.patterntap.com. Here’s a list of some of those things:

We didn’t make it clear enough that the Alpha of Pattern Tap is an experiment and a show of in-progress work.
From the get-go, we knew that Alpha Pattern Tap was going to be a showcase of us getting iterations out fast and responding fast. I think this “agile” way of thinking is not as often used as it could be, and it shows. Many people thought we were essentially finished with the Alpha and were only fixing bugs, rather than also adding features. So, what was learned? Well, I think we’ll be all together clearer from the get go? Maybe? I don’t know if that will ever account for people really not reading. We thought we already spelled it out, but hey, maybe great software/webware catches everything?

Looks like the ad background color is bothering some people.
We had a few comments that the Fusion Ads placement wasn’t working and felt too much like an image. This is a difficult aspect of our design. We depend on Fusion Ads for revenue to keep the project going, but we want it to work for users well. What are your thoughts?

Looks like the Firefox Ad Blocker Plugin is breaking the site for some folks.
It’s difficult to detect for Adblock Plus for a good reason, that would make the plugin useless. Unfortunately, it breaks the site because of some JavaScript magic we do to get Fusion ads to load via AJAX. However, we’re of the opinion that that’s the responsibility of the Ad Block user, and that you can disable it for Pattern Tap. What do you think?

We’d love to keep learning more as we begin rolling out new features. Please let us know more on Get Satisfaction.

Pattern Tap 2.0 is officially in Alpha stage.

What does that mean? Everybody uses alpha and beta differently, so it probably could use a bit of defining in our case. For us, alpha means that we’re giving everyone an in-progress view of how Pattern Tap 2.0 is growing and how it has changed from Pattern Tap 1.0.

We’re feeling very experimental about the whole project so things are probably buggy, working best in webkit browsers, and definitely only working well in modern browsers. The alpha is limited in functionality as we slowly release new features and improve on PT 1.0.

With that said, feel free to leave feedback. Please try to be constructive and take into account what is written above.

Improvements on Pattern Tap 1.0

Search
The number one change in Pattern Tap is that we’re making it searchable. Currently, the search feature only searches collections, tags, and titles, but it will eventually be more comprehensive and will likely have some advanced search functionalities for pro users.

Pagination
We’re experimenting with a new style of pagination. Impressed by the showcases of AJAX-oriented fresh page content, we’re now pulling in pages on demand at the bottom of each 30 image section.

Ruby on Rails
The first version of Pattern Tap was build using the PHP framework, CodeIgniter. While it is a good framework, Rails is simply one of the best frameworks out there right now for quickly building web applications. It took very little code to get the current alpha version ready because the Ruby and Rails community has an awesome plethora of libraries to do just about anything. So much so that we spent most of our time for the current alpha thinking about features and not code. We like that.

What are the main areas we’d like to grow?

Image Navigation with Related Images
We’re mostly concerned with making sure images are easy to find when you’re in a bind for that tricky navigation or just need a great set of list styles. But we also want to help you move through the site in a more visually-minded way. Sites like FFFFound have done this well; so we’re taking a lesson from them and implementing some visual subnavigation on the secondary pages like this one.

User Sets
We’re taking a step back and assessing User Sets — how to either improve them or ditch them. They definitely get used. But at this point, they only get used for personal collections and not for sharing which is what we’d like to see happen more. We’d love to hear your ideas around User Sets and collecting for your own usage.

More Collections
We’re hoping to have a broader range of collections that accommodate the wide range of web elements, tools, and technologies that are being used well across our industry.

There is lots and lots of other stuff that we’ll start talking about and showcasing over the coming months.

What will we maintain moving forward?

Editorial control of what goes in and out of the tap remains one of the main marks of differentiation between Pattern Tap and other design inspiration sites. We want to continue to maintain the highest quality design styles and ideas. Along those lines, we’ll be introducing ways that you can say “Hey, this image was cool two years ago; now it stinks!”, so we can review it for removal. We want to keep the bar for getting into the tap high while making the tap easier to use and more integrated with your normal web workflows.

How can you help?

Give great feedback! Tell us where we’re making strides. Tell us where we’re making mistakes! Feel free to shoot us sample code or suggestions with design; we’re open to it.

Who is Pattern Tap?

Pattern Tap was the design freakout of Matthew Smith, Principal at Squared Eye, a small interface design studio in Greenville, SC. It’s first iteration was built by Chris Pollock of Simplified. Pattern Tap 2.0 is now a collaborative effort of Kevin Smith – idea guy and Rails Chief, Jamin Jantz – Project Manager and Brain Tease, and myself spearheading visual design and creating problems with outlandish suggestions.

We owe a huge thanks to the CoWork Greenville office for continued support, but especially to Sean Gaffney, who helped code the Alpha front end, Jeremy Jantz who is constantly coming up with great suggestions, and Emily Smith who’s IA talent is constantly being teased out of her with carrots or other organic material.