Grow your CSS skills. Land your dream job.

Critique my website please

  • # May 4, 2011 at 4:54 pm

    Hi everyone,

    I was hoping to get some feedback on http://www.balsamdesign.ca/temp/index.html

    Hopefully no one hates it too much, but any thoughts on colours, layout, etc would be most appreciated!

    Thanks.
    Brian

    # May 4, 2011 at 5:31 pm

    Hi Balsam

    I think you’ve got a decent website there, however, I must comment on your design and colours etc.

    I think that your text colour and related to your background colour, in my opinion is a bad choice. I think that the colours are too close together and that for me, makes it less appealing to read.

    I like the simplicity of it, I like how you haven’t got it packed with information, which can (again, in my opinion) overwhelm the client.

    Also (No offence) I would rethink your header. Feels like it’s been drawn by a child. (in my opinion also) Make it feel more proffessional! remember! clients want your designer side too!

    Of course, these are only what I think! Take no notice if you disagree! :D

    Hope you enjoy my feedback Balsam!
    See you around!

    # May 4, 2011 at 5:35 pm

    The values for your page-wrap background and your text are a bit close, try taking the text to something a shade darker like #41554C.
    Your “stand out from the crowd” box is wider than the rest of your boxes inside in the page-wrap so it sticks out further on the right side. Might want to adjust that.
    The contact form and submit button could use some more styling.

    # May 4, 2011 at 5:36 pm

    I personally like how simple it is but I’d change one thing, the main green font color. With the color of the background I think you could get away with either black or white. Test them both out.

    Looks good!

    Edit; Maybe you’re planning on doing this but if you’ve already created different sites for customers maybe have a portfolio of the sites with links so they can see examples of your work.

    # May 5, 2011 at 9:42 am

    Thank you everyone…I’ve received a few comments from friends and family about the text colour, so I think that one is going to change.

    @Waffle – I consciously tried to avoid too much text. I’ve read the statistics where they say people only linger for a few seconds on a webpage and it has to grab them. Not to mention I also find when I get to a page that is just wall to wall text, I tend to move on quickly. What portion of the header don’t you like? The trees or the logo itself? The logo does have a fir tree “leaf” as part of its design so I was trying to keep that theme going. I might also try outlining the leaf in the logo in black. If you go to http://www.balsamdesign.ca/temp/img/bd_logo.png you can see the image as it was designed with a white background. But hey, any legit criticism is welcome!

    @whiteInkDesign – thanks for the “stand out” comment – I hadn’t noticed that immediately…it used to line up, but I must have changed something along the way and failed to notice that that screwed up. I’ll try and jazz up the contact form somewhat too.

    @derekbtw – yes, a portfolio section will be coming once I have a few under my belt.

    Thank you so much for your comments!

    # May 5, 2011 at 2:49 pm

    Rather long-winded – sorry. And, of course, just one person’s thoughts, so take them with as many grains of salt as necessary…

    GOOD:
    It’s a simple, clean design, and that’s a big plus. You’ve also shown restraint. (I hate it when a designer tosses in distracting bells and whistles just to show how good he/she is.)

    The “sections” are clearly identifiable at a glance, set off nicely with what I’m guessing are borders under the h1 elements.

    The shadows and rounded-corners are well done and attractive.

    The “Request a free quote” image/link stands out nicely, and since it appears that getting folks to ask for a quote is the main purpose of the page, that’s a very good thing.

    The points in the “Why choose Balsam Design” area are well phrased; good simple wording, especially the sentence about the importance of W3C standards.

    NOT SO GOOD:
    As noted, your colors aren’t doing you any favors. When I opened the page, I intentionally squinted so I’d get a quick overall impression, and (sorry to say) my first reaction was something like “man, those colors are bad.” Part of it is that most of the colors are grayed and drab; secondly, the values of the colors are too similar. You need more contrast, especially in your main content area where the darkish text is hard to see against the mid-value gray-green background. Swapping the background colors of the pagewrap and content divs would give you more contrast and better legibility. Still, I’d like to see some purer, cleaner colors; I think that would brighten up the site and be much more appealing to the eye.

    I don’t care at all for the maroon-ish color against the gray-green. (But it would work better if you swapped the background colors of the pagewrap and content divs as suggested above.)

    The entire slogan area takes up more valuable “above the fold” space than necessary; try locating the slogan just below the logo and .

    And I agree that the logo itself needs some work. Here again, not enough value contrast, and maybe needs some cleaner colors, IMO.

    Be consistent: in the “Why choose Balsam Design” area, some of the “whys” start with initial caps, and some don’t. And because the “whys” are all complete sentences, I’d use initial caps on all and add a period to the end of each sentence.

    MISCELLANEOUS THOUGHTS:
    Consider trying a fluid width layout: an 860-pixel fixed-width page won’t work on many hand-held devices, and will look lost in a wide monitor.

    Just wondering why you used multiple h1 elements for the three section headings? Using one h1 for the site or page title, and then h2s for section titles is more typical (and also probably more search-engine-friendly).

    I’d lose the W3C XHTML logo/link. At best, it’s unnecessary; at worst it’s counter-productive. I believe many folks won’t know what it means or care that your site validates, and those that do know and care might feel that this logo/link screams “amateur.”

    OVERALL:
    What is the goal of the page? Assuming it’s something like “I’m a good web designer and you should hire me,” then brightening up the overall visual look and doing a few things to emphasize your professionalism would be my top goals.

    I agree that a portfolio section is a good idea. Even if you don’t have many “live” sites under your belt, if you’ve done some mock-ups that look good, you could at least display images of them to show your designs.

    # May 5, 2011 at 4:00 pm

    Along with what everyone else has said (colors are, well, bad) I would also like to point out that the reason the post-it note and the picture of you are so pixelated is because they are being scaled down by the browser from very large sizes.

    It’s always a good idea to create the image at the size you will be using it, rather then doing a rather large image that takes a long time to load and will look pixelated when the browser scales them down.

    # May 5, 2011 at 4:43 pm

    @ Snillor – yes, the colours seem to be an ongoing theme – I tried reversing them as suggested (haven’t uploaded it though) and it is attractive. My overuse of H1 tags was just me going down the wrong road and has been fixed. Yeah, I’m with you on the W3C logo. I’m experimenting with a fluid layout and it’s not too bad. I was trying for the one third two thirds rule and I haven’t figured out how to do it. I can get it so the right floats compress the main body text, but I’m forced (as far as I can tell) to keep the width of the right floats static (which is not necessarily a bad thing I suppose).

    @ SpeedGun – thanks for the pixelation info – I didn’t know that. I kept wondering why my screenshots looked so bad (for some reason, Chrome seems to be more forgiving with scaling images – they are relatively clean while when viewed in IE9, you definitely see the pixelation).

    Again, thanks to everyone – this is great help and, really, if everyone just said it looks fine, that wouldn’t be overly constructive.

    # May 5, 2011 at 8:16 pm

    Hey balsam, I’m coming a little late to the party, but here’s my two cents:

    • Check out sites like Adobe’s Kuler for soothing, relaxing colour schemes. Make your customer feel at ease. You’ve gone for an organic colour scheme, but should have used those creams and ivories for your main palatte, and used the greens for spots of interest and highlights.
    • The font’s are also pretty weak – there are much softer, more visually appealing web-safe fonts out there than Arial. Also, the use of drop-caps at the beginning of each section title is not helping matters there.
    • Lose the W3C icon – a good designer makes his own, or doesn’t feel the need to show it at all.
    • From a sales point of view, you need to bring the ‘Why Choose…’ section to the top, possibly inter-spaced with the ‘Why do you need…’ bit to drive home the points. Don’t have your visitors asking ‘Why do I need a website?’ if you’re in the business of selling ‘em one. The About me section can be put elsewhere on the site altogether, or relegated to a sidebar or footer.
    • Are those CSS-Trick’s asterisks???
    • While it is a good idea to have clear areas on a page, be careful you don’t end up breaking the flow of the design entirely. There are too many boxes here – your slogan is a case in point – try redesigning from a basic layout (no borders, hr’s, underlines) and, from there, add the bare minimum required to bring structure. This site’s current design is a good example of this, although an extreme-ish one :)
    • Develop your iconography – frankly, you logo needs a lot of work. Remember also that the balsam leaf (?) can be used elsewhere – bullets, headings, etc – just don’t over do it.
    • Good effort though, and best of luck with it!

    # May 6, 2011 at 8:32 am

    Your contact form has NO validation whatsoever…..might want to add this feature or you will be spammed.

    # May 6, 2011 at 11:36 am

    It’s really really really basic man you need to add a little more flare I know some people have told you that it’s simplicity is good but I just see it as boring (even if the structure is great) it looks like a Dreamweaver template to me, add some icons style some tittles or something. Good luck

    # May 6, 2011 at 11:42 am

    @Balsam. I just thought that the logo was too… in the background if you know what I mean, you need to make it stand out more! feels very… Maybe change the colours, anyway! I am only trying to help :)

    Hope I have.

    # May 16, 2011 at 3:49 pm

    Okay…many thanks to all the comments. They are all well taken and have been incorporated in a revised version. It’s still not finished (to whit, the photo section has yet to be done) and I haven’t finished modifying the php file though, @fjorko, you’ll be pleased to see that there is some sort of validation now.

    and no, those aren’t Chris’ asterisks, though I did get the idea from him. :)

    # May 16, 2011 at 8:04 pm

    + Logo design is nice. Symmetry is popular in design, and it is reflected here.
    + The layout of the website is linear, sleek and appropriate, mirroring the impressions attained from the logo.

    - The watermarked image behind the main content feels dated somewhat.
    - The design of the banner is, again, dated.

    Experiment with fading and shadowing to assert a more modern feel, but the core product is quite solid.

    Also, got to commend your adaptations. You’ve listened well to comments and rectified your site accordingly. In time, I can see this becoming a very appealing site.

    Good luck! :D

    # May 17, 2011 at 6:58 pm

    “W3C standards This is the gold standard that ensures consistency in appearance and functionality across different browsers.”

    Hehe…don’t we wish. Valid code just rules out a lot of possibilities, but we all know IE’s Conditional Stylesheets are the things that ensure consistency! :)

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

You must be logged in to reply to this topic.

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