I have designed a web page that looks like this:
I’m not a designer, and neither is my boss but he has asked me to design and code a web page.
I’m happy with the header (and it’s good inspiration :D), but my boss has forced me to place this ugly backbone graphic next to the the navigation buttons, and I have to have it. So I did it, I tried to tell him that people don’t love it and it’s ugly navigation – but he says it has to be like that!
My problem is that I haven’t any idea how to style the heading/content title to be aesthetically pleasing and make it stand out and draw attention.
I’m thinking maybe a cartoon bubble will be good? Maybe just an arrow? What would be good and easy for a beginner to create?
Additionally, I’m trying to figure out what font and style will make the text look good and easy to read?
My main question is, what effect and image could I use for the heading background, and how can I style it to stand out better?
I’m thinking maybe place it in it’s own container with a border around it, and style the text with an inset shadow?
Maybe something like:
Please could you suggest ways for me to make the heading stand out better and make the text more readable.
I’ll take a shot at it. You need to simplify, there’s way too much going on. We really can only judge it on the visual aspect as most of us don’t speak the language, but I’d guess it’s a website about health and the human body – if I’m right then you’ve at least managed to communicate that – if I’m wrong you need to rethink your graphics.
A few points I’d consider if I were you:
The header is very elaborate (I’d even say it’s nice), therefore you should simplify the body.
Get rid of the blue background and dashed border around the content box and make the whole background white to give the text and other elements some breathing space.
The backbone graphic is just weird, I get the concept that the navigation is the backbone of the website (I think), but it’s still just weird. Lose it or improve it.
Lose the gradient on the navigation buttons, make them one flat colour or a very simple gradient. Also the arrow shape is odd as it’s not pointing to anything relevant, I’d make them plain rectangles and make sure they are all aligned perfectly, not adjusting to the shape of the image.
Don’t justify the text and get rid of the italics, or choose a sans-serif font. Italics on a serif font make it very hard to read.
Add some padding around the text, it’s too close to other elements.
It also appears that the white part behind the text in the header is not symmetrical, definitely fix that unless it’s intentional.
After doing all this, it should look much more simple and then you can look at adding more simple elements. Just my two cents, I hope it helps.