Try Tuts+ Premium, Get Cash Back!
Web Design Workshop #12: Renew Resume
tuts workshop

Web Design Workshop #12: Renew Resume

on Jun 15th 2012 with 23 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, another resume service (they’re like buses, aren’t they?)

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 #12

We have recently launched modern resume creation service. The main goal for this project is to get modern resume creation service from templates, made by designers. Any designer can design resume template for us and get money from every sale. We provide two different category – PDF resume and Online resume versions. – Mark Benton

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
  • Laura

    Hello Mark, overall I like your design. What I think you could improve…
    In my opinion the division between the different sections is a bit poor. The difference between PDF and online resume appears clear at first glance, but as you scroll down and the products are displayed you lose that. Also, the “NEW feature” is for both of them or just PDF? You know your project best and I know you’ll find a way to sort this out.
    Another thing, the steps in “How it works” doesn’t look like steps. You may want to think of a way to make it more visible or clear for the customers.

    Greetings!!!

    • http://renewresume.com Mark Benton

      Laura, thanks for your ideas!

  • Rick L

    Great looking design first of all.

    You cannot as of now, click on the icons in the header to go to to corresponding pages, which would be very helpful, because people like to click on pictures/icons in my experience. Also a nice hover effect on the icons(and on the “add to cart” icons) would be nice to see, because for me they feel very static.

    Great work!
    Regards,
    Rick

  • Thomas

    “Up to thirty seconds, your resume are reviewing by HR” That sentence doesn’t make a lot of sense.
    Should be rephrased something along the lines of: “Up to thirty seconds, the time HR spends reviewing your resume” or something a lot less awkward than what’s up there.

    Apart from that, the site looks pretty decent. I especially like that background you’re using.

  • Thomas

    Quick question, where did that background come from? I noticed that it is the same as boingboing’s, right down to the image size. BoingBoing also uses WordPress, but I believe you’ve custom coded your theme. I also notice that when you inspect the element, your site doesn’t display the bg.png image, but a 297×297 empty “alpha” background.

    Just curious as to where the background came from, if its up somewhere for purchase, I’m interested.

    • Chris

      The alpha background you see IS the bg.png. Its not empty, its merely varying boxes of transparency, set on top of a background color of#E6E8E9.

    • http://renewresume.com Mark Benton

      Thomas, we use .png background and this image is not from boingboing. We tried lots of background images and we think this is the best one. We bought lots of background packs and it’s from one of those packs.

    • http://www.duncanmccall.com Nick Johnson

      Thomas, that background comes from SubtlePatterns.com. Check it out. Here is a link directly to that particular pattern, http://subtlepatterns.com/?p=449.

      • Thomas

        Thanks!

  • http://namangoel.com Naman

    Since other people have already commented on the layout, and language, I’ll talk about the look…
    1) The spacing is a little inconsistent. The Logo and Nav bar are too tightly packed horizontally but there is a lot more vertical space.
    2) The pattern/texture of the blue part of the top is a little excessive considering the body background..
    3) I’d get rid of the really thick grey border for the main content area.
    4) The typography can be better if you increase the ‘font size contrast’. That’s my term for make large text larger so it’s obviously much bigger than the smaller text. Text size which is like 6 px bigger than other text looks bad. Also, the are you a designer is excessive and Though it does attract your attention with the crazy colours, it’s not the most readable way to do it.

    yeah, that’s all I can come up with.

    Great idea for a business. It’s amazing how many designs you have already. And though I managed to nitpick, the design looks pleasing to the eye, with VERY friendly colours. Whatever you do, don’t mess with the colour scheme.

  • James

    Here are my thoughts for what they’re worth. As I am relatively newb compared to other amazing pros out there, some of my opinions may actually not be worth reckoning but here it goes!

    - I like the curvy, unique dividers in the blue stats area, but do they need to be curvy? If not, I think making them straight, but still pretty, would communicate the site’s professionalism and also relate to the user’s current needs (a profession). Perhaps curvy stuff is more appropriate for a site like Etsy.

    - This one’s a pretty big idea, but what about incorporating the “How it Works” to the whole page? For example: “Step 1..blah blah.. Step 2…. Step 3…. Step 4…. ” The idea is that as the user scrolls down, he/she is guided through the experience like in a demo.

    - Love the “Are You a Designer” section.

    - as Thomas mentioned, there are several instances where better grammar/word choice could be implemented. For example, “92% of resumes made with ‘free’ or hand-made templates are declined.” (doesn’t the site sell hand-made resume templates?) and in the online resume description, “free hosting for life with free URL for free for life” (did you forget to mention that it’s free and for life…). Anyway, I would list them for you, but they aren’t really design issues so I’ll say no more.

    So there you have it. If anyone could comment on my comments, I would be grateful for the advice.

  • James

    Sorry, the comment system took out the bracketed parts..

    “Step 1..blah blah.. (show here the two options and the template designs) Step 2…. (show the interface the user will be using to input information) Step 3…. (show like a man confidently delivering the resume to the user on time I don’t know this is just an idea) Step 4…. (show the user getting the job)”

  • Hamid

    yeah i’m agree with Thomas and Laura, nice post.

    • http://renewresume.com Mark Benton

      Thanks, Hamid!

  • http://www.lifesub.de Stefan

    Well done. I like your border styling but in my opinion you should use more white spaces !

  • http://antekdesign.net Antonio

    Hi Mark, maybe you could improve a little bit the user experience;
    On the top navigation, at the moment, just the text is clickable no icon or space around it I would make a big display:box of the entire area. I also think the Icons at the top should have at least an :hover state.

    In the newsletter box, at the bottom of the page, the value is not vertically aligned, maybe you could give it a line height or padding.

    None of the buttons on your site (contact us and subscribe to our newsletter) have a cursor:pointer on them.

    Are small fixes but I think can improve the UX of a site a lot, just my 2 cents :)

  • Pingback: Why A Resume Template Is An Essential Tool for First Time Applicants -- | Rafanoronha.net

  • Nathan Pointer

    Overall the design, especially the navigation seems cramped to me. Dont be afraid of whitespace. I’m not sure why the most important piece of copy is the numbers – people dont care about statistics until they’ve been related to a story or something that helps solve a problem for them. I would advise spreading the facts through out the design.

    Also I think a visually clear and logically meaningful division of content wouldn’t hurt. grey is a little overly pervasive, consider mixing it up a bit color wise. typography needs some love – consider supporting typefase in the long body copy or support w/ secondary graphical elements.

    not bad tho’ – good luck with your project

  • G Jacobs

    Overall I like the style you’re going for, just some little things that bug me:

    - The icon used for FAQ doesn’t seem the most appropriate choice to me, to me it suggest there’s a search function somewhere.

    - The logo doesn’t line up with the bottom of the menu, which kinda bugs me.

    - Because you chose to place the cart next to the menu, despite of it’s different color, it feels easy to overlook.

    - The design is very square, yet you chose to make the buttons very rounded, sure it gets them noticed but to me it feels out of place compared to the rest of the design.

  • http://duncanmccall.com Nick Johnson

    Overall the design and flow of information is easy to follow. There are a few things that stuck our where the flow was a bit off.

    - On the home page underneath the main graphic. Those points seem like they should be in an unordered list with the line spacing tightened up and and increased space between each line item.

    - Pricing. To my eye something just seems off on how it is laid out. Maybe each item on their own line; name, then price, then button.

    - “All PDF/online resume” buttons seem a little weak. A bit more contrast would help (when I first scanned the page I didn’t really notice them).

  • http://renewresume.com Mark Benton

    Thanks everybody for ideas!

  • http://www.customicondesign.com custom icon design

    first of all looks great. but in my opinion you should change the background. I don’t like this style background. And the buttons is not the unique. last one is “are you a designer?” image is not good there. Hope those can help you.

  • John Doe

    The first thing that drew my attention was the dotted lines. Looks like you drew them with your eyes closed. I think if those were drawn with a little more composure it would make the design look a little more polished.

  • http://www.cheapwebdesigncompany.net web development company

    Great blog about design workshop,
    your styles and concepts are really appreciated…. Thanks for sharing it.