Schematics: the horizontal vision

Under the term schematics in Wikipedia we can find:

“A schematic is a diagram that represents the elements of a system using abstract, graphic symbols rather than realistic pictures.”

In a project it is an abstract representation of a system, a database, an architecture of information system, a site tree, its information architecture and navigation.

Designing a model is very important to build coherent applications, especially if they are interactive. If not used when designing the user interaction of an application the risk is that you don’t build a user-friendly application.

For years web development was no men’s territory, so you can see a lot of project management attitudes…. and the interface development was always the latest thing. But now something is changing.


The schematic is not like graphic design, but it explains the concepts, how you put the contents inside and which is the user interaction.

Only after this step it is possible to develop the system, because you have a global vision of every process. It’s not necessary fixed, it could be flexible, it depends on you.


This is one of the schematics that I designed for the backend of Subtext an open source blog engine.

I put into the schematic only the vision of how I immagine the content will be and the possible interaction with this.
You could be more descriptive if you write a scenario.

How to use schematics in a small project with short time? Design the main part, the main interaction types that can be reused in other functions.
The way I use them is:

• understanding the main areas of the user experience;
• understanding the critical points;
• and then draw the schematics only of these features.

There are way to draw schematics: you can either use draw on paper and scan or go more sophisticate and use visio (blahhh), PPT or even Illustrator. Unfortunatley, there are not many tool specifically design for this kind of operation, but one that lately is gaining a lot of attention is Balsamiq: a software to draw schematics using a standard component with a resulting hand drawn look&feel. I might try it in the future.

Technorati tags: UI, schematics, balsamiq, usability