Free Sound editor and Creator for FX/instruments

Started by iWasAdam, October 31, 2017, 07:13:08

Previous topic - Next topic

iWasAdam

Free tool for mangling audio, changing the volume, cut, paste, and create new sounds
https://adamstrange.itch.io/qasardio

Create brand new sound by using simple and easy waveforms


even draw your own!


Then edit the results and fine tune them:

peteswansen

Holy Cow Adam,  I just downloaded this from Itch.....I am really impressed....  I have a lot of hardware synths but also like software based sounds too!
Congrats!  for some of my "music"  :) goto Soundcloud .. search for "gpete"

Derron

Is where a reason for using "non-standard-gui" thingies for the toolbar and the likes? i looks a bit like a "game application" or "toy around tool" rather than a serious "tool". I would also suggest to not make it look "flat" but a bit heavier on contrast. In other words: orient a bit on the big sound-editors/music-creation-tools. Means darker widgets, "luxurious" look.

This is just a visual remark as I did not try your tool yet (this might change once you got known to the linux side of monkey2)


bye
Ron

iWasAdam

derron, could you post an image of the sort of style you are thinking of?

the flat style originates from early Fairlight sound studio recording gear

Derron

#4
Dunno, just google-image search for "daw studio" or so - look what their software looks like
https://www.google.com/search?tbm=isch&q=daw%20studio&tbs=imgo:1

Think most of them use some kind of "gray" or slightly tinted (cobalt + gray) background (I prefer "titan"-gray) + some metallic or black-plastic style buttons, knobs, sliders. So they intimidate a "real world device" rather than "software".


You will also recognize, that they split "panels" visually. While you have these red header bars, the content below gets no "border" around all widget groups. The "Visualization"-boxes have borders but the slider-groups not. Imho it misses bit of "contrast" to group things.


So maybe look at google images for "daw screenshot" and see how they do things there.

As for your toolbar the flat look removes a lot of contrast - it somehow needs something else to distinguish it as "clickable buttons" rather some kind of imagestrip.

Scaling: look at the sliders for "loop" and "repeat", now check slider marks - there are some thicker and some lighter ones - I first thought it is some kind of "START tick tick TICK tick tick tick MIDDLE tick tick TICK tick tick END" thing but it seems more to be based on some scaling issues. Imho widgets should not scale in most cases but rather loose "details" (so show less "tick" lines in this case)..
Best thing is to have widgets either scale "step" wise (so lines keep consistent line heights). Else you need to do some kind of bilinear filtering which allows "subpixel-scaling" but this then of course only, if scaling gets used in multiple spots of the app (it would look very odd if 99% is pixel crisp/sharp and then there is this one widget looking blurry).

@ loop / repeat
The top portion seems to be some kind of "button" to enable/disable the functionality? With that flat look it could also be some kind of "header" (similar to the red headers like "display" and "fx"). If it was a header, it would look inconsistent to Volume's "In | Clip | Out" sliders). If it was a button I would suggest to use some kind of "on off" indicator. It is a "switch button" and needs to either get tinted when "active", receive a "pressed/sunken" look (not possible with flat) - or my suggestion: you prepend a small Rectangle before the text: it is dark green when disabled and a light green when enabled (like a LED/lamp glowing).

@ Colors
You could think of using different colors (hue or brightness) for captions and values. So a "1.0" below a slider is a bit darker (between widget "tick line" gray and "caption gray").

The icons below the wavetables appear way brighter than the texts - imho in the screenshot they look like "look at mee!!!!!". The clickable icons of the toolbar (first 2 ones) have less contrast than the wavetable-symbols.



Edit:
I am talking about the first screenshot. the "on off"-switch button could design-wise become similar to the shortcut-indicator-triangle seen in the bottom of the third screenshot.

bye
Ron

iWasAdam

mmmm. criticism accepted, but maybe you should also download it and give it a try as well. that was you could get a feel for what and how it does things?

the base design cues come from:

and

Derron

Only thing I ever done with "music" was using a microphone and doing some kind of "journalism" + "here comes the next song" thingies - and this was almost 2 decades ago. Ok, lied, I recorded a christmas story for our website visitors 10 years ago :)


@ design cues from from:
Ao you see that they use these white "vertical lines" to make things "disctinct" from each other?
Also they have this small red bar on the bottom of an area - to make it look like "here it stops" - which is missing in your design.


@ screenshot
There you see that they used "sunken borders" to split content areas apart. Also they did not use flat design buttons as this just needs other ways of expressing a "hit/hovered/active". A switch button - if designed similar to a normal button - needs another element to indicate whether it is pressed or not.

All in all I would suggest to "increase contrast" as it helps distinguishing elements. Having everything "soft" contrast wise might look pleasing to the eye first, but creates more strain when trying to find things. Such "low contrast environments" are good if you eg. moved the hull/curves/points of the tracks via mouse 99% of the time, and only click here and there when adjusting final stuff or selecting a preset. So if the focus is on the adjustments via slider, some button clicks, select+add stuff etc. Then these elements should be more vibrant, colorwise-"tinted" .... so the emphasize lays on them.


In your first screenshot you have the "asset" panel - it has little borders around them. See how this separates them nicely?
The right ("main content") area and the left "action panel" have a border/spacing which is same width than on the most right side. Check. But the right side's top spacing is less than this area - but more than a spacing of the top-left-toolbar.
Spacing below the wavetables-sliders (values) and "Display / FX" is bigger than the sliders (values) on the left side to the blue footer. So Somehow areas seem to be inconsistently designed or "layouted". Think this would become obvious if you put a simple outline around each "block".

These little issues might also lead to the overall look being somehow "improveable". There is just something... missing (polishing-wise).


Is where a reason why the wavetable-icons look a bit "jaggy" ? Some scaling? Or the outlines (and the contrast created by it) ?


PS: good you accept the criticism - as always it is done to help you (and your tool) to get better than before - or to discuss on why my critics might be wrong or somehow "incorrect" - so helping me to learn something new.
 

bye
Ron