Module & Program

On Tuesday we will spend some time in the project 2 groups working on project 2 in relation to some of the earlier lectures

How does your design support diversity of users and tasks

    diversity of users

    diversity of tasks

By the end of class your group should add a web page to your project 2 site that discusses these things in detail, and send an email to andy with the link. Note that this should take you the entire class time, and for most groups your discussion should be in much greater detail than what was turned in for the activity last Thursday before break.

(material from: Designing Visual Interfaces by Mullet and Sano)

"The module is a scale of proportions that makes the bad difficult and the good easy" Albert Einstein

previously we talked about windows and dialogue boxes in isolation.

Here we talk about the development of 'programs' - comprehensive systems of organization - based on repeated sizes and proportions (module) or on forms and ideas (theme) to bring regularity and structure

Benefits of a systematic approach:

Grid Based Design

Grid Based Design 1

Grid Based Design 2

Here is a nice article:


take the static layout principles from the last lecture and turn them into an overall structure for an entire system

divide the screen into a small number of primitive units along each dimension and permits important structural elements to be placed consistently



Common Errors:

arbitrary component dimensions


random window sizes

Random Window Sizes

unrelated icon sizes and imagery

Unrelated Icon Sizes and Imagery

inconsistent control presentations

Inconsistet Control Presentations



  1. start with rough sketches of the series of layouts to be produced
  2. look for common margins or functional units. Individual displays should be adjusted to ensure consistent positioning of major structural elements
  3. look for widely spaced elements that should be visually related but which cannot be positioned next to one another
  4. look for paths the user's eye needs to follow through the display. Repeated structural elements can serve as landmarks
  5. use standard locations and a consistent presentation style for rules, text, or images

Modular Units:

  1. determine the vertical unit. In GUI design this means defining the standard control height and the spacing between control. 
  2. the vertical unit should allow any two controls to be placed next to one another, and should provide for proper spacing of multi-line controls, multi-control groups, and separations between groups. 
  3. determine the horizontal unit. The unit should be large enough to accommodate most of the one-word labels in the design space and should be at least three times as wide as the vertical unit.
  4. the optimum horizontal unit should provide 5-7 divisions of the typical display width and should be easy to factor evenly into partial or multiple units.

Grid-based Design:

  1. determine any size restrictions on the area to be laid out
  2. determine the basic vertical and horizontal modules. the vertical module is determined by the widget set, while the horizontal module is determined by the number of controls (and sometimes by the lengths of their labels). These parameters define precisely the grid that will be used
  3. develop a rough layout sketch that approximates the sizes, positions, and orientations of the relevant control elements
  4. use the grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. The grid helps establish consistent alignment relationships. 
  5. for dynamic layouts, identify the minimum size that can be accommodated by the layout. This is better than trying to recompute the layout for arbitrarily small display sizes.

and now lets look at applying this to your revised design for project 2.

By the end of the class someone in your group should email me drawings from your design showing how you are using a grid-based layout for your door and its controls

last updated3/15/2017