The super-shiny GUI mockup thread

Your thoughts, comments, ideas, suggestions, criticism
Post Reply
PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

The super-shiny GUI mockup thread

I saw your Q on Facebook and I came up with the idea to put the level meter inside the volume slider (when the waveform is hidden).

"Lights off - colors inspired by a popular DAW GUI Preview - mock-up" attached :D

What do you think?
And would this even possible to implement?
Attachments
Resonic-player-lights-off.png
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

Andreasvb
Moderator
Posts: 116
Joined: January 29th, 2013, 06:35
Location: Sweden

Re: Hidden waveform: alternative position for the level mete

I like that theme, also good place to have the volume meter.
Did you made it with an image editor?
:ugeek: Windows 10 Pro x64 / Resonic Pro - Beta 0.8.9

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: Hidden waveform: alternative position for the level mete

Yes, I used Gimp and Inkscape. No skinning or programming involved ;)
Copied most of the colors from some preview img of v12 of the DAW with the big orange fruit logo..
thus my effort wasn't that big...

I think Tom is right, that the themes (eyecandy) are not important in the first place.
But maybe he will be inspired in the later development..
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

Tom
Liqube Audio
Liqube Audio
Posts: 969
Joined: December 12th, 2012, 19:12
First Name: Tom
Primary DAW: Live
Location: Inside a face mask
Contact:

Re: Hidden waveform: alternative position for the level mete

Nice mock-up, well-done! Like the Loopyfruits theme ;)

Themes are on low priority, but on the other hand I'm constantly working on them. However, it's not exactly easy getting Windows standard controls - which are really everything but flexible - to go hand in hand with my actual layout ideas. That's also the reason why most developers go with bitmap-based skins.

Will think about how and if the volume bar can be embedded in the level meter. In the end it would only seem to work as pure eye candy, because there isn't much space for multi-channel bars or for additional information (labels, tick marks, etc.).
Join our Discord for chat and talk (not just Resonic related) and beta testing; or the Resonic Users group on FB.

A user interface is like a joke: if you have to explain it, it's not that good.

Sicknero
Getting the hang of it
Posts: 5
Joined: December 1st, 2013, 22:01

Re: Hidden waveform: alternative position for the level mete

the level meter inside the volume slider
I think that's a great idea. Appreciate Tom's comments about the limitations but could be neat if using Resonic as a basic player.

Lovely skin too by the way : )

Tom
Liqube Audio
Liqube Audio
Posts: 969
Joined: December 12th, 2012, 19:12
First Name: Tom
Primary DAW: Live
Location: Inside a face mask
Contact:

Re: Hidden waveform: alternative position for the level mete

Sicknero wrote:but could be neat if using Resonic as a basic player.
Yeah, that's what I thought. Might be tricky though :)

@PHM: Whenever you feel like posting mockups...
Join our Discord for chat and talk (not just Resonic related) and beta testing; or the Resonic Users group on FB.

A user interface is like a joke: if you have to explain it, it's not that good.

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: Hidden waveform: alternative position for the level mete

Thanks, I really like the Loopyfruits colors, too :)

Honestly, I only thought about the basic player version, when I came up with the idea..

I expected that a resonic pro user wouldn't disable the waveform and that (in case the resonic window should be smaller) the user would rather scale the waveform to its minimum (to be able to still detect silence visually etc.).

I assume using the Windows standard controls is more speed efficient than using bitmaps.
Is using them a fixed conclusion? And can't they be darkened in any way? Or could be vector graphics a solution?
(Sry don't have a clue about all that..)

For a "lights off" theme, I think it will be necessary to have dark controls.
Needless to say, that otherwise the contrast will be too high..

Thanks, Tom!
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: Hidden waveform: alternative position for the level mete

Never mind me asking!
Read in the alpha 999 thread that you are indeed thinking about custom controls..
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: Hidden waveform: alternative position for the level mete

I refined the dark theme a little bit..
And attached the svg file (contains additional mockups: with waveform and without // original theme and dark theme) created with Inkscape.
In case anyone else wants to experiment a little bit.
The svg is a bit messy, but I still wanted to share it..

Tom, can you change the thread title to something more descriptive, please?
Attachments
resonic-dark-theme-inkscape.zip
(180.95 KiB) Downloaded 296 times
resonic-dark-theme.png
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

Tom
Liqube Audio
Liqube Audio
Posts: 969
Joined: December 12th, 2012, 19:12
First Name: Tom
Primary DAW: Live
Location: Inside a face mask
Contact:

Re: Hidden waveform: alternative position for the level mete

And attached the svg file (contains additional mockups: with waveform and without // original theme and dark theme) created with Inkscape.
In case anyone else wants to experiment a little bit.
Very nice work on the SVG! Thanks for sharing, this could become useful! You sure put some work into it.
PHM wrote:I refined the dark theme a little bit..
Nice, but imo this one's way too low on contrast and might be too bright for a night theme.

What I would try:
- increase the contrast on the colored elements
- use the first mock-ups mini seekbar background as waveform background, which will make the wave stand out and take the strain off the eyes
- slightly increase font contrast
Tom, can you change the thread title to something more descriptive, please?
Done.


Just some advance information: The theme system in Resonic will allow for live reloading of the theme, i.e. external edits done to its config file are automatically reflected in the application.
Join our Discord for chat and talk (not just Resonic related) and beta testing; or the Resonic Users group on FB.

A user interface is like a joke: if you have to explain it, it's not that good.

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: The super-shiny GUI mockup thread

Thanks, I tried to apply some changes again.
Maybe the theme is still to bright and the contrast isn't right either, but I'm no expert :geek:
And I incorporated a bit more color - don't know if this fits in very well..
Tom wrote:Just some advance information: The theme system in Resonic will allow for live reloading of the theme, i.e. external edits done to its config file are automatically reflected in the application.
Sounds very handy!

OT: I assume the resonic logotype is developing along the development of resonic... :?:
Attachments
resonic-dark-theme-2.zip
(47.43 KiB) Downloaded 277 times
resonic-dark-theme-2.png
Last edited by PHM on February 17th, 2014, 10:52, edited 1 time in total.
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

Tom
Liqube Audio
Liqube Audio
Posts: 969
Joined: December 12th, 2012, 19:12
First Name: Tom
Primary DAW: Live
Location: Inside a face mask
Contact:

Re: The super-shiny GUI mockup thread

OT: I assume the resonic logotype is developing along the development of resonic... :?:
Absolutely. I'm developing the overall design, artwork, theme, colors, and web as I go. I'm sure most users didn't notice much of it over the course of the last year, but when you go back to old versions you sure see the difference.
Maybe you could ask Billain to put his hands on some logo work. I like what he did for Bad Taste Recordings and his own logo.. (he surely could adapt to a little less dark logo..) xD
Are you referring to the japanese-style "BTR" re-branding?
Join our Discord for chat and talk (not just Resonic related) and beta testing; or the Resonic Users group on FB.

A user interface is like a joke: if you have to explain it, it's not that good.

PHM
Likes it here
Posts: 33
Joined: January 29th, 2013, 12:40

Re: The super-shiny GUI mockup thread

Yes, thought I've read somewhere that it's his work but I was wrong.. Credits go to Kristof Tarisznyas, he's from Austria too.
...
And in case of resonic the most important part is performance and usability.. or not? ;)

(mod: sry, accidental edit)
Windows 7 Home Premium x64 (SP1)
Resonic Beta 0.6.3b

Tom
Liqube Audio
Liqube Audio
Posts: 969
Joined: December 12th, 2012, 19:12
First Name: Tom
Primary DAW: Live
Location: Inside a face mask
Contact:

Re: The super-shiny GUI mockup thread

Tom wrote:And in case of resonic the most important part is performance and usability.. or not? ;)
True, but it should be something you like to look at, too.
Yes, thought I've read somewhere that it's his work but I was wrong.. Credits go to.
That's why I was asking. Dude's an incredibly talented buddy of mine and we do actually live in the same city. Fwiw, he's a satisfied Resonic user ^^
Join our Discord for chat and talk (not just Resonic related) and beta testing; or the Resonic Users group on FB.

A user interface is like a joke: if you have to explain it, it's not that good.

User avatar
wshaper
Beta Tester
Posts: 94
Joined: September 23rd, 2013, 21:06
Primary DAW: Reaper, Live

Re: The super-shiny GUI mockup thread

That dark theme looks nice.
I'm not a big fan of the pink cursor, but the green one looks good ;)

Post Reply