Posts Tagged ‘patterns’

Subscribe via RSS
  1. 16 Oct, 2018

    MODALZ MODALZ MODALZ

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

  2. 13 Jun, 2018

    Inclusive Components – Cards

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

  3. 12 Apr, 2018

    Pitfalls of Card UIs

    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 […]

  4. 17 Aug, 2017

    Things you could be doing instead of designing & building that card component for the umpteenth time

    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 […]

  5. 31 Jul, 2017

    Pattern Variations

    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, […]

  6. 14 May, 2017

    Design Better Data Tables

    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 […]

  7. 04 Jan, 2016

    Content and Display Patterns

    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 […]

  8. 02 Jul, 2015

    Contextual Styling: UI Components, Nesting, and Implementation Detail

    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 […]

  9. 08 Jun, 2015

    Style Guide Best Practices Presentation

    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 […]

  10. 05 Mar, 2015

    Designing Pattern Flexibility

    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 […]

  11. 13 Nov, 2014

    The Death of Lorem Ipsum & Pixel Perfect Content

    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 […]

  12. 27 Oct, 2014

    Floating Action Buttons Considerations

    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 […]

  13. 21 Aug, 2014

    Designing an Effective Donate Form

    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 […]

  14. 14 Apr, 2014

    Single-Field Credit Card Input Pattern

    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 […]

  15. 21 Mar, 2014

    Cognition Roundtable: A Development-focused Project Process

    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 […]

  16. 25 Oct, 2013

    How the Float Label Pattern Started

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

  17. 24 Oct, 2013

    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 […]

  18. 10 Jul, 2013

    Interface Inventory

    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, […]

  19. 07 Mar, 2013

    Carousel Conversion Rate Eye Tracking

    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 […]

  20. 06 Mar, 2013

    Breaking Down Amazon’s Mega Dropdown

    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 […]

  21. 25 Feb, 2013

    Search with Filters Responsive Design Pattern

    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 […]

  22. 09 Feb, 2013

    Design Abstractions

  23. 08 Jan, 2013

    Conditional Lightbox

    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 […]

  24. 07 Jan, 2013

    The Overflow Pattern

    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 […]

  25. 15 Nov, 2012

    Adaptive Maps

    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 […]