How To Create A Great Web Design CV and Résumé?

Advertisement

The economy is bad. No one’s job is really 100% safe, so it’s time we all bucked up and got our recession bags packed (just in case!). Your portfolio is already gorgeous, but have you created a drool-worthy résumé?

This flimsy one-page document is more important than many people think: the résumé is the first portfolio piece that potential employers see, and if they’re not impressed, chances are they won’t look at the rest of your portfolio. “But I’m not a print designer!” you moan. It doesn’t matter, and I don’t want to hear your excuses! You need to conquer this, because if you’re a great Web designer, you don’t want your first impression to be mediocre.

The Steve Stevenson Challenge

Everyone likes a competition. How about one in which ten good Web designers have to design the same résumé in only a few hours? Meet Steven Stevenson.

Steven Stevenson, a fictional Web designer, doesn’t have a résumé. The competition: each designer must translate his work experience, education and interests into their own unique style. Watch and learn, people. At the end is a summary of good tips for Web designer résumés. (If you’re interested in taking the challenge yourself, check out misterstevenson.com1 for all the rules these designers followed, Steven Stevenson’s raw data and the chance to add your own entry.)

And in no particular order, here are the contestants’ entries!

Contest Entries

Sam Brown2 made a real effort to distinguish between the three main components of Steve Stevenson’s life and adds a touch of personality with some handwritten text and highlighting. He shows he isn’t afraid to mix media but manages to do so in an elegant, fun way.
Download the PDF3 | Download the source file (.ai)4

Screenshot5

Ali Felski6‘s design is beautiful and simple, but manages to convey Steve Stevenson’s strong design skills. Her usage of colour is muted, but appropriate, and she’s left out a lot of extra information that could clutter up this one page document. Ali is also aware of the boundaries of the medium. She says, “A résumé should be designed well, but just like the Web, it has constraints, and even as designers, we should respect them.”
Download the PDF7 | Download the source file (.eps)8

Screenshot9

Chris Spooner10 opts for a purely typographic, clean design that showcases his ability to display information without the need for adornment. Clean design is a skill that Steve Stevenson may possibly need should he be looking for a corporate Web design job, in which case he’d need to present something simple and professional.
Download the PDF11

Screenshot12

Niamh Redmond13 makes Steve Stevenson’s résumé stand out by choosing a landscape-style document with well-divided content and good branding. Niamh says about her design: “My aim was to design something in which each element served a function. Every shape and line, the colors and their use, the font variations and text sizes were chosen to communicate something to the reader.”
Download the PDF14 | Download the source file (.eps)15

Screenshot16

Eva-Lotta Lamm17 chose to keep her résumé simple and typographic: “The only illustrative element is Steve’s little logo (playing with the nice alliteration of his first and last name). It is repeated as a small blue dot to separate different section sin the résumé.” The result is a beautiful, yet simple piece, which is easy to follow.
Download the PDF18

Screenshot19

Sarah Parmenter20 goes with a solid yellow background and a very prominent photo of Steven Stevenson (who is quite cute!). She breaks up the copy and puts emphasis on his freelance work.
Download the PDF21 | Download the source file (.ai)22

Screenshot23

Wez Maynard24 has simplified the information and given it lots of room to breath. His design could easily be used as a Web design. He’s also given a lot of space and prominence to branding and has effectively separated the freelance work from the work experience.
Download the PDF25

Screenshot26

Luc Pestille27 has added some great imagery without making it unprintable. He’s allowed spaces for a photo and company logos, and he brings in arty spray-painting. While most likely inappropriate for a corporate work environment, it is playfully suited to a funkier job opportunity.
Download the PDF28 | Download the source file (.ai)29

Screenshot30

Ollie Kav31 chose to use Steve Stevenson’s love of Japanese culture to organize his résumé. These personal touches give the CV a huge dose of personality, which would give employers something interesting to speak with him about in the interview. “I’ve based the design on the signage in the Tokyo subway stations, which has bright bold colors,” Ollie says. This boldness makes for a resume that shows Steve Stevenson’s confidence and passion.
Download the PDF32 | Download the source file (.indd)33

Screenshot34

Albert Lo35 has broken an important rule by making his résumé virtually unprintable. But he has also organized the information very differently: chronologically, with awards, skills and work all intertwined, just as they would be in real life. Albert says his inspiration came from listening to house and trance; his colors and illustration really communicate the type of designer he is.
Download the PDF36

Screenshot37

You can download all of these entries in a handy ZIP file38 (5 Mb). Thanks to all designers for their participation!

10 Useful Tips For A Great Résumé Design

Let’s now take a look at some useful ideas and guidelines that – in our humble opinion – may help you to achieve a great, compact and beautiful CV.

1. Make It a Summary

Your résumé needs to tell an employer (at a quick glance) the details most relevant to him or her. This means the whole thing should fit on one page! If you’re a Web designer, keeping it short and punchy is even more important. Sure, writing for Web is different than writing for print, but by showing your potential employer that you can keep things concise, you are actually showcasing an important Web skill. Besides, you need to leave something to talk about in the interview!

2. Keep It Simple and Understandable

When designing a CV, remember first and foremost that you are a designer, but don’t go overboard. Many people over-design their résumé. It’s a chronic problem: they’ll add so many fancy bits that the actual content gets lost. Most design jobs are all about your ability to organize content, so simplify, simplify, simplify!

But that doesn’t mean boring either. “Simple doesn’t mean simplistic; simple is hard to achieve,” says Niamh. Remember that you are applying for a design job, not to become a managerial assistant or to compete in an art college creativity competition.

3. Leave Some Details Out

Some people include their entire life history and every personal detail on their résumé. Your job as a clerk at the corner store 10 years ago won’t ever get you a job in Web design. Mentioning it only takes focus away from your relevant work experience. Keep your marital status, age and grades off, too. What if a potential employer wants to see your grades? Wez Maynard offers some great advice about this: “If the employer wants to judge you on your grades and not your portfolio, believe me, you do not want to work for them.”

4. Make It Perfect

You are a professional, so attention to detail is critical. Everything on your CV should line up, every pixel should be absolutely perfect. And even though the job is not to be a writer, a large proportion of employers throw away résumés with spelling or grammatical mistakes in them. By making it perfect, you are showing potential employers that you aren’t sloppy and that you will care about every detail of their projects. Get 10 people who can spell to look it over. Just do it.

5. Use a Grid

Over and over, Web designers scream about “the grid.” Why is the grid so important for a Web designer’s résumé? If you’re applying for a design job, the employer will most likely have an understanding of grids and baseline grids. “If you’re not using a grid, you run the risk of giving the impression that you don’t have an understanding of basic design principles,” Olliekav warns us. For those employers with no design background, grids make your résumé look cleaner and more organized.

6. Make It Printable

When working on designs for websites, you are allowed to have dark, moody and texture-heavy backgrounds. They look fantastic on your browser, but they are simply inappropriate for résumés. Most CVs are printed out and given to hiring managers in batches, but not everyone has a photo-quality color printer; and, without contrast, your background-heavy résumé will become illegible.

So make sure your résumé

  1. matches the paper size for your country (letter size for the US and A4 for the UK, for example), so that employers don’t have to make any adjustments before printing,
  2. has a white background,
  3. looks okay in black and white,
  4. will print well at 300 dpi. The best way to avoid a pixelated result is to create a PDF with embedded fonts.

7. Link to Your Online Projects

Displaying URLs for your projects is crucial. If the employer will be viewing the résumé as a PDF, link the URLs back to your portfolio (using anchors if it is very long) or the projects themselves. Here’s39 how to create links in a PDF document.

(Many of the designers in the Steve Stevenson challenge noted that they would have done this, but because the applicant is fictional, the links wouldn’t have gone anywhere!)

Once your résumé is printed out, it should serve as a quick reference for potential employers to check out your projects. So, spell out the URLs alongside your project descriptions. You don’t need the http://www at the beginning of each URL, though.

8. Don’t Use a Template

A little inspiration here and there never hurt anyone. But imagine you submitted a résumé and it was the exact same as someone else’s? Gosh, would your face be red. If you are a Web designer, you probably wouldn’t want to use a template for your portfolio website either. Take some time and think about the impression you want to make: I bet it isn’t that you can enter data into a template.

9. Update it often

Résumés are an often neglected aspect of a web designer’s portfolio. Make sure you update it every time you update your portfolio and make it accessible from your portfolio.

10. Show Your Personality

You are a designer, so I hope you have your own style. Steve Stevenson, from his interests, sounds like an interesting guy. Olliekav used his love of Japanese culture to give his résumé a personal touch without going overboard. If the job you’re applying for requires a lot of creative thinking, the employer wants to know you’re not a pixel pusher or a drone. Let them know you have personality, a sense of humor and a sense of style.

Bonus: If You’re Going to Break the Rules, Do It Well

Albert’s resume is completely unprintable, but it’s also absolutely beautiful. If you’re going to take risks like this, make sure you’re willing to alienate a few haters en route to more creative employers who will appreciate your ability to think outside of the box. Always make sure you’re aware of the rules, and break them cautiously. Done right, you’ll shine from the crowd.

The résumé is an oft-neglected piece of the Web designer’s portfolio. Make sure you update yours every time you update your portfolio, and make it accessible from your portfolio.

(al)

Footnotes

  1. 1 http://www.misterstevenson.com
  2. 2 http://sam.brown.tc/
  3. 3 http://www.smashingmagazine.com/images/design-cv-resume/sam_brown.pdf
  4. 4 http://www.smashingmagazine.com/images/design-cv-resume/sam-brown.ai
  5. 5 http://www.smashingmagazine.com/images/design-cv-resume/sam_brown.pdf
  6. 6 http://alifelski.com/
  7. 7 http://www.smashingmagazine.com/images/design-cv-resume/ali_felski.pdf
  8. 8 http://www.smashingmagazine.com/images/design-cv-resume/alex_felski.eps
  9. 9 http://www.smashingmagazine.com/images/design-cv-resume/ali_felski.pdf
  10. 10 http://www.blog.spoongraphics.co.uk/
  11. 11 http://www.smashingmagazine.com/images/design-cv-resume/chris_spooner.pdf
  12. 12 http://www.smashingmagazine.com/images/design-cv-resume/chris_spooner.pdf
  13. 13 http://www.niamhredmond.org/
  14. 14 http://www.smashingmagazine.com/images/design-cv-resume/niamh_redmond.pdf
  15. 15 http://www.smashingmagazine.com/images/design-cv-resume/niamh_redmond.eps
  16. 16 http://www.smashingmagazine.com/images/design-cv-resume/niamh_redmond.pdf
  17. 17 http://www.evalotta.net/
  18. 18 http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf
  19. 19 http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf
  20. 20 http://www.youknowwhodesign.com/
  21. 21 http://www.smashingmagazine.com/images/design-cv-resume/sarah_parmenter.pdf
  22. 22 http://www.smashingmagazine.com/images/design-cv-resume/sarah_parmenter.ai
  23. 23 http://www.smashingmagazine.com/images/design-cv-resume/sarah_parmenter.pdf
  24. 24 http://www.krop.com/wezmaynard
  25. 25 http://www.smashingmagazine.com/images/design-cv-resume/wez_maynard.pdf
  26. 26 http://www.smashingmagazine.com/images/design-cv-resume/wez_maynard.pdf
  27. 27 http://www.project14.co.uk/
  28. 28 http://www.smashingmagazine.com/images/design-cv-resume/luc_pestille.pdf
  29. 29 http://www.smashingmagazine.com/images/design-cv-resume/luc_pestille.ai
  30. 30 http://www.smashingmagazine.com/images/design-cv-resume/luc_pestille.pdf
  31. 31 http://www.olliekav.com/
  32. 32 http://www.smashingmagazine.com/images/design-cv-resume/ollie_kav.pdf
  33. 33 http://www.smashingmagazine.com/images/design-cv-resume/ollie-kav.indd
  34. 34 http://www.smashingmagazine.com/images/design-cv-resume/ollie_kav.pdf
  35. 35 http://www.albertlo.com/
  36. 36 http://www.smashingmagazine.com/images/design-cv-resume/albert_lo.pdf
  37. 37 http://www.smashingmagazine.com/images/design-cv-resume/albert_lo.pdf
  38. 38 http://www.smashingmagazine.com/images/design-cv-resume/cv-pdfs.zip
  39. 39 http://www.ehow.com/how_9665_create-links-pdf.html

↑ Back to top Tweet itShare on Facebook

Kat Neville is a freelance Canadian web designer (living in the UK) who is constantly coming up with too many ideas for new websites. She also loves arts and crafts, gardening and going on adventures. You can find her design work at safetygoat.co.uk.

Advertising
  1. 1

    Right, the contest expects PDF’s, which I guess certainly explains the no images rule. So are PDF’s standard for CV’s? To be honest I’ve never heard that.

    0
  2. 52

    Those resume looks really amazing. But I just afraid, is that really appropriate for a formal resume,even for graphic-related jobs.

    Since I have been told thousands of times, to keep your resume neat, clear, ordered……but not fancy….

    0
  3. 103

    I agree that the best way to save your CV is as a PDF with embedded fonts but nearly every recruiter out there will want it in word format which can be a huge pain.

    0
  4. 154

    Martin Buckland

    April 1, 2009 5:18 pm

    Very enticing and competitive designs

    -2
  5. 205

    This is a really great article! I love how Chris Spooner did it!

    -1
  6. 256

    And also, Sarah Parameter’s looks great too!

    -1
  7. 307

    Nice, not new, but article – breaking the ice. Thanks SM

    0
  8. 358

    Nice to have the PDF for download. Will think of something for me :)

    -1
  9. 409

    Good article. From reading others comments I’d like to mention a couple of items.

    1) You can have a pretty resume AND use a media=print stylesheet so it will print properly and look more along the lines of what recruiters need to see (your info) ex: If you are a designer or developer you should be able to do this with no problem.

    2) I have worked for an HR/Recruiting software company since 2004 – I would suggest, when submitting your resume online, to do it as plain text. If you submit it as anything else you are depending on the technology to correctly parse that PDF or Word doc (whatever version you may have). I have seen issues around this when someone tries to submit their beautiful work of art resume online *queue buzzer ejection sound*. – I’m just sayin’… beautiful on the web is cool, plain text when submitting to be 100% safe.

    Thanks,
    Jim

    -1
  10. 460

    Those are some good examples of resume !!!
    I’m still a student but am inspired now to make one resume myself !!!
    Smash It !!!

    -1
  11. 511

    I’m not a web designer (but I am in the technology industry), so perhaps it’s different in this industry, but for almost every job I’ve applied for, HR has asked for a Word version of my resume (even after submitting a perfectly acceptable PDF). Very few of these designs could be translated to a Word document.

    Again, I don’t know if this situation would occur for a web design applicant, but it’s something to bear in mind.

    0
  12. 562

    Absolutely Fantastic… Very Informative, i learned a lot through this article.
    Thanks for sharing with all of us :)

    -1
  13. 613

    very helpful.

    -1
  14. 664

    In all the years I’ve been working I’ve never had a pdf accepted. They have all wanted a word doc or plain text.
    Post interesting?: Yes
    Post useful?: No

    0
  15. 715

    Thanks for a great article guys. I love the varied implementations of the same CV, from different angles. Very cool. :)

    -1
  16. 766

    Sarah Parmenter

    April 2, 2009 12:24 am

    While I understand and agree with many of the points raised, I think people are forgetting this was a design competition, just for fun between us all, how interested would anyone have been had we all submitted plain text CV’s or the bog-standard Microsoft Word layout? Wouldn’t make for a very interesting read. :)

    0
  17. 817

    I would urge all budding designers out there to design your cv, please.

    In the UK – there are some 20 designers for every design job. The things that are going to make you stand out are your cv, initially and more importantly your folio.

    I can assure you in a working DESIGN agency environment a nice looking cv – or even better a creative way of getting your cv across, for example a friend of mine put her cv onto a cd, then encased the cv inside a woodern block made to look like a tree stump – closed with nuts and bolts on four sides.

    She now works at a very well respected graphic design firm in London. This method made her stand out from the crowd, a cv attachment in an email as a word doc is not going to do this. I appreciate in the web development world this may be completely different.

    Any design related degree course will teach you to make yourself stand out from the crowd – a cv is a superb way of getting this across nice and early! ESPECIALLY in these uncertain times.

    and @Helen “Yeah, but the artworks above look like templates. Many of them are templates without any doubt.” Come on, look at the portfolio of these guys – you really think they’d use a template?

    0
  18. 868

    Very very interesting!
    My CV is in PDF format from 2000 and I never had problems…
    Thanks.

    -1
  19. 919

    Stephen Costello

    April 2, 2009 1:14 am

    Really love those designs guys, they look superb! Think I’ll experiment with a new CV when I get a moment.

    -1
  20. 970

    Awesome article! Just as I was about to redo my CV as well and this pops up! Thanks a bunch!

    Well done to the designers that created all the awesome examples. Gives me some great inspiration!

    One thing I don’t get is, in school why did the teacher always say, dont make it look fancy. Plain and simple is most effective. I was always like, “that dont make sense though”…. maybe they were refering to MS Word Art lol :P

    -2
  21. 1021

    Good timing ;)

    -1
  22. 1072

    Personally, when I am creating a CV (I’m a perfectionist, I have too many revisions), I try and make it any form which my employers will ask. PDF, HTML and DOC are usually the main three, but again, you do get some awkward guy wanting it in Lotus 1-2-3 or Word Perfect. :D

    Great, out-of-the-box idea. SM always supprises me :)

    -1
  23. 1123

    Rogério Oliveira

    April 2, 2009 6:42 am

    came on time this post

    -1
  24. 1174

    Why not put up an HTML version of the resume with nice colors/backgrounds, then use a print style sheet to sanitize it for printing?

    0
  25. 1225

    thanks a lot!

    -1
  26. 1276

    good article, im currently tryin to get a good resume.

    -1
  27. 1327

    Great article and very informative. I’m new to some of this, though. What’s a “CV”?

    -1
  28. 1378

    There was a great article on The AD Class blog a week ago – 10 Tips for Writing a Remarkable Resume in Today’s Creative World. You should check it out, pretty awesome stuff and very much related.
    David

    -1
  29. 1429

    Another thing that is important is if you have a website with your portfolio in it, make sure the design of your website and your CV are both consistent with each other (i.e. they look pretty much identical with the use of fonts, colour, layout, etc).

    It looks unprofessional to have a CV that is vastly different in design to your website. Companies focus on branding with everything they design so why can’t you?

    0
  30. 1480

    I always find that keeping your CV’s simple, keeping the important information at the main element. With regards to showing the work you have done, either thumbnails or a seperate PDF of work examples is the best way to go. The one thing i hate is when designers concentrate more on the designing of their CV’s rather than what their CV’s say. Even to the point were they have made a template and fit their content around the template. If anything you should be doing it the other way round. Get your CV to read well and have all the important info on it, and then worry about how it looks.

    0
  31. 1531

    I am professional Blogger and Internet Marketer, this post is good way to stimulus the stagnancy of this depressions, and am looking forward to learn from this site

    -1
  32. 1582

    Nice article and raises some interesting points and views. I think much of the critiquing here is valid as well. I know it’s just a bit of fun, and there are some lovely examples on show, but people have to be aware of webifying their CV too much.

    I think its important to remember that your CV supports your portfolio and doesn’t have to be drool-worthy in the traditional sense. It should show use of typography, space and layout, presented in a clean and functional manner, making the employer want to see the work behind it. Much as you define the purpose for a website, or part of a website, the CV should be be well thought out, but not overly so.

    Eva-Lotta Lamms design is a perfect example of this working, with lovely handling of type and whitespace. I agree with some of the comments here that some of the designs (to a prospective employer) may show a lack of understanding of anything other than the web. Of course if it is just a web design job you are going for you may get away with it, but most employers will want to see good overall design skills. Typography is half the battle with design, and a good resume designed in a simple fashion displays knowledge of solid design principles typography and layout.

    0
  33. 1633

    Personally I’d prefer to see a well typeset CV qualifying achievements, letting the work samples or URL do the talking. I can’t help feel that most of these examples are over designed I’d be tempted to skip past them, especially ones with a photo of the person, it’s a tad egotistic.

    0
  34. 1684

    Andrew Wilkinson

    April 3, 2009 1:45 pm

    I really liked both Eva-Lotta’s and Chris’ take on the resumé design. Simple is good. Might have to take some inspiration for my one after reading this article, (I just redesigned it a couple of weeks ago, in fact)

    -1
  35. 1735

    I feel it’s helpful to show your creativity and uniqueness, especially in today’s job market, but honestly, most employers want to see that design creativity in your portfolio NOT your resume. Most people do not even realize that many companies use Resume Parsing technology in their applicant tracking systems (so resumes can go in their databases without data entry), and this technology doesn’t work well with resumes that have graphics in them.

    If you’re going to send out a creative resume to an employer, make sure you send a normal Word Doc resume along with it. Also keep in mind some companies restrict their employees from printing color documents. Great post and examples none the less.

    0
    • 1786

      What people are missing here is that different working cultures value different paradigms. A lot of recruiters are remarking that the resume parsing applications they use won’t like these resumes. If you want to work for a large company, or intend to use a recruiter, you’d better heed those remarks.

      However, if you wish to bypass recruiters (my default preference) and intend to get hired into a company that is creative and open-minded, these resumes will succeed. I very much like the idea of cutting recruiters out of the picture and just accessing the actual humans who read the resumes rather than keyword-strip them out of laziness or professional ennui.

      Having your resume get rejected by keyword parsing applications is a feature, not a bug, in my view.

      1
  36. 1837

    Excellent Article, Inspired me a lot!

    -1
  37. 1888

    Great article…but i think its also important to show some work examples. Sometimes pictures say more than long text documents. On my portfolio homepage i present short text blocks with significant pictures and for everyone who wants to read more i link some pdf documents to download.

    -1
  38. 1939

    i love this post, this is so usefull !!!
    congrats to steve for for the idea !

    -1
  39. 1990

    cool article!

    0
  40. 2041

    Here is the resume I used to get my last job and a short article I wrote about the power of a creative resume:

    0
  41. 2092

    Robert (InToGraphics @ the forum)

    April 5, 2009 2:02 pm

    Wez Maynard and Albert Lo receive my vote.

    Regarding Albert breaking one important rule by making “his résumé virtually unprintable”, all I can say is that sometimes you’ve got to break the design/briefing rules to make your design stand out.
    And that’s exactly what happened.

    BTW, is it because of rule “5.Try to keep it to one page!” why you say it is virtually unprintable ?
    The only rule coming close to it is “5.Try to keep it to one page!”.
    But it starts with “Try”. Giving room to break it (the rule that is). :)

    BTW, last visit was on Tuesday (31/03). I have to bl..dy catch up with 7 new articles.
    Give me a break.

    0
  42. 2143

    Hectic Capiznon Bloggers 2009

    April 5, 2009 6:52 pm

    So nice CV and resume…

    0
  43. 2194

    Great article.

    0
  44. 2245

    Europass CV – european standard that it´s used for CVs on this part of the world. You can build your own online and update it using the XML file saved on your computer. Also available as a PDF download.

    Many companies at europe demand this template when applying for a job nowadays.

    0
  45. 2296

    Ian R McAllister

    April 7, 2009 4:09 am

    Great article! For designers, this is the way to communicate and show your skills. Physical CV’s must be white/A4, online you should have your portfolio, and can play with your presentation to your professional advantage

    0
  46. 2347

    11. Don’t be afraid to admit where you lack experience, providing you have an appetite to learn.

    Twoplayer

    0
  47. 2398

    Really a great article……….

    0
  48. 2449

    Engr. Matt Ranola Jr.

    April 12, 2009 4:04 am

    I admire your website and your attitude for unselfishly sharing your knowledge to millions of internet users. KEEP UP THE GOOD WORKS, surely GOD will bless you.

    0
  49. 2500

    Thanks for great article

    0
  50. 2551

    Very nice article, however InDesign is a must for designers but some people might prefer, especially if they are more tilted towards the scientific community, XeLaTeX, which allows you to use OpenType Fonts :-).
    there are many examples on the web, I wrote a blog post at http://www.aleplasmati.comuv.com!

    0

↑ Back to top