9

Writing a GUI for a program has always been a daunting, depressing, and frustrating task. It doesn't matter which language, its extremely hard to get what I want. Especially in compiled languages like Java where a change takes a minute or two to build.

The result is that I increasingly use GUI designers for some of my project. Sure there is some spagetti code, but as long as I leave the configuration and a note saying "This was designed with X" I have no qualms with doing this.

Is this an okay way to design a GUI? More importantly, is this what most people do? Or is the common way to just sit down and write it out?

Improve this question
2
  • I work on a Java GUI app that is 650k lines of code and it takes approx one minute to build. However, working in Eclipse, it incrementally builds for you. Given that, I don't have to build the whole app every time I want to run it. I simply restart the app and it runs with my changes. No waiting required.
    – Nemi
    Jan 7, 2011 at 16:12
  • 1
    Oh yeah, and GUI builders are evil. If your goal is to make software that cannot be maintained by anyone (including yourself), you are on the right track.
    – Nemi
    Jan 7, 2011 at 16:14

8 Answers 8

Reset to default
6

I have never actually found a visual designer that makes it easy to create robust designs (if anyone has any they like, feel free to correct me). They are nice for dumping stuff on a fixed-size window to mock things up, but when it comes to making something that resizes nicely, plays well with DPI and themes, and all the other stuff that separates a professional UI from a merely "good-enough" one, they honestly become more work than just coding it up yourself (assuming a decent UI framework to play with).

Visual designers are excellent for rapidly prototyping software, trialling designs, and playing around to see how stuff looks, but I wouldn't use one for the final build.

Improve this answer
7
  • What framework do you use? I can't imagine writing a WPF UI without a designer, for example...
    – Dean Harding
    Jan 7, 2011 at 3:20
  • I haven't had much opportunity to play around with WPF - that said, in the few times I've used it I just used the designer for mocking up the general layout, and then editing the XAML by hand while keeping one eye on the design view to see how it's looking.
    – Anon.
    Jan 7, 2011 at 3:26
  • Glade is a joy to work with, actually, and produces interfaces with all the ability to resize and theme that a UI should have. Plus you can just load the (XML) project file at runtime, query it, attach events, and all of a sudden your application just works. It's really the best of both worlds, in my experience. Not to mention that if you write the application in C or Python, you also get automatic binding of event callbacks, no querying required.
    – Jon Purdy
    Jan 7, 2011 at 10:47
  • @Dean Harding I've been using WPF for nearly three years and almost never used the designer. I may start the general layout with it, but after that I do everything by hand.
    – MetalMikester
    Jan 7, 2011 at 12:17
  • @Dean Harding - if you're using a designer for WPF, you're missing one of the best features: the auto-layout. I've done a lot of WPF and never use a designer. My designs are never that "static".
    – Scott Whitlock
    Jan 7, 2011 at 14:26
4

Planning in your head and then using pen/paper is the quickest easiest way to initialize a design.

When you are ready to implement, I use a GUI designer instead of coding by hand. In Java Swing for example, with any large enough interface, I can imagine how much time I would be wasting by doing it all by hand and then modifying it later. Much easier to use a GUI builder like Netbeans Matisse and then tweaking slightly by hand if need be.

Improve this answer
1
  • yes,constructing swing layouts by hand is tedious and time consuming,using Matisse was always my choice
    – Mahmoud Hossam
    Feb 2, 2011 at 21:16
3

First create the GUI on paper.

After that I just use Visual Studios design mode to create the GUI. Easy to create and what you see is what you get. Plus you don't have to rebuild just to view the GUI.

Improve this answer
2

A GUI designer is a tempting quick fix. But sitting down and doing it by hand is a better alternative for projects and items that aren't going to get thrown away later.

Typically I find the best method is to design the GUI on paper first. Draw a rough sketch of where buttons and other components will be. Then when working in a language like Java that makes use of various Layout Managers, think about which components and combinations of layout managers would be needed. All of this before you start coding it. Then implement it piece by piece.

If you go the GUI design course you will feel like you are making great progress until you get close to the end and can't get something to work right or have to make a change. Doing it by hand seems more like a slow turtle, but it provides steady progress. Also, your speed will increase the more you do it.

Improve this answer
1

Like someone already said, it is better to just use (a) an sheet of plain paper, some sticky notes (various sizes), and try to do the layout on the paper, using the sticky notes as the controls (like buttons, combo boxes, and so on) (b) an prototyping program like GUI Designer Studio or the pencil addon for firefox...

Then after the prototyping phase, with the layout near you it gets easier to actually code the ui yourself, since you can implement patterns like mvc, mvp and so on, more easily since the gui editors usually don't allow you to change their code since they will rewrite it every time you change the ui.

Improve this answer
0

Visio offers a set of UI stensils, so it effectively replaces pen and paper, yet offering the same design approach -- think first, draw second, code last.

Improve this answer
0

In VB6 and Windows Forms I always used the designer, but in WPF I never use it. The WPF designer creates terrible XAML, plus in WPF I like to design my UI as a bunch of widgets and let the framework put it all together at runtime. You lose a lot of that flexibility if you use the designer.

Improve this answer
0

I see it more like this:

(For any of these options, always draw it on paper or a whiteboard, trust me it saves time and code frustration)

Prototying:
Use a GUI designer, preferably a recommended one used by most in a particular language. That way your code won't be too confusing where you can tweak it to your (most of time) liking and plus since the code will most likely be thrown away or heavily changed later, you won't have to waste too much time early in the development cycle. Using a GUI designer is good for quick and simple GUI applications or to show your client a rough picture of the application where they don't have to wait months just to see.

Small projects:
This one is a bit of a mix bag, depending on the language and time constraint. Using a GUI designer here would be helpful but you should consider cleaning up after it or creating smaller components manually. That way anybody else (or yourself) would have an easier time fixing bugs and reading the code. This will help you gain better control and flexibility of the GUI. (Also a nice benefit of learning as you code)

Large projects:
This is when it becomes essential to creating GUIs manually. Larger projects can get complex quickly and creating GUIs with a designer only makes the project more complex and harder to debug. Creating a GUI framework for your application can help break the task of creating a GUI manually easier. Complete control of your application is necessary as it will help with maintenance or if you want to add features later (or a pesky customer who mentions you missed a requirement lol), incorporating them will be less frustrating and cleaner.

In my personal experience, learning to create GUI manually takes time and some require tough learning curves (Heck, I program in Java and the Oracle Java tutorial site warns you against doing GUIs yourself and to use a designer), but in the end you gain higher control and flexibility of your applications, which in turn creates better looking applications. Hope you use this a decent rough guide! Happy GUIing :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.