Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Maxiseller

macrumors 6502a
Original poster
Jan 11, 2005
846
1
Little grey, chilly island.
Hi Folks.

Firstly, happy holidays to everyone who is indeed on holiday!

I've been fiddling around with the design of my website for some time now. www.music-solutions.biz I'm absolutely NO expert when it comes to layout or dreamweaver and so the two combined don't really help me when it comes to web design.

Nevertheless, I need a good professional representation of myself to present my soundtrack-music to suitable directors and film makers who may be interested in using it. It doesn't need to be too flashy, but more a musical business-card.

So, what do you think? Any comments at all are entirely welcome :) A few things that I was thinking about however:

1) The music listening system - Is it ok to open an Mp3 in a separate window? I ideally want for people to actually download the music which is why I stayed away from things like WIMPY player.

2) Same for the Videos

3) The videos take ages to load - how can I alter it so that quicktime begins to play the videos once it's buffered a bit rather than waiting until the whole thing has downloaded?

4) The color scheme. It WAS light blue, then red and now a teal(ish) color.

Your help is greatly appreciated :)
 
(note: All this is viewing in FF 2.0 on an iBook)

I like the overall scheme a lot. :) It's very simple and elegant. The navigation is straightforward. It is not busy to my eyes.

I think you need to calibrate your display and/or use multiple displays... for one thing, this doesn't look teal at all on my calibrated iBook. There are some related points below.

1) The navigation bar... the blue background doesn't match the banner graphic behind it on all the pages -- it does on the main page, but on the Composer page, it's markedly different. Best to make it transparent background if you can.

2) You might play with aliasing the buttons (ringing around them with some light fixed contrast color) -- I like the colored tops a lot, but they don't stand off against the blue banner well, and they give a visual impression that they are not aligned well because of optical illusion kind of effects, even though they are aligned correctly.

3) Some images take strikingly long load times -- on the composer page, for instance, your face picture was incredibly slow loading. Not sure why.

4) I don't know if this is a browser inconsistency issue... on some pages, there is text that appears in white on a white background (e.g. the words "Recent Projects" on the music solutions page).

5) The set of text-based nav items on the lower right of every page -- I'd pick an alignment of the text and stick with it -- make them all center or make them all left.

6) With respect to the music, I personally would recommend putting a simple flash player that is defaulted to being turned off on the main page, that can play the songs without leaving the page. You can even probably use an object tag to let Quicktime do it. Then keep the download items. Also since you have "download" buttons, put some text somewhere explaining how people actually download these (if they have Quicktime installed, they may play in the browser window rather than downloading).

7) With respect to the movies, also, I think if you make a pop up window or change that frame to show the video in the browser window and put the movie in with an object or embed tag, instead of just linking to the URL for the .mov, it will start playing as it downloads instead of trying to download en masse.

See this tutorial for ways to embed your Quicktime media.

Hope those things help! :)
 
1) The navigation bar... the blue background doesn't match the banner graphic behind it on all the pages -- it does on the main page, but on the Composer page, it's markedly different. Best to make it transparent background if you can.

Gosh you're right, thanks for that one - my god your eyes must be good!!

2) You might play with aliasing the buttons (ringing around them with some light fixed contrast color) -- I like the colored tops a lot, but they don't stand off against the blue banner well, and they give a visual impression that they are not aligned well because of optical illusion kind of effects, even though they are aligned correctly.

Again, I think you are right. Do you think a shadow effect would be ok, or just a light color as you say?

3) Some images take strikingly long load times -- on the composer page, for instance, your face picture was incredibly slow loading. Not sure why.
I've realized that the picture I uploaded of myself was the full image file that I've resized - I will upload a much smaller file instead so it should load quickly.

4) I don't know if this is a browser inconsistency issue... on some pages, there is text that appears in white on a white background (e.g. the words "Recent Projects" on the music solutions page).

I can't replicate this. Anyone else?

5) The set of text-based nav items on the lower right of every page -- I'd pick an alignment of the text and stick with it -- make them all center or make them all left.

Will do.

6) With respect to the music, I personally would recommend putting a simple flash player that is defaulted to being turned off on the main page, that can play the songs without leaving the page. You can even probably use an object tag to let Quicktime do it. Then keep the download items. Also since you have "download" buttons, put some text somewhere explaining how people actually download these (if they have Quicktime installed, they may play in the browser window rather than downloading).

7) With respect to the movies, also, I think if you make a pop up window or change that frame to show the video in the browser window and put the movie in with an object or embed tag, instead of just linking to the URL for the .mov, it will start playing as it downloads instead of trying to download en masse.

See this tutorial for ways to embed your Quicktime media.

Hope those things help! :)

With those final points, I'll read up on what you said as I'm quite new to all this - but many, many thanks for your help. You've spotted a few things that I wouldn't have got! Thanks again.
 
I'm glad to help! I think you're off to a great start.

For #2, I'm honestly not sure. Play around with it and see if you come up with something you like. There was some site that had a very similar interface that I thought did a good job of it. If I can remember where, I'll link you.

But with respect to to #4, I think you need to download Firefox 2, and when you do, you're going to get a can of worms... :(

This is the movie page in FF2:

sherwood-firefox.jpg


This is the movie page in Safari 2:

sherwood-safari.jpg


At least for me, they are very different....
 
NUMBER ONE RULE OF USING IMAGES:

DON'T use any HTML scaling. OS X anti-aliases everything for you so it comes out all nice, but with Windows, any scaled images will come out incredibly pixellated and grainy. If the image is say 200 x 350 in the HTML, then the original file should be 200 x 350...
 
I'm glad to help! I think you're off to a great start.

For #2, I'm honestly not sure. Play around with it and see if you come up with something you like. There was some site that had a very similar interface that I thought did a good job of it. If I can remember where, I'll link you.

But with respect to to #4, I think you need to download Firefox 2, and when you do, you're going to get a can of worms... :(

This is the movie page in FF2:

...image...

This is the movie page in Safari 2:

...Image...

At least for me, they are very different....


My god... what on earth can I do about that? It's mainly the colors of the background - they were those colors originally but have since changed. Why would safari render them correctly and Firefox not?

Any ideas...pretty please!
 
I've now changed the site so that it appears correctly in Firefox.

I've no idea why, but when I changed the backgrounds to a random color, and then changed them back to the color that I wanted, it then appeared correctly! *shrug*

Does it seem better at your end?
 
They do look much more similar now to me than they had (FF and Safari views). You're doing really nice work -- this site is coming along very well. You should definitely be proud of it. It's a great effort, considering this is a new arena to you.
 
They do look much more similar now to me than they had (FF and Safari views). You're doing really nice work -- this site is coming along very well. You should definitely be proud of it. It's a great effort, considering this is a new arena to you.

Thank you very much - As long as it all looks presentable I'm happy, and it's great to hear some feedback. Glad I managed to sort the FF issue out - I'm off now to test it on other platforms!

Again, thanks for your help :)
 
Hi all (again!)

I've made some changes as per the suggestions and would like to know what you think.

The music page now incorporates a flash-based player and I have got rid of the listing of tracks down the left hand side, and replaced them with a .xml playlist.

The page can be found at www.music-solutions.biz/music2

The links aren't live to this page yet so once you navigate away you can't come back via the "music" tab although these links will be made live when the page is complete.

There are a few things that I do need to tidy that I know about:

1) Spelling corrections!
2) Some images need to be the actual size rather than using HTML scaling. I've done this on a couple, but there a few to change still.
3) The nav text at the bottom needs a strict formatting pattern throughout.
4) The image rounded edges/not need to be consistent

But the main thing is, what do you think about the implementation of the flash player?
 
I think that it looks great. I like clean designs that use drop shadows and fountain filled backgrounds to break up what would be solid colors.

The only detraction were the colors on the top of the menu tabs. I might color the active one, but leave all the others an "inactive" neutral color that matches the rest of the theme.
 
the site itself is coming along quite nicely. very clean and simple, possibly to the point that it seems like those parked domain pages. try to fix this and give the site "character" by using images other than stock images and clip art. also, you may want to be a bit more creative with the links bar. good work!
hope this helps,
wmmk
 
the site itself is coming along quite nicely. very clean and simple, possibly to the point that it seems like those parked domain pages. try to fix this and give the site "character" by using images other than stock images and clip art. also, you may want to be a bit more creative with the links bar. good work!
hope this helps,
wmmk


Thanks for your thoughts.

I've updated the design throughout now. I've still got to put in a flash player for the video to make it similar in design to the music page, but this is going to have to wait a week or so.

With regard to the sites "character" - what specific things do you think I could add/remove to make it warmer? I thought about custom images, but then I thought that in order to maintain a strict professionalism it would be more apt to maintain a clean/clear look...now I'm not sure!!

Anybody else have thoughts on this?
 
This is just a random thing I noticed by accident... for your first commissioned film sample... is it intentional that the aspect ratio is wonky? It looks like you've squished 16:9 to 4:3... the second one wasn't like that. But forgive me if it was just part of the artistry.

The flash player on the music page isn't the prettiest one I've ever seen, but it works very easily. :)
 
Actually it's because at the time, that was my rough cut that ended up being the clip shown here.

I'm still waiting for a DVD for the final thing! It will then look normal! I was only required to write to the cut given and then it was going to be put to the picture by the editor.

I experimented with loads of skins for the music player, but I couldn't get any to sit in the site looking as though it belonged! I think most of the skins I were looking at were not designed for simplicity!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.