05-04-2007, 08:09 PM
I'm hoping for a complete critique of anything and everything on my one page redesign. This redesign can be found at: www.espinc1.com/esptest/index.asp <-- REVIEW. If you would like to see my company's current and outdated website for comparison, go to: www.espinc1.com. If you want a comparison of the content, you have to pass the flash intro, click on Services and then click Simulation & Training.
I would like a critique of graphics, styles, markup, accessibility (even though I really haven't provided anything in that area yet), and so on. I have no artistic ability whatsoever, so I know it may still lack a sort of professionalism. And yes, the scrolling news box MUST stay. That was a personal request from the CEO. This redesign is actually a modified version of my last attempt that I had critiqued months ago, so you may recognize this design somewhat if you partook in the last review. I checked and it's valid XHTML Strict 1.0 and valid CSS. And yes, being a one page redesign means all links are dead. It should look fine in FF2 and IE7. I've also checked IE6, and i believe it's ok there too. Let me know.
Thanks and I welcome all critiques - positive and negative (negative helps me fix my mistakes tho!)
NOTE: Just in case you're curious what the previous version of my redesign use to look like, you may view it at: http://shiznit.no-ip.info:81/~theshaner/simulation.html. You'll see that it's quite flat and boring compared to this newest version (atleast IMO).
05-04-2007, 09:19 PM
Too dark IMO.
Not a fan of frames.
Header only expands to 3/4 of the screen?
05-04-2007, 09:24 PM
You're looking at the old design that I didn't do. I just offered that link for comparison with the newest. Please review: www.espinc1.com/esptest/index.asp
Thanks and sorry for any confusion!
05-04-2007, 09:40 PM
So that's where all my tax dollars are going! :p
Just kidding, I think you are being too hard on yourself and your artist abilities. The site looks very professional imo. It's hard to believe, but I really don't have anything negative to say-- I can't find anything about it that I don't like.
05-04-2007, 09:47 PM
I agree, very nicely done.
05-07-2007, 02:55 PM
Thanks for the positive feedback! If you would've known how hard and how long it took for me to come up with that design, you'd agree on my lack of artistic skills, haha. I must've looked at over 50 websites in order to get ideas. I have come a long way compared to my beginnings, so there are, to a point, skills that can be acquired though practice, but the true web design touch cannot unfortunately, hehe.
Anyway, I was hoping for a little more replies and criticism here because I want to be sure that this page will do for a model for the rest. I think the only page that may be different in any way is the home page, which is next on my list. Once I complete that, I guess I'll hope to get an updated review.
Thanks for the comments and keep them coming please!
I can't get into it - just shows a 404.
05-07-2007, 03:58 PM
Sorry, we set up a DMZ on Friday, and there may be some Firewall configurations that still need to be tweaked. It's up and running on the network, which is why I didn't notice it. I'll edit this post to let you know as soon as it's accessible.
UPDATE: Well, I've asked someone from the outside to test, and they can view it perfectly. So I can't seem to confirm your 404 problem. Could you try again? www.espinc1.com/esptest/index.asp Thanks.
05-07-2007, 08:31 PM
Great! But then you were suppose to review it :p haha
Hehe it just seems a bit of a dated style - I'm personally not a fan of roman fonts, nor the gradient background. It's nicely laid out - does the job, and it doesn't confuse you at all.
05-07-2007, 09:41 PM
Yeah, I know what you mean about outdated. It has the table-look without using tables, haha. It needs more flow, but then again, it's a technical website. All I see these days are css-styled blog themes and so I don't know where to go with a css-styled technical theme. Look at other corporations in our field and you'll see that my website is actually ahead of the game, which is very sad, haha. Here's a small list: Lockheed Martin (http://www.lockheedmartin.com/sts), Cubic (http://cubic.com/), AAI (http://www.aaicorp.com/), DEI (http://www.deicorp.net/), General Dynamics (http://www.generaldynamics.com/), etc. As you can see, they're very, very outdated when it comes to design and coding.
The gradient backgrounds are much better than the flat ones I had before, but maybe I overdid it.
As for the fonts, the horizontal menu and main content is Verdana, which seems to be the font of choice these days. The side column content is in Arial because I figured it needed a more technical look. The image headers are all in italicized Book Antiqua. Maybe I should change the Arial to Verdana also?
It doesn't necessarily have to be a sans font - a roman font - if done right, can look very good - see http://www.dotfive.com as an example.
It's just about knowing when, where and how to use it.
05-07-2007, 10:08 PM
Well, I don't know much about typography, which I imagine is pretty important for me to know if I want to get deeper into design. I couldn't even tell you the difference between sans fonts and serif fonts. I just know most fonts boil down to one or the other. I guess I have some googling to do. Thanks again Evo.
05-08-2007, 11:22 PM
Looks good to me. I didn't find anything worth complaining about from my point of view and it wasn't for lack of looking.
05-09-2007, 02:12 AM
Too dark IMO.
I want dark backgrounds with white text more than the opposite.
05-09-2007, 06:46 AM
a roman font - if done right, can look very good - see http://www.dotfive.com as an example.
I didn't see any serif fonts on that website-- what did I miss?
(btw I love the look of that site)
05-09-2007, 01:25 PM
F*CK, F*CK, F.U.C.K.!!! Iíve written a huge review for hours and now everything is gone because Iíve accidentally hit a wrong key! :mad: I could cry! :(
Ah damn! Although I really wanna tell you my opinion I canít write everything againÖ
Site looks nice but can be improved. Give it some more subtlety and a less in-your-face look. Make the collage half as high and the logo on a plain background. Itís disappearing where it is now.
Use a lighter blue and scrap those squares.
Think about something else than dashed lines on the navigation (real background color change).
This is a no-no:
<li><a href="index.html" title="Home">Home</a> | </li>
<li><a href="#" title="Mission Statement">Mission</a> | </li>
Use CSS borders and padding/margin.
Ah crap, I canít give you better advice now after this frustration.
05-09-2007, 03:09 PM
@david_kw and Fumigator: Thanks guys!
-I hear you on making the collage smaller. That had actually ran through my head before.
-I know the logo gets a little lost in there, but its going to be tough to get it on a plain background. I really want that American flag in there seeing that our business is the training of our troops. I may play around with a couple of redesigns of it, but if I can't get a better replacement, it's going to have to stay unfortunately.
-Lighter blue where? The menu bar and footer? If I start getting lighter, that white text may start to get lost. And to be honest, I think the colors in those gradients make it glow pretty nicely. As for the squares, I've taken them out and it just looks so plain. I'll take another look. But definitely the dashed underlines for the menu need to go. I'll get a background change in place.
-You weren't suppose to find my quick and dirty solution of putting in those vertical bars :p Yeah, I know it's a no-no, but it's oh-so-easy to do, haha. I'll get some better semantics in there and clean it up.
Thanks for a thorough and honest review Stephan. Very curious as to what your original post would've been like, haha.
Thanks all for your reviews. I'll post again with the clean-ups in a few hours here.
05-09-2007, 03:41 PM
That wasnít nearly as thorough as what Iíve written beforeÖ all with explanations and suggestions (and reasons).
Well, let's take it step by step then.
As to the logo: What I was writing was that you could take the header of the official U.S. website (http://www.state.gov/) as example but do it vice versa: Have the logo on the left and on plain background, and fade in the collage (half the height of the current one - probably a little rearranged) to the right (kinda like what I did here (http://fortissimoband.de/pics1.shtml)).
As to the colors: The current dark blue reminds me of the old times when only web safe colors could be and were used. The strong contrast to the white makes it so 90-ish and in-your-face. Actually the text area on the old (current) website looks really nice. The blue of the logo is light, the logo is on plain background, the headlines are a similar blue, and the text is black (except in that list) - while I could imagine it would look really nice with a dark gray in the range from #666 to #333. All that is on an almost-but-not-quite white background. That looks much less obtrusive.
I also like the font in the logo on the old site. Looks like something between Avantgarde and Helvetica; but the round periods are different - I canít identify it but Iíd really like to know what font that is.
While you could use the headline font you are currently using Iíd suggest you use the same font as in the logo for your graphical headlines. This gives the page a more consistent look. Too many different fonts make it look cluttered.
05-09-2007, 08:49 PM
Ok, because I've made some important modifications to the current site, I've given it its own page so that you can compare it to the previous version. You can find the updated version at: www.espinc1.com/esptest/index2.asp.
Collage shortened by 35 pixels in height and one picture taken out to reduce clutter
Logo in collage brightened and made to stand out much more
Menu hovers changed to font color changes
Typography redone: all image headers, ESP company name and abbr, and top banner text = Century Gothic, menu and all other text = Verdana (this is not counting the faded text in the collage which is Bookman Old Style)
Main content are font color changed to #333 to reduce harshness
I'll attempt a background change on the menu perhaps and maybe an attempt at Stephan's idea of a flat background behind the logo with the faded collage coming in to the right of it.
And sorry Stephan, I have no idea what font was originally used, which is why I haven't been able to duplicate it. I don't have many fonts on my computer unfortunately, including the two that you thought it was a cross between, hehe.
Let me know what you all think of the changes. Thanks!
05-17-2007, 09:53 PM
Ignore the post above about having a separate page.
If you go to: www.espinc1.com/esptest/index.asp, you'll see the new Home page. The only link that works on that page is Services. From there, the only link that works is Simulation & Training. So in all, there are 3 pages that are finished. If you get a chance, let me know what you think of the new changes to Simulation & Training and the two newest pages (Home and Services).
05-17-2007, 10:43 PM
Now thatís really nice! Big improvement I would say. :)
Nice what youíve done with the main links. Although I still need to get used to that grid kinda backgroundÖ but that might just be my personal taste, donít worry too much about it.
I really like how the text and the background in the main section work together. And those sections on the service page: really nice. :) Now everything starts to blend real good.
One problem I have is that the graphic at the very top isnít displayed in my Firefox. I suspect this is due to the Adblocker that is removing/hiding everything the looks or sounds like an ad. In this case the file name has the word ďbannerĒ in it. I once had this problem too and had a hard time to figure that out.
Interestingly the main_banner.jpg is displayed so I donít really know after which criteria the Adblocker chooses items to block.
So all in all: Great job! :thumbsup:
05-17-2007, 11:02 PM
Thanks! I tried to implement the changes you suggested, so a big thanks to you on helping me here! Yeah, sorry about the grid. If I take it out, it just looks plain and lacking something. Maybe a grid isn't the best idea, hehe. I'll play around.
As for the top image, I've changed the names of both top_banner.jpg and main_banner.jpg to top_image.jpg and main_image.jpg, so let me know if that works for you.
Thanks again for sticking with me through this, haha.