I like the design a lot. My first impression was this is really cool. After looking at it for more than 30 seconds, then it sinks in that there isn't much beyond the general look and feel that grabs me. I suspect this will change dramatically once you have the real content and can flesh it out a bit more.
So I think it's an excellent base in which to build on. Great work.
I like the concept, simple and only what you need. No MySpace crap.
This is exactly what every musician needs. You might want to check out some possible integration with Jimmy Winters apps RockDex (http://rockdex.com/) and Music Arsenal (http://www.musicarsenal.com/). He had talks with Google for a possible sale.
Overall, like it. Better website solution for musicians.
Nice job Chris! I like it a lot. I always question non-traditional navigation placement. I feel like put navigation "below the fold" is risky. I also feel like the upcoming shows need a bit more life. It's not very engaging. Are there going to be links to purchase tickets? What if the client wants more items listed? This is the only part I feel has been fully explored.
Really nice textures and a great look overall!
Yeah it's definitely a little "risky". I did make sure it's cool on 1024x768 sites, so hopefully that's good enough.
The upcoming shows could definitely use work, especially in the department of what to do when there are many more than 3 shows.
I think it's great. It really stands out and lets you know what (who) this site is about.
The bird throws me off about and I wonder what that's all about.
I also wonder where the main content will go on the bio/album pages and whatnot.
The bird is iconic of the album and the album artwork, so hopefully if people have that it will feel like a nice continuation.
If you click through to the link above, you can see how the subpages work...
Nice graphics
I think that the graphics area its completely well thinked and executed, but in the interface there some issues, some of them I already readed them up here. I think the three main elements (navigation, upcoming shows and sample tracks) should be more like related, maybe with a better design structure could be good move.
Ah, yes, look at that. A link. Imagine that... Clicking through, I like how you've done the other pages. The 2 things i spotted are: 1. The photo browser. Everything else has nice animations/transitions. When you click on a picture it's just like "BAM! Here I am!". 2. The play/pause interaction. It seems a little counter-intuitive to me. After hitting it a couple of times I saw how it worked, but usually you would click a pause icon to pause and a play icon to play. Not the reverse.
Love the design, the artist being placed up front & center (literally). Really love the transition from homepage to sub-pages, moving the image of the artist from center to lower right (you'll post on your technique, right?). Love the overall color tone. I am left wondering about two things though (doesn't help without the textual content); 1.) What's with the peacock?, and 2.) what type of music artist is he? Can't figure from the imagery alone. Great job!
Great design and great functionality. On the bio page it's a little tough to read the font. It appears there is a drop shadow via css, but it's still a little hard to read over the darker portions of the background. Just thinking of some of the folks with bad eyes.
I'd make the labels for the play buttons clickable also. It can be a bit difficult to click on those little play buttons. Like the animation between home and inner pages
Great job Chris. Clean... like the background. Looks like Ewan McGregor's cousin.
This could be another screencast on css-trcks.com
I really like the overall design, but feel his body is out of proportion with the rest of the page. Rather like its condensed or something. Maybe its because its 1 dimensional that makes me think its been put there instead of being natural. But I love the colors and background design
This site isn't run solely by Flash, yet when you click on the links you get some very fluid/smooth animation from the js that's very eye appealing and unique. Great Job.
Chris I do like it. And just like to say that curry in the photos page looks amazing!
The cut out work on that main image of him though could be improved. There is the odd white bit still in there from the background which takes away a certain feeling of quality.
I agree with an earlier comment that you could make the playable tracks and upcoming shows stand out more.
The text on the about/bio page has very little contrast with the background texture making it pretty impossible to read.
Are those upcoming shows going to be links when real content is available? It might be nice to have the option to find out more about them from the venue itself.
As I began with though, I do like the design.
Really really fooking amazing. The best part is viewing the source. Beautiful html.
I wouldn't normally give 5 stars for "Engagement" when there's no engaging content, and the music's kind of off-putting. But once I realized there was no Flash, I just clicked all the nav items again and again and again. I'd call that pretty engaging!
Love the inline audio player js!
The ONLY problem, and this is somewhat major, is the obscured nav items. I switched over to view it on a Macbook and the navigation was impossible to get to. The lack of scrollability (I realize this is necessary for absolutely positioning your slide effects) means I can't scroll down to see them. On a Macbook, in Firefox, with the Web Developer toolbar, you're about 40px short to see the entire nav area. I'd go ahead and chop off the top of his hard.
Brilliant work Chris!
Oops, I meant to say "the top of his head." Or maybe I was going to say the "top of his hair." Musta mixed the two.
I'm gonna get that resolved for sure. I'm sure I can make it so you can at least scroll down to the nav. it works with your average Firefox browser with tabs open at 1024x768 now, but if you have a bunch of toolbars or other crap it would get cut off.
Hey Chris,
I really dig this design and the javascript transitions between pages. It really hits home the point that your homepage should be an accentuated version of your main content pages.
The only suggestion I would make is regards to the linkability of the site. The problem with AJAX (or JS) based sites with a single page build is that if I want to email my friends a link to the bio page or photo gallery, it's always going to take me to the homepage.
Perhaps you could include anchor tags to solve this problem. Something like http://chris-mcgarry.com/#photos. Then, you can just read in the anchor on the onload event and trigger the proper content, etc.
Anyway, cheers. Great work, and I actually enjoyed this guys music.
I really like the concept and layout of the site. It is non-traditional in the sense of web design, which is how music sites should be. I love the use of js animation.
The one thing that really bothers me is the shadow on the gray banners at the top and bottom of the page. It just feels like the shadow should only exist on on side of the banner (such as the top of the top one and bottom of the bottom one) to correspond with the glow on the background. And when you pause a song, the pause icon is offset just a little, so you are able to see the bottom right of the play icon behind it. Also, will the upcoming shows be links to the venue?
Otherwise, great work man.
Haha...this catches my attention immediately when I look at it.
I have one concern though. Isn't the position of the navigation in a rather "hard to find" place. I mean, you have to scroll down 600px or so to reach it. I really like how the navigation is placed to cut off the image of the person, but it may cause some confusion with some people.
Maybe you could shrink the image of the person a bit to bring the nav bar up and bit but its your call.
Are you going to have the content below the navigation bar?
He is a little too big and cut off. It's an uneasy cropping, resulting in an uneasy feeling. But overall..AWESOME! I'm being super picky. Love the Egyptian Pigeon..is that what that is?
If you're going for the artsy, creepy, aged look I think you hit it. Here are a few of my thoughts though:
Very Nice use of js, right down to the audio player. Not sure if the artist is concerned about this but the location of the mp3's can be found in the source code and easily downloaded, not a huge deal if he doesn't care.
I love it. Absolutely great.
Very personal, and not noisy, goes straight to the point, without too many distractions.
Well done.
It's very clean and minimalist design. I feel it is not readily visible to the user about the 'musician' angle. How about making it prominent in the site?
It's very clean and minimalist design. I feel it is not readily visible to the user about the 'musician' angle. How about making it prominent in the site?
What a great idea! Nice use of photography and textures. Just the way you balanced the content is worrieing my eye. The right side just has three lines of text and the left one big boxes. Maybe you should do the boxthing on the sampletracks also and put down the album stuff a little.
Looks great, but the peackoc looks stange, what is the meaning?
Big and good quality portrait picture (with a gold duck!) and a background to give a proper ambient - nothing to add, I love it!
Design works well, and is functional...
This is a great site! It feels artsy and grand without going out of bounds. The type flows well along with the visual heirarchy. Everything is also really simple and well laid out. It might have to be dressed up a bit in the end but for a rough design, its very successful!
as a photographer i can only tell you to keep more attention to photo - make it sharper and play with effects: improve contrast, play with color - make photo and graphic part like it is one unit
Chris,
Great stuff! really like the general feel to it, it has good spacing and doesn't crowd the eyes. Good idea to use big portrait image and the colours/saturation levels blend it nicely with the texture/fading background. The feel matches his style of music which is a bit moody as well.
I had to look at the URL to work out what his name was due to the handwritten title font. Would the type used on the album cover help with reading and add continuity that was aimed at with the duck? Same problem with the album which i am guessing is call 'and the weary eyes reply' but its not that clear to be honest.
Navigation works fine in my browser and is above the fold. It is quite close to the white url info bar that appears in Chrome. Which does distract me a bit when moving cursor through the navigation bar. Dont know if that is common thing on other browsers as I am a strict Chrome convert.
I like the sliding portrait effect on page turns, if you can i would slow in down to make it more prominent, as its a little quick and stuttering. Long slide with a nice amount of ease would be good. But that's it that is actually possible. All in all, great stuff as usual from you
Joe
Beautiful design! Enjoyed the simplicity of it. HTML5 rocks!
What I would work on: the "Photos" transition is a bit delayed, maybe include a loading indicator. Might also be nice to break the whole slide in this way, slide in that way and go for a fade in, fade out.
Major issue with the site: If you reduce the height of the browser your navigation becomes lost with no option to scroll. You need to find a way to allow the site to scroll up and down.
Could the audio be loaded and played on within the design instead of going to a new page? Could you do a light box type of effect, similar to how you did the photos?
What browser are you using? the audio plays in the same page for me with out any page reload or change.
I am on a Mac using Safari Version 4.0.5. Does the same in FireFox Version 3.6.
Click on the sample tracks on the front page sends you to a new page.
Design - A very nice design, but I think the music has a bit more attitude than you get through here. Perhaps it's the mellow portrait.
Orginality - After having a look at similar music websites I think you're way ahead and the use of js animation really make the site take off.
Layout - The front page objects (Upcoming and Tracks) are all over the place. Align from center and use similar backgrounds. Use a a grid layout.
Typo - The bread text is hard to read over the faded background. Nice effort with the shading, but perhaps a see through background would improve readability. The transition is very cool!
Photo page - Yes, very nice curry picture. As you open the slide show the web site branding gets lost. Keep it around somewhere to hold it together.
Beautiful but needs more bluegrass grit attitude.
I think the navigation placement is appropriate given the actions you want people to take, which is presumably look at the shows or listen to music / buy the album. Those things are at the top, where people will see and interact with it. However, I'm on a netbook and I can't scroll to get to the nav! I think that's a pretty huge issue. Maybe you need to set a height on something to make sure the page has enough room to scrool.
On subpages I think you should move the main nav up to the main grey bar because it's more likely to be the main method of taking next steps.
The only other thing I would say is that I don't know what kind of music he plays for sure by looking at the design only. I'm imagining it's sort of indie? If it's not or there would be an easy way to communicate the music style visually, that would be a plus.
I think the overall design is good. The color scheme is very soothing, text placement if also a plus. I can easily identify portions of information gradually. Good play with the font sizes and faces.
The bird gives a flare of colors but again is too constrained with the main picture.
Another thing I would suggest is maybe having some text going over his holder, Or maybe having is image not so trapped by the elements around him.
Good job!
I like the originality of the work is there, I like the simplicity of the design. My largest gripe is that I don't know where to look first. I guess I center on the person, however it would seem more valuable to point the viewer towards the content you're attempting to distribute.
At first I thought what a bland site, but then then clean and "non popping" way makes it stand out from the crowd.
But where is the user supposed to click? "Can I click the upcoming shows?" "Oh, that's a navigation bar down there."
Make the actions stand out!
Good start, I like the colours and the way you layout it but I'm not sure about the musician's picture. Maybe as a Concert Poster on the Wallpaper?
Peoples already commented what I want to say, like the bird, placement of tracks, readability etc. only one thing I want tell you specifically is that your site seems to be personal website and not personal website of musician in first glance i.e. before reading single word on webpage.
I thing it will be better if you can replace bird with tune of music or something like that.
I like the concept of your photo at bigger as the whole page.
Overall 4 star.
I like the site, especially the easy to use interface and the animations after each navigation click.
The face is very engaging. It really draws the viewer in because it is much more personal than most other websites. I would also put the upcoming shows and sample tracks in the navigation so that they are doubled indexed.
Chris, great job! The textures, colors and effects, I loved it. Just one thing: I think that the musician may be smiling, he is so serious. I´ll use a photo with more personality... that´st it!
I'm not keen on the bird, and the cutting on it isn't too great(might be my screen though)
Other than that, you have a great design.
Good to see you on here Chris, been following your blog for a while now.
I definitely like the idea. There are a few things that are a little weird.
The first thing is the photo has a horrid green hue, and it give the impression perhaps he is sick. I'm guessing the photo was taken in front of a green screen. You should adjust that in the curves settings in photoshop so that it matches the background you chose better.
I almost wish the colors reflected the album a bit more.
Also from a photography stand point the angle is quite high and this makes his head look huge. The body width should be about 2 1/3 heads. It's a little tricky to the eye. while that's not always a bad thing perhaps just make sure it's saying what you want it to.
Other than that perhaps some indication of activation on the player buttons other that the dark highlight. I would suggest the play icon turning into a stop icon.
Overall i really like the site! as a musician i would love to have a site like this.
PS i just noticed when you click on other links i can see the upcoming shows half in the left hand side. My screen is 1680x1050 and the general public doesn't have screens that big but perhaps making that fade out as well as slide away. The subtle animation between the 'bio' and 'about' made me click 'about' twice because i didn't realize anything had happened.
Ha i just realized that this was a Chris Coyier site... Should have known all that HTML5 and sweet jquery
Musician=design. Simple as that. Its DOESN'T matter if the musician is not George Clooney. He seems to be a musician. I loved the idea.
I like just about everything about this design.
Things I like...
Things I might tweak...
Get a more flattering picture. Smiling or singing would be a good start. The artist looks a little...greasy... The combination of his slicked hair, unshaven face, slight double chin, chest hair...kind of reminds me of my mechanic more than favorite artist.
Lose the golden goose unless it means something that fans would understand...I don't get it.
Nudge the Upcoming Shows content to the right. Likewise, nudge the Sample tracks to the right. This will help balance out your content (as far as distance from the pic), and it will also make your sample tracks a bit more readable as it gets into the darker background.
Be careful of your navbar placement. I love the design on my widescreen monitor, but it loses a lot of its effectiveness on my laptop because the navbar isn't visible down there on the bottom. You could lose click-throughs if people don't see the navbar. They are traditionally at the top for a reason...if you're going to buck the system (which I think is a great idea wherever possible) make sure to do it in as user-friendly a way as possible.
Sweet concept, though. Definitely on the right track!
Well done. I like the layout and the artistic nature of this design. Its bold and powerful yet subtle enough to be changed around when needed.
Again all I would add is a way for interested fans to be kept up to date on the artists.
Hi Chris,
After linking to the presented site, I just have a few suggestions.
The right side of this presented guy's hair needs to be photoshoped more. To erase the white edge on it. I think it would look a lot better if he had a shadow fitting behind him corresponding to the light direction hitting him and his size as it changes from page to page.
The typeface being white on a light background makes the type really hard to read in some areas. So either by changing the color of the typeface or to make the background darker.
The "little "e" is lost as far as legibility goes on all pages. Such as in the word "Theater" and "lovebird". This can be solved by either upping the size of the typeface or choosing a more ledgible one.
I would also left align the title "Chris McGarry" to the typefaces blocks below it. As well as "New Album and the..." to the left alignment of "Sample Tracks" below it.
To stay consistent I would change "About The Album" to just the single word "Album" as a linking word by "home","biography", "photos" "contact".
I think it is fun how he stays the same yet, shifts differently from page to page. Great concept!
what are you selling? these people that are commenting on your site are designers not marketers. How about focus on WHAT you're selling which is the MUSIC AND the ARTIST. Its an interesting design but it doesn't make me want to click on anything because the sole focus is on this guy. Try refocusing the objective of the page to what you want me to do instead of sticking that guy in my face.
I like the design layout but my first impression is that the photo should be "brighter".
Very well done. Nice use of textures. His blank stare makes it interesting.
Just let me tell you that I love, love your site, it's awesome clean, to the point, everything is there, just one click and you there (I went to your site). My only comment is on the scroller on the About the album page, it seems to brake the nice cutting edge of your design. Check out the following link for a custom scroll: http://www.hesido.com/web.php?page=customscrollbar, hope this help. Overall the site rocks!!! thank you