Going from Amateur to Professional
How a professional Graphic Designer can make all the difference to your LiveCode application

By Max Schafer

This article sets out to show why you need a professional graphic designer to make your app really fly. Most of us are primarily programmers, not designers, and while the applications we make may be powerful and full of excellent functionality, this may not be readily apparent to the paying public if the interface looks like a dogs breakfast.

My program, Math Gadgets, is a powerful, innovative, math program. But at first glance, that was not evident. The first version looked like some rolodex stack from the early 90's. I wanted the user to know at first glance that this was an awesome math program, unlike any other math program. The graphic elements had to carry that message, or at least draw the user to look deeper, so they could determine that for themselves.

Three years ago, when I first started my Math Gadgets project, I did not have a clear understanding of the difference between a graphic artist and a graphic designer. At the RunRev conference in Monterey, I had just seen a multimedia session led by an eminient graphic designer. I lamented that I would never be able to afford that kind of design work. But I was encouraged by another attendee to find out what it would actually cost, and it turned out to be more affordable than I had expected. So I went ahead and hired that presenter.

I had heard about Scott Rossi three or four years earlier. He had developed an Add-on called "Rad Windows" which allowed the creation of irregular- shaped windows in the tool he was using at the time. Irregular-shaped windows were not so common back then, few programs had them. It was considered more of a novelty. So my opinion of Scott was that he did not just think out of the box. That would assume that he starts with boxes, which is clearly not the case. For example, for one app he created a window with an animation in which the edges appeared to be on fire. (Not an easy task in Live Code!)

So Scott agreed to be the interface designer. He insisted that he be able to offer any kind of criticism on any element of the program, even if it wasn't about the graphics. While he appeared concerned, I was overjoyed. For this program to be the best it could be, I needed people who felt they could collaborate on ideas, not just do their own little bit, and take off. I was smart enough to know I needed his advice.

Math Gadgets was designed to help students solve any math problem. It could be from any math book, homework, or off the top of their head. This would be the ultimate homework helper. Every other math program is a variation of some kind of game or math lesson. This is the only math program which offers step-by-step help for their problems.

One comment from Scott, which I heard repeated often at the LiveCode conference, was to keep the program simple. Less is more. That was a task. For my purposes, I needed a program that was rich enough to meet the needs of my students to solve any math problem. So I cut the program in half. I am saving all the fraction gadgets for a future version. This smaller version was now more manageable for writing and debugging.

As an interface designer, Scott worked on keeping a consistent look. To keep a distinctive look, no standard buttons, fields, or dialog boxes were used. Every element was designed to be a part of a unifying look. Unbelievably, the buttons, labels, and fields he designed were not even buttons, labels or fields. They were all grouped objects! A single button could have as much as a dozen parts. This allowed the objects to be easily resized with no distortion, and be reused throughout the program. Important dialog boxes and "begin" buttons were large, and had awesome animated movements and sound effects. I couldn't wait to peek at his code. When I opened the scripts, they were all blank. When I finally found them in some hidden stack or frontscript, I couldn't understand the code. I still don't know how my dialog boxes work.

One thing I learned about graphic design, is that every element is important in order to communicate correctly. We had discussions to design a decimal point. A dot too small might not be seen. If you highlight a dot with a circle, it may be confused for a radio button. We ended up with a blue, slightly thicker dot.

Another concern was the color of the text field for entering numbers. An early version has bright orange text over a brownish background. In my opinion, it seemed muddy looking, and a bit cartoony or Halloweenish. I wanted the math problems to be taken seriously. Black text on a white background was fine with me. But getting a second opinion from another programmer, Ken Ray, it was clear that we should use color. It was a hard decision for me. To go with my own gut instincts, I had to go against Scott's opinion. His artistic sensibilities I believe are way better than my own. Scott came up with a blue and light blue scheme, which looked great.

I learned what it means to make a professional program. My two previous programs, Young Authors, and Theater Games for the Classroom, sold well and are great programs. But what I considered adequate design, I now know to be sloppy, shoddy work. They did not have the slick interface to communicate the real value of the content of the program. If I am going to spend years writing a program, it has to be a gem.

Scott made me want to be a better programmer. A programmer presenting at the LiveCode conference in San Jose had similar feelings. He said Scott's graphics made his own work look terrible. I think he had to eliminate all his own graphics.

But I do not believe I am an amateur programmer any more. And I chuckle to myself that I was able to create a program that competes with big educational programs. I can compare Math Gadgets to similar programs written by teams of programmers costing tens or hundreds of thousands of dollars. This is how Live Code empowers me. My programs are my masterpieces. Any money I make from them is just icing on the cake. And they do make money.

More information about Math Gadgets can be found at MathGadgets.com. Or email Max at Max7@aol.com. Scott Rossi has a new program full of awesome graphics you can use in your own projects called tmControl. He can be hunted down at TactileMedia.com.

About the Author Max Schafer is an educator, improvisational actor and teacher, Beatlemaniac, and software developer. His applications include Young Authors, Viola Spolin's Theater Games for the Classroom, Primary Math Gadgets, and Math Gadgets, all created with LiveCode.