Grow your CSS skills. Land your dream job.

Web design critique and advice

  • # January 30, 2013 at 1:50 pm

    Hello,

    I wonder if anyone could give me some design feedback on the following website:

    http://allyouneedis-justask.com.s156312.gridserver.com/

    Also not sure how I would go about making the homepage dynamic so if anyone has any advice in regards to that, that would be awesome. (not tested on IE yet)

    Thanks

    # January 30, 2013 at 2:09 pm

    I like that simple logo although it seems a bit off-center. I would also be consistent with the colors. You might want to rethink the light gray (#6a6a6a or #777). The images on hover seem like a sprite. If you’re going for a slideUp technique, I’d make it a bit slower.

    Edit: Although I think Museo Slab is fine for the nav menu, You might want to find something more appropriate for the h1. The fallbacks would also dramatically change the appearance of the site since they are completely different styles (slab -> sans-serif fallback doesn’t make sense).

    What do you mean by dynamic? What would you like the page to do?

    # January 30, 2013 at 2:41 pm

    Thanks!

    Added PT Sans as a body font. The homepage is using sprites so that is why it looks like that!

    I mean so the client could edit the pictures of the 6 blocks and links on the homepage using the WordPress back-end. As it stands, this is not possible.

    # January 30, 2013 at 2:55 pm

    @jshjohnson You could take a look at Advanced Custom Fields, that may work as a quick and dirty way of allowing your client to edit the 6 blocks. There are naturally some other ways to make this work, but that may be easiest/effective.

    Looks nice, I agree the hover animation seems a little quick for me.

    # January 30, 2013 at 4:02 pm

    I agree with @qbattersby. ACF has a gallery portion that you might want to take a look at.

    As for changing the border color, I think having that a lighter color than the text is fine. I was mainly talking about the text. However, I would still choose a different typeface for the H1.

    # January 30, 2013 at 5:27 pm

    Very nice and simple design. although i think you should remove that slide effect on image hover. Its unnecessary and for the same image kinda annoying. You should keep the grayscale filter but add a transition of .50s to it. I think that would look nice.

    # January 31, 2013 at 5:18 am

    Very simple design but i don’t like those two border lines in between the main Title.

    # January 31, 2013 at 9:42 am

    Very nice responsive design and build @jshjohnson. Well done!
    > but i don’t like those two border lines in between the main Title.

    I personally like the two lines, but it’s just personal preference.

    # January 31, 2013 at 7:20 pm

    I agree with @Jarolin in that the slide effect doesn’t really work when it’s the same picture. A fade would work much better.

    # January 31, 2013 at 7:33 pm

    I agree with @rosspenman on the image slide effect. I would definitely consider switching it to a fade.

    # February 1, 2013 at 1:48 pm

    Is there a simple way of fading a sprite?

    # February 1, 2013 at 2:45 pm

    Possibly jQuery.

    # February 1, 2013 at 4:59 pm

    You can fade a sprite using a span or pseudo element, there’s an article on css tricks regarding it: http://css-tricks.com/fade-image-within-sprite/

    # February 1, 2013 at 5:27 pm

    @op,

    I’m viewing it on IE10 and on the nav bar the current page is signalled by a strikethrough.
    Is that intentional? It looks odd. Also, unlike all the other sections, nothing happens when you hover on «contact» , which ends up being subliminally off-putting, as you don’t get a visual reward for one of the most important actions one can take after going through the website, contacting the person in question. I’d definitely change that.

    I like the cleanness of the design, the sparseness of the typography. Though I like that blue I reckon it needs a speckle or two of a complimentary or contrasting colour, (such as orange, or an earthy brown). Otherwise it feels a bit too bland, like white sauce on white sauce.

    Best of luck!

    # February 3, 2013 at 10:51 am

    @PLNR what do you mean by the “«contact»” hover? On the Nav bar?

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".