Good resources for GUI creation in Visual Studio

Question

I'm working more and more with desktop applications, and my GUIs SUCK. I'm familiar with the basics of GUI design, but am having trouble putting them into practice.

What I'm looking for are good (or at least decent) guides to building (not designing!) a GUI in Visual Studio.

Failing that (I've not found much via the usual sources), I have to ask: is it possible/worth the effort to build a GUI with VS2K5's 'Design' view? That's what I've been largely using, since I'm a visual person.

Specifically, I am looking for help in the 'nuts & bolts' of IMPLEMENTING a completed design

I am not adverse to installing extra tools if needed, but my preference is to stick with things you get through a vanilla install of VS2k5 if possible.

Answer 1

I have little time to really dig up juicy links but I am sure a little digging on your part will get you some best practice information. It may not be directly related to the form designer in VS2k5 but useful either way. I'm not saying you should be a usability guru, but they're definitely worth looking at.

Also, in regards to "worth the effort to build a GUI with VS2K5's 'Design' view"? I would say that's a yes & no. I only say this from the fact that if you rely too much on a designer, no matter the IDE, you're missing out on the down & dirty stuff - the stuff that really teaches you what's going on. Some things you must do via code either during design time or runtime to get the best result so it won't hurt to really know what's going on under the hood!

Happy GUI'ing!

Answer 2

I have to say I don't agree with croutle, creating good UI does not necessarily have anything to do with coding. SmashingMagazine has a large catalog of resources for UI design, and while most of those are very webcentric the general prinicple still apply no matter if you put your UI together in the Forms editor through coding or on a webpage.

For me GUI designers have always been a way to keep presentation separate from content, a good implementation of a GUI with it's Designer will support that, if you start having to write a lot of code to affect simple effects in the UI that line starts to blur. Interface Builder on Mac does this the best of all the ones I have used (amongst others Java Swing, Windows Forms).

The question is does the interaction suck or does the look suck, unless you are a good artist there is not really a lot you can do about the latter, but to stick to the bare minimum. There is a science to minimalism that can be learned even for the non artist types (lay out everything on a regular grid for example). This piece is geared somehow towards print, but most of the aspects that are mentioned are universal and do apply to screen and UI design.

The former can be fixed by trying to put yourself in the users shoes. Look at the task that the users are doing and how they accomplish that using your software. Does it make it easier for the users to do their work or does it throw roadblocks in the the path that encumber the work flow.

Answer 3

If you already have your design layed out and planned, then implementing it should be the easy part. With WinForms, it really is drag and drop (and setting some properties, such as for docking and anchoring).

The trick I found that really helped getting through implementation is to completely and totally mock out the interface on paper. I mean EVERYTHING: every menu, button, label, grid, etc. should be sketched out. After that, it's just a matter of dragging the controls on to a form, renaming them to something sensible, and making sure that window sizing doesn't throw your controls out of place.

If you don't have a fully realized design to work from when creating the GUI, you will have a very hard time since you will still be making design decision that will get in the way of the construction.

EDIT: If you're willing to pay, http://www.learnvisualstudio.net/ has several videos on the topic of making simple GUIs for a basic application, usually oriented towards a particular control (DataGridView, ListView, etc.).

Answer 4

I suck too in desinging user interfaces. I keep on messing up things.. I'm trying to improve, anyway. My new approach is very simple: copy. There are plenty of good user interfaces around, and we don't need to reinvent the wheel. A good side effect is a continuity in our users experience.

Take a program your users find famirial and try to mimic it. I think lot of applications can be done by tracing MS Outlook UI, for example. Or if you want to do something new, look what the bigs do: just for example, try Picasa (desktop) by Google. Or any program with the ribbon bar. If you have time, give a look at MS' Vista User Experience Interaction Guidelines (PDF available for download). There are lot of little solutions, like where to place "save-cancel" buttons and in which order.. it's a stupid thing but makes a great difference.

A good resource if you have a task to be done and want a starting point about how to present it is Quince from Infragistic. It has lot of "do like this" tips and sample screenshots.

Another good resource, as mentioned by Harald, is SmashingMagazine: you can subscribe their feed, and it is true that desktop design is every day closer to web counterpart.

And finally, icons. SmashingMagazine often gives tips about icons, and you can find many collections on IconFactory.

HTH!

Answer 5

When you look at a successful software it looks so simple, at least in theory. GUI code can be extremely underestimated in its complexity, and is sometimes overlooked in the design phase because it's considered trivial.

I'm not sure if you're asking about WinForms tutorials or specifically how to organize and structure the code in a way that keeps you sane, but either way Jeremy Miller has a good collection of tips on how to design the GUI code structure. (Note: This is about the GUI code structure, not WinForms or usability design).

My take on GUI code has usually been this process:

1. Create a rough and fugly GUI with the Designer in VS. Coming from web design you can consider this MS Frontpage in WYSIWYG mode - no styling or specific structure. Just the rough visual structure of the app, menubar, toolbar, statusbar etc. No custom controls.
2. View the code and organize it into a couple of classes
3. Go back to Designer and add controls to the organized classes
4. View the code and organize it.
5. Rinse, lather, repeat.

When my code structure is kind of finished I go into extreme detail mode, where I handcode values to get pixel-perfect in contrast to the GUI.

Anyway, I wasn't quite sure what your question was but I hope this helps. Let me know if I misunderstood you.

Answer 6

The Visual Studio designer for WinForms works really well. I use it all the time when creating WinForms apps. The alternative approach is to define the UI elements in code, which is quite painful.

OTOH, in my opinion the VS designer experience for WPF and WebForms (ASP.NET) is not nearly as good as with WinForms. Fortunately, for WPF and WebForms apps, if you don't like the designer you can at least fall back to using declarative markup, which is a lot better than defining the UI elements in code (unfortunately WinForms does not have declarative markup language).

Using the VS WinForms designer, here are a couple tips to improve your experience:

• Learn how to use the Anchor property. Learning this along with the Dock property probably improved my WinForms design experience more than anything else.

• When in the designer, always have the Document Outline view open, which shows you the control hierarchy of your form in a tree view... really helpful, especially when renaming controls.