Pattern Library in WordPress projects
0 likes1,019 views
The document discusses using a pattern library to promote consistency in user interfaces. It defines a pattern library as a collection of reusable design elements that appear across a site. Benefits mentioned include consistent user experience, faster production, and a common starting point for collaboration. The document provides examples of companies that use pattern libraries and recommends starting by trying it out on a small scale, gaining support from others, and documenting patterns. It also outlines how to integrate a pattern library into an existing WordPress project.
Pattern Library in WordPress projects
- 1. Pattern Library in WordPress projects WordPress Riga, Latvia, October 1st ,2016 @karlis_upitis, karlisup.com
- 3. © Würth Phoenix 2016 § IT and Consulting Company of the Würth-Group § Headquarter in Italy, European-wide presence, more than 130 highly skilled employees § International experience in Business Software and IT Management § Core competencies in trading processes, wholesale distribution and logistics § Microsoft Gold Certified Partner, ITIL certified, OTRS Preferred Partner We create the right balance between technology and services for our customers to support their IT operations and deliver in that way a better business result Facts & Figures § More than 1.000 customers worldwide § Over 500.000 service checks with NetEye § 25.000 monitored hosts § 3 offices in 2 countries § HQ in Italy About Würth Phoenix … more than software
- 5. • What is Pattern Library? • Why should you use it? • Integration in existing projects • Where should you start? • Pattern Library + WordPress Outline
- 12. Design System
- 13. Pattern Library is a collection of design elements that appear multiple times across a site. https://boagworld.com/design/pattern-library/
- 17. 1 2 3 4
- 20. 1
- 22. We're not designing pages, we're designing systems of components. Stephen Hay
- 25. Salesforce https://www.lightningdesignsystem.com/
- 27. Why should You use it?
- 28. Consistent UI Speed up Production Common Playground
- 29. http://bradfrost.com/blog/post/interface-inventory/
- 33. back/front end dev – structure of the JSON? front end colleague – does this element exist? front end dev after a month – what is this? ux/ui designer – quality of implemented design? stakeholders – what is the progress? content-writer – how much content? Forward questions to Pattern Library
- 37. a) Give the same look & feel b) Support new module creation
- 38. © Würth Phoenix 2016 Facts Challenges Products with a history Legacy UX support Multiple CSS libraries Risk of class name collision Time & Resource limit Future proof quick solution Multiple large products Knowledge transfer Obstacles
- 40. DOCUMENTATION
- 42. TRY IT GET ALLIES SELL IT
- 44. • Install WordPress • Clone Timber starter theme • Clone Pattern Library • Prepare data in WordPress • Pass data to .twig Patterns Steps
- 48. 1 2 1 2
- 55. Great Tool You Can Start Dirty Plays nice with WordPress
- 57. © Würth Phoenix 2016 Products 57 NetEye EriZone Real User Experience Alyvix … more than software NetEye® is a unified IT monitoring solution for companies needing to govern IT environments with appropriate operational costs. EriZone is a solution to manage tickets and processes according to ITIL best practices. Real User Experience (RUE) analyzes each single request from the users’ workplace to the server, to measure the user experience on on-premis and cloud-based IT services. Alyvix simulates interactions of a human user on any application’s GUI to continuously check availability and responsiveness of the tested application.
- 58. © Würth Phoenix 2016 GRAZIE PER LA VOSTRA ATTENZIONE! www.wuerth-phoenix.com © Würth Phoenix 2016 … more than software Thank You www.neteye-blog.com www.lnked.in/wuerth-phoenix @WuerthPhoenix