Web Design Workshop #19: A.M Motors
tuts workshop

Web Design Workshop #19: A.M Motors

on Aug 24th 2012 with 26 comments

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, something for the motorheads amongst you..

Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.

The Design

Web Design Workshop #19

We designed this to showcase all the cars manufactured by Maruti Suzuki in India. This is a dealer website. We are trying to make all the info available when a person needs to buy a car. – Jaijin Poulose

Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.customicondesign.com Custom Icon Design

    I think the color of “WELCOME…” and the background is almost the same, I think it should make more difference. And the color of all the design is not good. the icons of the bookmark is also need some change.

  • Devon

    I like the layout and design of the site but I noticed the auto-scaling background image can sometime distort the shape of the car. Going with a fixed size and fill may be better or keeping the aspect ratio of the picture in the background might work well.

    Cheers,
    Devon

  • http://www.je-fischer.de/ DatenVerarbeitung – Jens Fischer

    I don’t like the pattern over the car and the shadow isn’t well created, I think the car itself should be more outstanding.
    Further I don’t like the integration of the logo “AM Motors”. It don’t fits in my eyes to the whole site.

    What I like is the design of the other logo. But here again: I wouldn’t put a pattern over it.

    Greets…

  • Jesse

    I like it…but have a few suggestions.

    1. The background images look really funky on my 27″ Mac. Depending on how I resize the browser they become squished or stretched.

    2. The social media icons look a little dated too.

    3. In the sub pages the color of the logo seems to get “lost” in the background.

    4. Keep it consistent.

  • TheDabin

    I like that you have focussed the site on the car, making it the centre of attention. That is what most car companies do, so I think its necessary.

    I also like the simplistic style, which is using its minimalism so as not to clash with the pictures of the car.

    However my issues are:

    The navigation is too heavy. The height of the grey blocks means it will always take up far too much real estate on the page, it also is quite jarring with the symmetry of the design.

    The two nav items at the side of the page feel either unnecessary or should be slotted into the top nav or footer nav somehow, having navigation on 3 sides of the site feels too much and is confusing.

    The sales offer sticker isn’t in the same style as anything else on the site, it feels like one of those cheap things they teach you to do on tutorial websites.

    Not sure about the way you’ve overlapped the ‘Welcome to the world of AM Motors’ with the Luv Life logo, They feel like they have been placed randomly. I’d play around with their placement. The luv life logo is great however.

    Possibly my main criticism is that the site bears very little relation to the logo of the company itself, there is no red or blue on the site and it doesnt feel branded at all. Maybe a good thing as their logo is quite ugly, but still the site looks quite generic and doesn’t feel individual as much as it might.

  • http://www.intheoasis.com/ Dan

    The first thing that stuck out for me was the logo. Not sure if it fits well with this design. Maybe a change of colors if the company is willing.

  • William Pullen

    I think the social icons in the bottom right corner look out of place with the rest of the style. I think I would have done something like black and white these look like 2008 web 2.0 icons compared to the rest of the modern minimal style. I also am not a huge fan of the drastic difference in style between the homepage and the sub pages. on the sub pages the logo looks too dark as well with that background the text does not pop out from it.

  • migkapa

    I think that the gradient given to the QUCK CONTACT and TESTIMONIALS is to much. Maybe it must be a solid color or an soft light style gradient. Maybe smaller nav elements background.

  • Rick

    I think the design looks cool,
    But there are a few things. i don’t personally like the gradients in the buttons to the left of the screen. maybe make them all white? They don’t fit the design since no where else are gradients used.

    Also when hovering over the buttons and then when your mouse leaves again sometimes the white drop down keeps sticking.

    • David

      I agree with Rick about the gradients, they look a bit out of place. I also think that the stickers on the right don’t match the rest of the site.

  • Adam

    Its a no from me.

    Looks like someone has dipped their hand into a bowl of web elements and thrown them at the page.

    The concept I like, but the delivery is poor.

    Work to be done. :)

  • Pingback: My Stream | Web Design Workshop #19: A.M Motors | My Stream

  • Conor

    I’m with the first commenter, I think the “WELCOME” line is in no way prominent enough to justify being there. At a minimum I’d perhaps give the text a stroke and/or a drop shadow to kick it out a bit. Ultimately though, it’s white text on a light background, I think you need to re-think the colour scheme.

    The main nav could maybe do with being toned down a little, perhaps lower the opacity of the square backgrounds.

    The right side of the footer doesn’t look a part of this site, it looks as though it’s bled over from another site. It really needs some work to fit in with the rest of the design.

    Okay, so this is a pet peeve so feel free to completely ignore it! The little nav tabs (“QUICK CONTACT” and “TESTIMONIALS”) just don’t sit well with me. I hate being forced to tilt my head to read something on a website: no reason why you should ever HAVE to do this in my opinion. With something like meta data I think it’s fine, but not for this. Also, they don’t really grab my attention(shouldn’t “QUICK CONTACT” be much more obvious for the type of user it would appeal to – i.e. someone in a hurry?).

    I haven’t covered everything, these are the things that jumped out at me. Please take what I’ve said constructively. Good luck!

  • Gabriel

    I pretty much agree with all of the previous comments. I would only add that there is a huge problem of content on what I’m assuming is supposed to be a central hub of this website, the home page. From looking at the home page I have absolutely no idea what this website is going to do for me as a user. There is a car… and I’m pretty much left with that. There is also a “LUV” branded logo that I am encouraged to live life with, yet I am absolutely left in the dark about what this is. What is the Sales Offer? What is the Service Offer. Please, as a user let me find value and content on your webpage without having to click. I need some reason to become invested in this experience, and this webpage is giving me nothing. As a user, the first thing I’m going to click on this website is the back button as the UX design has my eye wandering around this webpage aimlessly.

    From a technical standpoint I would say the shadows under the car need to be worked on to make it look less like the car has simply been shopped and pasted there. The car needs to look like it belongs there, like it has presence and is effecting it’s surroundings. Not like if I sneeze it’s going to blow away like a leaf. Also because of it’s dark contrast the nav menu is drawing my eye to the upper left corner yet I only come to a boring Nav Menu with disproportionately small type. The designer waves me over with a smile and shows me a plethora of dead birds. This site is a jedi mind trick. When I look at it I hear a voice in my soul that says, “This is not the website you’re looking for.”

    Hope this wasn’t too harsh. :)

    • http://kanchanrai.com.np Kanchan Rai

      I totally agree with you! The homepage looks kind of jquery slideshow tutorials demo page. Apart from the navigation and full page car backgrounds with netted effect, all the other elements look very unprofessional (sorry about that).

      I totally agree with Adam, site is a clustered place of web elements used randomly. The gradients used on the tilted buttons on the right, they seem totally out of place along with no hover effects and no padding at all. Also, the social networking icons don’t go very well with the overall design. Maybe the use of black and white icons would have been better. The color of the footer text is white and is as large as the main nav. When hovered, it turns red. This seems very like the work of a noob just learning html link and effects.

      One of the red stickers is blocking the facebook icon partially, not a good thing I believe. Also, the bigger one with sales offer is behind the footer bar. Seems a bit odd.

      And finally the logo, the logo is red and blue, a color combination I would rarely suggest someone to use. It looks like adidas logo with an additional triangle at the front. Anyways, most websites play with the colors of the logo for consistent branding but the site totally disregards the logo colors and logo looks even uglier due to the colors used.

      As everyone suggested, the welcome text isn’t prominent. It’s hard for the eyes to read them.
      Overall, at first glance the website looks great but immediately you can notice the flaws. They are remarkable. It’s like a beautiful girl dressing up badly with bad makeups. Sorry if was harsher than Gabriel!

  • Pingback: Web Design Workshop #19: A.M Motors | Webdesigntuts+ | inLine Media RSS Blog

  • Tim

    There’s a lot of work to be done.

    I agree with the gradients on the buttons: they look really out of place. Also, why have a link to ‘Testimonials’ when there are no customer testimonials?

    Also, the logo is nearly invisible on most of the pages of the website.

    The blue background on the ‘Service Booking’-form also really hurts my eyes.

    The ‘Sales Offers’ table is near impossible to read. Either try to divide it in to separate tables or use some ‘zebra-striping’ to enhance the contrast.

    On a positive note: I like the look and feel of the navigation, but sometimes there’s a lot of whitespace in the dropdown.

    The ‘Careers’ section contains only one page, but why is there a separate dropdown for it?

    Like people have said before: the groundwork is there, but there are simply too many elements that just don’t work out.

    I just felt really uncomfortable using the site, even though it really doesn’t look all that bad. There are just too many things that aren’t working out.

    Hope this helps

  • Patrick

    Good work. i like what you have come up with. Just like the other guys have pointed out ,am of the opinion you do away with the welcome line since already am on the site and there is a logo. secondly i think the images are moving a bit too fast so do something about it. thirdly on the career page try and add a form or a way of prospective employees can send there c.v via the website directly. last but least the home page button let it be more visible and may be move it on the left side.

    Before i forget choose another color for the stickers on the homepage. let the color blend with the background.

    Good work. congrats.

  • http://www.davemeyerson.com Dave

    I’ve got a few…

    1 – The Dots. It’s distracting when it covers the entire background image. If you really have to use them, try cropping the dots around he vehicle to make the object of focus more prominent.

    2 – The header. If you want to use the menu this way, then extend the gray box to the right to hold the logo. Also, try to place the tag-line in this new box so the “A.M. Motors” of the tag is lined up with the logo text. This will make it come together. If that doesn’t work, then employ some better typography for the tag-line in the center image.

    3 – The side-links Contact/Testimonials. Get rid of them. There’s already a contact button on the menu and you can place testimonials in the footer. Plus, when Quick Contact is open, it covers the Sales drop-down. The way they work is also different; contact slides open, testimonials is just a link.

    4 – Main menu text. The text on the primary buttons should be more prominent. Make it larger, and white.

    5 – The Promotional Stickers. Since you’re already scaling everything with the browser-size, why not set them to always be on the bottom right? Also, choose a different graphic; it may work OK with two of them, but when they want to add more it will be awkward.

    6 – Consistency. The sub-pages are very dark and center-aligned with a different layout. ALL the pages should look and behave the same in terms of navigation and appearance. The last thing you want is for the user to get to a page they want to view and have to stop and rethink their experience because the items and layout have shifted. The first thing the user should think when they arrive is “YES, that’s what I’m looking for.”

    7 – The first image has TWO tag-lines “Welcome to the world of A.M. Motors” and “Live Life with LUV”… it’s confusing. Following the suggestion from #2 may help.

    8 – The Logo. Red & Blue isn’t a good combination. Try a basic version of just white symbol and text.

    9 – Understand the primary goals of the target audience. Why are they on the site? What are they trying to accomplish? What is their age-range? What technical proficiency do they have: are they familiar with more creative layouts or do they browse more easily with simplified systems?

  • https://sites.google.com/site/custombuttons1/ Vernell

    Wow! This blog looks exactly like my old one!

    It’s on a completely different topic but it has pretty much the same layout and design. Superb choice of colors!

  • http://www.eleven-designs.com web design company hyderabad

    Hi,

    Nice one. Looks impressive though the logo didn’t made up a sync with the design. Would be more attractive if it is blended with the design.

    Thanks,
    Ram

  • http://www.agentsupport.net/display/wdseo/Website+Design agentsupport

    I think that the title welcome to.. should be in some dark color than white, also the front page should have login portal visible to customers. Other things are bit ok. Web Design

  • http://www.primomotif.com Aroldo Alvarez

    What a great article. I am a huge fan of Design and how important it is the entire web design process.

  • http://www.pixprodesigns.com Kumar Gaurav

    I feel the design of the button fixed hanging on left side need serious design attention as it not built beautifully.

    Footer links are even badly designed… It is not crisp not even placed in a stylish or simple manner…

    Text on the website in not clearly visible for UX point of view, neither in the navigation nor in content part.

    Social Icons on the bottom right section needs work not at all crisp.

    That all from my point of view… Overall Detailing in the design is missing. :-)

  • Crystal

    I like the simplicity of the design. As others have mentioned above, it’s all about the car, and I dig that.

    Here’s a few things I would consider looking at:

    1. The car itself, take the background treatment off of it. I muddles the look of the car in my opinion. I really think the car should look as crisp and clean as possible.

    2. The AM Motors logo really doesn’t fit with the rest of you design. Do they have a gray scale version of the logo? That might work better with the color scheme you’ve chosen.

    3. I’m not sure why you have the welcome message overlapping the “Live life with luv” logo…seems a bit odd. I would play around with the placement of those two elements.

    4. You might want to take a look at bringing the AM Motors logo to the left and the nav to the right (so have them swap places essentially). I think people tend to look for logos at the upper left hand corner of pages.

    5. The treatment you have on the nav seems unfinished. I actually thought these might be wireframing elements still. They seem very heavy and blocky. I think there are ways to call emphasis to them without making them seem so heavy.

    6. The social icons are definitely outdated. I would update those.

    7. What’s with the “special offer” and “sales offer” stickers? I get why you would want to bring attention to them, but I’m not sure if it’s the first place you want the user to go, and my eye goes right for those HUGE bright red elements. Not to mention, the red clashes with the color scheme you’re using.

    8. I’m assuming the quick contact button takes you to a form? Have you thought about just putting the form on the page. Since you want it to be “quick”, I think it’d be easier to just have it ready and accessible so the can quickly fill it out without having to click anything.

    9. Not really sure why you called out the testimonials like your did the quick contact form. Seems like you could just put them on one of the pages within the nav.

    Overall, I think it’s a good start and definitely has potential :]

    Good luck!

  • http://chovy.com chovy

    The white lettering is too difficult to read, and the social icons are not the standard icons — I almost didn’t recognize them.

  • Ween

    “Trying to being the best in the class of what i do. Please don’t say “mind your own business” because my job is to peep into your business and take the fruit before you get it so that my clients get the best of what they can get. I like to work with the competitors because “you get smarter by playing a smarter opponent” and guess what i am in the right place where all the people working here at DEZIGNEX have their own identity and are good competitors in their field.

    THERE IS NO ETHICAL SHORTCUT TO SEO AND LIFE….”

    Need I say more? Notch, notch, wink, wink….. why bother?

  • J Wells

    beside some of the element addressed by previous post I would like to point out the following.

    moving from one menu to the next that does not have a sub menu does not close the previous sub menu.

    design suits an intranet application where users can be trained in the user of the application. There are to many paring of many elements like the shape of an element, font etc.. menu is hardly noticeable on other pages. Overall there is no symmetry no alignment perhaps you could look up Gestalt and get some ideas.

    white space, table headers appear not related and have no personality. Nothing speaks to me after you leave the home page. select a menu item over a white background makes the text in the background appear has if they are on the menu. All in all well done.