KnobMan/SkinMan Examples

[G-Spot]

I just finished the skin of one of my devices used in my program:




So, what do you say? Remember, its my first real skin...

Well designed parts, but I'm not completely convinced of how you put them together.

In the timeline grid section:

- Make the red markers slightly smaller, so that they fit inside the lanes without trespassing like the yellow ones.
- Ensure the diagonal of the red markers is exactly aligned with the vertical bars, since they seem a bit off (towards the left)
- Put lane labels (i.e. "no drumsound set") out of the grid (maybe left of the yellow lamps), where markers and bars don't overlap them; adding containers with Skinman should be trivial. If there's no room, you might use tooltips.
- The lamps above the grid, in the button row at the top, are almost aligned with columns of lamps of the same colour below them, one per lane. If the top lamps are related to the lane array lamps, align them exactly; if they are unrelated, move them to an unrelated place (e.g. top middle, between two buttons).
- The step sequencer has the first and last lamps are aligned with those columns of lamps, which is distracting, but it isn't aligned with bars in the grid above. Suggestion: enlarge the grid, by packing the lamp columns outside it closer, and shrink the buttons slightly. You can get rid of the separate lamps by lighting up either the buttons or a lamps embedded in the buttons.

In the right section:

- It isn't a 2-channel DJ's mixer, so it shouldn't look like one; cute but confusing equals confusing and intentionally so.
- Stuff like pan, LFO speed, FM and pulse width is normally put in an array of aligned knobs or sliders, not strewn around for aesthetic reasons.
- There is a lot of wasted space.
- the middle bank of 12 buttons has no labels. What makes the last row special?


[/list]

[sascha]

While G-Spot already said most, I'd like to add:
- Don't mix photo-realistic/3D items and 'flat' surfaces like the LC display. It doesn't look very homogenic. You could try giving the LCD are more 'realistic' feel by placing a transparent glass 'cover' on top of it, with proper lighting. The background/'backplate' should be changed accordingly, of course. On the other hand, if the LCD should stay clean & simple, you should limit everything else to 2D controls (kind of Ableton-Live style).

- If the main LCD is the most important control on the UI, I'd choose a more pronounced centralistic approach, by aligning 'all the rest' around it. A user should instantly be familiar with what's most important and what's not-so-important in the first place.

- I'd consider wooden controls and panels a no-go. I find that very cheesy. But that's perhaps personal preference.

- The LCD font is everything but easily readable. Plus, its 'flourescent' color isn't easy on the eyes.

- What's probably meant as an LED looks more like a pin of a needle. WOK and others have numerous examples in this thread on how a LED could be made more convincing.

- The label font (the orange one) isn't well-suited for labeling things. I would use a much clearer and non-italic font. And I would decide whether I'd label things either UPPERCASE or lowercase. Putting the first char in capitals seems meaningless to me, as you're labeling a device, rather than writing prosa.

- You don't seem to limit yourself to a palette of main colors. In my opinion, there should be only 1 shade of yellow, 1 shade of green etc. I miss a typical 'direction' of colors here. It's like with women doing their makeup: there should be *one* dominant shade, with all others emphasizing that subtly, but not getting in the way or even competing.

- The selected 'materials' should emphasize the sound of that thing. I'm not sure here. For instance, wooden panels would not fit well to a digital drum loop mangler, while a dot-matrix display wouldn't fit well to a vintage-style equalizer.

In a nutshell, you're mixing too many styles, to my taste. Things are kind of arbitrary. Try to find a 'common ground', a style that's special with that item, a unique 'finger print'.

[Lithium]

[Hlis93]

I havent used Skinman or knobman (or anything else) in several months, several updates that I've missed for knobman/skinman. Good to see you are stil work on them g200kg. Wanted to see use them so I saw a Metasonix TX-2 in the Reaktor UL and thought that would be simple and fun...left out the obscene pics though:( I know its just a simple box but it was fun...

heres the link to the skinman/Knobman file for the gui: http://www.box.net/shared/l2ms2jmf76

[very angry mobster]

Nice skin Hls93!

[derkollo]

Hi G-Spot and thanks for you answer!

Well designed parts, but I'm not completely convinced of how you put them together.

Do you mean together like working and belonging together?
Like wok allready sad, it would be preferable to outline all groups, so that is more obvious which Controls build groups.

- Make the red markers slightly smaller, so that they fit inside the lanes without trespassing like the yellow ones.

- Ensure the diagonal of the red markers is exactly aligned with the vertical bars, since they seem a bit off (towards the left)

They don't tresspas, i guess, but i'm not so happy with them, neither.
In the moment i try to create a "LED-display-like" event-icon...

- Put lane labels (i.e. "no drumsound set") out of the grid (maybe left of the yellow lamps), where markers and bars don't overlap them; adding containers with Skinman should be trivial. If there's no room, you might use tooltips.

Yeah, i realy think about that a lot. Even the labels are overlapped by eventicons or lines, they give a direct information. In most cases it is enough to see only 2-4 Charakters to know what is meant. With "external" labes it would work also, but so i have to invalidate a smaller area when the pattern changes.
With tooltips would be a great idea. I think, i'll have a look at it.

- The lamps above the grid, in the button row at the top, are almost aligned with columns of lamps of the same colour below them, one per lane. If the top lamps are related to the lane array lamps, align them exactly; if they are unrelated, move them to an unrelated place (e.g. top middle, between two buttons).

i try to place controls where you intuitivly "know" what they can do.
So the LEDS e.g.: The line besides the grid are, e.g. the "solo"-LED-Column.
Each of the red LEDS, on the right of the grid do set a single instrument row on solo. And the upper, slighly moved, LED is the "Solo-All" or "Unsolo-All"
LED. The LEDs on top have the same function as the LEDs beneath them, but they act on all elements and not just a single row...
I tried to indicate that with a slight "move" of the upper LED.

- The step sequencer has the first and last lamps are aligned with those columns of lamps, which is distracting, but it isn't aligned with bars in the grid above. Suggestion: enlarge the grid, by packing the lamp columns outside it closer, and shrink the buttons slightly. You can get rid of the separate lamps by lighting up either the buttons or a lamps embedded in the buttons.

Hmm, i don't think i get what you mean... You mean the "DrumGrid", "Instrument" buttons? ...they to arrange with the upper LEDs on the left and right?

In the right section:

- It isn't a 2-channel DJ's mixer, so it shouldn't look like one; cute but confusing equals confusing and intentionally so.
- Stuff like pan, LFO speed, FM and pulse width is normally put in an array of aligned knobs or sliders, not strewn around for aesthetic reasons.
- There is a lot of wasted space.
- the middle bank of 12 buttons has no labels. What makes the last row special?

There should be charakters on the buttons, then you would see, why they are seperated...
But first things first: It looks like a DJ-Mixer? Damm it.
It is the arrangement that "builded itself" all other arrangements had great unused spaces, i didn't know what to do with...
So i tried to minimze the unused spaces by a "DJ-Mixer-Design".
But you are right. Like wok. It should be "clearer".

The wasted space is now much less, than in the beginning. But still too much...

The bank buttons... You guessed right, a bit.... The upper 8 buttons are pattern-buttons (1-8). The lower 4 are bank-buttons (A-D)
Because of that, i seperated them a bit...


Thanks again for your answer! I continue pefecting my UI...

Greetz,

derkollo

[WOK]

[derkollo]

@Sascha:

Also thanks to you for your answer!

While G-Spot already said most, I'd like to add:
- Don't mix photo-realistic/3D items and 'flat' surfaces like the LC display. It doesn't look very homogenic. You could try giving the LCD are more 'realistic' feel by placing a transparent glass 'cover' on top of it, with proper lighting. The background/'backplate' should be changed accordingly, of course. On the other hand, if the LCD should stay clean & simple, you should limit everything else to 2D controls (kind of Ableton-Live style).

Hmm, ok again. I looked at my hardware and it seems, that nearly every piece of equipment has "round 3D" Controls. Knobs, Buttons, etc... and all displays are flat as hell...
I know what you mean. There are examples where the display has "light" on it.
With highlight etc...
I had it before and thought it looks more realistic without any highlight.
Am i wrong here?
I mixing 2D and 3D really a no go? I'll think about it...

- If the main LCD is the most important control on the UI, I'd choose a more pronounced centralistic approach, by aligning 'all the rest' around it. A user should instantly be familiar with what's most important and what's not-so-important in the first place.

Yeah. It should be like this. But it is not so easy to archive this...
In the beginning, the main event(s) take place in the grid.
But if a pattern is programmed (at least the positions) the right side becomes the point of interesst.
A bit of a problem is that this skin is for a device, that really can do a looot of things. So less controls mean more submenus and stuff.
It's a bit hard right now to find the optimal approach...

And altough it is not obvious:
The right part stands for it "alone". Of course, the parameters and patternbuttons are part of this device. But e.g. the slider values arent saved in patterns. (Well yes, they are in patterns, but unlike all other parameters (editable in the "Instrument"-Section) this parameters concerns all Instruments (all rows). So the faders are working "overall". That is the reason, why the slider aren't directy besides the pattern-grid window.

The parts are allready sorted. But the "unclean" Fader with LED besides, parameterLabel on top and valueLabel besides it, makes it more chaotic then it actually is. I guess.
May be a bit more, or better sorting, would be better...

- I'd consider wooden controls and panels a no-go. I find that very cheesy. But that's perhaps personal preference.

The knobs are really cheesy. But it was worth a try!
But the panels are not that bad, i think. It's a bit like a visual border.
Of course, they have not to be wooden, but the other way would be to just leave a "blank area" left and right. May be to put some screws in it like in Reason...
I love the XBase and VirusPolar. Definitly cause of the sound, but also the woodpanels. A symbiosis between technic and nature.

- The LCD font is everything but easily readable. Plus, its 'flourescent' color isn't easy on the eyes.

Really? Ok, the font, specially some letters are not readable. But i thought of the color as quite good, cause it "jumps" right into your eyes. May be a bit to much jumping, u say?

- What's probably meant as an LED looks more like a pin of a needle. WOK and others have numerous examples in this thread on how a LED could be made more convincing.

I'm allready on that. I also think about the LEDs as pushable..
They are now, but may be an approach with smaller LEDs inside a button, would be better...

- The label font (the orange one) isn't well-suited for labeling things. I would use a much clearer and non-italic font. And I would decide whether I'd label things either UPPERCASE or lowercase. Putting the first char in capitals seems meaningless to me, as you're labeling a device, rather than writing prosa.

lol... hear hear, my friends! My device will now tell a little story out of its existence...
A Prosa-Device. Creates Anekdotes ontime... xD
Yeah, i didn't figured out yet how to name the sections best...
It will be definitly with a simple font.

- You don't seem to limit yourself to a palette of main colors. In my opinion, there should be only 1 shade of yellow, 1 shade of green etc. I miss a typical 'direction' of colors here. It's like with women doing their makeup: there should be *one* dominant shade, with all others emphasizing that subtly, but not getting in the way or even competing.

You are right. I didn't thougt about that at all. BUT i only used 4-5 Colors anyway. May be some more "aspects" of grey and black. yellow, green, red, and lightgray... Oh, in the background some blue....
Oh no...actually the lit LEDs are in another tone...yeah, and the "big" orange labels.. but they are allready out, so...

But how could i use even less colors?(Exepct the BG) The LEDs for example all have colorcoded functions. But i think i now what you mean. E.G. the displays and the green LEDs have the same color. But since there is more "shadow" in the LEDs this green seems t be darker...
Or do you mean, to cut out e.g. yellow completly and use also red ones...?

- The selected 'materials' should emphasize the sound of that thing. I'm not sure here. For instance, wooden panels would not fit well to a digital drum loop mangler, while a dot-matrix display wouldn't fit well to a vintage-style equalizer.

Since the device will be a "super" MIDI-StepSequencer, you will have many possibilities what kind of music you want to create.
The 4 fader on the right are completly editable. You can choose a MIDI-Controller to be edited, or the Modulation, Panorama, etc...
My whole programm will be like a virtual rack. With Hardware as virtual instruments.
My MicroQ for example. I made a virtual MicroQ as an "interface".
So if you open a microQ in my program, you can connect this sequencer-device to it, and it will automaticly get the controller (with names) with are used by the Synth. And in the sequencerdevice you can open a dropdown-menu and choose the controller u want to be edited by this fader.
Therefore there could be "harmless" parameters in use and also a rough cutoff.
And since this sequencer is not "only a normal stepsequencer" you can't even say it will anytime be technoid what you are making...
Since i have a delay for every step in every row, and some other funny tools, you easily have smooth jazzy trip-hop styles...
You can offset every step... Nah, this goes far offtopic...

But at least this:
I decided to code this program, cause i wanted to supply every possibility to a MIDI-Musician. For e.g. you can open a MidiEventCreator to just send every damn MIDI-Event to wherever you want. If you want to can reveive and send BulkDumps, too. Of course... Dumps will aslo be saveable in the virtual-device...
If you got an idea that has do something with MIDI and you can't do it with my software, i failed!

So it is really hard to align or arrange correct. It heavenly depends on what you are used to. And what you want to do with it.
A hardcore-techno programmer will definitly use it differently than an easy-listening producer...

I also thought about editable or at least changeable UI's.
May be as a special for "VIP" member or something like that.
Or as a part of a yearly free update/patch to keep the customers smiling!
And myself working...

In a nutshell, you're mixing too many styles, to my taste. Things are kind of arbitrary. Try to find a 'common ground', a style that's special with that item, a unique 'finger print'.

Damn, i thougt it is allready damn unique...
No, i know what you mean!
It's hard. Like you said, it depends a bit on what kind of music you want to create with... Since i want to reach the MIDI-musician in generel, i have no direction to go to...
But at least i see now much more things than before! Thanks to your and the other answers!

greetz and thx

derkollo

[EricRedBeard]

Anyone knows where can I find the original png of the Mac OS X directional slider thumb, both in blue and graphite versions (normal size)?
Or anything very similar?

Thanks,
Eric



[/img]

[WOK]

I am glad to see that professional designers also make mistakes.
Look at these images from Steinberg-Yamaha:
http://www.kvraudio.com/news.php?id=16346
and you will see many errors in the shadows

[Bronto Scorpio]

I am glad to see that professional designers also make mistakes.
Look at these images from Steinberg-Yamaha:
http://www.kvraudio.com/news.php?id=16346
and you will see many errors in the shadows

[GaryG]

That's really nice imo; good contrast, bright without dazzling, clear layout yada yada.

Seriously, that style could be my perfect gui.

[synthmagic]

I made a button.



Red Button

I've been trying to nail down the look of a button being pressed. I think I've found the answer. It has to do with using the edge highlight. Also, I use the frame mask for switching back and forth between the non-pressed/pressed look. Only the red part of the button can be pressed. I think it helps to have a border around the pressable part of the button to give it context.

EDIT: A couple more buttons. Maybe the trick is to not use very much of the edge highlight for the pressed look.



Blue Button



Gray Button



Up Button

EDIT: Added an LED button. It has four images:

1) On/Not pressed (Left Mouse Button Up)
2) On/Pressed (Left Mouse Button Down)
3) Off/Not pressed (Left Mouse Button Up)
4) Off/Pressed (Left Mouse Button Down


LED Button

Really like those bottom buttons they look great.

[Hlis93]

I am glad to see that professional designers also make mistakes.
Look at these images from Steinberg-Yamaha:
http://www.kvraudio.com/news.php?id=16346
and you will see many errors in the shadows

I don't think Steinberg places a very high value on GUI design unlike other companies. For example, look at the Embracer and A1 from SX3 days really ugly GUI's imho. They have a nice look for Prologue and Spector but those are the first I'd seen that I like and looked good. I'd like to assume they plan on polishing it up for final product release sort of a waste to have all those fancy pics with shabby knob shadowing, it looks very shabby.

__________________________________________

Nice and simply gui you posted above. Good work WOK.

[DaveHoskins]

That's really nice imo; good contrast, bright without dazzling, clear layout yada yada.

Seriously, that style could be my perfect gui.

I agree, those button and dial colours are eye candy, and look like real candy! I would have thought those colours would clash, but they're fine. Fun and fresh etc. etc...
.
Dave.