User experience architecture

August 16, 2008

Designing screen layout with Visual Studio Express

It’s an old debate. what’s the best tool for prototyping screen designs?

For early abstract design, I like the minimalism of a spreadsheet set to a regular grid. For smoke-and-mirrors interaction, I’ve had good results with Axure. It also does a nice job on managing design process metadata: issues; alternatives; and open questions. For day-to-day sketches, PowerPoint is competent and is ideal for sharing ideas with colleagues in other disciplines.

For more precise screen layout, I’ve been impressed by the forms designer in Microsoft Visual Studio Express for C#. Here are some specific features I’ve found helpful:

  • Field alignment

    As you drag a field across the screen, the designer draws a blue line to visually indicate any field with which it is is aligned. “Aligned” means that an edge (top, bottom, left, right) in one field matches an edge in another. A magenta line also shows when the text baselines are lined up. This is handy for neatly laying out forms, nested containers and any complex design where you don’t have a regular grid to guide your eye.

    Aligning three buttons

  • Margin management

    You can set margins properties on a control such as a button or text field. As you drag this control, the forms designer draws a connecting line to nearby objects whenever the control is positioned at exactly the margin distance away. For example, you might set up section headings to have a larger margin above than below. Using this technique to drag a set of fields below each heading would ensures consistent grouping and separation in line with Gestalt principles.

    Using margins to position labels and buttons

  • Layout managers

    You can add flow layout panels and table layout panels and then drop controls onto those panels. For simple layouts, this saves a lot of time. The table layout is handy for simple forms in which each row contains a label, a field and some guidance. The flow layout is convenient for facet style menus or tag clouds.

    Using a flow layout panel to present a faceted menu

Together, these features take the tedium out of defining a neat and consistent layout. The experience is unobtrusive but quietly rewarding.

Blog at WordPress.com.