Fluid Design Patterns

1
Fluid Design Patterns

• Allison Bloodworth
• JA-SIG Unconference
• 11/12/07

2
What is a pattern?

• A pattern is a proven solution to a common
  problem in a specified context
• There may be many different implementations of
  each pattern
• Each pattern is a three-part rule, which
  expresses a relation between a certain context, a
  problem, and a solution Alexander 1979.

3
Software Engineering Patterns
From Maximizing Reusability of Pattern Languages
over the Web, Homa Javahery, www.cusec.net/archive
s/2002/javahery.ppt
4
Why use UI patterns?

• To help designers and developers create the
  proper user interface for a specific context
• Design patterns libraries may
• Be very general or organization-specific
• Communicate best practices reusable design
  knowledge
• Prescribe specific guidelines/act as style guide
  replacements
• Connect to component libraries

5
Pattern Libraries - Tidwell
http//www.time-tripper.com/uipatterns/
6
Pattern Libraries - van Welie
http//www.welie.com/patterns/index.php
7
Pattern Libraries - Yahoo!
http//developer.yahoo.com/ypatterns/
8
Pattern Libraries - UC Berkeley
http//harbinger.sims.berkeley.edu/ui_designpatter
ns/webpatterns2/webpatterns/home.php
9
Pattern Libraries - Moudil
10
What are Fluid UI Design Patterns?

• Open Source Design Patterns (OSDP) Library
• Used for
• Help with implementing components
• Document patterns found in Fluid applications
  (standards)
• Bring together patterns from other collections
  which are helpful to Fluid applications
• Space for Fluid communities to grow their own
  design pattern libraries
• ???

11
OSDP Library Audiences

• Junior interaction designers new designers to
  the community
• Developers who need to design the UIs they build
• More experienced designers
• Creators of patterns

12
Pattern Library Issues

• Proper granularity for a pattern
• Serve one organization or many/all?
• Use classification hierarchies or tags?
• Use mark-up language to facilitate reuse (e.g.
  PLML)?

13
Example Drag Drop Pattern

• Tells you what to think about when implementing
  the Reorderer component
• Lightbox
• Drag-and-drop tabs
• Portlet Reorderer

14
Drag Drop Pattern
15
Advice on creating a pattern library

• First of all, read all the articles and books
  etc. related to this topic to get started.
• Second, it is really important to understand
  organization's culture to select suitable
  patterns and create tool for sharing and managing
  patterns.
• And, when you have created the library, you need
  to find the ways to keep the library living.

From ui-patterns-authors mailing list
16
What can you do to help?

• How do you currently design and implement user
  interface elements?
• How might you use UI design patterns and Fluid
  (or other) components?
• What additional information might you need?

17
More Pattern Resources

• Yahoo! UI Patterns Authors mailing list
  http//tech.groups.yahoo.com/group/ui-pattern-auth
  ors/
• The Pattern Gallery http//www.cs.kent.ac.uk/peop
  le/staff/saf/patterns/gallery.html