Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Because F*#% Bootstrap

Aaron K. White
September 26, 2017

Because F*#% Bootstrap

Whether you are a startup or large organization you've more than likely had many different designers and front-end developers come and go, each contributing to a growing code base.

Eventually, over time, your application begins to turn into an unruly beast of CSS frameworks and Javascript libraries that make it almost impossible to scale or ship valuable features to your customers.

Style guides allow you to ensure consistency across your application, increase communication, and allow developers to focus on business logic instead of pushing pixels. In this talk, Aaron K. White, Director of User Experience at VictorOps, will explore the various types of style guides and identify some of the best practices for creating and maintaining a style guide.

Aaron K. White

September 26, 2017
Tweet

More Decks by Aaron K. White

Other Decks in Design

Transcript

  1. because FUCK bootstrap Bootstrap Bootstrap is an open source toolkit

    for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. http://getbootstrap.com disclaimer: still love bootstrap
  2. because FUCK bootstrap s’popular Over 12M websites are currently using

    Bootstrap https://trends.builtwith.com/docinfo/Twitter-Bootstrap The most Popular Framework EVER! disclaimer: I’ve been building sites with it since the first beta
  3. because FUCK bootstrap also, the most hated… “…it also sometimes

    stymies creativity as the fundamental building blocks are already defined for you. Everything quickly starts looking the same because nobody can be bothered customizing Bootstrap enough to make it look unique.” - Own Williams | The Next Web disclaimer: these haters are just lazy
  4. because FUCK bootstrap What is a Style Guide? “Front-end style

    guides are a modular collection of all the elements in your product's user interface, together with code snippets for developers to copy and paste as needed to implement those elements. They include common UI components like buttons, form-input elements, navigation menus, modal overlay s and icons.” - Lean UX
  5. because FUCK bootstrap Why you need a style guide •

    It’s an Agile/agile world • build an iterative design & development process (e.g. eliminate design handoff’s) • build the style guide into your development processes • Speed of Development • engineering is your most expensive resource, use it wisely • component based systems are the future (Oh Hai React) • design repeatable patterns • increase code re-use • spend more time on business logic • ship reliable front-end code faster • UX is the key differentiator today • spend more time refining the experience • this is kinda hard!
  6. because FUCK bootstrap Prepares you to fight the zombies “…build

    repeatable processes to implement Pattern Libraries in your product design and development workflow, so you can fight the slow rot of your interface design (and its underlying code) as your product grows and evolves.” - Marcelo Somers Fight the Zombie Pattern Library
  7. Take an interface inventory • Document every component in your

    app • Put all the screens somewhere • a wall in your office • presentation • Illustrator / Sketch • inventory map • InVision • Categorize everything • Note every place that component appears • Ask if this component is repeatable • Define the business case for keeping it because FUCK bootstrap https://webdesign.tutsplus.com/tutorials/how-to-conduct-an-interface-inventory-with-invision--cms-25792
  8. because FUCK bootstrap Design all the things • Brutal consolidation

    • Standardize as much as possible • Then do it again! • Start building your pattern library
  9. Document all the things • Basic documentation • Shared Illustrator/Sketch

    libraries • Static documentation • InVision Boards • Living style guide • Start with a CSS Framework • Web Skin & Victory UI started on top of Bootstrap • Roll your own • Only build what you need, just build it! • Iterate as you go • Style guides are easier to maintain when the code you write is constantly published to production • Build out the entire experience (css, components, voice & tone, etc…) because FUCK bootstrap
  10. It doesn’t stop with the docs • Hold rigorous design

    reviews • Always be asking “why did you use ‘x’ pattern?” • Involve everyone in the process • Engineers • Product Managers • Stakeholders • Dedicate a Team • Github’s Design Systems team • Workiva’s User Interface Platform team because FUCK bootstrap
  11. because FUCK bootstrap Because who doesn’t love unicorns and rainbows?

    https://dribbble.com/shots/2900479-17-Pink-Fluffy-Unicorns-Dancing-On-Rainbows