Organic prototyping
by Peter Small
This article describes the theory behind the design of the prototype creator program used in the stigmergy research project.
Building an organic prototyping program
The organic prototyping program used in the stigmergy research project is based upon the way professional Web site developers have learned to automate the design of various parts of Web site construction. Building upon these techniques, we now have a program that can generate organic prototypes that can be used to overcome critical mass problems and create self-organizing stigmergic Web sites.
Following is a description of how this program was developed and the way it is used.
The programmer's strategy
We began by looking at the way professional programmers work.
Being a successful programmer is not simply a question of learning a computer language and being able to create clever and innovative programs. The prime aim of a professional programmer is to make money. This can only be achieved if a programmer can deliver value i.e., fully developed solutions at highly competitive prices.
The more astute programmers soon realise that to be able to deliver solutions at competitive prices they can't start from scratch every time they work on a new project. They have to be able to reuse modules of code they have designed previously. In other words, to develop a project with the minimum of cost the design has to be made up from many different modules that the programmer has already designed, tested and debugged.
This way of working is illustrated in the following diagram:
Successful freelance programmers work this way. They gradually build up a larger and larger, personal library of working code modules. When a project comes along they can choose from these modules and piece them together to form the basis of a client's custom made program.
It is this kind of strategy that is used in biological systems. For example, genes in the chromosomes of a biological cell (which are effectively code modules from a biological database) are brought into play as and when needed, to evolve, change and adapt, a living organism quickly and efficiently.
The site designer's strategy
As with programmers, Web site designers weren't slow to realise they could use tried and tested modules from previous work - component parts of Web sites that had already been developed successfully. They stopped designing sites from scratch and began to work with templates - modules of functional elements - that can easily be modified for customization.
In this way, the development of Web sites becomes more like Lego set constructions. Web sites can be constructed quickly and easily, simply by bolting various templates together and tweaking the variables to provide customization. Modifications and updating is also less time consuming and expensive, as it involved little more than the substitution of different templates. This is illustrated in the diagram below.
Thus it came about, that the more successful Web design companies stopped creating unique solutions for every client and concentrated mostly on clients where they could make maximum use of their existing templates.
Of course, they did not abandon their creative and technical skills entirely, but these were limited mainly to areas that would result in new templates that could be reused for new clients. It was better for them and better for their clients.
Thus, working with templates has proved to be the most practical way for Web design companies to keep their clients' costs down and, as a result, keep themselves in business.
Graphic designer's strategy
The on screen appearance of a Web page is arranged by inserting coded tags into a text document - a messaging notation known as HTML. These tags are invisible to the viewer, but pass on explicit instructions to a browser, telling it exactly how to display and lay out the page contents. These tags can also be used to tell a browser what pictures to include and where to position them.
In the early use of HTML, these tags littered the pages of text documents, as they specified the colors, fonts and layout of individual words, lines, paragraphs and pages. This made customization and changes to design a laborious and expensive exercise.
As browsers became more sophisticated, they allowed a more powerful form of formatting and layout specification to be passed onto the browsers. Known as 'Cascading Style Sheets' (CSS) this notation allows page layout and on-screen presentation of content to be completely separated from the content itself. Areas of a Web page can be allocated a 'class' or 'id' name, whereby sections of content can be given their own display specification.
The effect of using CSS allows formatting and display to be controlled independently of any other aspects of Web site design. Parts of Web pages, whole Web pages and even complete Web sites can be changed simply by altering the code in a single separate text document.
Very soon, it was realized these CSS documents could be broken up into modules. Designers no longer had to laboriously create new designs and layouts from scratch for every new site they created. They simply maintained a library of previously designed CSS modules, from which they could select from whenever they designed or redesigned a site. This is illustrated in the following diagram.
From the view point of cost, this was a revolution. No longer was it necessary to repeatedly submit designs for discussion and approval. A client could now sit down with the designer and rapidly experiment with a whole variety of possibilities until a satisfactory design emerged. Working with a designer who has a wide range of pre-designed modules, such a process will take no more than a few hours.
This Web site is an example of this process. Joe Gillespie, of Pixel Productions, designed the logo and sat down with us for about two hours to go through various possibilities of design. He left us with a single text document of CSS modules. This document formed the basis of the graphic design built into the Web site creator program that built this Web site. If we want to change the design of this Web site, all it involves is the substitution of some of the CSS modules.
BTW Joe Gillespie is a world renown graphic designer and his Web site contains numerous articles and tutorials on Web site design ( http://www.wpdfd.com).
Project strategy
Every Web site developer, programmer and graphic designer, working with modules, is likely to have their modules organized in some kind of database, where they can be retrieved quickly when needed.
As illustrated in the following diagram, it isn't hard to imagine a complete Web based business project being developed in a similar way, with the project manager using a database of modules from a variety of specialists.
With a suitable selection of ready made modules, prototypes can be put together quickly. These prototypes can be tested and experimented with. Alterations can be made, simply by replacing modules or tweaking the variables