Finally finished the homepage for Album Jacket. Will still probably continue to play with some of the textures and effects but the layout I'm pretty happy with. Also check out the live site at http://getalbumjacket.com.
Also I should note that the iPad app itself was designed by @Sean Farrell and the icon by @Asher.
about 1 year ago
Looks great man, you're taking it to the next level!
great work chris, really like how everything is laid out.
the top of the gold stars seem to be bleeding out into the grey background, but otherwise loving the look and feel of this!
Very Crisp and Clean mate !!!
@Dave Yoon you are 100 percent right. I'm using the same gold color as on the inner UIs, where the stars sit on a much lighter background color. I need to adjust those stars a few shades darker.
Looks really great!
omg! I love this style. Great job mate.
Great work you two @Sean Farrell and @Chris Brauckmuller Looking good!
So beautiful. This is insanely awesome.
Looks really nice. :)
Don't forget to use black status bar in the iOS App tho!
"Rediscover" to "Re-discover". Seems a tad bit better with the dash. Other than that, A++!
That's a good suggestion @Viatask. Will definitely try it out.
Really good. Congratulations. :)
Now the critiques...
This is definitely a very well made design, but there is something that I believe that can be improved. The shadow after the wood section. It is too strong, and makes the perspective to seem off. I would reduce the shadow size, and probably it's opacity.
The input field can be improved. Remove the gradient, doesn't work. Leave it white.
In the bottom section there are problems with alignments, specially the headings related to the content bellow them.
Regarding the bottom background, I would leave it pure white (#fff), I know there is need for contrast specially that white box (Chris Brauckmuller section), spacings here also need improvement, and the font size isn't cohesive with the rest of the layout. Looks off.
I think the strong part of this design is obviously the top section, simple, easy to follow, nice details, very well executed, the bottom part needs refinement and a closer attention to detail.
I hope you take my critiques well, I'm just trying to help. :)
@Eduardo Santos - thank you for taking the time to write such detailed feedback! I really appreciate you having taken the time to analyze the small details.
On the shadow - I'll admit, I struggled with this piece for quite a bit. What I'm trying to convey is that the upper wood shelf piece hangs over quite a lot from the rest of the background, for argument's sake let's say an inch or two if it was real life. If the light source was coming from the top, this would cast a pretty decent-size shadow. I'm totally open to playing with this but I think reducing the size of the shadow too much would lose the impression of depth.
Good suggestion on the input field. I think that pure white is too harsh, but maybe a flat shade of light gray is called for.
Regarding your comment about the alignments of the headings, do you mean that the left edge of the headings is not aligned with the left edge of the content, or something else? If it is the former, it's because the text box object in Fireworks inexplicably pads in the left edge of the first letter by 2 or 3 pixels. It annoys me too, but it would be correct in the final coded out version.
As far as the bottom background, I'm actually just keeping it consistent with the background used throughout the iPad app and the rest of the site. Maybe could tone back the grunge a little but I think the color needs to stay the same. Your comment about the font size, spacing and alignment is the thing I'm most curious about. What would your suggestion be for how to improve these items?
Thanks again for your critique. Fantastic job on the Mobler site, by the way!
@Chris Brauckmuller , Thanks. No problem, I think constructive feedback is always better than "great work", or "looks good".
Regarding your questions.
Shadow: I understand your idea. It makes sense. But it still looks bad in my mind. Let's make an exercise. Is you computer table made of wood? If yes, you'll notice that the ground is almost "dark" because there is no light after it right? But on the top of the table there is light.
The main issue here, is that the shadow looks artificial, there isn't a "organic" feel. What I usually do is to create contrast. If you have wood and a drop shadow, then the background after it should be a dark gray. Why dark gray? Because should be enough color grades to create the drop shadow in order to enhance the depth. (I can design an example if you need). This would make the wood section feel more natural, without the "fake" shadow.
But obviously, now we have another problem. The bottom section needs to contrast with the header, which is already "black".
What I would do. I would create a full width #222, or #333 background after the wood, covering the entire 3 column section. (Music Discovery made easy, etc....). It would end on the separator.
The bottom section would still have the same background. I would still make it lighter.
About the typography. The issue here is that the size of the text is very small on the white card for example. There is too much contrast between the 3 column text and the white card text. (they're not equivalent in terms of size). I know you need to catch the users eye attention to those 3 column section, however you can do this by adding the dark background, it would add the needed contrast.
In terms of spacings, you're right, I didn't know you did the design using Fireworks, so I apologise. :)
The bottom headings also need more spacing. "Meet one of our musical tastemakers" and the content bellow. The same for the "hot new albums" etc...
I like the footer, it is simple and clean. but I would add contrast there.
A white full-width background that would end (vertically) at the footer separator. :) Just an idea of course.
Keep working on it! You have here a seriously nice design at hands, imo with a few tweaks and it would turn a masterpiece.
@Eduardo Santos dude these are all great suggestions. In particular I'm going to give the dark background under the wood a try. You're 100 percent right about a drop shadow looking its best when it's enhancing contrast, not decreasing it!
Chris, the banner hero is insane!
Very cool. Awesome work. (:
Buttons are best I've seen in a long while. Colors are the best! Isn't that an ipad 1?
smashed it bro! those buttons are amazing! great work! i think the top could be implemented differently?
@Robert van Klinken I'm using the iPad UI from Teehan + Lax. http://www.teehanlax.com/blog/ipad-gui-psd-version-2/ If anyone has a suggestion for a more up to date mockup I'm all ears.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter