Web Design Workshop #5: Fabulloso!
tuts workshop

Web Design Workshop #5: Fabulloso!

on Mar 16th 2012 with 28 comments

Web Design Workshop is our weekly 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, we have an eCommerce project for 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 #5
See it live

Fabulloso! is an online apparel store. I would like people to critique the whole website design and user experience. We used Magento for this website, the design is from scratch. Our targeted customers are upper middle class people and those aged 25-35 years.- Surendra Vikram Singh

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.circadiadesign.com Devon Beard

    I really enjoy the style of this site. Well done! The only thing that I get distracted from is the back image. I think it is a little too bright. It takes my focus away from the content and focuses on the background. Other than that I think this is great. Looks really good.

  • Pingback: My Stream | Web Design Workshop #5: Fabulloso! | My Stream

  • Dimitry

    I’ll second Devon! Overall design is quite fine, except the bright background which distracts the attention. I would try to mute and desaturate it or rather get rid of it. Is it really needed? And not only it is too bright, it also looks as being apart from the design itself, which is – I will repeat – is quite fine without this background. And when you’ll get rid of it, try also to play with the hue of the topbar, I do not want to say that it is bad, yet maybe you will find some even better alternative to it. All is just an IMHO. Yet you can also leave it as is.

  • http://www.adipurdila.com AdiPurdila

    Overall, I like the design, good job :) However, I do agree with Devon and Dimitry, the background is a little distracting. On top of that, I think you could play around in some other areas as well:

    - The menu text needs a bit more spacing, especially on the sides. Right now it touches the outer borders of the main container.
    - The drop-down menu is a bit confusing because there is little contrast between the links and the background. I think if you’d use a solid color for the BG or even a transparent white would be much better. Also increase the darkness of the text and the font size as well.
    - The top menu (with “My Account”, “My Cart”, etc) looks a bit weird cut off like that. Either extend it to the full length of the container or cut it diagonally at the left edge.
    - The search icon could use a little more space on the left so that it’s not so close to the edge of the box.
    - Not really sure about the Subscribe button. I didn’t realize that was a button until I hovered and saw the tooltip. Personally, I would include the subscribe text box with a new button in the image above it (the white box would give a good contrast on that dark BG). Oh and I think a solid border would work better on the subscribe box instead of dotted.
    - Lastly, I’d make the footer menu separators equally distant between the links (just me probably, but I like to align stuff all the time :D)

    That’s pretty much it, hope you can use this :)

    Adi

    • http://flavors.me/surendra_vikram_singh Surendra

      First of all thanks a lot Adi for feedback. I will love to work on ur suggestions. Ur suggestions will help to make website pixel perfect. Thanks a lot!!

  • http://www.webtekk.net Alexander Rohmann

    I think the whole design would look alot better if you used a subtle background, and instead of the container having a white background, let it be transparent. The harsh cut between the colored part of the background and the white container just doesn’t look right. I think using a subtle background texture would look great – even if you applied the current background to it in a subtle way with some blending.Overall, it’s a very nice minimalistic design, the background just takes alot away from the minimalism.

    • http://flavors.me/surendra_vikram_singh Surendra

      Thanks Alexander! for ur valuable feedback. I will work on the background again as everyone is pointing that its not going with the design. even i feel its killing the beauty of the products. Thanks Again!!

  • David

    I removed the background using firebug and it looks much cleaner though a little less framed. For me either remove the background and try and frame the content somehow or go with something far more subtle as a background.

    I am not a bug fan of how your page looks on a 17″ laptop screen. The floating header along with the position of the fold does not fit right with the size of the slider. Making your slider images around 400px would make it clear that the page is scrollable on this size of screen.

    You have a bug in your JS as your translated variable is not defined. Check out your page with firebug to see that error.

    I like the general feel of the website, your product pages are really good and clear (I would put the add to cart button at the top next to the price)

    Your checkout process is really hampered by your background style though.

    Your product grid views are nice, might be worth adding the buy now button to each of these products in the grid view.

    You have some major menu issues looking at the categories using internet explorer 8 (almost unreadable).

    Overall, nice site, nicely displayed products but not a fan of the background and you need to be testing your designs in internet explorer even if it is tedious :) .

    • http://flavors.me/surendra_vikram_singh Surendra Vikram Singh

      Thanks David! for deeply testing the website. Even i feel the background overpowering. i’ll surely test the design in IE8 & lower. Thanks again.

      • Preston

        When it comes to design centric Magento sites, I say screw IE < 9. This is fashion. Fashion != IE8.

        • David

          I do not agree at all with this remark. You are willing for someone to lose business based on a hunch that anyone shopping for fashion that uses IE is already on version 9!!

          I understand that IE adds complications into sites and it makes it harder to refine the design but that is no excuse to ignore potential customers. Reputation and money is at play.

  • http://www.giulianoliker.com Giuliano

    My 2c. Overall look & feel is very good. There is just some fine tuning I would do here:

    I would add 10px white padding around website. While no padding still looks good in content I think website header would benefit from it.

    Home link in the main menu is too close to the edge. Maybe little bit more padding for all items would help. You might have to reduce font size.

    Search block looks too ordinary. This design is aiming somewhere else and round search box looks like out of place to me. I would change it to something similar to “Enter your email here…” box in the landing page footer.

    I think you could lose transparency for submenus and maybe change the color to white or bright orange like header menu background.

    I would like to see “Designers and Artists” submenu items not bolded.

    Four images underneath big image on the landing page should have sides aligned with image above. Looks like they are few px off.

    Stitched leather “new banners” on the “Shoes and Accessories > Jewellery > Earnings” page doesn’t belong to this design. Maybe something similar to header menu background zig-zag edges would fit better.

    I would redesign “Add to cart” button to fit overall design. Maybe just square orange button without gradient would look better.

    And last something that might not be necessary but I would create rich footer instead those links. I would like to see contact info and other relevant information there at a glance. Maybe latest info, tweet, etc…

    All in all this is just a bunch of minor updates but in general website looks good.

  • FireDart

    Over good, except 3 things:
    – Background is a little overpowering
    – Sharp cut from the background to the content. Either make the content background transparent or use a fade effect on the edges.
    – The floating header does not site well for me, very few sites should use it, this is one of them.

  • Pingback: Web Design Workshop #5: Fabulloso! | Shadowtek | Hosting and Design Solutions

  • http://abrightconcept.com Gabriel

    Hey, I just had to add this comment because this particular problem is extremely common and I see it everywhere: the transition speed of the main photo is way, way too fast in my opinion. If I’m looking at content (the purpose of most websites from the user perspective), I don’t want things to be constantly changing on me. It’s hugely distracting. I’d reduce the transition speed by 3 or 4 times. Hyper users can use a slider interface to click to the next photo.

    • http://flavors.me/surendra_vikram_singh Surendra Vikram Singh

      I think u r right. We should also add a navigation to go to previous & next slide.

      Thanks a lot Gabriel !!

  • Sebastian

    Fabulloso isn’t well write… is FABULOSO …. wrong spanish.

    • http://www.fabulloso.com Gaurav Taneja

      Thank you. We actually wanted ”fabuloso”, unfortunately it is the name of detergent being sold by a leading MNC, so we changed it to ”fabulloso. Cheers. Gaurav

  • Preston

    I think the category pages should have a bit more info as to what’s going on. Maybe some small text when you hover the images to describe whatever it is.

    The product image zoomer is clunky. It should feel snappier.

    The product overview tab – vertical scroll bars are awkward there. Let the content breathe.

    The sizing guide is very nice. A modal window here instead of the pop-up would be slick.

    Nice job with the messages as well. It’s so much easier to be able to get them out of the main body and into a little jquery box up top.

    The cart/checkout is pretty vanilla Magento. That’s perfectly fine, but it’s a great area to add some glitter to.

    And as the others have mentioned, the background is a bit much for my taste, but then again, I’m not your target demographic, so my opinion is pretty meaningless. If they like it, then it’s good.

  • http://www.miriamisaacdesign.com Miriam

    Hi
    Just wanted to say that I love the style of logo and zigzag ribbon goes quite well (plus the chosen font of the menu bar) but background doesn’t with this match at all. As it is I would say you need more padding on the main container but if you take off the background and leave it white you wouldn’t need to add any more padding
    Also could make the menu bar a dark color? either black or the coral you use on the zigzag ribbon, it would probably stand out more especially how it is fixed when you scroll down.

    Apart from that it’s fabulloso!

  • kankaro

    the design is ok… but one thing… kindly remove the background image cause it’s so sour in the eye :(

  • http://www.empiricblog.com CRUX

    Hi,

    I really like your design and unlike the others I really like the background image. Its what makes your site different and interesting. The only thing I would worry about is the fact of it repeating itself, other than that it looks great. The only other thing I would mention is the fact that your navigation gets lost at the top, I would either bold the text or add some color to the boxes themselves with black text. Also I would watch your margins in respect to the spacing between objects, the page seems a little cramped for space. Ask yourselve if the design really requires that many elements and then get rid of the uneeded things. Also I think the box that says “Lets Stay Connected” could be smaller and placed better so as not to break the outline of product details. Other than that keep up the good work!

  • Brent

    the website ‘fabulous’ man lol…

    I say ditch the background altogether, it is too bright and does not have much relevance to the site, maybe use a texture or pattern background if a background is really needed.

  • Aladin

    The design is very nice. But please remove that background, mixing nice photoshop design != good design. Favour accessibility over beauty. Google could add nice backgrounds on their website but no, google is google, users don’t use google because it’s pretty but because of what it offers.

    If I were you, I’ll also make the header move with the page, the fixed header is not a good idea, think of those using netbooks, all they can see is the header.

    I used firebug to remove the fixed positioning, remove the background and resized the slide to 400px height (overflow hidden) the website looked fabulously fabulous, very clean and fresh.

    I hope this will help you some.

    • http://flavors.me/surendra_vikram_singh Surendra Vikram Singh

      Thanks Aladin! We are considering all these comments positively & started working on this. Soon u will see a fabulous output.

  • Benjamin karl

    Background image is too distracting,infact the first time I looked at the design I did’nt notice the navaigation bar or links ,thought it was just a picture

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

    To me first look of the website looked very irritating as it is very loud.

    I guess it can be presented in more cleaner way with better color combinations, font size, font color, font family and white is space is much needed factor in this website.

    Navigation and search style can be improved further.

    All the best :)

  • alex

    I like the new background better! ;)

    • http://flavors.me/surendra_vikram_singh Surendra Vikram Singh

      Thanks Alex! We tried to improve our website experience & still working.

  • http://www.himanshuvyas.net Himanshu Vyas

    I think Design is good but Slide -show images little big, that doesn’t fit is first folder in laptop or in Normal size monitor, We have to scroll to see full images. Most of the people has normal size monitor or laptop.

    Second instead people wait for next image in slide-show, we can add a navigation for that, So If User find something interesting on Slide-show, He doesn’t has to wait can use navigation to go directly on that slide.

    Other things are already told by other comments.