Album Jacket Homepage

Ajhome

1 Attachment

31 Responses (page 1 of 2)

  1. Chris Brauckmuller Chris Brauckmuller

    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 2 years ago

  2. Sean Farrell Sean Farrell

    Looks great man, you're taking it to the next level!

    likes

    about 2 years ago

  3. Dave Yoon Dave Yoon

    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!

    likes

    about 2 years ago

  4. Kartik Mahant  Kartik Mahant 

    Very Crisp and Clean mate !!!

    likes

    about 2 years ago

  5. Meng To Meng To

    Love it!

    likes

    about 2 years ago

  6. Chris Brauckmuller Chris Brauckmuller

    @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.

    likes

    about 2 years ago

  7. Jeremiah Wingett Jeremiah Wingett

    Looks really great!

    likes

    about 2 years ago

  8. Lukas Bugla Lukas Bugla

    Very nice!

    likes

    about 2 years ago

  9. Alpis Design Alpis Design

    Excellent! :)

    likes

    about 2 years ago

  10. Tomáš Janoušek Tomáš Janoušek

    omg! I love this style. Great job mate.

    likes

    about 2 years ago

  11. Christopher Magruder Christopher Magruder

    Great work you two @Sean Farrell and @Chris Brauckmuller Looking good!

    about 2 years ago

  12. Joshua Sortino Joshua Sortino

    So beautiful. This is insanely awesome.

    likes

    about 2 years ago

  13. Filip Walica Filip Walica

    Looks really nice. :)
    Don't forget to use black status bar in the iOS App tho!

    about 2 years ago

  14. Shahed Khan Shahed Khan

    "Rediscover" to "Re-discover". Seems a tad bit better with the dash. Other than that, A++!

    likes

    about 2 years ago

  15. Chris Brauckmuller Chris Brauckmuller

    That's a good suggestion @Viatask. Will definitely try it out.

    likes

    about 2 years ago

  16. Ondrej Lechan Ondrej Lechan

    absolutely stunning!

    about 2 years ago

  17. Eduardo Santos Eduardo Santos

    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. :)

    likes

    about 2 years ago

  18. Chris Brauckmuller Chris Brauckmuller

    @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!

    about 2 years ago

  19. Eduardo Santos Eduardo Santos

    @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.

    likes

    about 2 years ago

  20. Chris Brauckmuller Chris Brauckmuller

    @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!

    likes

    about 2 years ago

  21. Dick Dick

    Chris, the banner hero is insane!

    about 2 years ago

  22. Terra Spitzner Terra Spitzner

    Very cool. Awesome work. (:

    about 2 years ago

  23. Robert van Klinken Robert van Klinken

    Buttons are best I've seen in a long while. Colors are the best! Isn't that an ipad 1?

    about 2 years ago

  24. Timothy ッ Timothy ッ

    smashed it bro! those buttons are amazing! great work! i think the top could be implemented differently?

    about 2 years ago

  25. Chris Brauckmuller Chris Brauckmuller

    @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.

    about 2 years ago

keyboard shortcuts: previous shot next shot L or F like