RE GUI Design.

[BassmentDSP]

After countless GUI redesigns, I've decided Graphic Design is definitely not my forte.
Anyone willing to propose a few ways to "pretty up" the interface?

NSPB.png (3.51 MiB) Viewed 1710 times

On a side note, I really enjoying being able to get the community involved.
I would like to get the user-base involved from the onset of development for the next device.

[Alkua]

For pick the colors use this website color.adobe.com

Check the pic, even thought this device have multiples pre-amp, but they are organize like your device.

You could make the knobs smaller and put a reference values lines/points around the knobs. Also, add a Light next to threshold to let the user know when it is working.

[EpiGenetik]

Use a more pastel-ish purple, rather than something that Prince would wear, and it actually would look pretty good colour wise. Interface isn't just about the colours and placements though, the context of the device would need to be more explicit to give further critique as different devices can have different "tricks"

[pjeudy]

After countless GUI redesigns, I've decided Graphic Design is definitely not my forte.
Anyone willing to propose a few ways to "pretty up" the interface?

NSPB.png

On a side note, I really enjoying being able to get the community involved.
I would like to get the user-base involved from the onset of development for the next device.

try contacting these guys: design is what they do.... if they can help all you need to do is focus on coding developing
http://www.reasontalk.com/viewtopic.php ... ention+gui

Nirude is always ready to help ! send him a message !

[BassmentDSP]

Awesome!
The adobe tool will be a tremendous help.

However, if I place reference values on the panel, they will have to be generic.
This being due to the modular nature of the device.

I'm confident in my ability to execute the GUI.
My intention was to get the community involved.
It makes even more sense when considering my admittedly lacking graphic design skills.

[selig]

My suggestions:
Why stagger the knobs vertically - it adds unnecessary complexity and implies an unintentional relationship to every other knob IMO. I wouldn't add lines AND solid fills as you have done in the grey sections - one or the other is "cleaner". See the Focusrite examples. Why the three different size knobs along the bottom? Not sure about the shades of grey - what do they signify? Maybe tap into the blue somewhere else other than the lines/text, using a less saturated shade.

Possibly consider reversing the color roles - try a blue panel with grey lines/text for more color and less "blah" overall impact.

Also, are the screws lined up with holes? doesn't look like it, and it may not pass "plausibility" with the Props (but you never know).

Check out this extremely rough image for ideas (maybe try a lighter blue instead of grey around the knobs?):


As always, these are just my opinions, and are subject to change - ask me again next week and I may have totally different ideas!

[dioxide]

Ask one of the guys in the thread linked above. There are some good designers there. Basically, hire a pro. You can't be good at everything and it might not be as expensive as you think. If you are able to put together a RE then you've got some talent at programming so find someone else who has spent years immersed in design.

[Alkua]

Ok, Now I understand your device.

[eusti]

Ok. I'll play... A little tough to do when I have no clue what it's supposed to do...
Followed Selig's suggestion...
The last column has a thicker blue rim... Not sure if that was intentional... (I ask because the Ratio field in that column had a different gray tone than in the other columns too...) Not crazy about the rim... Looks a bit Internet Explorer to me...

Might work on it a bit more...

[eusti]

Here's a version with a more toned down and shifted blue...

[tiker01]

Here's a version with a more toned down and shifted blue...

This is better then the original already . However, I think there is a lot of unused space and you could easily make the device one or perhaps two units shorter. Possibly if you share a bit more of your vision one could create a really slick design.

[BassmentDSP]

Loving the feedback!

Headed in the right direction?

Its essentially a Modular FX Board.
The bottom knobs are only temporary, minus the far right one. That's a master volume, I just have no idea where to place it.

[eusti]

Loving the feedback!

Headed in the right direction?

Its essentially a Modular FX Board.
The bottom knobs are only temporary, minus the far right one. That's a master volume, I just have no idea where to place it.

I like this much better. Still not a friend of the blue lines around the "modules"...
Do you need them? And personally I think the bottom right (volume) knob should not be in between the columns...

D.

[BassmentDSP]

Maybe not, actually.
I have an idea on how i might be able to get rid of them.
I'll see what I can do.

[Alkua]

I like the theme colors, and how the knobs are align. You should take out the numbers and add in that space a mute and solo buttoms

[selig]

Loving the feedback!

Headed in the right direction?

Its essentially a Modular FX Board.
The bottom knobs are only temporary, minus the far right one. That's a master volume, I just have no idea where to place it.

I like this much better myself fwiw.

I don't think you even need the blue lines around each module. Notice you have chosen the same color used to indicate the device is selected (see the same blue line around your entire device?).

You could also consider giving each module a slight color tint to distinguish them from each other, though it's hardly necessary.

AS for the master volume knob: the volume knob is important and needs a location that reflects this importance. When all else fails, check other devices in the Reason rack. It's pretty obvious even from a cursory look over the existing Reason devices that the primary position for a master volume control is in the upper right hand corner of the device. Remember to consider each control's role when determining placement and size; it's overall importance, the need of the user to quickly locate it, and the frequency of usage of it. One could argue that a very important control master volume knob is a key control, and one that users may need to locate quickly and may need to adjust multiple times when working with the device.

Another general observation, and one based on the Props own guidelines (keep each device as small as reasonably possible), is to consider shrinking the device down one unit in size smaller, scaling all controls and elements accordingly. It appears a little larger than it needs to be IMO. You could keep the master volume knob the size of the larger knobs, but shrink all the individual controls to the size of the smaller knobs in your current design. I don't think you would loose any overall effectiveness of the device in this process, and it would probably fit into the rack a little better too. Remember to check for this "looks right in the rack" concept by doing a quick screen grab of a full Reason rack and pasting a screen grab of your device to see how it "fits" visually.

BTW, if you want a quick and VERY helpful overview of this subject I can strongly recommend a book called "Universal Principles of Design". Some of the concepts may already be familiar to many, but having it all in one place has been very helpful for me getting up to speed in the design aspect of RE development. I have friends who are successful designers that suggested this book as a great foundational reference book, so it comes highly recommended. In fact I would recommend this book to all RE designers that want to avoid common mistakes and gain insight into the design process.

[eusti]

You could make the Volume knob red as well... That would make it stand out as well...

Still love the old Microwave design... Wasn't the volume know there, but still!

D.

[CharlyCharlzz]

[img]

blue Moon

gNSPB.png (3.69 MiB) Viewed 1573 times

[/img]

[Nirude]

I'm on a vacation in Lapland Finland, I'll be back soon and then I'll send my version

[dhruan]

BTW, if you want a quick and VERY helpful overview of this subject I can strongly recommend a book called "Universal Principles of Design". Some of the concepts may already be familiar to many, but having it all in one place has been very helpful for me getting up to speed in the design aspect of RE development. I have friends who are successful designers that suggested this book as a great foundational reference book, so it comes highly recommended. In fact I would recommend this book to all RE designers that want to avoid common mistakes and gain insight into the design process.

That is a really good one for getting up to speed on general principles of design (esp. the updated second version of the book). Few other books that I would recommend for UX, visual/GUI design or design overall...
- Jeff Johnson's Designing With The Mind In Mind (2nd ed.), goes into cognitive psychology, gestalt principles etc.,
- Don Norman's The Design of Everyday Things, Revised and Expanded Edition, great read otherwise too, pretty much indispensable/foundational book for anyone working with experience design/UX, and
- Alan Cooper's About Face: The Essentials of Interaction Design 4th Edition.

There are of course a boatload of other books but those are the ones that I can recommend straight up. More can be found over at Simon Pan's The Only UX Reading List Ever.

[selig]

As others have mentioned and it bears repeating IMO, design begins with intention (or similar comments). So one cannot simply look at something and say whether it is good design or not without knowing what the intended use of the device is. And to some degree, you actually have to USE the device before you can know whether the design is actually WORKING (or is simply "looking good").

So hopefully some more input will come that will guide our suggestions and responses more accurately to a useful end!

[eusti]

Coming back to this: If it is a modular multi FX box, I'm missing some things along the lines of patch loading & module routing...
As well, if the FX are switchable and wanted to make it more "realistic" (as in hardware related) you could use displays for the parameters too... Maybe like this...

[eusti]

As others have mentioned and it bears repeating IMO, design begins with intention (or similar comments). So one cannot simply look at something and say whether it is good design or not without knowing what the intended use of the device is. And to some degree, you actually have to USE the device before you can know whether the design is actually WORKING (or is simply "looking good").

So hopefully some more input will come that will guide our suggestions and responses more accurately to a useful end!

I agree. But one can definitely try to clean up a given design a bit without knowing what it does... But it's not more than cosmetics, where a good GUI should be way more than that.

D.

[dhruan]

As others have mentioned and it bears repeating IMO, design begins with intention (or similar comments). So one cannot simply look at something and say whether it is good design or not without knowing what the intended use of the device is. And to some degree, you actually have to USE the device before you can know whether the design is actually WORKING (or is simply "looking good").

So hopefully some more input will come that will guide our suggestions and responses more accurately to a useful end!

Form Follows Function

One of the first things that popped to my head when looking the initial mockup was "What is that supposed to do?". So yeah, it would be great if the OP would chime in on that.

And another thing to the OP, I read the initial post more thoroughly and things like "prettying up the interface" will usually invoke an evil glare from professional designers

Visual (and GUI design especially) is all about understanding the purpose and afforded functions of a device, and finding ways to enable the most usable experience through it's GUI (layout, placement and visual separation of different controls, readouts/displays, titles and other bits of information). So in a sense, it is to a large extent about functionality, branding and visual styling being applied as one of the layers of the visual design of a GUI.

[Lizard]

Coming back to this: If it is a modular multi FX box, I'm missing some things along the lines of patch loading & module routing...
As well, if the FX are switchable and wanted to make it more "realistic" (as in hardware related) you could use displays for the parameters too... Maybe like this...

It looks like a Multi-FX chain to me. I don't think that routing is any more complicated than a series effect process from 1-6 allowing the user to change the effect type with an option of bypass (just guessing). As far as the patch loading it looks as though space is reserved however on the top. With this (suspected) type of device it would be silly to not have it. Wouldn't it?