design system post

_posts/2015-08-01-test-your-design-system-not-your-website.md

@@ -0,0 +1,36 @@
+---
+layout: post
+title: Test your design system not your website
+comments: true
+description: Your website content constantly changes. Your website design may change almost as frequently. How do you keep quality high and your bug count low with all this change going on? The answer is to maintain a style guide site which has comprehensive examples of every component on your website
+---
+
+Websites change a lot. That's really the point of most websites.
+
+Your design needs to adapt and change to fit the content on offer and the changing nature of the web. Whether it's a modified navigation bar to accommodate new sections, a new type of article page or a complete design refresh, the key to success is continuous improvement.
+
+With this constant change, how do you keep control over quality? Different screen sizes, different user interaction methods, different browsers and different device capabilities make manual testing laborious and repetitive. You may also have a big site with 100s of pages and many page types. Or even multiple sites which share a consistent brand and style. Do you just test a few example pages and hope the rest will be fine? Or do you delay releasing changes so that you have time to test thoroughly?
+
+## Get control over your design with a system
+
+A great way to get control over this complexity is to create a living design system, often called a 'style guide', 'pattern library' or 'component library'. Whatever you call it, the idea is to:
+
+1. document your design system in one place
+2. break your design into modular components
+3. eliminate the need to affect production content until designs are ready
+4. offer an environment for testing and debugging bugs
+5. help your team collaborate and reach consensus more effectively
+
+[styleguides.io](http://styleguides.io) has a huge number of articles, tools and other resources to get your started with design systems.
+
+For small sites and systems, your style guide might be just a single static page that you edit by hand. For larger sites, you might want to use one of the [many tools](http://styleguides.io/tools.html) that allow you to generate documentation, isolate individual components, display code examples and allow construction of component variants.
+
+## Make cross-browser testing less of a crapshoot.
+
+One of the biggest benefits of a style guide site is that it presents a controlled and consistent environment for manual and automated testing. Instead of finding a suitable page to test on your website, you can isolate an individual component and test it at various screen sizes, and across different browsers. You can do this yourself, or automate it using cloud-based tools. With automated testing, you can set up the tests to run at a regular scheduled time, or when anyone commits a change to the system, so that you have confidence that major unforeseen layout bugs are captured and reported back to the team.
+
+If you're just starting out with a design system, it's important to keep it simple at first. Focus on your design process and not the tools, libraries or frameworks you use. If you work as part of a team, you'll need to make sure that maintaining the style guide becomes a required part of the production workflow. You can even automate this workflow, so that your style guide outputs code and design assets to your website.
+
+On 6 August I will be launching a step-by-step downloadable guide to _Automated Testing for Web Designers_, with the aim of helping web designers and teams make the most of cloud-based automation to rapidly test designs across different browsers, devices and screen sizes.
+
+You can pre-order this guide below or get updates on my progress by [following me on Gumroad](https://gumroad.com/froots101).