...

View Full Version : Quick Snap Productions



masterofollies
02-16-2009, 10:14 PM
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 (http://www.rodgame.org/downloads/quicksnap/)

bazz
02-16-2009, 11:36 PM
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

masterofollies
02-17-2009, 12:09 AM
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!

BoldUlysses
02-17-2009, 04:56 AM
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! :thumbsup:

tagnu
02-17-2009, 07:13 AM
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.




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.

masterofollies
02-17-2009, 03:21 PM
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 :p

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?

BoldUlysses
02-17-2009, 04:11 PM
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:


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.

Apostropartheid
02-17-2009, 05:42 PM
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.

masterofollies
02-17-2009, 05:57 PM
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.

Apostropartheid
02-17-2009, 06:03 PM
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.

BoldUlysses
02-17-2009, 06:21 PM
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 (http://www.sufferndesign.com/helping/site145.html). 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.

masterofollies
02-17-2009, 07:28 PM
Can I get your opinion on this background? You probably need to refresh twice or clear cache to see it.

BoldUlysses
02-17-2009, 07:38 PM
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.

masterofollies
02-17-2009, 10:46 PM
Alright I added a new header. Personally I think it looks clean and cool. Your opinions?

BoldUlysses
02-18-2009, 04:48 AM
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.

tagnu
02-18-2009, 10:34 AM
In my resolution (800x600) the label cuts-off. I only see "Quick snap pro"...
The new background looks very dark. That's my personal opinion.

masterofollies
02-18-2009, 03:30 PM
Ok I will try to adjust it some more.

masterofollies
02-19-2009, 03:30 PM
I hate cross browser coding. It looks fine in Firefox with a fixed width, how ever it is too long in internet explorer!

http://www.rodgame.org/downloads/quicksnap/

Apostropartheid
02-19-2009, 04:34 PM
Um, mainly because you're not used a fixed width.


#outer {
width: 841px;
}

masterofollies
02-19-2009, 06:18 PM
That is a fixed width, It's fixed to a certain length.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum