Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I am redesigning a dental blog. So the focus is obviously content, they can read related news, download technical documents, watch videos, etc.

So I wanted the design to be subtle.

But the header I immediately wanted to grab their attention. Using Yellow to draw attention to the main selling point about the main product.

But it almost looks like there is too much attention there with that yellow and a little red. How can I calculate how much color contrast would be ideal? And should I perhaps put some dark background behind the header that expands full width?

enter image description here

share|improve this question
add comment

1 Answer

I don't think this is an issue of color, but rather of elements competing with each other (using colors as well as other properties). For example:

  • Weight and type of Fonts: While the header uses thick sans-serifs (particularly in the logo and title), the content uses a bold yet small serif Georgia. The red title, for example, is similar in size to the report excerpt. The first time I looked at the image, I missed it completely.

  • Size: While the banner in the header is large, the content itself is quite small. The header looks more 'relevant' because it is simply larger. Might be too large, perhaps?

  • White Space: Content might be readable because of the white space, but in this case your readability is playing against the content's ability to stand out. Also, the graph being closer to the left, yet not left-aligned, confused me a little. At first I thought: Is that graph part of the banner? Is it another banner / service? I'd expect some text transition between the banner and the content, an introduction that makes it more obvious that the banner is not just an ad, it's actually a sort of presentation for what comes next. And I think this is something you need to be very careful about, because our spam-filled brains tend to ignore banners that look like ads.

  • Color: I think you shouldn't just look at the colors in the menu (red line) and the banner (yellow blocks), but also those in the graph, because they are also competing with the rest.

So, to sum up, while attention certainly goes to the main element (the banner), I think you still need to figure out a way to connect the content to it. As you mention, using a background could mean a huge difference, as color can be your connector.

share|improve this answer
1  
Excellent answer! On the point of size, perhaps the banner is not too large, but the content in fact too small. Recent findings (that I haven't got time to source right now) say that 16px is the best size for readability of text on websites. –  Dominic Oct 17 '13 at 23:22
    
Then again recent studies seem to suggest type sizes more appropriate for blind individuals. 16px for body type is huge. I suspect that the studies were done on devices which do not honor the pixel settings. –  horatio Oct 18 '13 at 14:27
    
@horatio Having implemented it on my far from finished project, it really does make it a million times more readable - it's just very difficult to balance the design well. –  Dominic Oct 18 '13 at 17:11
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.