Getting into professional RE interface design

This forum is for discussing Rack Extensions. Devs are all welcome to show off their goods.
Post Reply
User avatar
fieldframe
RE Developer
Posts: 1038
Joined: 19 Apr 2016

12 May 2016

I may be a bedroom producer, but by day, I’m actually a professional user interface / product experience designer. I’ve always wanted to work on Reason devices, and having started doing more contract design work lately, this seemed like a good time to to try to get into it.

The question then is: how to get clients when my portfolio doesn't have any Rack Extension design in it? Perhaps the best answer is to take a spin on the time-honored tradition of making an unsolicited redesign of an existing RE. :)

What follows is a little exercise in remaking the UI of a popular RE that I thought could use some more work to hit the level of the Propellerhead devices. The goal was to keep the layout and core concepts of the original, but improve navigability and balance while finessing the details.

Image
Image

A few design notes:
  • Typography: That font (Neuropol by Ray Larabie) is not well-suited to UI and doesn’t have multiple typographic weights. Instead, I used a neo-grotesk called Work Sans which allows greater flexibility and looks more professional.
  • Contrast: Zero can be kind of a gray fog sometimes. I used brighter knobs and a darker background to make the interactive parts stand out more.
  • Section dividers: The outlines end up looking noisy on a UI this complex, and the little color swatches add clutter as well as being easily mistaken for LEDs. Colored backgrounds, at just the right level of saturation, solve the noise problem while livening up the panel.
  • Ghosted knobs: A mixing of metaphors, using a software pattern (ghosting) on a physically-styled interface. As an alternative, I’ve proposed knobs that light up when turned.
Where’s the rest? Sorry, that’s already way more than I normally do for free. :puf_bigsmile: Anyway, consider this my invitation to any RE developers who are looking for a UI designer!

User avatar
jam-s
Posts: 3092
Joined: 17 Apr 2015
Location: Aachen, Germany
Contact:

12 May 2016

I think a good way to show off your RE design skills would be to do some nice 3d renders (and front facing shots) of imagined device interfaces as your 3D modelling skills will be needed for doing great RE user interfaces.

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 1 time in total.

User avatar
eXode
Posts: 838
Joined: 11 Feb 2015

12 May 2016

fieldframe wrote:I may be a bedroom producer, but by day, I’m actually a professional user interface / product experience designer. I’ve always wanted to work on Reason devices, and having started doing more contract design work lately, this seemed like a good time to to try to get into it.

The question then is: how to get clients when my portfolio doesn't have any Rack Extension design in it? Perhaps the best answer is to take a spin on the time-honored tradition of making an unsolicited redesign of an existing RE. :)

What follows is a little exercise in remaking the UI of a popular RE that I thought could use some more work to hit the level of the Propellerhead devices. The goal was to keep the layout and core concepts of the original, but improve navigability and balance while finessing the details.

Image
Image

A few design notes:
  • Typography: That font (Neuropol by Ray Larabie) is not well-suited to UI and doesn’t have multiple typographic weights. Instead, I used a neo-grotesk called Work Sans which allows greater flexibility and looks more professional.
  • Contrast: Zero can be kind of a gray fog sometimes. I used brighter knobs and a darker background to make the interactive parts stand out more.
  • Section dividers: The outlines end up looking noisy on a UI this complex, and the little color swatches add clutter as well as being easily mistaken for LEDs. Colored backgrounds, at just the right level of saturation, solve the noise problem while livening up the panel.
  • Ghosted knobs: A mixing of metaphors, using a software pattern (ghosting) on a physically-styled interface. As an alternative, I’ve proposed knobs that light up when turned.
Where’s the rest? Sorry, that’s already way more than I normally do for free. :puf_bigsmile: Anyway, consider this my invitation to any RE developers who are looking for a UI designer!
This is still your opinion which might, or might not differ from other peoples. It's a matter of taste, etc. In contrast, I think that the pastel type colors in your example doesn't fit at all.

If you're looking for design work, perhaps you shouldn't come on here posting your "improvements" and design notes of other peoples work, I think that could come off as arrogant to be honest. It would probably be better to just post an example of your own original design.

User avatar
normen
Posts: 3431
Joined: 16 Jan 2015

12 May 2016

His design _is_ more legible and clear though.

User avatar
eXode
Posts: 838
Joined: 11 Feb 2015

12 May 2016

normen wrote:His design _is_ more legible and clear though.
It also looks like something made with SynthMaker/FlowStone. To each his own I guess.

User avatar
normen
Posts: 3431
Joined: 16 Jan 2015

12 May 2016

eXode wrote:It also looks like something made with SynthMaker/FlowStone. To each his own I guess.
Maybe because they also employ professional interface designers instead of relying on "programmer art"? ;)

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 2 times in total.

User avatar
Noplan
Competition Winner
Posts: 728
Joined: 16 Jan 2015
Location: Cologne, Germany

12 May 2016

I think you choosed a bad example. the design of Zero is nice and clear enough. You would earn more "Wows" if you change an ugly duckling to a beatiful swan.

User avatar
eXode
Posts: 838
Joined: 11 Feb 2015

12 May 2016

normen wrote:
eXode wrote:It also looks like something made with SynthMaker/FlowStone. To each his own I guess.
Maybe because they also employ professional interface designers instead of relying on "programmer art"? ;)
That is your opinion. I don't think that it looks professional, sorry. And Ironically, I did work "professionally" within graphical design for several years... ;p
Last edited by eXode on 12 May 2016, edited 1 time in total.

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 1 time in total.

User avatar
normen
Posts: 3431
Joined: 16 Jan 2015

12 May 2016

eXode wrote:That is your opinion. I don't think that it looks professional, sorry. And Ironically, I did work "professionally" within graphical design for several years... ;p
Yeah it is. I am so bad at visual things that my opinion can't be worth much in this context though..
Stranger. wrote:
normen wrote:It also looks like something made with SynthMaker/FlowStone. To each his own I guess.
Ahh flowstone =) now that thing there is... wow.know any users normen?
eXode wrote:Maybe because they also employ professional interface designers instead of relying on "programmer art"? ;)
Yep- in the industry it's know as " gizza job m8" ;) -give the man/woman a job-to make that their 'profession' :thumbs_up:
Sorry I didn't understand either of these comments, language barrier maybe - and the first quote isn't by me but by exode, the second is by me and not exode.

User avatar
Nirude
Posts: 213
Joined: 22 Jan 2015
Location: Finland
Contact:

12 May 2016

Capture.JPG
Capture.JPG (116.47 KiB) Viewed 2134 times
Ooooh the memories. Have to start doing these again, after a new :re:
3d man.

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 1 time in total.

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 1 time in total.

User avatar
normen
Posts: 3431
Joined: 16 Jan 2015

12 May 2016

Stranger. wrote:It's the tiny little triangles-you know that folding thing? - that,in itself,ruins many appearances for me.. think about the small things that matter to you-or others possibly.
Screw positions etc- no screw is physically covered by a dayng tiny triangle- lol...
This is actually due to the specifications from the Props, devs are required to put the screws in specific places in REs and the little triangle is put there automatically by Reason... One workaround is to put the screws more in the middle of the device which is also allowed according to the specifications. But if you look at real-world rack devices most have their screws at the corners.. Some devs already complained about this but so far this hasn't been changed.

User avatar
eXode
Posts: 838
Joined: 11 Feb 2015

12 May 2016

normen wrote:
eXode wrote:That is your opinion. I don't think that it looks professional, sorry. And Ironically, I did work "professionally" within graphical design for several years... ;p
Yeah it is. I am so bad at visual things that my opinion can't be worth much in this context though...
Sorry if that's how it came across, it wasn't my intention. My point was rather that every individual, professional or not, might have an opinion that is different. :)

User avatar
normen
Posts: 3431
Joined: 16 Jan 2015

12 May 2016

eXode wrote:Sorry if that's how it came across, it wasn't my intention. My point was rather that every individual, professional or not, might have an opinion that is different. :)
Uh, I actually meant what I said :)

User avatar
Lizard
Posts: 466
Joined: 16 Jan 2015

12 May 2016

It is clearly the opinion of the user as to what is the better option and it isn't split down the middle 50/50 either. It arguable these days that the more flat and cleaner look is better than the the older approach of realistic looking devices that have tangibility to them. This is of course opinion and everyone has one right?

But to get to the root of the OP's subject is this : "how to get clients when my portfolio doesn't have any Rack Extension design in it?"

It is my opinion that ReasonTalk would not be my first choice to demonstrate those skills. Though it is a lovely place here. ;) There of course a lot of people here to cheer you on but the ones you want to gain attention from are the developers and they all have access to the Propellerhead developers forums. The only way to get there is to apply as a developer which is very much free and access to the SDK is easy (and required to make a GUI). If you get access to that you will be able to see how one goes together using the tools they provide. It requires graphical skill and scripting knowledge as a minimum. And the better designs require 3D modeling design or modification as well as programming of custom displays.

Assembly is a little more than graphic touch up in a graphic design program but not alien to that either. Most Re design (but not all) still happens in a 3D design environment and creating unique controls and displays (particularly custom displays) is a challenging aspect. It is these skills that I think are most sought after not so much the ergonomics of the device. Ergonomics is of course important but kind of comes to the designer during assembly and the understanding between the designer and developer based on function (should they be two different people). Ergonomics only may be a skill worth seeking if you had a big budget and several units to sell. In the Re realm only a few developers reach high numbers.

In summary I would apply as a Dev and program my own GUI. Show it off at the Developer Forums as there are a lot of developers that flow through there..... probably more than here. If I were a Kontakt library developer than didn't want to be bothered with learning to create a GUI but wanted to get my library in Reason I'd entertain the thought. But this is of course, my opinion and just that. Good luck in your pursuance of GUI design for Re. For what it is worth your concepts I thought were good though some may not be able to actually be done like the glass look to the custom display (as far as I am aware) and the font changes to the display windows (patch names/range/poly). The fonts used there are limited by the SDK.

User avatar
fieldframe
RE Developer
Posts: 1038
Joined: 19 Apr 2016

12 May 2016

Lizard wrote:It is clearly the opinion of the user as to what is the better option and it isn't split down the middle 50/50 either. It arguable these days that the more flat and cleaner look is better than the the older approach of realistic looking devices that have tangibility to them. This is of course opinion and everyone has one right?

But to get to the root of the OP's subject is this : "how to get clients when my portfolio doesn't have any Rack Extension design in it?"

It is my opinion that ReasonTalk would not be my first choice to demonstrate those skills. Though it is a lovely place here. ;) There of course a lot of people here to cheer you on but the ones you want to gain attention from are the developers and they all have access to the Propellerhead developers forums. The only way to get there is to apply as a developer which is very much free and access to the SDK is easy (and required to make a GUI). If you get access to that you will be able to see how one goes together using the tools they provide. It requires graphical skill and scripting knowledge as a minimum. And the better designs require 3D modeling design or modification as well as programming of custom displays.

Assembly is a little more than graphic touch up in a graphic design program but not alien to that either. Most Re design (but not all) still happens in a 3D design environment and creating unique controls and displays (particularly custom displays) is a challenging aspect. It is these skills that I think are most sought after not so much the ergonomics of the device. Ergonomics is of course important but kind of comes to the designer during assembly and the understanding between the designer and developer based on function (should they be two different people). Ergonomics only may be a skill worth seeking if you had a big budget and several units to sell. In the Re realm only a few developers reach high numbers.

In summary I would apply as a Dev and program my own GUI. Show it off at the Developer Forums as there are a lot of developers that flow through there..... probably more than here. If I were a Kontakt library developer than didn't want to be bothered with learning to create a GUI but wanted to get my library in Reason I'd entertain the thought. But this is of course, my opinion and just that. Good luck in your pursuance of GUI design for Re. For what it is worth your concepts I thought were good though some may not be able to actually be done like the glass look to the custom display (as far as I am aware) and the font changes to the display windows (patch names/range/poly). The fonts used there are limited by the SDK.
Thanks for the thoughtful advice, Lizard. I think that's a great idea to get started, and I really appreciate the perspective from the dev side.

dana
Posts: 335
Joined: 29 Apr 2015
Contact:

12 May 2016

Its not the design that is the issue with Zero, its fine. Its the usability, it can be confusing to use at times.

User avatar
selig
RE Developer
Posts: 11881
Joined: 15 Jan 2015
Location: The NorthWoods, CT, USA

12 May 2016

To add to what Lizard said, if you want to design for RE you REALLY need to get the SDK and read all the docs that cover the design aspect. There are things you've done with your re-design that would be difficult if not impossible to do with the current SDK, and not knowing that can possibly cause prospective clients to not see you as "fully up for the job".

Once you were more familiar with the SDK inside out you could suggest solutions that will improve the UI AND will work well with the current limitations. Plus, you'll know about any changes as soon as anyone else, allowing you to update your 'bag of tricks' quickly.

FWIW…The last graphic designer I was impressed by made that impression by showing some imaginary front panels that just looked so damn good - it didn't matter that they didn't conform to the RE standard because that part can be learned. What "got" me was that they looked like finished products, even if they had no actual function.

Most RE developers know what they want on one level or another, therefore, the primary job you will be doing will be to "interpret" a UI. This can be compared to an artist coming in to your studio with a well written song for you to arrange - you may need to re-write minor sections and make small changes here and there, but overall you will be arranging an already written piece of music. Same for RE work - which means you'll have to be good at not only the basics of UI design, but also of communication and listening! In the end if you can't give your client what they want, you won't get much work, so IMO you must factor that element into the overall equation of what your actual "job" will be and how best to promote yourself accordingly.

Another approach you could take to promote yourself would be to get someone here to propose a basic design and for you to then execute said design in concert with the originator of that design. Doesn't have to be a current RE designer either, and you don't even have to post your work publicly in the end - it's more for you to have something to "practice" on and if allowed, to show to prospective clients.

Either way, while it's nice to see what YOU would do with someone's else's design on your own (with no input or direction from the dev), in the end it's probably more important and informative for prospective clients to see what you would do under someone else's guidance. That's more "real world" IMO.
:)


Sent from my iPad using Tapatalk
Selig Audio, LLC

Stranger.
Posts: 329
Joined: 25 Sep 2015

12 May 2016

ΣΣΣ
Last edited by Stranger. on 03 Jun 2016, edited 1 time in total.

User avatar
DNA Apocalypse
Posts: 94
Joined: 12 Jun 2015

12 May 2016

The Zero redesign is not an improvement (just my honest opinion). The colors are kind of weird and child like..... The only reason the redesign is clearer is because of the resolution is greater on the redesign (it will have to be compressed to the same resolution as the Zero later anyway so also not an actual improvement). The Zero has a beautiful GUI already, I think if you want to gain real design credits, you should create your own mock-up of a new synth/effect. Make sure it conforms to all of the Propellerhead design requirements also (see the rack extension designer guidelines). I think you are on your way ......but not quite there yet, I am not trying to be negative, I just wanted to give you some constructive advice. I hope the best and remember stay positive!
DNA-LABS-SOFTWARE.COM :reason: :refill: :re:

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests