Triple OSC new UI proposal

[LocoMatt]

Hello, I decided to redesign my old UI for Triple OSC. With some help of my brother here is it. I'm waiting for your advices and opinions. If you like it I can bring source files to implement it into LMMS. EDIT

changed name from Triple OSC to full name (Triple Oscillator) changed fonts PD/SPD - fixed to PO/SPO sine shape block rotated by 180 degree some text aligns added citrus changed sine and noise wave new user shape icon

[grejppi]

SPO, not SPD.

[grejppi]

Also, PD should be PO.

It stands for (Stereo) Phase Offset.

[LocoMatt]

Oh my bad, here's fixd

[StakeoutPunch]

Looks brilliant! Do you have pictures of it implemented with the current default theme?

[grejppi]

Some more things...

• The bitmap fonts are not the correct size, so the labels look blurry,
• OSC1+OSC2 and OSC2+OSC3 do not align, and
• The sine waveform is inverted.

[LocoMatt]

@StakeoutPunch Yeah it's already working. @grejppi Updated

[tkotobu1048]

Gooood!

[musikBear]

orange is a color that rarely works in design. It has to do with the feeling of alert and actually fear. It is genome in-coded -orange is a 'leave this place now' signal soo. no- from me.

[LocoMatt]

New version for @musikBear

[LocoMatt]

And here's a new version for everyone else forSureNotYellow.png @edit Oh, my bad

[tresf]

The artwork and color choice I find to be pleasing, however the icon I do not find to fit in our plugins section very well as it is just words, which offer nothing over the words already there, IMO.

@musikBear

orange is a color that rarely works in design.

Hmm... http://www.colormatters.com/color-and-marketing/59-color-symbolism/the-meanings-of-colors

Probably more accurate to simply say that you don't like the color. :smile:

That said, I wouldn't be opposed to embracing the orange and embrace the citrus.

Foods for thought...

[tresf]

Also, I always prefer a before/after side-by-side comparison when we do these things... I think it is important for us to know what exactly we're replacing when we look at a new idea.

I also recommend the original post is regularly edited (with a note saying so) with the latest artwork for those just landing on this thread.

P.S. Here's the email archive from when we redid AudioFileProcessor, for those interested...

http://linux-multimedia-studio-lmms.996328.n3.nabble.com/AudioFileProcessor-WIP-td5729.html

[LocoMatt]

Ok I've updated 1st post with newest image and "changelog". Reffering to logo, at the beginning I was thinking about lemons or oranges but lemons might look like stolen idea (FL Studio - Sytrus), well only oranges left, but I didn't run this idea into life because I'm not sure how to do this :P Eventually we can choose another color (let's stay with white+color) of whole UI but we should choose it together.

[musikBear]

New version for @musikBear

mmm.. the complementary color for orange is not all that pretty either :p - infact according th Goethe's color theories, that will the case for any 'unpleasant' color :D I just gave my 2 bits, and i have no weight behind anything i say - Perhaps i should go into politic..

[tresf]

in (point of) fact: (phrase) used to emphasize the truth of an assertion, especially one contrary to what might be expected or what has been asserted.

"i have no weight behind anything i say"

Well that is quite contradictory. :smile_cat:

the complementary color for orange is not all that pretty either :p - infact according th Goethe's color theories, that will the case for any 'unpleasant' color

Ok, now you've thrown out two primary/secondary colors. We have 4 left. :art:

[StakeoutPunch]

After reading the description of orange on the site Tres linked, I think that orange is the perfect color to capture and symbolize the often rough sound resulting from the simplicity of triple oscillator ;P

[tresf]

CC0 orange I just made, if interested. SVG is here as well. :+1:

[Spekular]

Looks great. If we're going to be doing a big redesign, maybe we can use the SVG in the plugin art rather than a bitmap? I guess it could be pretty hard to implement compared to "just" creating the art, but I thought I'd throw it out there.

[LocoMatt]

So I asked my bro for any ideas and he came up with something like this and here how does it looks with your idea

[eagles051387]

I would change the wording of the description to say Three powerful oscillators you can modulate in different ways. instead of several.

On Mon, Aug 10, 2015 at 7:57 PM, LocoMatt notifications@github.com wrote:

So I asked my bro for any ideas and he came up with something like this [image: triple] https://cloud.githubusercontent.com/assets/6965480/9178292/bc49b8f2-3f96-11e5-83df-8d11ba54836c.PNG [image: logo] https://cloud.githubusercontent.com/assets/6965480/9178569/1fd634c6-3f98-11e5-8016-3f026f65a247.png and here how does it looks with your idea [image: synnth] https://cloud.githubusercontent.com/assets/6965480/9178998/f9e23e84-3f99-11e5-8758-d7ebd67770cc.PNG [image: logo44] https://cloud.githubusercontent.com/assets/6965480/9179001/fbb82228-3f99-11e5-8c28-9b3a6e4a5d65.png

— Reply to this email directly or view it on GitHub https://github.com/LMMS/lmms/issues/2243#issuecomment-129549560.

Jonathan Aquilina

[SecondFlight]

It's so beautiful :)

[tresf]

I would change the wording of the description to say Three powerful oscillators you can modulate in different ways. instead of several.

"Several" is more accurate than "different". Different assumes mutual exclusivity, such as in the scenario that you would like to module them in the same way. Furthermore, this isn't about cleaning up bad wording in the software, this is about a theme. If you want to cleanup wording, issue a PR and make yourself useful, we need real help around here, not a commentator.

So I asked my bro for any ideas and he came up with something like this

I like his direction (with the three varieties) although at a distance, it looses its distinction and almost mistaken for a bundle of leaves versus an orange (not that it matters, orange leaves are nice looking as well).

[michaelgregorius]

If you decide to go with something like the three differently colored oranges / orange slices I'd propose to also reflect the three colors in the oscillator sections to differentiate them a bit more. This would also help to connect the logo with the instrument.

[rubiefawn]

I like the one with the three fruits, however, Tres is right about them looking like leaves from a distance. Make the rind or secondary color (Whatever it is) much brighter to create more contrast and make it clear that they're fruit. I like this a lot better so far.

[LocoMatt]

New idea

[michaelgregorius]

Have you considered coloring the oscillator section according to the colors of the three slices? For example:

• OSC1 in orange
• OSC2 in yellow
• OSC3 in lime?

If you do so you might also color the "OSC1 + OSC2" label with a gradient that goes from orange to yellow and the "OSC2 + OSC3" label with a gradient that goes from yellow to lime. I think something like this might be a good indicator of how things are connected but at the same time a good indicator of how they are separated.

[tresf]

Nice use of realestate on that latest one @LocoMatt.

[Wallacoloo]

I like the big logo in the background.

I don't know about individually coloring each oscillator & adding gradients to the modulations. If you could pull it off without it looking childish or clashy, it seems like a good idea, but I certainly couldn't pull that off :P

[rubiefawn]

Forgive my MS Paint, but here's an idea. Instead of a gradient, have a diagonal cut between colors that goes through the +.

I also (tried) to recolor things so they all correspond with the oscillators.

[michaelgregorius]

@cubician I cannot see your MS Paint art. :wink: Have you forgotten to upload it?

[grejppi]

@cubician, @michaelgregorius: attachments are ignored when replying by email.

[rubiefawn]

Haha. Okay, responding through github. Here's my MS paint art.

[midi-pascal]

:+1: Really nice indeed!

[mikobuntu]

These are all really good ;) I quite like the 1 above with the Orange, lemon and lime which are transparent in the oscillators section ( maybe raise the transparency, so that they can be seen slightly more easily? ) And slightly off topic, but as you guys seem to have your graphical art abilities in order someone would maybe be interested in updating the Carla plugin artwork. I did the originals merely as place holders at the time. ;)

[Spekular]

Maybe it could be red behind the text and not gray. Or maybe that's too many colors? :shrug:

[LocoMatt]

Thanks everyone for ideas but I'll stay with my main idea and current verion. I'll make some adjustments soon.

[unfa]

Whoa, I really like this design. Also the sliced orange icon is my favourite.

I think the color coding of the oscilators is a nice idea, however it could cause eyesore, maybe the backgrounds should be desaturated more? The cytrus triad icon fits well the color-coded oscilator panels, otherwise I'd prefer the sliced orange design.

[unfa]

Btw: The sine wave icon isn't really a sine wave. Maybe it should be altered?

[unfa]

Also the ? icon could be replaced with this:

SVG code: http://pastebin.com/gkXBMgzA

[Wallacoloo]

+1 on the sine wave. I'm neutral on the "?" Button. On Aug 15, 2015 5:59 PM, "unfa" notifications@github.com wrote:

Btw: The sine wave icon isn't really a sine wive. Maybe it should be altered?

[image: path4140] https://cloud.githubusercontent.com/assets/491704/9291473/cce02fa4-43c2-11e5-9953-a47c9bd13c60.png

— Reply to this email directly or view it on GitHub https://github.com/LMMS/lmms/issues/2243#issuecomment-131472874.

[michaelgregorius]

I agree with @unfa on the "?" icon. To me it looks like a "surprise" button or like the application itself doesn't know what will happen if you press the button.

The problem with the sine wave seems to be that the wave selection buttons currently have a ratio of 1:1. However, to display a sine wave without distortion you need a button with a ratio of 2*pi:2 = pi:1.

Also please notice that the display of the different wave forms is inconsistent. The sine and the square waves are represented as one complete cycle of the wave while the triangle wave for example is represented as half a cycle.

[musikBear]

(.. and im just pleased with the dampened color aggression of the orange :angel:

[grejppi]

@michaelgregorius: The triangle wave is a full cycle, just shifted so it might look like a half cycle.

And everyone: please show some respect and leave the design and mockups to @LocoMatt.

[LocoMatt]

Fixed sine wave icon, noise wave icon and better fitting of citrus. Also I liked @unfa idea with user shape so here's version with changed icon

[StakeoutPunch]

I agree with @grejppi. While some of the design ideas are great, it is extremely difficult to incorporate them all and still keep the super clean UI concept. The too many drivers scenario comes to mind.

[unfa]

I really like this latest version. Juicy! Makes me wanna mess with some oscillators...

BTW: I really like the flat elegant knobs in the plugin window and the keyboard, keyboard scrollbar - is that a custom skin or what? Really slick. I've put some effrot into the current knobs in LMMS, but those simple flat circles really look appealing. I'm not into the Ableton Live's minimalism degree in GUI, but I like how it's approached here.

[LocoMatt]

@unfa Thanks for your approvment :) And yes, this skin is custom made by myself. I wanted to finish this and post also as gui proporsal but I'm to lazy :P

[musikBear]

Me == :japanese_goblin: Right now the weirdest thought struck me: Why are presets-forms small on x-axis and large on y-axis, while our screens are just the opposite

Inter-es-ting .. (?)

[tresf]

Right now the weirdest thought struck me: Why are presets-forms small on x-axis and large on y-axis, while our screens are just the opposite

I think you're trying to start off-topic dialog here, but I'll bite...

We've discussed on several occasions to widen our default instrument plugins. It's on the radar, but there's little priority around it at this point. It would certainly make sense to tackle during one of the more drastic UI overhauls.

[tresf]

Back on topic... @LocoMatt can you begin a pull request for the graphical enhancements so that we can get this integrated for the future stable-1.2 release?

If you need any help with the pull request, just ask, we have plenty of people with plenty of experience in that area. :+1:

-Tres