Design Systems, Pattern Libraries & WordPress

Download Design Systems, Pattern Libraries & WordPress

Post on 18-Feb-2017

232 views

Category:

Technology

1 download

TRANSCRIPT

Design Systems, Pattern Libraries & WordPressJesse James Arnold and Grant Kinney from ExygyChange is ConstantNew challenges require new toolsResponsive DesignStay flexible. Our canvas is unknownWe dont know what the target resolution and screen size are.Were not designing pages, were designing systems of components.Stephen HayComponentsEach component of an interface needs to be considered independently and then brought together to form any number of layouts.Micro LayoutsEach unique section of the page had its own rules based content and device context.Context FreeComponents should be able to adapt to any number of layouts and screen sizes.We like our components to be fluid by default, allowing the container to define the width as much as possible.Interface InventoryBe more modularThe answer has always been to break your interface into smaller pieces.headerimagebodyblockBuilding blocksObject oriented ideas- Avoid unnecessarily duplicating styles- Encourages code reuse- Easier to track down and modify the common styles- Smaller file sizes increase performanceheaderimagebodyblockhttps://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/Atomic DesignDesign PatternA design pattern is an element of an interface that can solve a specific design problem and repeats across the product in various contexts with a variety of content.BenefitsVisual consistency for users impacts user experience.Speeds up workflow between design and engineering.Creates a shared language that connects the whole team.ButtonsExamplesEasy wins for any team getting started:Color paletteFont stackIcon libraryNo more design handoffDesign is a work in progress, it is never handed off to be built.My Website is DonePattern LibraryA place to put all of this stuff.Team GoalsShould provide the following team benefits:1. Allows designers to contribute.2. Allows product owners to qa and review design in browser.3. Provides documentation for engineers.Pattern Library: FabricatorFabricator: Taxonomy materials components structuresor materials atoms molecules organismFabricator: Documentation---notes: | These are notes written in `markdown`---My ComponentFabricator: Datalinks: About Us: - About Us - Careers - Media Center - Legal{{#each home.links}} {{#each this}} {{this}} {{/each}}{{/each}}About UsCareersMedia CenterLegalSF Dahlia Pattern LibraryPattern Library: FabricatorPros:Allows you to create your own materials logic.Self documenting HTML components.Navigation automatically generated.Can feed it real data to test each component.Pattern Library: Growing PainsScaffolding new features may introduce redundancy or code bloat. Product wants to share core components of one product pattern library with other product teams.Visual design updates may share common elements with a feature in development and cause disruption.While importing CSS and JS from pattern library is easy, importing HTML templates is still copy and paste.Current WorkflowDesign Pattern LibraryCSSEngineering WebAppExtra Work and QuicklyFalls Out of SyncReproduce MarkupPlugin that ports fabricator functionality to work within a custom WordPress theme.Pattern library and application share the same templates.https://github.com/Exygy/wp-pattern-library(this could easily be done with other platforms: AngularJS, React, Ruby on Rails, Django, Laravel, etc)New strategy: wp-pattern-libraryBetter WorkflowDesign Pattern LibraryEngineering WebAppMarkupTemplatingwp-pattern-library: directory structurewp-content/themes/custom-theme/ pattern-library - materials - atoms - buttons - button.php - button-icon.php - button-sizes.php - lists - list-unordered.php - list-ordered.php - forms - checkbox.php - input-text.php - radio.php - paragraph.php - molecules - nav-menu.php - tabs.php - topbar.php - organisms - media-grid.php - story-grid.php - tile-grid.phpwp-pattern-library: Atomstext: Submitclasses: hollow---wp-pattern-library: Moleculestopbar.phpwp-pattern-library: Moleculesblock-columns.php---title: Basic Contenttext: This basic content makes an interesting point!category: Componentimage_src: http://placehold.it/768x350url: #---wp-pattern-library: Organismsblock-column-list.phpwp-pattern-library: Code ReuseCall patterns from within WordPress templates: example post loopwp-pattern-library: Code ReuseSingle source of truth for html markup. Map WordPress data to pattern variables (title, text, etc) All markup updates made from molecules/block.php Application and pattern library are always up to datePattern Library: ResourcesFabricatorhttp://fbrctr.github.io/Starter Kit with Fabricator and Foundation 6https://github.com/exygy-design/exygy-patterns-f6Living Examplehttps://sf-dahlia-pattern-library.herokuapp.com/WordPress Pluginhttps://github.com/Exygy/wp-pattern-library