1 / 17

Fluid Design Patterns

Fluid Design Patterns. Allison Bloodworth JA-SIG Unconference 11/12/07. 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

hcraig
Download Presentation

Fluid Design Patterns

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Organization People • Pedagogical Patterns (Manns, 1996) • Human-to-Human Communication Patterns (Cockburn, 1997) • Organizational Patterns (Coplien, 1998, Cockburn, 1997) • Business Reengineering Patterns (Beedle, 1997) Product • HCI Patterns (Tidwell, 1998) • Software Design Patterns (Gamma, 1995) Process • Steps and Task Patterns (Ambler, 1998; Coplien, 1995) • Process Improvement Patterns (Appleton, 1997) Software Engineering Patterns From: Maximizing Reusability of Pattern Languages over the Web, Homa Javahery, www.cusec.net/archives/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_designpatterns/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-authors/ • The Pattern Gallery: http://www.cs.kent.ac.uk/people/staff/saf/patterns/gallery.html

More Related