How can I make my websites layout better?

Discussion in 'HTML & Website Design' started by MQSource, Nov 23, 2007.

  1. #1
    I started this website about a month ago and the layout just looks to blank. I never meant the website to be all colorful but i would like it to at least be somewhat attractive. Can anyone give me some tips on what i can do to improve the websites look, what should I add? What colors should i change? ect.

    Website URL: www.mqsource.com

    -Thanks
     
    MQSource, Nov 23, 2007 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, at least your page and your code aren't ugly, but yeah, it screams 80-year-old librarian! to me too. The CSS looks nice but also a little house-of-cards, so I guess playing with widths and such is out.

    Your h2 (get rid of that center tag! They cause infections!) could have a more interesting font (or an image sitting on top with really interesting font). I'd recommend sticking at the very least some alt text on that logo image, as without images there's nothing there to tell me the name of the page.

    Since you're using an image for something that could maybe get done with a top border, why not have a more interesting border? A wavy swirly (but not too much) line? Or even setting a different colour for the background after that border?

    New Directory Applications could have the same make-over as the h2 (get rid of that center tag! It makes the sweet baby Buddha cry!). Try a font like American Typewriter. It's a really chunky serif font, and doesn't go at all with your page-- which is why it might work well. It'll certainly make those headers stand out (for people with that font... I don't have it, but I guess it's pretty common).

    For the links on the left, you could replace the >>s with a very small (10px by10px let's say) round button with a slight sheen on one side and faint shadow on the other. Maybe if it was a sort of burnished gold colour, it would go very well with the blue (add this image as list-style-image in the CSS -- to the ul's not the ol!). Give the actual links themselves a different colour and font (while keeping the underline so people know they're links...) PLUS make the colour change on hover a bit more dramatic. Again, if for example you had a coppery-goldish button image, you could have that same colour on hover. So long as it's not too light, it should be readable (experiment).

    Lastly, the footer is blending quite well into the background. You could do something like add a 1px border of some nice colour.... maybe have it go with whatever colour you'd like for sticking in the nav on the left. If you do this, check in all browsers as your css is set for precisely 30px. Adding a 1px border will mean you'll change your height and negative top margin to 32px instead.

    The trick is to add slight, small, little things here and there. Don't underestimate typography. You can do some neat things with font to make the page more interesting.
     
    Stomme poes, Nov 23, 2007 IP
  3. awesomeflashsites

    awesomeflashsites Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi MQSource,

    To get some nice ideas or inspiration..
    you can check this website
    http://www.coolhomepages.com

    or else for free website templates in PSD format
    http://www.zymic.com/free-templates

    Hope the above information is useful to you


    Regards
    awesomeflashsites.com
     
    awesomeflashsites, Nov 23, 2007 IP
  4. jeeky

    jeeky Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try adding a light background image to the h tags.

    It makes them more profound in an economical way.

    But just slightly darken the color, make it barely noticeable.
     
    jeeky, Nov 23, 2007 IP