Given just how complex the web has become, it’s easy to overlook some fine little details just before the big release. And sometimes it’s difficult to pick out just the right technique or strategy to address a particular problem. That’s where design checklists can help — and there a few new ones that you might find helpful, too.
Checklist Design
Checklist Design is an ever-growing collection of best design practices, all gathered in one single place. You’ll find pretty much everything from checklists for standalone pages to elements and flows, as well as topics and branding. A neat little resource created by George Hatzis.
Design System Checklist
Design System Checklist is an open-source checklist to planning, building and growing a design system. It includes the foundation of things to keep in mind for design language, design tokens, core components, tooling and project management. Beautifully created and maintaned by fine folks from reshaped. Also, you might want to check Design Systems Handbook as well and you can download the Design System Checklist in Figma.
Accessibility Not-Checklist
Accessibility Not-Checklist is a thorough guide through accessibility, with points grouped by topics and success criteria, with filters for WCAG 2.0 and WCAG 2.1 and best practice recommendations. You can sort the checklist by topic and by role. A fantastic tool by fine folks at intopia.
A11y Project Checklist
A11y Project Checklist is a yet another very thorough checklist for accessibility that goes into all the fine detail from forms and controls to video, audio and animation. It also links to specific parts of WCAG in every individual section with further examples and guidelines. Neat!
Design System Checklist Trello Template
You and your team are working on a design system? The Design System Checklist template for Trello is a great example of how to structure your work and keep everyone involved on the same page. Even if you’re not a Trello user, the template provides some valuable ideas for creating your own checklist of things to take care of when working on a mammoth project like this.
Gov.UK Design System Components (Figma)
The lovely team behind Gov.UK has released a full collection of styles and components designed for UK Government services. During the design process, the team has tested and validated the design of the components, and we can use them to explore the states or conditions that we perhaps haven’t considered in our design just yet.
You can also check the GOV.UK Prototype Kit if you want to install all components locally, and GOV.UK Design System to explore how to use the styles and components in prototyping.
Complex Tables UX Tree
In his article on Architecting a complex table, Slava Shestopalov explores how to design and architect advanced tables — with a very comprehensive table tree checklist of all those fine details that are often forgotten or overlooked.
UX Recipe is a helpful little tool to discover and choose some of the UX project tools and techniques for your project. It also allows you to estimate the amount of time require for the work done. All tools are broken down into groups, and if you click on the hashtags, you’ll find plenty of useful resources for each category. Created and maintained by Alecsandru Grigoriu.
UX Research Methods Flowchart
How do you choose what UX research methods works best for you? There are at least 20 popular methods, and a handy UX Research Methods Flowchart by Norman-Nielsen Group helps you find the right one.
It provides an overview of common strategies, grouped into behavioral, attitudinal, qualitative and quantitative methods. Once you know what insights you are after, you can pick your strategy using the chart.
Form Design UX Checklist
With web form design, it can be quite difficult to figure out just the right component to use when asking a particular question. The team behind Lyft has created a flow chart to make it easier for designers (and not designers alike) to make decisions for their forms.
In an article about form selection patterns, Runi Goswami describes the struggles the team went through when designing a segmented control, and how they ended up with a form selection control flow chart as a result.
Decision Trees For Design System Components
Design systems often come in various flavors. Surely there will be basic components, color, typography and spacing, but often also more sophisticated components, usage guidelines, accessibility considerations and live previews. Additionally, Workday Canvas Design System includes flow charts for deciding what components to use, with examples of the outcome that designers and non-designers can follow to make their decisions.
Interaction Design Checklist
The IxD Checklist that Aaron Legaspi and Amit Jakhu created helps us form a better understanding of interaction. Whenever you’re building some kind of interaction — be it a control, navigation, or an entire interface — you can use the checklist to evaluate your design against affordance, simplicity, structure, consistency, accessibility, tolerance, and feedback to ensure it is easy to use for everyone.
Bonus: Text-To-Timeline Tool
Markwhen: Text-to-Timeline is an incredible little tool to generate timelines, e.g. for project planning or life timeline! You write markdown-ish text and it gets converted into a nice looking cascading timeline. Also available as a VS Code Extension.
And That’s A Wrap!
If you are looking for more gems like this one, we’ve published a few UX guides with checklists over the last few years, so feel free to continue exploring there. Happy checklisting, everyone!
(il)