This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.
Dan has been researching the history of design systems, annotating as he goes.
Adam and I share the same hopes and frustrations with web components. They can be written in a resilient, layered way that allows for progressive enhancement, but just about every example out there demonstrates a “my way or the highway” approach to using them.
We were chatting about this in the Design Systems slack channel, and it helped clarify some of my thoughts. I’ll try to poop out a blog post about this soon.
I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:
- I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
- I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.
A newsletter dedicated to all things related to design systems, style guides, and pattern libraries.
I think Tyler’s onto something here:
I noticed three qualities that recurred in different combinations. Without at least two, the projects seemed doomed to failure.
I certainly think there’s a difference in how you approach a pattern library intended as a deliverable (something we do a lot of at Clearleft) compared to building a pattern library for an ongoing ever-evolving product.
Susan describes the process behind creating Bocoup’s style guide…
One more tool for making pattern libraries. This one looks fairly simple and straightforward.
Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns” (Pre-Release) – Smashing Magazine
I think it’s a safe bet that this new book by Heydon will be absolutely brilliant.
It’s a handbook with valuable, time-saving techniques that will help you avoid hacky workarounds and solve common issues effectively.
Striking that balance between the reusability of modular components and maintaining a big-picture vision of the overall design:
We should always strive to use patterns in an application. For example, consistent use of colors and font sizes can quickly indicate to the user elements in the UI that can be interacted with. However, avoid using a pattern just because it has been implemented before; rather, use it because it really solves the problem at hand.
A new pattern library tool, this time from the smart people at Cloud Four. It’s called Drizzle and it started life as a fork of Fabricator.
A very handy collection:
This book contains frontend coding patterns (and anti-patterns) that will assist developers in building accessible e-commerce web pages, widgets and workflows.
I like that it contains a list of anti-patterns too.
There’s also a corresponding collection of working demos.
Vitaly takes a look at some of the more unusual patterns used in responsive designed.
A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.
A nice little collection of interaction patterns with built-in accessibility and no dependencies.
Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:
Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.
Marvellous insights from Mark on how the robustness principle can and should be applied to styeguides and pattern libraries (‘sfunny—I was talking about Postel’s Law just this morning at An Event Apart in Boston).
Being liberal in accepting things into the system, and being liberal about how you go about that, ensures you don’t police the system. You collaborate on it.
So, what about the output? Remember: be ’conservative in what you do’. For a design system, this means your output of the system – guidelines, principles, design patterns, code, etc etc. – needs to be clear, unambiguous, and understandable.
Our Harry’s in the New York Times! Well, an article on dark patterns is in the New York Times, and Harry is Mr. Dark Patterns.
There’s a lot I disagree with here. I don’t think this pattern library process is very elegant or scalable, and it certainly wouldn’t work for me.
But I’m still linking to it. Why? Because I think it’s absolutely wonderful that people share their processes like this. It doesn’t matter one whit whether or not it would work for me.
Frontend development may have gotten a lot more complicated, but the simple premise of sharing what you’ve learned hasn’t.
I couldn’t agree more!
Rachel and Drew have been beta-testing Mark’s Fractal project for organising a library of components for Perch’s interface. Sounds like it’s working out very, very well indeed!
Mark has dumped his brains!
Seriously, there is a lot of thought that has gone into this, and it’s just the beginning: Mark recounts the experience that Clearleft has had with delivering pattern libraries, laying the groundwork for releasing the library-generating tool that he has been building.
Watch this space.
A look at the tools that AirBnB have made to help them in their design and development process. I hope they’ll share them.
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
As well as compèring the event, Chris took the time to make notes at the Clarity conference, dedicated to all things patterny.
Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.
You know that front-end pattern libraries have hit the mainstream when the Nielsen Norman Group get in on the action.
As ever, I’m not sure their sweeping generalisations can be applied to every project, but their checklist approach makes for a good starting point.
Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.
You can read the whole thing for free online or buy an eBook.
Jon outlines his technique for keeping “the 30,000 foot” view when patterns are coalescing during a project.
See also: Andy P.’s experience of working with Jon this way.
There is one truism that has been constant throughout my career on the web, and it’s this: naming things is hard.
Trent talks about the strategies out there for naming things. He makes specific mention of Atomic Design, which as Brad is always at pains to point out, is just one way of naming things: atoms, molecules, organisms, etc.
In some situations, having that pre-made vocabulary is perfect. In other situations, I’ve seen it cause all sorts of problems. It all depends on the project and the people.
Personally, I like the vocabulary to emerge from the domain knowledge of the people on the project. Building a newspaper website? Use journalism-related terms. Making a website about bicycles? Use bike-related terms.
A pattern library of Walmart’s front-end code.
Bootstrap is a product of Twitter. If you want your team to work like Twitter’s team, then by all means use Bootstrap. Pick up their design language. Their tool chain. Their decisions. Don’t be surprised when it feels off every time you use it. It will.
The same goes for Material Design. Foundation. These are all products built by other teams to work for their process. Their structure.
Finding the right tool is not what I am advocating for. Making it is.
A nicely documented pattern library.
Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:
It’s so incredibly crucial to treat development as a key part of the design process.
A really terrific article from Dan on building pattern libraries. In summary:
- Naming things is hard,
- Separation of content and presentation is A Good Thing.
There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:
When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.
(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)
Ethan demonstrates progressive enhancement at the pattern level using flexbox.
I’ve found that thinking about my design as existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.
The new style guide and pattern library for Buzzfeed.
It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of
The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like
!important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).
Solid uses immutable, atomic CSS classes…
CSS is “mutable”. By design. I don’t think we should be working against that.
A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.
The comprehensive style guide and pattern library for North Carolina.
I’m so proud of Charlotte right now: last week she gave a conference talk and today she has an article published in A List Apart. Superb work on both fronts!
She does a great job of talking through a collaborative exercise to help teams move from thinking in pages to thinking in patterns.
I really like the way that you can literally flip between the source code and the output in this styleguide for The Toast.
All the videos from the excellent Responsive Field Day are now available. Even better, the audio is also available for your huffduffing pleasure!
All the presentations and panels were great. Sophie Shepherd’s terrific talk has really stuck with me.
A nice combination of style guide and pattern library, with plenty of documentation.
Alla has taken the ideas she presented in her superb talk at Responsive Day Out and published them as a great article in A List Apart.
Huge have released their tool for generating front-end style guides.
A really nicely-documented pattern library.
I had a lot of fun chatting with Brad and Anna for the final episode of their small batch podcast on style guides and pattern libraries.
Hot on the heels of Github’s pattern library, here’s Heroku’s.
Github’s pattern library.
As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).
I really like the self-examination that Ian and his team at Lonely Planet are doing here. Instead of creating a framework for creating a living style guide and calling it done, they’re constantly looking at what could be done better, and revisiting earlier decisions.
I’m intrigued by the way they’ve decided to reorganise their files by component rather than by filetype.
Designing primarily in a laptop web browser and testing with a mouse rather than fingers may come to look very out of date soon.
A very handy collection from Anna: articles, books, talks, podcasts, and examples of front-end style guides. If something’s missing, feel free to add it.
This was a fun podcast—myself and Cyd from Code For America talk to Karen and Ethan about how we worked together. Good times.
The audio is available for your huffduffing pleasure.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
Literally a library of patterns: y’know, for tiling background images. Old school!
Heydon Pickering put together a great collection of accessible self-contained interface patterns that demonstrate smart use of ARIA.
A great article by Susan on getting started with creating a styleguide for any project.
I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.
A reusable set of responsive patterns and templates for UK councils.
Mike writes about what it was like being a client for a change. After working with him on the Code for America project, I can personally vouch for him as a dream client:
Clearleft’s pattern deliverables are the special-special that made the final work so strong. Jon Aizlewood’s introduction to the concept convinced me to contact Clearleft. Jeremy Keith’s interest in design systems kicked off the process, and Anna Debenham’s fucking rock star delivery brought it all home.
Nice! A Yeoman generator for scaffolding your own pattern primer.
(Those are just words, aren’t they? Y’know, as opposed to a sentence that would actually make sense to most right-thinking people.)
Some great thoughts in here about web development workflow and communication between designers and developers.
I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.
A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.
A-mer-ica! Fuck yeah!
Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!
This is handy: a version of my pattern primer that can be run with Grunt.
Hot on the heels of the Mailchimp styleguide, here’s the collection of patterns used by Mapbox. I’m not keen on some of their markup choices, but again, it’s great to see organisations publicly documenting this stuff.
The markup for the patterns that Mailchimp use on their products. I love getting a glimpse of how companies handle this kind of stuff internally.
Trent proposes a way to avoid implementing dark patterns: take a leaf from the progressive enhancement playbook and assume the worst conditions for your user’s context.
The transcript of a terrific talk by Harry on how dark patterns are often driven by a slavish devotion to conversion rates.
A nice collection of navigation patterns for responsive designs. The demos aren’t using a mobile-first approach, and they’re reliant on jQuery, but they could be easily adapted.
A very handy starting point for creating a front-end style guide.
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Here are some nice patterns that Paul uses for starting points in his own projects.
At least one of these will probably drive you crazy.
A great collection of layout, navigation, and interaction patterns for responsive sites, delivered by Brad.
Another great in-depth round-up from Brad, this time looking at your options for complex navigation patterns in responsive designs.
Josh writes about the importance of using rules and systems as tools without being bound by them.
Luke and Jason have put together some demos of various “off-canvas” navigation patterns for responsive designs.
Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.
An case study that tackles complex navigation in a responsive site.
Cataloguing patterns (best practices, really) for privacy-concious site owners.
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!
I really hope that more companies and agencies will start sharing stuff like this.
Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.
Luke catalogues layout patterns in responsive designs.
Brad does a great job of rounding up various design patterns used for navigation in responsive sites.
A great pattern library from Dan.
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.
I’m rubbish at regular expressions so this little tool might just save my skin someday.
Superb in-depth analysis of Ryanair’s website dark patterns and nasty brand strategy.
This looks like it could be a good book: a collaborative project to find patterns and stories in the data of one city.
Oh, and the site is lovely and responsive.
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
A nice collection of design tools and methodologies.
A pattern library that considers colour blindness.
Collections of visual design patterns from web interfaces.
The circlemakers work with vegetation. Andy Goldsworthy works with the landscape. Jim Denevan works with sand.
Benford's law blows my mind. Be sure to watch the video. This is all related to network theory and power law distributions ...I'm just not sure how.
A really nice interactive infographic from the New York Times.