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.

1. Pattern Library in
WordPress projects
WordPress Riga, Latvia, October 1st ,2016
@karlis_upitis, karlisup.com

2. Hello,
I am Karlis

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

4. /karlisup @karlis_upitis

5. • What is Pattern Library?
• Why should you use it?
• Integration in existing projects
• Where should you start?
• Pattern Library + WordPress
Outline

6. What is
Pattern Library?

7. http://www.nec.edu.au/wp-content/uploads/2015/10/Monkey-is-confused.jpg

8. Design System

9. BRAND IDENTITY
https://issuu.com/bondo/docs/foursquare

10. DESIGN PRINCIPLES
https://www.facebook.com/note.php?note_id=118951047792

11. FRONT END DEV.
CONVENTIONS
http://tech.tmw.co.uk/code/TMW-frontend-guidelines/

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/

14. http://www.bbc.com/sport

17. 1
2
3
4

20. 1

22. We're not designing pages,
we're designing systems of
components.
Stephen Hay

23. Who uses
Pattern Library?

24. MailChimp
https://ux.mailchimp.com/patterns

25. Salesforce
https://www.lightningdesignsystem.com/

26. A List Apart
http://patterns.alistapart.com/

27. Why should
You use it?

28. Consistent UI
Speed up Production
Common Playground

29. http://bradfrost.com/blog/post/interface-inventory/

31. Keep it DRY
REUSE

32. http://redfootsafaris.co.za/wp-content/uploads/2012/11/Nam-3.jpg
UX/UI Designers
Back End
developers
Front End
developers

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

34. Integration in
existing projects

35. Single Pattern
Style
Demo Data
Documentation
Template

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

39. http://www.neteye-blog.com/2016/09/style-consistency-thanks-to-component-library/
Patterns are in SYNC

40. DOCUMENTATION

41. Where should
You start?

42. TRY IT
GET ALLIES
SELL IT

43. Pattern Library +
WordPress

44. • Install WordPress
• Clone Timber starter theme
• Clone Pattern Library
• Prepare data in WordPress
• Pass data to .twig Patterns
Steps

46. Clone Timber starter theme
In themes folder
Clone Pattern Library in the theme
(follow the instructions)
https://github.com/timber/starter-theme https://github.com/karlisup/pattern-library/

48. 1
2
1
2

52. Index.php
Index.twig

54. http://core0.staticworld.net/images/article/2013/12/plug-in-100159797-primary.idge.jpg

55. Great Tool
You Can Start Dirty
Plays nice with WordPress

56. https://github.com/karlisup/pattern-library
Pattern Library

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