SynthMaker

Need Some UI Design Pointers

Archive · 2007 7 old posts

From the original SynthMaker forum (2004–2014), with its members’ names and dates.

qnine ·

Right, so I've got the design of my synth pretty much finished (haven't paid too much attention to fx yet, but I'll do that once everything else works) so I figure I'll start on the interface now, but I know less about graphic design than I do about dsp, so this is gonna be the hardest part for me.

I've got a very rough idea of how I'm going to lay out all the panels but I have no idea what I want the controls to look like, not sure if I should go for sliders or knobs, and if I go for sliders do I want them horizontal or vertical.

Basically, I have no idea where or how to even begin with this, so if anyone has any tips on how to get started then I'd much appreciate it if you could throw some my way 🙂

Dave

infuzion ·

Begin with the end in mind, or ask yourself what are your end-users need.

Knobs may take up less space than long-throw sliders, but I find a good slider easier to glance at to figure out the value. If you think the users need accuracy in entering values, ensure you have a value readout that one can click on & type in values. Using a synth in a live setting has different requirements than studio.

Group together like items: OSC stuff go together, effects in another group, everything about LFOs & mods in another grouping, etc.

qnine ·

Ta for the tips infuzion. I've kinda got an idea of where I wanna go with the UI now. I never even considered a live use situation so thanks for bringing that to my attention. 🙂

Dave

infuzion ·

welcome 🙂

BTW, might be a good idea for people who ask questions to post the (good) answers in the WIKI 😉

Tom7777 ·

My tip would be leave room for changes, if you decide to change stuff later on and you already have a fancy GUI your left with something that doesnt look so great, so think what changes may happen in future versions when your at the final stage.

Also with SM working on a grid system make sure you design with that in mind. When i had one of mine i forgot about this and the end result was clipped and did not look right so i had to go back and do a load of extra work, what i do is i fill the main panel with a solid color, take a screenshot, select the color in the graphics app then copy it to a new image and that gives you the panel size you have decided on as a template to start designing on.

infuzion ·

Tom7777 wrote: My tip would be leave room for changes, if you decide to change stuff later on

That's a good tip! I forgot to remind not to hardwire the GUI, but try to keep the logic & GUI seperate as much as possible.

qnine ·

infuzion wrote: Tom7777 wrote: My tip would be leave room for changes, if you decide to change stuff later on

That's a good tip! I forgot to remind not to hardwire the GUI, but try to keep the logic & GUI seperate as much as possible.

Keeping the gui and logic separated is exactly what I'm doing. I'm gonna have three modules one for gui which will group the values of related controls together into busses, these busses then get passed into a modulation module which takes the control values, combines them with values from modulation sources, and the creates a new bus which feeds into the synth module. The synth module contains the oscs and filters (and any other parts of the synth engine).

This way, the only time I need to modify all three modules, is if I add something new to the synth module. If I'm just adding a new modulation source, I only have to modify the modulation module (and make needed changes in the gui module, so that the new source appears in menus or whatever), and If I decide I hate the gui I can just create a brand new gui without affecting anything else.

Tom7777 wrote: Also with SM working on a grid system make sure you design with that in mind. When i had one of mine i forgot about this and the end result was clipped and did not look right so i had to go back and do a load of extra work, what i do is i fill the main panel with a solid color, take a screenshot, select the color in the graphics app then copy it to a new image and that gives you the panel size you have decided on as a template to start designing on.

What I've decided to do with the gui is to lay it all out in SM, take a screenshot, load that into a Paint.NET then remove anything from the screenshot that isn't static (level meters, control readouts, etc) save it as an image, then load it back into SM as a background. I can get away with doing it like this because it's going to be a nice 2d gui with no shadows or anything like that.

If I was going to do a gui with shadows, I'd probably just cook up a 3d model of my synth in povray then render each component with a top down view, doing this way would mean I'd have a complete 3d rendering of the synth to put on one of them fake 3d product boxes that AM seems to like. 🙂

Dave

Wrote something here? To have a post removed or your name hidden, write to [email protected].

Before your first post

A few rules keep this a friendly place. You agree to them once.

Shown next to what you post, here and in the app. It doesn’t have to be your real name: 3–24 lower-case letters, digits or _ (capitals become lower case, spaces become _).

    Then your post goes up straight away.

    Delete this reply?

    Open it in SynthMaker?

    It goes on the track you’re editing there, in place of that track’s sound, and into My sounds. Your other tracks stay as they are.

    Want to keep that track’s sound? Start a new song in SynthMaker first (Song › New song), then open this.

    Report this reply?

    Only the developer reads reports. The person isn’t told who reported them.

    What’s wrong with it?

    Block this person?

    You won’t see their posts and replies here any more. They aren’t told, and you can unblock them at any time.

    People you’ve blocked

    Their posts and replies are hidden from you. Unblock someone to see them again.

    The community rules

    A few rules keep this a friendly place. Everyone agrees to them once, before their first post.