Old 10-20-2019, 01:12 PM   #1
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default Small concept, would you use it? (R+)

Hi,

I have been thinking about creating a Reaper theme for some time, I know it is going to be a huge amount of work, but I like to create UI/UX concepts (I am not a graphic designer though).

I would like to hear some feedback about this, it is just a quick draft of a small part of Reaper, but it represents more or less what I have in mind.

What do you think? This is a 2x render (updated with 1x render), if I ever finish the theme it will support hdpi displays. Would you use it.

I don't even know if all these is doable in Reaper... e.g. the volume faders, or the knobs, yeah I need to do some research...





Variant with more contrast




Last edited by estux; 10-23-2019 at 09:24 AM.
estux is offline   Reply With Quote
Old 10-20-2019, 03:10 PM   #2
Teddy
Human being with feelings
 
Join Date: Sep 2011
Posts: 149
Default

Looks great. Love it!
Teddy is offline   Reply With Quote
Old 10-20-2019, 03:16 PM   #3
Funkybot
Human being with feelings
 
Join Date: Jul 2007
Posts: 145
Default

Looks very good but a lot of darker themes seem to want to put dark elements on top of dark backgrounds and ultimately suffer due to a lack of contrast. For example the FX button: dark gray on a darker gray. I’d suggest getting a bit more contrast there. But otherwise, it really looks very nice.
Funkybot is offline   Reply With Quote
Old 10-20-2019, 05:29 PM   #4
lucas_LCS
Human being with feelings
 
Join Date: Dec 2015
Posts: 710
Default

looks nice!
Curious to see what the MCP/mixer lloks like.
Quote:
Originally Posted by estux
I don't even know if all these is doable in Reaper... e.g. the volume faders, or the knobs, yeah I need to do some research...
You will need to Knob stacks to have the effect of a sweeping line on the fader or the Pan knobs.
most use Knobman
You might be able to find a ready use knob in the Knobman Gallery
you may need to give the gallery a minute or 2 to load.

Quote:
Originally Posted by Funkybot
Looks very good but a lot of darker themes seem to want to put dark elements on top of dark backgrounds and ultimately suffer due to a lack of contrast. For example the FX button: dark gray on a darker gray. I’d suggest getting a bit more contrast there. But otherwise, it really looks very nice.
Looks fine to me.
The unlit FX button is less noticeable, yes, but that helps the lit FX button stand out even more.
lucas_LCS is offline   Reply With Quote
Old 10-20-2019, 11:48 PM   #5
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default

Thanks for the feedback!

Yeah, contrast is always tricky, the idea, as lucas said, is that the UI can emphatice the "on" state without using aditional colors. I need to check how the contrast is various types of screen panels and settigns and adjust it if needed.


@lucas_LCS thanks for the tips. Btw what editor do people use to work with the walter file?
estux is offline   Reply With Quote
Old 10-21-2019, 03:06 AM   #6
jrengmusic
Human being with feelings
 
jrengmusic's Avatar
 
Join Date: Jun 2015
Posts: 556
Default

The quick and dirty way to check contrast is by viewing the whole design in monochrome (black & white), just like mixing listening in mono.

In my experience one of the most challenging task is how to make those design elements behave when resized, while maintaining its usability. (Almost, if not) all panel in REAPER are resizable. It could look nice on some aspect ratio. But things could get ugly instantly when resized.

Developing REAPER theme most certainly took way longer time than you might expected. With the current HiDPI/Retina experimental functionality anything could change in REAPER side which may break your themes.
__________________
JRENG! | M E T R I C

Last edited by jrengmusic; 10-21-2019 at 03:13 AM.
jrengmusic is offline   Reply With Quote
Old 10-21-2019, 01:51 PM   #7
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default

Quote:
Originally Posted by jrengmusic View Post
ge in REAPER side which may break your themes.
I didn't know that, such a bummer

Thanks for the tips. And yes, I know it is A LOT of work.
estux is offline   Reply With Quote
Old 10-21-2019, 06:07 PM   #8
lucas_LCS
Human being with feelings
 
Join Date: Dec 2015
Posts: 710
Default

Quote:
Originally Posted by estux
what editor do people use to work with the walter file?
Not sure what others are using, but I just use the free Notepad app in Windows.
You can also use Wordpad.
The equivalent to that in OSX would be Textedit, but you need to save as plain text in either one of those.

You can try something like the free Notepad++ if you want a more powerful app to help navigate the coding.

Quote:
Originally Posted by jrengmusic
With the current HiDPI/Retina experimental functionality anything could change in REAPER side which may break your themes.
@ estux
don't let that put you off finishing the theme.
It will be much easier to go back and modify the theme to adjust to the new Reaper version than the actual creation of the theme.
Time you put into it now will not be wasted.
I suggest that you keep a separate folder with any parts (layers) used to make buttons or other images.
Example: buttons
- plain button backgrounds
- text layers
- button shadows (these are usually overlays, but can be part of the actual button)
- button flares (these are usually overlays, but can be part of the actual button)

:

Last edited by lucas_LCS; 10-22-2019 at 03:10 PM.
lucas_LCS is offline   Reply With Quote
Old 10-21-2019, 10:44 PM   #9
Fergler
Human being with feelings
 
Fergler's Avatar
 
Join Date: Jan 2014
Posts: 3,937
Default

Yes, but not at that scale. Scaled down to match what Reaper actually looks like on my screen those buttons are too small and the contrast too low. But I do really like good flat design.

As a general rule never put text darker than the overall background over a lighter button. The effect is straining. You should try lighter text over an even darker button (invert the button values, essentially). Already, your Input 1 part is doing this and it is much easier to read and use.
__________________
Check out my hip-hop, funk-rock band Theatre Crisp
Fergler is offline   Reply With Quote
Old 10-22-2019, 01:49 AM   #10
lucas_LCS
Human being with feelings
 
Join Date: Dec 2015
Posts: 710
Default

Quote:
Originally Posted by Fergler
Yes, but not at that scale. Scaled down to match what Reaper actually looks like on my screen those buttons are too small and the contrast too low.
The OP stated it will be for HiDPI screens.
Are you running a HiDPI monitor?
If so, what size?
This would be helpful information for the OP.

Quote:
Originally Posted by Fergler
As a general rule never put text darker than the overall background over a lighter button. The effect is straining. You should try lighter text over an even darker button (invert the button values, essentially). Already, your Input 1 part is doing this and it is much easier to read and use.
Except in this case, where you want a muted image there and only noticeable if active or 'lit', which the Input field is.
The concept is that anything not being used is 'muted' or not calling attention to itself.
There should be no eye strain because your not constantly reading it as you scan the panel.
This in turn helps the active or 'lit' buttons and labels be easier to see or spot quickly.

:
lucas_LCS is offline   Reply With Quote
Old 10-22-2019, 10:05 AM   #11
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default

I have updated the original post with the 1x render.

As I said, this is just the initial draft.
estux is offline   Reply With Quote
Old 10-23-2019, 07:26 AM   #12
Funkybot
Human being with feelings
 
Join Date: Jul 2007
Posts: 145
Default

Quote:
Originally Posted by estux View Post
I have updated the original post with the 1x render.

As I said, this is just the initial draft.
I'm in a bright room at the moment and I can barely make out the buttons at all at 1x. It's like there's something there, but what it is I don't know. I'd definitely advise you to try lighter buttons in an off state. Find a color that says this is clearly off, but also clearly a button. Right now, I honestly think you're only accomplishing the first of those two potential objectives. Good luck! The elements themselves and design otherwise looks very nice.
Funkybot is offline   Reply With Quote
Old 10-23-2019, 09:26 AM   #13
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default

I have added a variant with some more contrast
estux is offline   Reply With Quote
Old 10-23-2019, 10:33 AM   #14
Funkybot
Human being with feelings
 
Join Date: Jul 2007
Posts: 145
Default

Quote:
Originally Posted by estux View Post
I have added a variant with some more contrast
That one's definitely an improvement. I can see again!
Funkybot is offline   Reply With Quote
Old 10-24-2019, 02:12 AM   #15
estux
Human being with feelings
 
Join Date: Sep 2018
Posts: 27
Default

Quote:
Originally Posted by lucas_LCS View Post
Not sure what others are using, but I just use the free Notepad app in Windows.
You can also use Wordpad.
The equivalent to that in OSX would be Textedit, but you need to save as plain text in either one of those.

You can try something like the free Notepad++ if you want a more powerful app to help navigate the coding.


@ estux
don't let that put you off finishing the theme.
It will be much easier to go back and modify the theme to adjust to the new Reaper version than the actual creation of the theme.
Time you put into it now will not be wasted.
I suggest that you keep a separate folder with any parts (layers) used to make buttons or other images.
Example: buttons
- plain button backgrounds
- text layers
- button shadows (these are usually overlays, but can be part of the actual button)
- button flares (these are usually overlays, but can be part of the actual button)

:
Thank you very much for the tips, I'll take a look to your themes, I wasn't sure if the files/folder structure is flexible or not, some nice organization will help me keeping things under control.
estux is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 12:26 PM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.