Web Design Workshop #34: Jujube
tuts workshop

Web Design Workshop #34: Jujube

on Mar 8th 2013 with 36 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, an LA design firm’s own website..

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 #34
Big screen..
Web Design Workshop #34
..little screen

A website redesign for my design+development firm, Jujube. It is responsive and coded in HTML5. Tell me what you think! Gyan Prayaga

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.facebook.com/dorthe.meyer Dorthe Meyer

    It’s all orange?

    • http://www.jujubeweb.com/ Gyan Prayaga

      I have two other emphasis colors (#1FAD9F and #B1BE01), although I’ve only used orange (#E06C1E) on the homepage. However, if you check the work and about pages you will see that I’ve used the green and blue colors as well.

      Do you think the home page would look better with a different emphasis color?

  • http://twitter.com/LinzCDesigns Linz-C Designs

    Very lovely.

    • http://www.jujubeweb.com/ Gyan Prayaga

      Thanks!

  • http://www.facebook.com/harli91 Ivascu Madalin

    very nice design simple and elegant

    • http://www.jujubeweb.com/ Gyan Prayaga

      Thanks! My old website (www.jujubeweb.com) was Bootstrapped and I wanted this website to be built from scratch.

  • Inder singh

    Website is nice but I guess you have increased the weight using CSS property and that leads to faux bold / fake bolding which is not only inconsistent among browsers but also doesn’t looks nice.
    You can use this links for guidelines
    http://nimbupani.com/fake-bolding-of-web-fonts.html
    http://css-tricks.com/watch-your-font-weight/

    • http://www.jujubeweb.com/ Gyan Prayaga

      I’m not completely sure what you mean. The web font I’m using is Bitter (http://www.google.com/webfonts/specimen/Bitter) and it has both regular and bold variants. When you click on a navigation link, the CSS for that link tells it to be bolded (700). Isn’t faux bold only an issue when only a light or regular variant of the font is loaded?

      Thanks for the feedback anyway!

  • Dan

    Very nice visuals but I think it offers very few information in the homepage, so instead of having an image across the width of the screen, perhaps a two column layout would make space for more info

    • http://www.jujubeweb.com/ Gyan Prayaga

      Thanks for the feedback! I should work on the homepage and add some copy about our firm’s services. Do you mean a two-column layout in which the visual is on one side and there is some information about the website on the other side?

  • WasifHyder

    Doesn’t really warrant the use of an extra click to visit the portfolio. This page would have a higher bounce rate than usual.

    Either include Social Proof, or some additional information as to how. A Video with a case study might do wonders and be better than saying “We take your website to new heights”

    • Jason Rose

      What page would have a higher bounce rate? The homepage?

      • WasifHyder

        I think so.

        There is too little content to warrant 3 separate pages. And even if that is the intention, I just wouldn’t go through the trouble of clicking the about link to find more about the studio (which should have been indicated to an extent on the homepage)

        Even with the website you posted, you can see a very effective headline that catches your interest and presents the work. Jujube’s previous website had their USP in the home page, and in many respects is a lot better in terms of content and layout.

        • Jason Rose

          Ah, I see.

          Yea it’s certainly a good point. I don’t know however if this would really effect bounce rate. Presumably a visitor coming to his site didn’t find it through organic search and will be looking for certain items, i.e. the portfolio, which is easily found via navigation. But still a good point given the minimalism (and current copy) of his site.

          I find it’s always hard for individuals in our field to properly ‘critique’ a site given what we know and how we use the web. We wouldn’t use the site in the same way a potential client (with 5% of the knowledge we have) would. It’s always nice to have a bullpen of friends or even past clients not in our field that are willing to run through a site real quick.

          • WasifHyder

            Right you are. The bounce rate shouldn’t be affected at all. But then I consider where else the visitors could come from. If I personally recommended Jujube to a friend of mine, the site design itself wouldn’t be that significant. But if I recommended to a person I don’t know, or perhaps it was an indirect recommendation where a friend of mine asked me which service to suggest someone else.

            Whoever seeks a design firm would now have a couple of places to look at. And this website may not be the strongest on that account.

            I’m not saying this scenario in my head is how things happen. But better copy & content never hurt anyone. Even in sites that are very simple (Like the one you provided) there still has been plenty of thought put into the copy and content.

            If Tim Ferris can rewrite a Title of a book over a hundred times, we as Web Designers should look beyond just styling a web page and realize (99% of Web Design is Content – as is the other 1%)

          • Jason Rose

            Great points mate.

  • Jay

    I took a look at your site and there was a big problem, at least on my end. None of the links were clickable. So I popped open firebug and it seems the div with the class=”whatsnew” is sitting on top of everything and making the site unusable. I manually removed the position fixed from the div and I could click around. I was viewing the site on a Windows 7 64bit machine with Firefox 19.0.2 if that helps.

    I also agree with some of the other comments that there needs to be some more information on the home page to really help draw that potential customer in and make them want to click the portfolio button and hopefully request more info from you.

    • http://www.jujubeweb.com/ Gyan Prayaga

      I didn’t realize that the splash .whatsnew div (which is supposed to slide out from the side) was so incompatible on so many browsers. I coded it in CSS3, using only webkit animations, which was my big mistake. I will include -moz, -o, and -ms prefixes to add compatibility. Do you think I should also write a JS fallback, or perhaps get rid of the .whatsnew div altogether?

      Anyway, thanks for the feedback!

      • jay

        Well, if it’s just a flourish I would maybe do something like use Modernizr to test for the CSS3 capabilities needed to run the animation then have a JS fallback for the browsers that don’t support CSS3. And for the small amount of people that don’t have Javascript on , oh well no big deal if they don’t see it. One rule I always follow is, test test test, in as many different browsers, devices and platforms as you can.

    • mattrock1

      I’m unable to navigate anywhere either. None of navigation links work for me, unfortunately (FF 19 on Mac OSX).

  • Pingback: Daily Digest for 2013/03/08

  • Jason Rose

    It’s a great start, congrats on the redesign. It degrades wonderfully across device sizes.

    However, Firefox isn’t very happy w/ your site. Although I didn’t test in Windows or IE 8+, a Kindle Fire doesn’t want to get past your fade in / splash .whats new.

    Thinking as a potential client I would take a long look at some of your copy and your Work section. I like the candid approach to the writing, however most of the copy on the Contact page could be rather off putting to some people. Consider revising the ‘We’ll get back to you as soon as we can’ to something that doesn’t sound ‘you first’; this page is about them. I would separate the project survey from your simple ‘Hello’ option, and again think about revising ‘Need a Project Done’ to something that is less blunt, but also more informative, e.g. ‘Would you like to work with us.’

    I also find it absolutely infuriating when visiting a contact page if it doesn’t have a simple contact email address. I may not be alone in this…

    As for the project summary fields, it feels incomplete and misdirected. Are you using it as a RFP (request for proposal form), a project summary, or just lead qualification? I would view a few of the items; Timeline, Project Description & Helpful URL as inappropriate at such an early stage. Not to mention a potential client may have no idea where to begin or why you’re even asking (or what is a helpful URL?) Things like ‘Do you have an existing site? and ‘What are some websites you like?’ are more appropriate; but again I don’t feel these are needed at an initial contact stage. (you can index a project summary or creative brief form on your site that you can send in an email after first contact) If you really feel this is critical on this page, check out Mark Boulton’s new contact page. I recall he also has a nice client summary over on Smashing Magazine somewhere. Ultimately, clarity = conversion.

    Where are the images for your portfolio? Also, consider adding a div class for your .work items so that the entire box is clickable. I’d also consider pairing down your portfolio to just your best work (you can always link to more work)

    Cheers.

    • http://www.jujubeweb.com/ Gyan Prayaga

      Thanks Jason! I will be sure to modify my website based on your feedback.

      I’ve only tested the redesign on a few browsers, so thanks for telling me about the Firefox & Kindle Fire incompatibility. I will make some changes to the contact form as well, and I will work on the portfolio page. I didn’t want to add a contact email (and I didn’t want to write “example[at]example.com” because not-so-web-savvy visitors won’t know what it means) because I thought it would attract spam, so instead I built a simple contact form with PHP. Perhaps this was the wrong thing to do?

      Finally, I know that the splash/whatsnew page presents some compatibility problems. Should I remove it altogether or is there a browser-friendly version that I should implement instead?

      Anyway, thanks for the great feedback! This redesign is a work in progress and the criticism helps a lot!

      • Jason Rose

        No sweat. You’re def. on the right path!

        What do you use for your email client / service. I typically set clients up w/ Google Apps, which really knocks out a lot of the potential for spam. And although Ajax isn’t bulletproof either – once your site gets ‘hit’ it’s on. I would say use both. The priority would be looking for a way to creatively incorporate the your email that suits your user. Check out http://www.weareyours.com for a nice example of a good contact layout; both page and footer – design is in the same vein of your SOW. It also has a splash page…

        …which leads me to the splash page. When I’m on the fence w/ a feature or UX related item, I always ask myself; what would happen if it disappeared? (Sidenote; depending on your relationship w/ a client, this is usually an awesome question to ask when they’re trying to add the weather forecast or make something ‘pop’.) In the case of your splash page, I would assume the answer comes down to a) does it help to make an impact / decision catalyst on your particular target customer and b) do you feel it reflects your brand and company and is the time commitment to get it working across browsers worth it? I personally feel it may be rad to add a nice ‘pop’ (next stop cliche town!) that nicely juxtaposes the minimalism approach to your site. (If it doesn’t effect your functionality).

        Good luck!

  • http://www.simonswiss.com simonswiss

    Beautiful redesign – much better than the Bootstrap version that was very, well.. bootstrappy! One little thing i’d change: left-align the 2 options on top of the contact form – the checkboxes look a bit weird with the center-align.

    Good work, congratulations!

  • Pingback: Web Design Workshop #34: Jujube | Webdesigntuts+ | Beachdrop

  • mike

    One page site would be better as mentioned by another person. Also having screenshots of your work so I dont have to go to another site every time I want to see what you’ve created. Last but not least, the boxes for your work should be completely clickable, it makes for a much nicer user experience and is common for that design style.

  • http://blog.brownsugar.idv.tw/ Lay

    Good.

  • dav003

    Hey I love the Crafted with love in LA strap on your copyright line
    I have a Made in Great Britain badge at the bottom of my site dna-elite.com and most of the sites that we build
    I thought ours was original and it is but yours is sweet :)

    • http://www.jujubeweb.com/ Gyan Prayaga

      Yeah, actually I got it from oak.is (scroll down and see the “Made with love in Brooklyn”) — I guess design is all about getting inspired by other people’s ideas, right?

  • http://www.jujubeweb.com/ Gyan Prayaga

    Thanks Jason!

    I think Toast seems like the best CSS responsive framework (daneden.me/toast). It’s very lightweight and easy to implement. Tell me if you think this is a good choice…

    • Jason Rose

      Toast looks awesome! Bookmarked.

      Seriously, Daniel Eden does so much kick ass stuff. Does he sleep? Is he a robot?

  • Chance

    This guy is 100% spot on. He gets it

  • http://www.jujubeweb.com/ Gyan Prayaga

    Thanks so much for your feedback! You really took the time to evaluate the website and I’m going to take everything you said into consideration as I continue working on the redesign.

    I’m also still working on the content – as you said in your comment, there is very little on the homepage and that would be frustrating for visitors.

  • http://www.facebook.com/DavidLaur85 Laurentiu Laur

    Very nice review, i wanted to show an example of a great design firm and at first i have chosen http://www.blitzagency.com wich i like very much but then I’ve realized that it is not a responsive design :)

  • longbeachwebdesign

    like almost all the things you have mentioned. definitely the header and illustration take up far too much space. You should consider reducing the size of your header so that people can see the illustration and blurb better. As much as I love the illustration, it doesn’t really communicate much to me… it simply doesn’t convey the message that you are a design firm is very important.

    long beach web design

  • http://www.jujubeweb.com/ Gyan Prayaga

    Again, thanks for the feedback. I think the one-page website design is a good idea.

    Here are two prototypes for the redesign. Please tell me what you think.

    My first attempt — spring.jujubeweb.com
    My second attempt — winter.jujubeweb.com

  • http://www.jujubeweb.com/ Gyan Prayaga

    I’ve working on another redesign of Jujube. Please tell me what you think!

    winter.jujubeweb.com/winter.html