How can I visually lay out a program before I start coding?

Question

I was wondering if there's anyway to layout what I want to code before I code it. Instead of drawing your ideas on a piece of paper, is there a program that lets you build a little demo or something before you start coding?

Answer 1

Microsoft Visio is good for this kind of thing.

Answer 2

This is usually known as making mock-ups. There have been several questions that may be of help:

• http://stackoverflow.com/questions/295589/what-program-should-i-use-to-mock-up-guis
• http://stackoverflow.com/questions/54606/what-software-can-i-use-to-create-ui-mockups

etc.

Answer 3

For me, fireworks is the best tool to design user interface. There are lots of tutorials of how to use it.

Answer 4

Paper prototyping. There's lots of information at PaperPrototyping.com.

Answer 5

For the UI, look at

Balsamiq or iRise.

If you want to model the behavior behind the UI, look at Enterprise Architect

Answer 6

You can try ForeUI, it is a tool for UI layout, interaction design and simulation.

Answer 7

Honestly, you're wasting your time with enterprise tools, or charts and diagrams in most cases. Notepad will do. I learned it from a friend, which he likes to use the term "Notepad Architecture", and frankly I have had zero problems with designing applications, the underworkings, how things flow with one another. All you need is a good design, not necessarily pretty pictures.

For example, when I developed my user based system, I would do the following in notepad:

User (Role Based) System
    - Administrators, Users
    - Sql Server 2008
    - Linq to Sql

        User (Abstract Base)
            - ID (GUID)
            - Alias
            - Username
            - Password (Encrypted, MD5 Hash)
            - First Name
            - Last Name
            - Email address
            - Account Type
                Administrator || User

Etcetera, etcetera. With the above as I type it, I already knew what and how it needed to be coded. What technologies were involved, and why they were involved. I didn't need any fancy drawing diagrams, or charts.

Ah, but what about complex events? Well, programming is like creative writing. Didn't you take a creative writing class before?

The user will start the program executable. The first form to be displayed is the sign-in form. When the form is shown, the user will be prompted to enter their credentials. The user will enter their credentials, and click "Sign In". The Sign-In service will then check the credentials against the database. If the credentials match, the form will close and display the shell, otherwise will display an error and allow the user to try again.

Now this is a small, but trivial and good example. Why on earth would I need a chart, flow chart, UML diagram, or other when all the logic and program flow is written elegantly (yes, feel free to critique) above? I know what needs to be written, again with what technologies, services, and how and what order to do it.

Trust me, notepad has been around for years! And there's a good reason for that, and why it hasn't changed any!

(It does take your mind a bit to get thinking a "creative writing" kind of way, but come on, you're a programmer! You do it everyday!

edit: See this post also.