1. Design patterns for Interactive Graphics

2. Intro Problem statement: How to connect the two cities? Solutions come implicitly into our mind!

4. Balancing forces: Finding the best form to solve a problem in a context Design is considered as problem-solving process Which tool fits best to bring a nail into a wall? Design task: Balance the iron balls

6. Timeline: Entwicklungsgeschichte 1979 „ The Quality without a Name“ 1987 1995 WikiWikiWeb: The Portland Pattern Repository 1964 2000 2003 2006 1977 Notes on the Synthesis Of Form A Pattern Language The Timeless Way of Building Beck&Cunningham: Software Patterns „ Gang of Four“ Design Pattens GUI Pattern Pedagogical Patterns AJAX Web 2.0 E-Learning Web-Design

7. A Pattern Language Towns – Buildings - Construction Solution Problem Forces Name Context Bus Stop Bus stops must be easy to recognise, and pleasant, with enough activity around them to make people comfortable and safe. within a town whose public transportation is based on MINIBUSES (20), genuinely able to serve people, almost door to door, for a low price, and very fast, there need to be bus stops within a few hundred feet of every house and workplace. … Web of relationships that are present in the tiny system around the bus stop… What? When? Why? How? Therefore: Build bus stops so that they form tiny centers of public life. Build them as part of the gateways into neighborhoods, work communities, parts of town. Locate them so that they work together with several other activities, at least a newsstand, maps, outdoor shelter, seats, and in various combinations, corner groceries, smoke shops, coffee bar, tree places, special road crossings, public bathrooms, squares….

8. Dynamic labels 1

9. Dynamic labels 2

10. Dynamic labels 3

11. Dynamic labels are a pattern. Button: A mouse event (click, roll-over) on a button turns another object ON or OFF On/Off object Two visual states (different opacity, colour, image) OFF = Transparent opacity ON = Full opacity

12. Design Pattern: Activator Activate an image or visual object by a pointer object on demand. Entwurfsmuster:

13. Design Pattern: Sandbox Avoid that a dragable element can exit a defined area. Entwurfsmuster:

14. Design Pattern: Synchronize Objects Show how motions of objects depend on each other. Entwurfsmuster:

15. Entwurfsmuster: Objekt-Transporter Dynamically attach content to a dragable container. Entwurfsmuster:

16. Integration of patterns in authoring tools Wizards guide through the creation: Visual language shows Pattern realtions:

17. Decomposition of structure Following Gestaltpsychologie: The sum is more than its parts!

18. Decomposition of structure

20. Pattern Mining, Writing & Application Explicit Patterns (Documented Patterns) Mental Patterns (Pattern as mental models) implicit explicit Real World Patterns (Recurring structure observed In our envirionment) Pattern Mining Pattern Writing Pattern Application