Author Topic: [WEBSITE v2] MusicBee website and forum redesign  (Read 548324 times)

phred

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 9283
+1 on the image!  Nice job.
Download the latest MusicBee v3.5 patch from here.
Unzip into your MusicBee directory and overwrite existing files.

----------
The FAQ
The Wiki
Posting screenshots is here
Searching the forum with Google is  here

vpsaxman

  • Full Member
  • ***
  • Posts: 197
this looks great. The only suggestion i have is the MusicBee and sub-text may need to be a bit stronger to stand out from the words in the top right corner

You're right. Another option may be to blur out the image or increase the opacity of the overlay, but either way I agree that the text that's on top of the image should be bigger / use a stronger font anyways.

+1 on the image!  Nice job.

Glad you like it! The original can be found here: http://i.imgur.com/DFIKXwa.jpg.

The only thing I tweaked is that I resized it to 50% (it's still huge) and got rid of the DELL logo. If the image is not sharp enough, I could shoot it again with my DSLR instead of the phone I used here.

@AvikB I couldn't make sense of how to crop the image for the best results on the website. The way it looks in the screenshot I posted above focuses on the better areas of the photo IMO but as the image changes size as you resize your browser window, it got confusing real fast. What do you think?

AvikB

  • Sr. Member
  • ****
  • Posts: 945
Could something like this work for the header background image or is it not high end enough? (this is my desktop)

I'm trying to figure out what size would be best for that header image in order to put interesting elements in the frame too.

👍 Nice image, the headphone in that image does not look right(can't quite catch what is wrong with it though) :S

this looks great. The only suggestion i have is the MusicBee and sub-text may need to be a bit stronger to stand out from the words in the top right corner
You're right. Another option may be to blur out the image or increase the opacity of the overlay, but either way I agree that the text that's on top of the image should be bigger / use a stronger font anyways.

yeah i agree, the font needs to be stronger. I might choose a different font. Blur is a great idea, specially to focus on a specific area.

The only thing I tweaked is that I resized it to 50% (it's still huge) and got rid of the DELL logo. If the image is not sharp enough, I could shoot it again with my DSLR instead of the phone I used here.
it would be a great if you could send an image from DSLR, the current image has too much noise. Also make sure the angle is a bit more high.

@AvikB I couldn't make sense of how to crop the image for the best results on the website. The way it looks in the screenshot I posted above focuses on the better areas of the photo IMO but as the image changes size as you resize your browser window, it got confusing real fast. What do you think?
That won't be a problem, i can make sure that even with resizing size the focus area will always get more visibility.


Sorry for this late reply, it was busy weekend for me :)

vpsaxman

  • Full Member
  • ***
  • Posts: 197
it would be a great if you could send an image from DSLR, the current image has too much noise. Also make sure the angle is a bit more high.
Yeah I thought that could be a problem, although,, with the overlay, noise isn't really a problem.

When you say a bit higher angle, how do you mean? Would you want me to be further away from the subject (include more in the shot?). The reason I picked this angle is because there's really nothing of interest around my desktop; quite the contrary actually. You really don't want to see what it looks like around it. ;) But I'll see what I can do.

the headphone in that image does not look right(can't quite catch what is wrong with it though) :S
Is it where they are in the picture or how they are laid down?

AvikB

  • Sr. Member
  • ****
  • Posts: 945
When you say a bit higher angle, how do you mean? Would you want me to be further away from the subject (include more in the shot?). The reason I picked this angle is because there's really nothing of interest around my desktop; quite the contrary actually. You really don't want to see what it looks like around it. ;) But I'll see what I can do.
here is how i think it might look better:



the red line represent the current view, the blue is what i have in mind. I am trying to capture your desktop(monitor) more, rather than desk.

Is it where they are in the picture or how they are laid down?
yes the laid down position does not seem right.


vpsaxman

  • Full Member
  • ***
  • Posts: 197
Well if I fill the shot with mostly the monitor, I can get rid of teh headphones. I'll see what i can do in the next few days!

AvikB

  • Sr. Member
  • ****
  • Posts: 945
This is a free alternative to UserVoice: http://www.userreport.com/
Looks really nice.

But couldn't something similar be implemented directly on the website rather than use a 3rd party platform? Or am I underestimating how difficult it would be to implement?
By implementing, if you mean a custom made for the msucbee, then yes it would be time consuming, not difficult. There might be other third party solution, but i haven't checked it yet. Userreport, that you suggested me, is a good solution, but i think it uses their own site, so you won't get 100% control or look.

Few issues:
It would require steven to check and mark those ideas/features(if planned or not).
require admin/mod monitoring for spams
Require additional account(it won't get integrated with current site's forum login).


If you want full integration with the site, then a custom made is a good solution, it won't be hard to get basic voting/commenting functionality(not as much as addon center for sure :| ), but since i am the only guy doing the coding part it will require some time.
And i already have have few things on my roadmap. specially the notification center and addon center/dashboard).

I may consider putting it on my roadmap, but it will require mod/admin/steven to monitor it.

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3830
  • MB Version: 3.6.8830 P
Well if I fill the shot with mostly the monitor, I can get rid of teh headphones. I'll see what i can do in the next few days!

or try hanging the headphones on the monitor corner
and maybe take the picture from slightly below so you are looking up at the monitor from a shallow angle
MusicBee and my library - Making bee-utiful music together

vpsaxman

  • Full Member
  • ***
  • Posts: 197

or try hanging the headphones on the monitor corner
and maybe take the picture from slightly below so you are looking up at the monitor from a shallow angle
Great ideas! I'll try a few things over the weekend.

AvikB

  • Sr. Member
  • ****
  • Posts: 945
NEW UPDATE
this update is mainly for addon center. mostly cosmetic changes and design tweaks.
Here is what is new:

A blurry colorful background will be generated from the thumbnail. It reminds me of osx blur effect, and look gorgeous.
The thumbnail must be uploaded to imgur or other image hosting that allows CORS, any private domain(personal site) won't allow it.
how it looks:
endeavour1314's skin:


also bee-liever's Peeaches n'Cream skin(blur looks really creamy :) )


phred's on the look out has icy blur effect.
All of these are generated on the go(client side), addon devs don't have to do a single thing.

here is the links to visit these addons:

http://test.getmusicbee.com/addons/1/win10-style/
http://test.getmusicbee.com/addons/2/phred-phred-on-the-lookout/
http://test.getmusicbee.com/addons/3/peaches-ncream/


i will submit few more addon to test this feature out. Also there is a More from X section at the bottom, which should be working properly.

NOTE:
in the next update upload to mediafire will be allowed, this will allow a central repo, also direct upload will make things easier. I was planning to go with google drive, but decided to go with mediafire because of their easy to use api, storage, options and bandwidth.
I did planned to use onedrive, but their documentation awful, and i can't seem to find sitewide upload example.

let me know if you have any issue with mediafire in general.
You won't need any mediafire account, only logging in to dashboard is enough.

vpsaxman

  • Full Member
  • ***
  • Posts: 197
How's this?



This would look like this unaltered on the page:



Full size HERE

AvikB

  • Sr. Member
  • ****
  • Posts: 945
How's this?

Looks good. I have updated the demo site to reflect the changes. also i did tweak few things in photoshop.

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34296
personally i still think the initial picture provided that i had a minor objection to (the figure with the big node/ backpack being at the centre of the picture) was the best. I was even happy with the photoshopping on it to remove that feature.
But if others done agree then i am OK with the current one

Bee-liever

  • Member
  • Sr. Member
  • *****
  • Posts: 3830
  • MB Version: 3.6.8830 P
personally i still think the initial picture provided that i had a minor objection to (the figure with the big node/ backpack being at the centre of the picture) was the best. I was even happy with the photoshopping on it to remove that feature.

So far I would agree with Steven on this, preferring one of the shopped images that removed the figurines.

@ vpsaxman, maybe you could try re-creating a similar image with your set up?
MusicBee and my library - Making bee-utiful music together

vpsaxman

  • Full Member
  • ***
  • Posts: 197
personally i still think the initial picture provided that i had a minor objection to (the figure with the big node/ backpack being at the centre of the picture) was the best. I was even happy with the photoshopping on it to remove that feature.

So far I would agree with Steven on this, preferring one of the shopped images that removed the figurines.

@ vpsaxman, maybe you could try re-creating a similar image with your set up? 
I'm afraid not. My space is just so different. But I would have no objection to photoshoping the shot with the big nose guy and using that instead.