Mockup Critique

[tomfmason]

I just finished a rough mockup of what will be my rails/django development company and would like to see what you guys think http://rails-solutions.com/design/default.html .  I was trying to go for a clean and professional look.

 

 

Thanks,

Tom

[steviewdr]

I like the color scheme and the look and feel. The tabbed buttons on the horizontal nav bar could be made a little bigger. The icons for Read More, Comments and the Date blend in very well.

There are a total of 3 Nav bars. You could eliminate one of them. The "Home >> Support >> Contact" could be changed a little to provide more information.

The width of the vertical Nav and Client Login area should be fixed to 150px.

 

There are a few css tweaks required yet. On IE6 and Opera 9.23, the following screenshots were taken:

http://www.burkesys.com/~sburke/phpfreaks/rails-solutions.jpg

http://www.burkesys.com/~sburke/phpfreaks/rails-solutions1.jpg

 

Looking forward to seeing more.

 

-steve

[roopurt18]

I get the same break-up that stevie got in FF, not sure if you're in the midst of working on it or not though.  Likewise if I squish the page down really small the rounded corner on the right gets a hard edge from the image on the left.

 

I'd consider taking the text-only navigation on the top and placing it above the footer since it doesn't add anything that isn't already available at the top of the page.

 

Your header buttons are a little pixelated around the rounded corners, I'm not sure if those are your final graphics or not.

 

I'd consider using an actual graphic for your logo, the font looks grainy when enlarged so much on my display.

 

Everything in the content area is nice and crisp, really top notch IMO.  I also like your color scheme.

 

(edit)  Also, and I feel like kicking myself for even suggesting this, you might want to add the tiniest bit of flash.  I would be very hard-pressed to use any flash within my own sites, so I would understand why you (and others) would be against it.  But, based on what I've seen in other threads on this board, it seems like a fair amount of clients seem to look for it.  Since this is for your web development company, I imagine you want clients, so you might want to demonstrate that you can use flash.

[moberemk]

Not bad. The overall design is nice, and the graphics work is cool. But it still kinda feels like a template; to look at it, it seems like you found something generic on the net and added a text header with your company name on it. You need to move away from that generic feeling-try adding a more graphical logo, and make a larger header for the home page-that will make it look much nicer.

[tomfmason]

I have made several edits. The biggest being the addition of min/max widths for the tab background and content. I know that IE6 doesn't support min/max width and height so I will use some js and will create a popover to suggest that IE6 users upgrade their browsers to a more compliant version. As steviewdr suggested, I set the client login form to a fixed width of 150px. Also, I think I have got the offending pixels from the tabs squared away. They look much smoother to me. I also switched the positioning of the tabs and content from em to px because, for users that define a minimum font size of  12px or more, the content overlapped the tabs. I am thinking about doing as steviewdr suggested and make the header/tabs a bit bigger. I also like the suggestion from moberemk about making a larger header for the home page. I will play around with it and see what I can come up with. I may even fire up wings3d and blender for some cool 3d-ish style graphics. I also replaced the html text logo with a graphical text logo. It is basically the same for now but I will work on it and  see what I can come up with.

 

@roopurt: I am not really a fan of flash graphics. I have always been of the frame of mind that graphics should enhance a site and add to it's appeal but not distract the user from the content.

 

I was speaking with ober via im and he said that "It kinda has a blogish type feel to it". As much as I would like to disagree, I can't. I think he is right and it is most definitely not the look I was going for.  Any suggestions as to how I can get rid of the blog feel?

 

 

Thanks,

Tom

[roopurt18]

I think much of the bloggish feel comes from the 'Read More' and 'Comments' links in your 'Welcome' message, as well as the 'Post By.'

 

I would also be inclined to say that on most corporate sites, they use either a horizontal or vertical nav on the home page but not both.  You are very likely to see both at once on a blog though.  Since your vertical nav doesn't offer anything that's not already present in the header, maybe you shouldn't display it on the homepage and only bring it in when theres sub-navigation.

 

In place of the navigation on the home page, I'd maybe place a graphic or a random image that shows off your company, projects, etc.  While I agree with you about flash and graphics in general, this is where I would have used it.  I hate sites that use 3/4 of the top or middle of the page for flash animation.  However, a small amount of it when used properly can be very effective.  Consider an animation that throws out phrases like "Dependability," "Customer Satisfaction," "Integrity," etc. along with appropriate images and images of your portfolio.  I only say this because I don't know what type of clients you are targeting, but I am assuming you want as many clients as possible.  I would assume that most of your clients are not web developers / designers themselves, otherwise they wouldn't be interested in your services.  I imagine that most of the people you interact with are your regular, run-of-the-mill business people and they're suckers for bullshit.

 

I'm still of the opinion that the three text links at the top of the page don't add anything and that you'd be better off moving them to the bottom.  In fact, recreating all your navigation as plain text links at the bottom would probably give it more of a corporate feel.

 

Overall I still think the design is great.  It's very clean and sharp and the new images in the header are a great improvement, although your logo appears to be suffering from too much compression.  If I stumbled across this page on the net I'd be impressed.

 

However, to get that real business feel, it almost has to look like someone who didn't know what they were talking about was standing over your shoulder making suggestions and that you had to follow them.  I'd love to hear any contradicting opinions to my own though from some of our other PHPFreaks designers, as its probably my weakest area.

[jcombs_31]

I'm a big fan of blue, so I like the colors, but there are some issues.  I'll highlight them in a screenshot attached.

 

As you can see, I have a problem with your corners and your drop shadows.  The corners are pretty rough and need to be cleaned up. On the menu I don't like the dark borders. The drop shadows don't make much sense.  You can't move them to a horizonal offset on both sides inward.  Not sure what light source would create a shadow this way.  The gradient on the right seems out of place and I don't particularly like the grey borders on the sides.  I would move the grey gradient below the blue header and let that take place of the side borders.  I also wouldn't put the content inside of another container unless you plan to line the bottom with the right side. Throws off the balance.

 

[attachment deleted by admin]

[roopurt18]

Just an idea, but you're logo seems to be near a light source.  Why not use that as the light source for all of your drop shadows, assuming you keep them?

[tomfmason]

I pretty much scrapped the old html/css and many of the graphics. I think the newest version is much cleaner . http://rails-solutions.com/design/2/default.html

 

I fixed the layout issues. Or least from my end it appears that way. I have a min-width set to 790px but it should now scale nicely for larger resolutions. As steviewdr suggested, I made the tab background and the tabs larger. I also recreated the tab links in the footer.

 

Next up is to do the actual home page header and graphics. I just wanted to see what you guys thought about this version before going much further.

 

 

Thanks,

Tom

[roopurt18]

I think its an improvement, but there are a couple minor issues.

 

When the page gets wide, the background seeps through into the content.  Also, you get a huge gap between the content and the client login area.

 

It doesn't feel bloggish at all to me anymore.

 

[attachment deleted by admin]

[steviewdr]

Looking good. Its a good redesign using the nice color scheme. A few things Id change:

Unbold the text in the Horizontal Nav.

Increase line spacing a tad. Perhaps 1.1em.

Include a graphic/image for the Become a Client area.

I would also look at dedoing the logo. It could be made more predominant. Perhaps introduce a graphic along with teh text - i.e. a light bulb or something else to make a logo out of it.

At a resolution of 800x600, the Become a Client div gets chopped on the right. This is a minor issue with my IE6. I solved this before by having the header graphic 780px wide.

Also - I would reduce  the radius of the Become a Client div (just my IMO).

 

Overall - looks very well. I really like the sun/light rays and perhaps more could be made of this throughout the corners of divs throughout the page etc.

 

-steve

[tomfmason]

I was playing around with ideas for a logo and decided to try something 3d-ish . So I fired up blend and came  up with this.

 

 

and then tried using it in my header like this

 

 

What do you guys think?

[roopurt18]

I have no idea what it has to do with web design, but I like it!

[steviewdr]

I really like the 3D lamp post idea. Ideally the light rays would come from this aswell. This might be a bit difficult and require changing around things a little.

 

Im not too big of a fan of flash, but I really like the flash logo at:

http://rails-solutions.com/design/2/default.html

Perhaps if you can wait 2-3 seconds before you run the text animation part. This is because with it loading for me, I only see the tail part of the text animation.

 

The text font and line spacing is also very nice on that page.

The "opposite corners rounded" on the client login box looks well. If you are going to use this "theme" then you need to use it more on the site. Perhaps take the same concept with the larger radius's of the main div. Atm the rounded/square corners of the client login looks out of place on its own.

 

Im afraid that the css layout is gone again in IE6. It looks fine in Opera.

 

-steve

[roopurt18]

Im not too big of a fan of flash, but I really like the flash logo at:

http://rails-solutions.com/design/2/default.html

Perhaps if you can wait 2-3 seconds before you run the text animation part. This is because with it loading for me, I only see the tail part of the text animation.

 

Ditto on the delay.  Remember the flash is there to show potential clients you're capable of using it, so you don't want them to miss it.

[steviewdr]

Screen grab of latest css problem in IE6:

http://www.burkesys.com/~sburke/phpfreaks/rails-solutions-design2.jpg

 

-steve