Practising my GUI design skills (4th attempt)

[NiallM]

Like the subject says, I've been practising my GUI designing skills recently. Anyway, I've just come up with this hardware-esque design. Comments?


For more examples of my recent GUI efforts, see here.

- Niall at ndc Plugs.

[Meffy]

Right purty. Looks quite physical but still clearly artificial.

It took me a few moments to see why the lighting around the edge was as it is -- at first it looked like a "box on top of a plank" but now it looks as if the metal panel is set flush in a panel, the cutout having been sanded round and smooth.

For an additional photo-realistic touch, you might experiment with bending the grain of the metal just slightly "inward" (toward the middle of the unit) where it wraps around the rounded left and right edges, particularly at the corners.

Also, it needs more presets. ;-}

Meffy

[tony tony chopper]

rule #1: photoshop bevels are NOT your friends, avoid them

(actually this is rule #2, rule #1 being about photoshop lens flares)

[NiallM]

rule #1: photoshop bevels are NOT your friends, avoid them

Actually it's Paint Shop Pro - what would you suggest instead?

Also, I understand about the lense flares, but what's wrong with these kinds of bevels? (my knowledge of design stuff is pretty limited - I've mostly been working it out myself)

- Niall.

[tony tony chopper]

Actually it's Paint Shop Pro - what would you suggest instead

hand-drawn bevels

but what's wrong with these kinds of bevels?

they're big and blurry. I know some like them, but some find lens flares cool as well

[WOK]

MHO: Not bad, but please don't use strange fonts that are big (wasting space) and difficult to read.
You might instead "engrave" the writings (with underlayering a black copy a little to left-up and a white one right-down).
The flat colour-lines (visualizing the amounts?) are not matching with the realistic metal - in this case better use something like LED-chains (red or blue).
And the markers on the pots could be little bigger to see the position easily.
And finaly if You use wood around it should have an end, it should look like a "piece" with corners.

[tony tony chopper]

You might instead "engrave" the writings (with underlayering a black copy a little to left-up and a white one right-down).

I would avoid engraving as well but anyway.. about the fonts: the big mistake is that these 2 don't fit.

In years you'll realize this:
-big bevels are bad
-fancy fonts are bad, unless they fit the design & purpose of the plugin perfectly. Might be usable in logo's as well. Just think that it has to be read, you'll never see a book printed with fancy fonts.

That label font would fit in some sketchbook style maybe. But you should definitely lose the fake metal & wood look, and the bad computerish title font. The knobs are ok.

[NiallM]

Thanks for the comments guys, they've been really helpful . To be honest I've been trying to keep my recent GUIs as clean/simple as possible (see here) because I'm not too confident about making fancy graphics that look good. This was just an experiment at making a GUI which didn't stick to simple flat colours etc. (and compared to my early GUI attempts, it's not so bad ).

- Niall.

[Rune L-H]

rule #1: photoshop bevels are NOT your friends, avoid them
[...]
they're big and blurry.

rule #3: Don't allways just accept default presets.

...meaning, Photoshop can do thin, edgy and sharp bevels if you want it to. You can make the bevels behave exactly as you please. You just need to tweak the parameters a little.

[amoebe]

Those knobs are big and shiny, which is good. But the pointer, which is THE object that gives the user actual information, is small and hard to read due to contrast issues.
Considering the fancyness: Colours are good, Fonts fit together. Controller size and totals size are good. the labels should be slightly bigger due to readability issues of that fancy font but overall this font can be used.
Integrity: not quite there. The lighting and brushed metal say: serious app. But the fancy font, knobs and colours give a big wink. I'd lose the brushed metal and bevel and this GUI would be quite good. But don't be surprised people wouldn't take it seriously on first glance.

[tony tony chopper]

...meaning, Photoshop can do thin, edgy and sharp bevels if you want it to. You can make the bevels behave exactly as you please. You just need to tweak the parameters a little.

I'd like to see that. They don't look very accurate when they're thin & sharp, better do them manually.
But the shadows can be useful.

[NiallM]

Well here's a second attempt, taking into account most of the suggestions posted (I think). I'm not altogether happy with it yet though. What do you think?

No bevelling . Maybe I should get rid of the flat white bits and use bevels to distinguish the separate areas?

- Niall.

[Alive In Chernobyl]

ADSR as knob is confusing to me! I always see these as sliders Easier to imagine in the mind.

I do not like flat UI with 3d knobs. Eyes are taken to the knobs when looking at other part of UI.


I think discovery has a great UI to look at for ideas. Clean and easy to read.

[Sicklecell666]

Well here's a second attempt, taking into account most of the suggestions posted (I think). I'm not altogether happy with it yet though. What do you think?
No bevelling . Maybe I should get rid of the flat white bits and use bevels to distinguish the separate areas?

- Niall.

hey I think that looks pretty good. Maybe try a more rectangular frame & have a better indicator on the knobs.

[tony tony chopper]

Well here's a second attempt, taking into account most of the suggestions posted (I think).

it's already much better