pattern library in wordpress projects

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