Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Quick Snap Productions

    Can I get some feedback on my site? I am trying to do a web design / video editing website for myself.

    Only INDEX, SERVICES and CONTACT QSP have content. The other two just show their names in the content so far.

    I was told the green isn't a good color with the blue. Your review?

    Quick Snap Productions

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Y'know, the blue doesn't go with the green on colour and shade issues.

    The blue is too intense relative to the green and, also, the colours themselves clash.

    I would be inclined to pick the bllue but toned down. It's a bit loud and consequently can appear to be more amateur than the content. I think the background is a bit busy too.

    Still, you have just one validation error on your home page so you are well on your way.

    sorry that doesn't sound more constructive. I hope it will help.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    So you think add like 25% transparency to the background? Any advice is helpful. I want it professional looking, I will check on the validate issue.

    EDIT: Fixed the validation. It is golden now.
    This document was successfully checked as XHTML 1.0 Strict!
    Last edited by masterofollies; 02-17-2009 at 01:13 AM.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    The good:

    - Validation!
    - Nice menu. Clean and clear (and under control, as the ad goes...)

    Could be improved:

    - Your header doesn't work with the rest of the site at all. The nav and content areas use a nice serif font, subtle gradients and thin lines. The header is blocky, uses high contrast and is just visually jarring. From a typographical standpoint, try using a more conventional font for the header and tone down the contrast a lot. A good rule of thumb when choosing fonts is to pick a serif font for the body and a sans-serif for the header/subheads, or vice versa.
    - The tiled background looks very 1998-ish. You might consider increasing the size of the tiles so it's not as immediately obvious that there's a tiling effect going on, and making the blue more subtle. Just remember: Small object--bright, bold color. Large object--softer, lighter color.

    Just some thoughts. It's a great start!
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    tagnu (02-17-2009)

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Quote Originally Posted by msuffern View Post
    The good:

    A good rule of thumb when choosing fonts is to pick a serif font for the body and a sans-serif for the header/subheads, or vice versa.
    Quote Originally Posted by msuffern;
    Just remember: Small object--bright, bold color. Large object--softer, lighter color.
    Good tips

    Attached a screenshot with few quick changes.
    1. Changed bg to a gradient
    2. Removed the blue border
    3. Added a drop shadow for the container.

    Like msuffern suggested, changing the header font to a more conventional one will improve the looks.
    Attached Thumbnails Attached Thumbnails Quick Snap Productions-qsp.gif  
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Your version looks cool, but the background fades to white. Is there a way to have it fade to a light green? I am not fond of white color on my websites

    The drop shadow works well.

    For the header font, do you suggest it more plain and block style, or more script, or something in between, half way fancy?

  • #7
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It's easy to make it fade to a green: Make a 1- or 2-pixel wide vertical sliver for your background that you intend to repeat horizontally. Make the "ending" (bottom) color of the sliver gradient the light green you specify as a background color. Place it all on the html or body tag:

    Code:
    html {
      background:#c9c9a5 url("bg_gradient1.png") repeat-x;
    }
    As far as the header is concerned... I'm seeing something sans-serif-ish and blocky, like maybe Century Gothic (my favorite font at the moment). Add a little graphic line art logo and justify the thing left since your container is fluid. Here's something I threw together. I didn't color it, but that's something you can do on your own if you like it.
    Attached Thumbnails Attached Thumbnails Quick Snap Productions-qs1.jpg  
    matt | design | blog

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Current trend is towards sanserifs for body and serifs for headings on screened media, whilst in print it's towards serifs for body and sanserifs for headings.

    @matt: it's worth mentioning that gothic headers will generally go well with quite spaced out layout, due to the the structure of the font.

  • #9
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    The logo header is cool, but instead of a hand, it's more like a flash from a camera. But if I make a gradient that fades that is like 10 pixel tall by whatever long, it's going to fade every 10 pixels and not at the bottom.

  • #10
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Gradients rarely fade at the bottom unless all your users browse at the exact same width and height. By the way, liquid layout isn't the way to go for you, because your header cuts off and repeats and lower and higher resolutions respectively. Use fixed. Tagnu's given you a very eye-pleasing approach to it: I would suggest you go for something like it.

  • #11
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by masterofollies View Post
    But if I make a gradient that fades that is like 10 pixel tall by whatever long, it's going to fade every 10 pixels and not at the bottom.
    This is what I mean. The gradient is 400px tall and it won't go all the way to the bottom if you have content that causes the page to scroll, but it is a good way to distinguish the header area.

    @Cyan: Thanks for the tip about the font--you're right. It would look better with a layout that "breathed" a little more.
    matt | design | blog

  • #12
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Can I get your opinion on this background? You probably need to refresh twice or clear cache to see it.

  • #13
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It makes me feel like I'm hovering over a lit swimming pool...at night. Also the header, as it stands now, gets lost in the black. And the background repeats if the browser window is over 800px tall.

    It's just a lot of very intense color. I know you don't like white on your site, but consider some more and/or lighter shades in the interest of balance for the black and the blue and the green.
    matt | design | blog

  • #14
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Alright I added a new header. Personally I think it looks clean and cool. Your opinions?

  • #15
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    It's definitely more readable than the old header.

    Also, remember Cyan's comment above:

    your header cuts off and repeats and lower and higher resolutions respectively
    I'm guessing your browser window is maximized and your monitor resolution is 1024x768, because that's what I have here on the laptop and the banner looks perfectly centered and fitted. But have a look at what your header does when you un-maximize the window, or when you go to a higher-resolution monitor like 1280x1024. It does what Cyan describes--cuts off or repeats. If this bothers you, you have some options:

    1. Make a more left-justified and compact header.
    2. Add a no-repeat property to your background attribute in the CSS.
    3. Use a fixed-width container.

    Your prospective clients will be viewing your website on a variety of different operating systems, monitor resolutions and web browsers. You know best who you're trying to reach, but a little cross-platform testing goes a long way.
    matt | design | blog


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •