Hi there folks,

 

My latest client project is due to go live in a day or two, just though I'd grab some feedback from the good folk at Web Designer Forum.

 

See the site here

 

Again this is a little out of the norm, but I just love it!

 

Enjoy!

Hi there folks,

 

My latest client project is due to go live in a day or two, just though I'd grab some feedback from the good folk at Web Designer Forum.

 

See the site here

 

Again this is a little out of the norm, but I just love it!

 

Enjoy!

 

I really like it. Clean.. sharp.. and colourful. Love the transparencies, and drop shadows on the header bar too. The only thing that caught my eye was there's no drop shadow on the breadcrum, appart from that though brilliant work!

I really like it. Clean.. sharp.. and colourful. Love the transparencies, and drop shadows on the header bar too. The only thing that caught my eye was there's no drop shadow on the breadcrum, appart from that though brilliant work!

 

Thank you, originally there was a drop shadow on the crumbs but it just didn't sit quite right. So I removed it. Good spot though!

Not bad.

A coupe of very small remarks:

1. Too big empty space between navbar and content (on the main page).

2. Maybe it would be better to add spaces after commas in the text:

 

"A Business IT and Communication specialists, providing integrated IT, voice,data and

mobile solutions.You can rely on our expert advice,services and support to deliver everything you need to work in a more efficient and effective way."

Not bad.

A coupe of very small remarks:

1. Too big empty space between navbar and content (on the main page).

2. Maybe it would be better to add spaces after commas in the text:

 

"A Business IT and Communication specialists, providing integrated IT, voice,data and

mobile solutions.You can rely on our expert advice,services and support to deliver everything you need to work in a more efficient and effective way."

 

Nicely spotted! I'll get the spaces added.

That is so cool, I'm really liking it graphics wise!

 

Usability wise I'm not so sure. The font size seems a bit a small even for someone with a good eyesight like myself, yet I still find myself pressing ctrl and +. I'm sure this is a design choice as small font often does look good, but you have to weight the usability vs aesthetics.

 

The input fields on the contact page could perhaps use the same background color as your search box. The fff white seems a bit too bright.

 

The Products & Services -pages could use some sort of call-to-action. Now, there's the description and it's all fine and dandy, but what do I do when I want to make the purchase?

 

Oh, one more thing. On the front page where you have those three colourful icons. I'd like to see some sort of tooltip when mouse over.

 

Good job!

You seem to have a problem with the box-shadow on your nav in IE, if you hover then move up to the parent li and across it leaves the shadow covering the nav

 

does it do this for you? this is in IE8 & 7

 

 

 

 

if you drop the display:none and use left to position off screen and then position it back with the hover I think that should work

 

header nav ul li ul { 
width:169px; 
float:left; 
background:#202629; 
padding:0 2px; 
position:absolute; 
top:78px; 
left:-9999em;  
-webkit-box-shadow:#333 0 3px 3px;
-moz-box-shadow:#333 0 3px 3px;behavior: url(http://www.rock-networks.co.uk/PIE.htc); 
box-shadow:#333 0 3px 3px}

header nav ul li:hover ul {left:-3px;}

Edited August 15, 201114 yr by mteam

That is so cool, I'm really liking it graphics wise!

 

Usability wise I'm not so sure. The font size seems a bit a small even for someone with a good eyesight like myself, yet I still find myself pressing ctrl and +. I'm sure this is a design choice as small font often does look good, but you have to weight the usability vs aesthetics.

 

The input fields on the contact page could perhaps use the same background color as your search box. The fff white seems a bit too bright.

 

The Products & Services -pages could use some sort of call-to-action. Now, there's the description and it's all fine and dandy, but what do I do when I want to make the purchase?

 

Oh, one more thing. On the front page where you have those three colourful icons. I'd like to see some sort of tooltip when mouse over.

 

Good job!

 

Font size is a design choice, the team are all on 27" iMac's and we found that the font although small is readable. Good call on the input boxes and I do think you are totally right on this. Will correct tomorrow.

 

This is phase 1 of the site so no call to actions, more an online brochure. The tooltips is a nice idea, originally the three icons grew on hover but had issues with IE (bloody thing) so dropped them for now.

 

On the next phase the site will get more jquery and more webkit goodies. Looks really good on the iPad plus the app icon just finishes it off.

 

Thanks to everyone for the feedback, anymore suggestions are welcome.

Thoughts:

 

Font size is way too small. Body copy should be 13-16px at a minimum nowadays. Anything smaller is a nightmare for people with poor eyesight. I work on a 30" (which has a slightly higher dot pitch) and it's readable but not comfortable. I've produced stuff in the past with 10/11px font sizes and user testing almost unanimously came back with "font size too small".

 

I don't think your slab serif works well at small sizes. It's gorgeous on the big 23px headings (leading is great), though.

 

The overall spacing in your body paragraphs is too tight. Once you bump the font size up you should add a point or two of leading and some more spacing between bullets and paragraphs.

 

The color scheme (and the various product-specific color scheme changes) are great. I love the background images and the diagonal lined transparent content container.

 

I love the contrast with the header and logo.

 

I don't think the icons for the individual products/services fit with the rest of the visual style. It might just be lighter border around the icon, but something's off.

 

All of your buttons need hover and active states. Most noticeable offenders are the search icon and the button for the contact form.

 

For the contact form you 100% need error handling to be on the same page. It's a UX hole to have people have to click to go back from the error page. It's great that you save the field values, people always forget that. Your error handling should:

• Clearly show which fields are erroneous
  
• Be on the same page as your form
  
• Be descriptive about what is wrong and what the right input would be. You do a pretty good job of this already, but added for reference.
  

I think you have some hierarchy issues (mostly because everything is pretty much white and small). You probably can't add too much color with the changing color schemes but even differentiating font families, weights, sizes, etc. would help out a lot.

 

Overall, I really like the direction, colors, branding, etc. I just think that the typography and some of the UX problems I noted could stand to be addressed. Good work!

Edited August 15, 201114 yr by porkchops

Thoughts:

 

Font size is way too small. Body copy should be 13-16px at a minimum nowadays. Anything smaller is a nightmare for people with poor eyesight. I work on a 30" (which has a slightly higher dot pitch) and it's readable but not comfortable. I've produced stuff in the past with 10/11px font sizes and user testing almost unanimously came back with "font size too small".

 

I don't think your slab serif works well at small sizes. It's gorgeous on the big 23px headings (leading is great), though.

 

The overall spacing in your body paragraphs is too tight. Once you bump the font size up you should add a point or two of leading and some more spacing between bullets and paragraphs.

 

The color scheme (and the various product-specific color scheme changes) are great. I love the background images and the diagonal lined transparent content container.

 

I love the contrast with the header and logo.

 

I don't think the icons for the individual products/services fit with the rest of the visual style. It might just be lighter border around the icon, but something's off.

 

All of your buttons need hover and active states. Most noticeable offenders are the search icon and the button for the contact form.

 

For the contact form you 100% need error handling to be on the same page. It's a UX hole to have people have to click to go back from the error page. It's great that you save the field values, people always forget that. Your error handling should:

• Clearly show which fields are erroneous
  
• Be on the same page as your form
  
• Be descriptive about what is wrong and what the right input would be. You do a pretty good job of this already, but added for reference.
  

I think you have some hierarchy issues (mostly because everything is pretty much white and small). You probably can't add too much color with the changing color schemes but even differentiating font families, weights, sizes, etc. would help out a lot.

 

Overall, I really like the direction, colors, branding, etc. I just think that the typography and some of the UX problems I noted could stand to be addressed. Good work!

 

Pork, thank you for your comments. I think your points about the typography are totally valid and it does need addressing. I believe for phase 1 everything will be staying as it is for now as the client is desperate to set it live. Phase 2 will see quite a few changes, not only to typography but also to accessibility and structure.

 

I will refer back to your comments on the next phase.

 

Steve

I'm not gonna point out what others already have, but generally speaking, it's just overdone and inconsistent for me. It very much seems a case of aesthetics before usability, because in terms of usability it isn't a great design, I found the website very difficult, awkward and strange to use.

 

I'd also question it's speed, it's pig slow, nobody wants to sit around waiting for background images to load.

I'm not gonna point out what others already have, but generally speaking, it's just overdone and inconsistent for me. It very much seems a case of aesthetics before usability, because in terms of usability it isn't a great design, I found the website very difficult, awkward and strange to use.

 

I'd also question it's speed, it's pig slow, nobody wants to sit around waiting for background images to load.

 

Mike, this is the first time anyone has had an issue with speed. Even on my iPhone and iPad with the 3G connection the load speed is very fast.

We have tested and tested the load speed.

 

Check it on Pingdom Tools.

 

What connection are you on?

Edited August 16, 201114 yr by singleframe

Hi Singleframe

 

Nice site, 80% of it is very good.

 

I have a personal preference towards techy/dark layouts so this hits the spot.

Also has a bit of a game UI feeling.

 

The issues mentioned in previous post are good points and need some attention, I cant add much to that.

 

Only thing I found less attractive are the background images used for each chapter, I like the color schemes in those images and can see where you are going with this but I would ditch the images and create nice textured backgrounds that fit the layout better.

 

P.H.

Hi Singleframe

 

Nice site, 80% of it is very good.

 

I have a personal preference towards techy/dark layouts so this hits the spot.

Also has a bit of a game UI feeling.

 

The issues mentioned in previous post are good points and need some attention, I cant add much to that.

 

Only thing I found less attractive are the background images used for each chapter, I like the color schemes in those images and can see where you are going with this but I would ditch the images and create nice textured backgrounds that fit the layout better.

 

P.H.

 

Hi thanks for your comments, the large images in the background actually tie in with the company's stationery, office wall images and signage.

 

Site is now live.

Does your client not care about people with IE?

Does your client not care about people with IE?

 

It's been tested in IE7, IE8 & IE9, all valid code etc.

 

We do not support IE6 as its a legacy browser and no longer supported.

Ie7 & ie8

 

Well thank you for that, how are you getting that to happen? I'm running XP & Window 7 on VMWare for testing purposes and everything seems fine.

If you see post 7 ^

 

looks like a css3pie issue by using position instead of display for the hover should fix it