Posts Tagged ‘patterns’

As time goes on I find myself increasingly annoyed with login forms. As password managers like 1Password (which is what I use) and Chrome’s password manager (which I also sorta use) become more popular, it’s important for websites to be aware […]

MODALZ MODALZ MODALZ by Adrian Egger is fantastic in both its message and design.

Here’s Heydon Pickering with a metric ton of great advice about creating accessible, flexible, robust card components.

Card grids are definitely a common pattern in almost all my projects, and I’ve run into all of the pitfalls Dave lays out. I’ve been thinking a lot about this post ever since I read it, and I feel I […]

Making that card pattern more accessible Making that card pattern more responsive Making that card pattern more performant Making that card pattern more agnostic so it can handle different content patterns Making that card pattern more resilient to extreme content […]

At the heart of a good design system is a set of solid, flexible components that can be arranged to create cohesive, delightful user interfaces. There’s an oft-repeated misconception that pattern-driven design and development forces teams to use a finite, […]

This is a fantastic roundup of data display patterns. In my own work creating design systems with huge organizations, we’ve found providing data tables with plenty of options to be critical to the system’s success. Some of these patterns are […]

Dan Mall posted an absolutely epic article that encapsulates a lot of the pattern-based concepts the community has been advancing for the last few years. I highly recommend reading it in its entirety. Here are some key highlights I took away […]

I absolutely love Harry’s post about creating agnostic UI components for more resilient design systems. I get this question a lot: how do I create a component that looks/behaves one way in one context, but another way in a second context? And […]

I recently spoke at An Event Apart in San Diego where I presented on the whys, whats and how’s of style guides. Here are the slides: And here are some resources I reference in the talk:   Style Guide Types […]

When discussing a pattern-based design workflow, one knee-jerk reaction I hear from visual designers is that a design system will stifle creativity, leaving everything looking homogeneous and bland. I think there is some validity to this concern, and this sentiment can’t […]

Dave Olsen (@dmolsen) nails it. In his talk at Confab EDU, Dave addresses the frustrations of our web design and development process, and how a pattern-driven workflow can help. Dave describes the many benefits of pattern-driven workflow: Patterns encourage communication […]

Luke Wroblewski walked through some critical considerations for designing for large screen smartphones. One major consideration is the reachability of the navigation. He discusses a few considerations and emerging navigation patterns, including the floating action buttons pattern. We used the […]

I reached out to the Pittsburgh Food Bank last year about helping them redesign their website largely because I was having a hard time figuring out how to give them money. So as part of our redesign of the Pittsburgh […]

Forms suck. And they especially suck on mobile devices. Luke Wroblewski has been talking for a long while now about how input masks make form entry a lot less painful for people. He recently highlighted Square Wallet‘s clever single-field credit […]

The fine folks at Happy Cog have a nice discussion about Post-PSD, pattern-driven process. And it’s super great to hear that the work we’ve been doing with Pattern Lab has been inspirational for them. …the kind of stuff that Brad […]

Matt D Smith wrote about the history and the thinking behind the float label pattern.

Inline form labels can cause a lot of trouble, but at the same time the constraints of mobile screens force designers to do more with less space. It puts people in a weird position. Let’s take a look at the […]

Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, […]

The post is in Swedish, but run it through Google Translate. Basically they did an A/B test between a carousel feature area and a non-carousel feature area. The carousel version only got a 1.96% interaction rate, while the non-carousel version […]

Great post looking into Amazon’s mega-menu dropdown, which shows sub-navigation items to the right of the parent category. Lots of insight and algebra around mouse cursor movement, hover state gotchas and more. Lately there’s been a lot of talk about […]

Brad and Dave and I were sitting around after InControl talking about design patterns that hadn’t been explored as much. Dave mentioned “Search with Filters” as an example. There can be quite a lot of UI involved in a search […]

Lightboxes don’t work for small screens. Here’s Jordan Moore on the subject: The purpose of a lightbox is to display a larger image corresponding to the selected thumbnail version while keeping the user on the same page instead of linking […]

The overflow pattern is a technique used in fluid web designs to expose more content as screen real estate becomes available. Typically seen in carousels and data tables, the overflow pattern allows content to remain compact for small screens while […]

Some web interface elements require only basic resizing in order to function properly across contexts. However, not everything is that simple, and maps is one of those cases that requires more consideration. While techniques exist to create fluid and scalable […]