Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts

    Honest Critique (Graphics, styling, markup, etc)

    Hey all,

    It's been a long while since I've visited, but I have been extremely busy at work and home. My company just asked me to re-do their current website found at: www.espinc1.com/main.html. We've had it for a long time as you can see. My company decided to give me a chance at redesigning.

    This is my attempt: http://shiznit.no-ip.info:81/~theshaner/index2.html

    Please give me an honest critique. This is my second real attempt at graphics, pure XHTML markup, and full CSS styling. I'm a coder, not a designer, so this has really been difficult for me.

    What can I change to give this site a little more professionalism?

    Thanks for all your help!

    Shane

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of those vertical bars. Make the text in your header graphic more clear. I don't like the alternating colors of the nav links. Don't use courier for your font family. Use verdana or tahoma or even arial. Background image of content needs to be smaller so you can see the whole logo rather than just part of it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Thanks AE for the quick pointers. I haven't had a chance to update it with your changes, but I'll post back when I do.

    Anyone else with anything?

    -Shane

  • #4
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    Hi there,

    Overall I think your page is off to a good start. I like the background image of the graph paper; it adds some character without being overwhelming and it helps tone down the white background. Sometimes I find it hard to deal with a bright white background after 10+ hours at the computer!

    The company name needs to be larger, which will make it more visible. If it’s larger you might not need to change the color of the type, although it could still use a contrast boost.

    The navigation words need to be smaller, and try to center them vertically within their boxes. It’s a little confusing because they’re so close to the top of their boxes. The alternating color scheme does not bother me; I think it works well with the design. However, the News and Awards banner seems awkward. I think perhaps it should be similar to the other menu items. I know that’s what you want viewers to focus on, but I think being at the bottom will bring enough attention to it.

    I like how you got the blue bars at the bottom left to weave over each other, too. That’s interesting from a design standpoint, but perhaps they are a bit too strong? Optionally you could make each vertical stripe thinner, but if you do that, then add more stripes. Keep to an odd number, though -- if you do even numbers there is a tendency for people to see pairs and then some anal-retentive type will spend time counting the number of stripes and wondering what they represent.

    Finally, you might want to loose the logo screened in the background of the white text area.

    I hope this is helpful.
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #5
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Hello,

    Good start.

    However, something I noticed which I think will hender your design alot, especially as you develope more pages and try to tie them all together.

    I counted 8 (yes eight) different colors of blue. And not all match. Some are bright blues, some are darker navy blues, some have purple tones, and some have teal tones.

    3 come from the vertical bars on the left (all different colors)
    1 comes from the horizontal bar on the bottom (different color)
    1 comes from the vertical menus (different color, purpleish)
    1 comes from the frame around the menus and image (slight different color, purpleish)
    1 comes from the actually logo (different color, teal tone)
    1 comes from the logo text (different color, baby blue)

    Personally I think if you pick possibly 2-3 bluish colors that match and then use/alternate them throughout your page it would help considerably from an aesthetically point of view.

    If you have trouble finding colors that match, simply pick a blue and then change its opacity against a white background to get lighter variations that are still of simply color.

    -trigger
    Last edited by trigger_tre; 12-08-2006 at 08:38 PM. Reason: Accidently hit submit before I finished typing.

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Shane.

    Ok, well here goes - you asked for honesty

    First off - good on you , as a programmer, to have a go at design

    TBH, I think that while the suggestions offered by Aero and the other posters so far, are useful to a degree - they are missing some fundamental points.

    This shade of blue, or that - or Tahoma or Verdana should be last on your list of considerations right now.

    You need to re-think how you are presenting the content, and the route you want visitors to take through the site.

    At the moment you have the main navigation in the top left of the page - that is a major (priceless) piece of screen real estate you should not be wasting on a fancy navigation system. Put something there that tells visitors what the site is about - people haven't got time for intrigue, they want the beef on what you do - then they might deign to navigate through your site and find out more...

    Detach yourself from the design, look at it from a users point - what would you do if you landed on that page? How long would it take you to figure it out, what would you do next, once you figured out what the site was for/about? You're making peole work to hard at the moment, and in general, they've better things to do.

    You have the content already, from the old site - design the content - don't think in terms of nav, header, sidebar, etc with lorem ipsum, to be replaced later - the stuff that will replace the lorem ipsum is the main sh*t you should be concentrating on!

    As an example: this site I've been working on: prp-inc dot com -
    How long does it take to work out what that site is about? Fraction of a second? Don't make your visitors work too hard

    Sorry if all that sounds dead negative, really I'm trying to help

    Try going back to doing wireframes, and proof of concept sketches - before even opening Photoshop.

    Kind regards,

    Gary

  • #7
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Thank you all for your comments! They've helped put a lot of things into perspective. I'll be making the basic changes most people mentioned and then presenting that as one version.

    Gary, I really appreciate your post. That's exactly what I needed. For the year or so I've been a part of the community, I've always respected your posts in this area and the websites you've designed. I visit this forum to see what others have designed, but too often I don't read why the content is presented that way. I'm going to do another redesign of the site. The version I showed you all was version 3 and each version (in my opinion) has gotten better. Hopefully with your advice, this fourth one will depict the advice you suggested and hopefully mature me as a designer a little more. Thanks again Gary!

    Thank you all again. I'll post my updates when I get a chance.

    -Shane

  • #8
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Shane, I know this thread is getting a bit old now, but I've been meaning to post this link to you for a while now - you won't see an awful lot about code there (though what there is, is spot on!)
    http://webdesignfromscratch.com/
    ...but for the full picture on what web design can, and should be, it's worth more than a quick read

    Gary

  • #9
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    Thanks Gary. I'll definitely read that site next chance I get (most likely after this post here).

    Anyway, here's my next attempt. It's fairly basic but hopefully conveys the right message and quick. These are images and no code just yet. If anyone can give me any pointers, I'd appreciate it. I've limited the colors and complexity of the design. The grey bar underneath the blue bar that has the menu links is the submenu bar. After hovering over the main menu bar links, submenu links will appear as you see in the image titled - ESPWeb - Page.

    I cannot decide on a good home page. I think the first one looks a bit better, but I'm not a fan of the title above the image. Either I should remove it totally or take out the blue outline on the lettering. This is where my lack in artistic ability begins to wear my design down.

    Thanks for any help!

    http://shiznit.no-ip.info:81/~theshaner/ESPWeb-Home.png
    http://shiznit.no-ip.info:81/~thesha...PWeb-Home2.png
    http://shiznit.no-ip.info:81/~theshaner/ESPWeb-Page.png

    -Shane

  • #10
    Regular Coder nexosis's Avatar
    Join Date
    Dec 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one

    progress: HTML: 100% > CSS: 90% > Javascript: 55% > Php:10%
    Want an avatar like mine? it's free! just pm me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •