Prototypes of Design Patterns

I am reading Todd Zaki Warfels excellent book about prototyping and realized early on that I need to use prototypes as a compliment to functional diagrams for documenting design patterns in the misfits method.

When the method has produced a tree of misfit groups, the task is to find design patterns that neutralize the misfits, I.E. that solve the design issues. Starting from the lowest level (the single misfit) I create (or reuse) patterns. Once the low level patterns are found, they are combined to form higher level solutions, eventually creating a solution to the full design problem. A visualization (only one level of misfit groups and thus also only one level of solutions are display, but there is often several such):

In interactive applications, the full solution should often be a prototype. My new realization is that some low level design patterns also benefit from being prototyped.

In Alexander’s book, functional diagrams play the role of communicating the contents of the design pattern. The following is an example of a beautiful functional diagram:

This diagram depicts an abstracted summary of data about traffic flow in an intersection. The arrows indicate direction of the driving vehicles, the width of the line indicate the amount of traffic flowing in each direction. Therefore the diagram indicates which form the new intersection should take, I.E. the diagram can function as a guide when designing the intersection.

Abstract diagrams can often be used in software design, but I feel that prototypes can add communicative abilities to a pattern. Prototypes are made to be played with – experienced – whereas diagrams are static. I imagine using prototypes for patterns that are highly interactive and thus difficult to create diagrams for.

Below I have embedded a demo of a full design solution prototype. Could not find videos of prototypes for smaller design problems, but it is easy to imagine the below solution being made up of a multitude of patterns that could benefit from a prototype…

10/GUI from C. Miller on Vimeo.