Edit: even just changing font-size from 14pt to 11pt is much better imho.
Edit: even just changing font-size from 14pt to 11pt is much better imho.
Everything just feels way oversized, in a Fisher-Price kind of way. The font, the colors and "chunky"-ness of the UI.
The full-width content-area doesn't help either. The whole page gets right up in your face and shouts the content at you.
Concrete suggestions:
- dial down the font size
- put some blank space in the left-right marigns of the page (responsive if possible).
- maybe choose a more passive shade of blue for the background.
EDIT: here's an example comparing your page with wikipedia http://recordit.co/Za7NuT8Hy7
I'd also recommend getting rid of the icons on the main menu and replacing them with text (with a small icon next to them if you must). I had to hover over the icons to figure out what they do.
This is one of the things I like about Bootstrap, as a developer I can now focus on building stuff without having to care about making it look nice (which I'm not good at). I just add Bootstrap and for 90% of things (I usually do business web apps) that's good enough.
Here's just a quick comparison between your version and a version where I changed some small things. http://imgur.com/a/w1bUV
font-size 11pt body width 80%, margin: 0 auto; header height 40px and header > img 35x35px.