front-end pattern libraries

22
Front-end pattern libraries Vinay Malankad & Maish Nichani presents www.pebbleroad.com

Upload: pebbleroad

Post on 27-Jan-2015

111 views

Category:

Technology


1 download

DESCRIPTION

Presentation given to IXDA Singapore on 27 Feb 2014. The presentation describes front-end pattern libraries and introduces Tapestry, a front-end pattern library manager (or app).

TRANSCRIPT

Page 1: Front-end Pattern Libraries

Front-end pattern libraries

Vinay Malankad & Maish Nichani

presents

www.pebbleroad.com

Page 2: Front-end Pattern Libraries

We are PebbleRoad

• Singapore-based Enterprise UX consultancy

• Innovating since 2004

• Team of specialists

• Culture of innovation and design leadership

Page 3: Front-end Pattern Libraries

Pattern libraries What it is Why do we need one

TapestryWhat it is How to use What is the tech How to install

Page 4: Front-end Pattern Libraries

FE Pattern library =

content +

interaction +

visual +

code

Page 5: Front-end Pattern Libraries

Presentation

Code Usage notesTitle

http://patterns.alistapart.com/

Page 6: Front-end Pattern Libraries

https://ux.mailchimp.com/patterns

Page 7: Front-end Pattern Libraries

UX + FE CMS

give prototype + psd can’t recognise work

give html templates new templates fail

give modular code can’t screw up

Why

UX

Page 8: Front-end Pattern Libraries

When

maintenance

UX

CMSUX UX

Page 9: Front-end Pattern Libraries

Benefits

Production-quality Modular Reusable

Extendable

Smart!

Page 10: Front-end Pattern Libraries

Core CSS + JavaScript

Interface

Tapestry

Page 11: Front-end Pattern Libraries

Core CSS + JavaScript

Interface

Customise it!

Customise

Customise

Page 12: Front-end Pattern Libraries

intro patterns + pattern - pattern

_tech installation

Tapestry demo

http://demos.pebbleroad.com/tapestry/src/

Page 13: Front-end Pattern Libraries

Patterns

elements

components

templates

pages

table

tabs

feedback

feedback + content

Page 14: Front-end Pattern Libraries

Patterns

JSON

Interface

Page 15: Front-end Pattern Libraries
Page 16: Front-end Pattern Libraries
Page 17: Front-end Pattern Libraries
Page 18: Front-end Pattern Libraries

Dependency  -­‐  Gulp  (NodeJS)  !$ git clone https://github.com/PebbleRoad/tapestry.git !$ cd tapestry !$ npm install && bower install !$ gulp patterns !# Open http://localhost:8000 in your browser

Installation

Page 19: Front-end Pattern Libraries

Unit testing of the app Share a pattern Pattern version history

Next steps

Page 20: Front-end Pattern Libraries

http://www.fivesimplesteps.com/products/front-end-style-guides

Page 21: Front-end Pattern Libraries

A free service that saves you time in sharing hard-to-spell or hard-to-understand info with

customer service reps. !

www.copymyinfo.com

Page 22: Front-end Pattern Libraries

www.pebbleroad.com