by: benjamin mckinley and james troupe. define “pattern” examples of patterns what is...

PATTERNRY.COM AND ITS

APPLICATIONS

By: Benjamin McKinley and

James Troupe

OUTLINE Define “Pattern” Examples of Patterns What is patternry.com? Why use patternry.com? Features Pattern Library Demonstration

DEFINITION OF “PATTERN” Is a general reusable solution to a

commonly occurring problem A repeated decorative design. Everyday uses:

ClothingAuto partsTilesChip building

EXAMPLES OF PATTERNS Company Software

MS Excel & MS Word Social Websites

FacebookGoogle+

WHAT IS PATTERNRY.COM? GUI design tool for developing

consistent websites.Re-usable interface patternsRe-usable tools

Developed by:Johannes Hocksell (CEO)Matti Varjokallio (CTO)Janne Lammi (Patternista)2009 Helsink, Finland

WHY USE IT? Fast and efficient Create websites with consistent

interfaces. Built in looks and features Standardization for

groups/companies

FEATURES Code Snippets

Copy and pasteHTML, JavaScript Wireframes

Pattern libraryElaborate more on this next slide

More online!

PATTERN LIBRARY Buttons Required Form Fields Drag and Drop Modules Navigation Lists Feedback Messages Example:

https://www.youtube.com/watch?v=GCIQDOVmVLc

SUMMARY Other tools

UI Patterns: (http://ui-patterns.com/) More patterns Better Description

Pattern Lab: (http://patternlab.io/) Lessons; code & patterns GitHub account

ConclusionGreat for companies with web design

team Intense knowledge of

HTML/CSS/JavaScript

REFERENCES Martin, Robert C.. "Design Principles and Design

Patterns". P 2000 Lammi, Janne. "Start Building Consistent Web

Interfaces." Start Building Consistent Web Interfaces. Web. 26 Feb. 2015. <http://patternry.com/>

Lammi, Janne. "Patternry Video." YouTube. YouTube, 15 May 2012. Web. 26 Feb. 2015. <https://www.youtube.com/watch?v=GCIQDOVmVLc>

Toxboe, Anders. "User Interface Design Patterns." UI-Patterns.com. CCA, 1 Jan. 2007. Web. 27 Feb. 2015. <http://ui-patterns.com>

Frost, Brad. "Pattern Lab." Pattern Lab. 1 Jan. 2005. Web. 27 Feb. 2015. <http://patternlab.io>