Design Systems - Fit for Use
- 3. 1. Introduction 2. What are design systems? 3. Why are they useful? 4. Who are they for? 5. Starting Points 6. Atomic Design, etc. 7. Scaleability and Usefulness 8. Biggest Tools 9. Some Resources 10. Talking Time OURJOURNEYTODAY,TOGETHER
- 7. Man, depending on who you ask, they’re everything. To me, based on Laura Kalbag’s writings in 2016, design systems are, “built out of the core components of typography, layout, shape or form, and colour.” But also, content strategy, tone, user flows, and interaction patterns. WHATAREDESIGNSYSTEMS?
- 8. Design systems are useful for all sorts of reasons, not the least of which are: consistent and cohesive design; shared vocabulary between developers, designers, and stakeholders; a method of managing style bloat and creep; a tool for building consensus; very fun to build. WHYARETHEYUSEFUL?
- 9. Design systems allow us to remove the emphasis from crafting novel and deeply considered aesthetics and onto crafting experiences, interactions, and flows that more fully express a brand, its principles, and its foundation. Freeing designers to solve problems lets them design rather than decorate. WHYARETHEYUSEFUL?
- 11. They’re repeatable. They’re a single source of truth. They’re replicable. They transfer. You do not need a transcendent individual talent to find your way to functional, effective, and attractive design. In a rapidly evolving field and workplace spending less time on graphics and more on problem solving offers greater value to organizations and clients. WHYELSE?
- 14. Despite quotes and antics espousing the need for more mechanic aesthetics and more thoughtful design, there is still a place for things like “empathy” and “feelings” and “soul” in design and design systems. In fact, it may be the single best way to ensure the success of a system. INCASEYOUTHOUGHTIWASSOULLESS
- 15. Just as in branding, the biggest predictor of the success of a design system is adoption. Systems die if left untended, just like very little plants or the GOP. The importance of articulating the principles of your system, why it’s important and illustrative of the brand and its principles, and how it benefits all parties, internal and external, can’t be overstated. THESINGLEMOSTIMPORTANTTHING
- 16. Start there. What makes this product, this suite, this website, this series of table-laden email templates uniquely yours? What does it mean for it to be a XYZ Company product? It gets somewhat less publicity than Salesforce’s Lightning system, Marvel’s new design system, or IBM’s system, but Intuit’s Harmony system, to me, really clearly espouses what it means to be an Intuit product. SO…IMEAN…
- 17. Working on a smaller product or site? Right on. Capture the previous stuff and throw together a moodboard, style tile, and whatever you can get together on voice and tone. Remember that, from like two years ago until infinity, digital design is about process over projects. We can’t just assume we’ll finish and be done, and doing so does a disservice to the client, the product, and, most important to me, the product’s users. Regardless of scale, design with stewardship in mind. THENBUILDOUT
- 19. Style tiles can serve as the first step of translating your mood board into something actionable. Less descriptive than a comp or design system, but more detailed than a mood board, style tiles and mood boards represent the minimum on any digital design project we work on. STYLETILES
- 22. People eat this shit up. And for good reason–Brad Frost’s framework for understanding how we can build components with components and reinforce development’s DRY philosophy with designers is easy to understand and implement. It’s a great framework for thinking through object oriented design, and a great way to bridge the barrier that can exist betwixt dev and design. LET’SSTARTWITHATOMICDESIGN
- 24. While Atomic Design is a super digestible approach (and published entirely online now, it’s worth the read) some folks struggle with the taxonomy; the verbiage creates small battles within organization’s where the naming and the purpose aren’t in perfect alignment. This was the case with GE’s Predix design system. ATOMICDESIGN,ctd.
- 26. Once the particulars of your nomenclature have been sorted, the next steps tend to be representative of scale and usefulness. Obviously a fully fleshed system like Predix has more usefulness at the enterprise level. It’d be unnecessarily onerous on a brochure site project, for example. Similarly, patternlab.io (an extension of the Atomic Design thinking) can present unnecessary development hurdles for smaller projects. ATOMICDESIGN,ctd.
- 27. There are, however, so, so many different style guide generators to choose from, from very simple, minimal tools to robust, scaleable SSOT styleguides, it’s worth exploring the tools to find which is best for your organization. That said… ATOMICDESIGN,ctd.
- 29. Bruhs, this is all very subjective. These tools work for me and they’re great for me but you may hate them and that’s ok. But here’s some things I use to help craft design systems. YMMV
- 30. The most recent updates to symbols make this more valuable than ever for me, particularly when it comes to dealing with a design challenge as platform agnostic as a design system. Between sync with InVision, development uses with Zeplin, and the Craft plugin, a single person can spin up a ready for production-isa set of style constraints in a single app, from low fidelity through final.* *not really recommended Sketch
- 31. Using a shared symbol palette within Sketch allows a user to modify, recycle, or repurpose components rapidly across various viewports, as needed. However, the biggest drawback is that it’s…in Sketch. If you want that living style guide life, that single repo, that moves and breathes 1’s and 0’s, you may want to use a style guide generator. Sketch,ctd.
- 33. I haven’t had the best luck with them. We’ve tried a lot, from some little guys stashed away on a lonely Git, to patternlab.io, to, now, Fractal.Build. We’re wrapping a large enterprise UX project that I’ve recommended Fractal on after a few smaller uses, and I think it’s got the fasted speed to live and extensibility in this application. It’s another YMMV sort of deal, however, as their organization isn’t tremendously tech savvy. STYLEGUIDEGENERATORS
- 34. Folks familiar with Harmony, Lightning, Material, Predix, etc. will see a lot of common elements in Fractal. It’s definitely designed for deployment on larger projects. It’s an NPM with an optional CLI for folks that tinker with these powerful robots. It allows for rapid creation of components and has strong templates out of box that makes it easy for development to rapidly transition static design files to a more malleable environment. FRACTAL.BUILD
- 36. The basis of all of my projects (…period, really…) is typography and a typographic scale. Part of creating a functional design system is understanding that there are NO EXCEPTIONS. And part of not losing your goddamn mind as a designer working with a design system, is making certain you make considered, workable scale choices at the outset. It also means you don’t get to ask a dev to bump body copy from 16 to 17 at random. MODULARSCALE/VERTICALRHYTHM
- 37. If modular scale is a new concept, no worries, there’s a bunch of articles to read about it. ModularScale.com even helps you just, like, make some choices. The important thing I take from my scale choices is measure and leading. (I don’t know if everyone knows this, but please keep measure to 45-65 characters a line. Google says 70, but, real talk, they make some legit ugly shit.) I use my line-height value as the basis for margin and padding decisions throughout a project, then I stick with it NO EXCEPTIONS. MODULARSCALE/VERTICALRHYTHM
- 39. There are ~6B resources out there for this stuff, but I’ve collected a bunch of articles and tools and things I like into a collection of bookmarks accessible at https://raindrop.io/collection/1439783 RESOURCES
- 40. Feel free to reach out to me. I can’t promise to have good answers or lies, but I will try and I’ll likely respond pretty quickly. Try me here: jeremy@jeremyhamman.com @fatandhandsome IFYOUWANT