pattern library in wordpress projects
TRANSCRIPT
Pattern Library in WordPress projects
WordPress Riga, Latvia, October 1st ,2016@karlis_upitis, karlisup.com
Hello,I am Karlis
© 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
/karlisup @karlis_upitis
• WhatisPatternLibrary?
• Whyshouldyouuseit?
• Integrationinexistingprojects
• Whereshouldyoustart?
• PatternLibrary+WordPress
Outline
What isPattern Library?
http://www.nec.edu.au/wp-content/uploads/2015/10/Monkey-is-confused.jpg
DesignSystem
BRANDIDENTITY
https://issuu.com/bondo/docs/foursquare
DESIGNPRINCIPLES
https://www.facebook.com/note.php?note_id=118951047792
FRONTENDDEV.CONVENTIONS
http://tech.tmw.co.uk/code/TMW-frontend-guidelines/
DesignSystem
Pattern Library is a collection of design elements
that appear multiple times across a site.
https://boagworld.com/design/pattern-library/
http://www.bbc.com/sport
1
2
3
4
1
We're not designing pages, we're designing systems of
components.StephenHay
Who usesPattern Library?
MailChimp
https://ux.mailchimp.com/patterns
Salesforce
https://www.lightningdesignsystem.com/
AListApart
http://patterns.alistapart.com/
Why shouldYou use it?
Consistent UI
Speed up Production
Common Playground
http://bradfrost.com/blog/post/interface-inventory/
KeepitDRY
REUSE
http://redfootsafaris.co.za/wp-content/uploads/2012/11/Nam-3.jpg
UX/UIDesigners
BackEnddevelopers
FrontEnddevelopers
back/frontenddev – structureoftheJSON?frontendcolleague– doesthiselementexist?frontenddev afteramonth – whatisthis?ux/ui designer– qualityofimplementeddesign?stakeholders – whatistheprogress?content-writer – howmuchcontent?
Forwardquestions toPatternLibrary
Integration in existing projects
Single PatternStyle
Demo Data
Documentation
Template
a) Give the same look & feel
b) Support new module creation
© 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
http://www.neteye-blog.com/2016/09/style-consistency-thanks-to-component-library/
Patterns are in SYNC
DOCUMENTATION
Where shouldYou start?
TRY ITGET ALLIES
SELL IT
Pattern Library + WordPress
• InstallWordPress
• CloneTimberstartertheme
• ClonePatternLibrary
• PreparedatainWordPress
• Passdatato.twigPatterns
Steps
CloneTimberstarterthemeInthemesfolder
ClonePatternLibraryinthetheme(followtheinstructions)
https://github.com/timber/starter-theme https://github.com/karlisup/pattern-library/
1
2
1
2
Index.php
Index.twig
http://core0.staticworld.net/images/article/2013/12/plug-in-100159797-primary.idge.jpg
Great Tool
You Can Start Dirty
Plays nice with WordPress
https://github.com/karlisup/pattern-library
Pattern Library
© 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.
© 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