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.

Advertisements

1 Comment »

  1. I actually wonder why you titled this post, “Designing
    screen layout with Visual Studio Express User experience architecture”.

    Regardless I actually enjoyed the post!Thanks a lot-Katherina

    Comment by http://yahoo.com — February 11, 2013 @ 11:01 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: