Creating/Developing GUIs for beginners?
Can anyone offer some pointers on GUI development?
(Tutorials, useful Objects and basic/guiding principles)
I've never tried it and i'm fairly new to Max/MSP, having only done a one year course using 4.3 which was mainly aimed at audio processing, and i'm completely new to Jitter.
I finally made the investment a couple of weeks ago, (i'm now the proud owner of Max/MSP 4.5 and Jitter 1.5, Hooray!), and would like to develop some GUIs, (using Win XP), for some of the patches i developed during my course...with a view to developing them into Pluggo plugs at a later stage.
Obviously i've got another massive learning curve ahead of me, (not to mention learning Jitter which at the moment seems overwhelming), but if anyone can point me in the right starting direction i'd massively appreciate it! I'm not looking to create anything of amazing quality, just the basics, but as i want to develop them as plugs, efficiency and compatibility are of prime importance.
In truth, i'm unsure where to even start and the glaringly obvious things will no doubt come as a revelation to me...so please don't hold back from stating the obvious.
I have some experience with Java so maybe the Swing API might be the route to take?
Any suggestions or advice would be greatly appreciated, thanks in advance,
John
> I have some experience with Java so maybe the Swing API might be the route to take?
>
> Any suggestions or advice would be greatly appreciated, thanks in advance,
> John
----------------------------------------------------
for most of my plug-ins i were okay using picture slider
and picture buttons, the rest is imagination and some
basic knowlegde about photoshop action scripting.
later a learned a a bit of lcd but found it probelematic
for bigger interfaces. they say the same about jsui.
some people just use panels and multisliders - it can look
great if done right. :)
"An interface is about hiding complexity from the user, It's about
guiding a process, without cognitive understanding of what goes on
beneath. Interface design is the art of enveloping the observer in an
enticing, "try this" exploration with ever-new elements and designs
as the tools to triumph in new territories." - kai krause. the
best interface designer ever.
and... off the top of my head.....
JavaScript was my first written programming language and I learned it
entirely from JSUI. the fruits of which are my matsui library (link
included). joshua kit clayton suggested the ORLY difinitive guide to
javascript and I was up and running in a few days.
function comes before pretty.
The most important part of UI development, for me, is to take a zero
compromise approach in terms of the end experience. Don't cut
corners because it's easier or takes less time to program. Imagine
the most intuitive way to interact with your program, and pro/gram it.
the less text the better (within reason) in max/msp its tough
because your usually controlling something that the user isn't
familiar with. but icons such as dice (probability), left and right
ears (panning), light switches (on/off), question (help!) clocks (time)
photoshop the entire thing first. if you have a custom widget you
haven't programmed, stick a box in there.
a cliche around here: don't forget LCD object.
include key commands and hint objects
visually separate related controls
make sure the is continuity through out your program so that the user
familiarizes him/herself with it quicker
(volume is always green) pan is always the same knob etc.
make important stuff big
3d looking beveled graphics aren't the end all be all of UI design
|| important 110 announcement ||
110 changed his forum signature to:
"Volume is Always Green, Pan is Always the Same Knob."
thanks matt!
-110 (makes important signatures big)
john inder wrote:
> Can anyone offer some pointers on GUI development? (Tutorials, useful
> Objects and basic/guiding principles)
First of all GUI design is design and not so much related to Max. But
whatever you decide design wise you could implement in Max.
I believe Max is the best environment to base you design desicions on
real world reactions.
You will use your design immediately and can test it and just rearrange
if necessary. (Its going beyond rapid prototyping, as the prototype
could already be the fully functional program/endproduct.)
For GUI design there are two aspects. One is visual appearance, and one
is ergonomics. The latter is more important. Always start with
ergonomics. That's the way how you play your instrument. Every control
has to be at a good place and should explain its function by itself.
(This is important if you want others to play with it). The standard max
GUI elements are just fine for that purpose. Sliders, Knobs, Numberboxes...
Do not start to deal with apperance before the ergonomics are settled.
Appearence is a lot of work, and its "only" use is that it looks nice.
Well, it can enhance the focus of elements, can point to their
importance and meaning and so on. It is that way part of the onscreen
documentation so to say...
If you change the ergonomics, you might need to start over again with
the appearance...
> I finally made the investment a couple of weeks ago, (i'm now the
> proud owner of Max/MSP 4.5 and Jitter 1.5, Hooray!), and would like
> to develop some GUIs, (using Win XP), for some of the patches i
> developed during my course...with a view to developing them into
> Pluggo plugs at a later stage.
Welcome on board...
> Obviously i've got another massive learning curve ahead of me,
For learning GUI design you'd better look for general purpose books, not
related to any concrete tool. It does not matter if you create your knob
graphics in Photoshop or Gimp, but it matters that you know how it
should look like. (You could even just paint everything by hand and scan
it in later...)
> but if anyone can point me in the right starting direction i'd
> massively appreciate it! I'm not looking to create anything of
> amazing quality, just the basics, but as i want to develop them as
> plugs, efficiency and compatibility are of prime importance.
After the ergonomics part you can do anything for the appearance with
pictctrl, matrixctrl, panel, pictslider, JSUI, bgcolor...
For example replace a slider with a pictctrl, replace the background
with a picture...
The best explanations for all the mentioned objects are their help files.
Stefan Tiedje
--
Stefan Tiedje------------x-------
--_____-----------|--------------
--(_|_ ----|-----|-----()-------
-- _|_)----|-----()--------------
----------()--------www.ccmix.com
Look at his book "The Humane Interface".
--
barry threw :: sound | (if you would see the stars clearly,
http://www.barrythrew.com | look hard at the surrounding darkness)
bthrew(at)gmail(dot)com | -Ooka Makoto
857-544-3967 |
Thanks to everyone who's taken the time to reply.
Thanks especially for the pointers to the commonly used objects, (Matthew and Stefan), it was exactly what i needed and your advice on design considerations are also particularly useful.
I understand the need for ergonomics over aesthetics from my own experiences, although the engine underneath the GUI is of even more importance in my opinion, (it's just a shame the rest of the world doesn't see it that way).
I will certainly check out the book (recommended by Barry), along with any other web based sources of GUI design i can find. I understand the concepts of interface design but a bit of research never hurt anyone and can only improve the end product.
I have used the Max objects to create GUIs before, although as the remit of my course was Audio/MIDI composition using Max/MSP, the projects didn't require extensive GUIs...in some cases just a simple start/stop button arrangement was necessary.
I've been priveliged to have worked under a very good tutor who taught me the importance of a DIY approach and not copying and pasting, (too often), which in hindsight has been invaluable.
Unfortunately i don't own Photoshop, so scripting from there, (as Roman suggests), isn't an option for now. It's a program on my acquisitions list and that should provide more motivation to part with the cash...it's just a matter of not indulging my addiction to buying hardware MIDI synthesisers for a while.
I'm a sucker for punishment so it looks like i'll try JSUI, (problems and all), because i've had a couple of books on Java Script lying around unread for too long and that will hopefully give me the impetus to get stuck in to them.
Thanks again everyone, your help is gratefuly received
John
john inder wrote:
> Unfortunately i don't own Photoshop, so scripting from there, (as
> Roman suggests), isn't an option for now. It's a program on my
> acquisitions list and that should provide more motivation to part
> with the cash...it's just a matter of not indulging my addiction to
> buying hardware MIDI synthesisers for a while.
The requirements for a painting program to create buttons and GUI
elements would not justify a purchase of Photoshop. Look into GIMP, its
free and powerfull. Proffessional designers might not agree, but if you
take into acount a learning curve for a painting program and its price...
You don't need to know and use all available tricks of such a monster.
There are also much less expensive commercial alternatives around...
Especially if you are concerned about user interfaces, better invest in
Midi faderboxes/keyboards...
Even the pretty pricey Lemur isn't much more expensive than a fully
blown Photoshop license...
Stefan
--
Stefan Tiedje------------x-------
--_____-----------|--------------
--(_|_ ----|-----|-----()-------
-- _|_)----|-----()--------------
----------()--------www.ccmix.com
On the GIMP/Photoshop debate, I'm pretty biased, being a CMYK print designer in real life, for which the GIMP just wouldn't cut it. For screen-based stuff, it's capable of course, although its GUI is certainly not a shining example of excellence in GUI design.
If you'd prefer to learn something of Photoshop - and knowing some Photoshop is a FAR more useful thing to have on your CV than the GIMP - then Photoshop Elements is cheap and basically the same thing minus the CMYK print-oriented features.
John Pitcairn wrote:
> On the GIMP/Photoshop debate, I'm pretty biased, being a CMYK print
> designer in real life, for which the GIMP just wouldn't cut it.
Thats what I hear in general from professionals, but I know also that
its hard to change to, or judge a different tool if you know one by
heart on the deepest level, by just taking a glimpse at another tool.
Even with simple tools, its hard to change or judge, for example I am
using for my daily writing tasks, since its first occurance, AppleWorks.
I would use it even for all database needs. Whenever I have a look at
OpenOffice, Word, Ragtime, Filemaker or whatever, I stop pretty fast
looking deeper into it, because it would need more time to get to the
same speed with a lot of specific tricks on any of those surely much
more sophisticated tools - its not worth it...
But If I'd start with a new tool, I'd choose one which would fit my
momentary needs and one with potential to grow.
Gimp would fit into that category, as OpenOffice would do.
(Unfortunately Ardour not yet.)
It seems these free software tools need to be crossplatform to be
considered by evolving professionals, and that seems to be a crucial
neccessity to actualy get them on a path as evolving professional tools...
Those who program them can't design them, it needs that close
relationship between developers and users. (And if the user interface is
bad by design at version 1.0, it might be hard to change it later...)
Stefan
--
Stefan Tiedje------------x-------
--_____-----------|--------------
--(_|_ ----|-----|-----()-------
-- _|_)----|-----()--------------
----------()--------www.ccmix.com
if anyone has links to any nice lcd (or any nice UI) patches post em up! i'm always looking for things like monophonic sequencers, and breakpoint curve editors....
Quote: Stefan Tiedje wrote on Thu, 07 September 2006 20:48
----------------------------------------------------
> Thats what I hear in general from professionals, but I know
> also that its hard to change to, or judge a different tool if
> you know one by heart on the deepest level, by just taking a
> glimpse at another tool.
Sure. That's not the issue for print designers though. The problem with the GIMP for print design is that its CMYK ability is very very limited - no concept of true CMYK separation spaces and setup specs, no decent colour calibration/management/workflow, no PANTONE libraries, no additional spot colour/varnish plates, no duo/tri/quadtones, very limited ability to work with clipping paths, etc. Its shortcomings in these areas are quite extensive and would prevent me from doing almost anything useful in my day-to-day work.
To be fair, it was probably never envisaged as a tool for print designers, which Photoshop always was, even way back at 1.0. And making it so would entail purchasing Pantone licenses and probably other stuff, which would be problematic for its open-source nature.