How To Design a Clean and Professional Resume / CV Website
Earlier in the week I released a new HTML template called Jamba which is a single page resume and CV template. In this post I’d like to show you how I designed the template in Photoshop (check out the Jamba features page and the live demo).
Before we get started though, let’s quickly cover what needs to be included in an online resume and CV design. There are a number of details that are obviously required such as your name, contact details (email and contact number), and ideally a warm and friendly photo of yourself.
It’s also important to include other key areas such as the work experience you have, your academic background, any specific skills you’ve developed, and details of any other related achievements. You may want to include other things as well, but most resumes and CVs will include these sorts of details.
Given that potential employers are likely to be very busy they’ll probably only have time to scan the page – so, to avoid irritating them, it’s important that the essential details in the design stand out clearly and that the content included is structured in a way that makes it quick and easy to skim through.
We therefore want to keep things clean and simple! Here’s a screenshot of Jamba – the template that we’ll be creating:
Step 1 – Create A New Document
Create a new document with a size of 1100×2100. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the color background to #EEEEEE (a light grey).
Step 2 – Create The Background
On top of the grey background we want to add a white box with an outer glow – add a horizontal guide at around 90px and another at around 2010px – then, using the Rectangle Tool, draw a white box (color: #FFFFFF) inside of the borders you have set.
We then need to add some effects to the box – add a stroke with the following settings (where the color is set to #CCCCCC):
Also set an outer glow with the following settings (where the color is set to #AAAAAA):
You should end up with something like the following (note: I’ve not included the bottom of the screenshot as this image is very large – it will basically look the same as the top – you’ll have the bottom of the white box along with some grey padding around it):
Step 3 – Add The Header
There are several different things that we need to add in the header including the author name, contact details, an area for a short bio, and a photo. Let’s start with the author’s name – set a horizontal guide at 60px down and a vertical guide at 60px across.
Then, using the Myriad Pro font, set the font weight to bold, the font size to 60px, and the color to #555555 – then type a name within the borders you just set:
Next we need to add the contact details and the “About Me” section – for the contact details choose the Arial font and set the size to 20px and the font weight to “regular”. Type “Email: sarahjohnson@email.com” and underneath that enter “Phone: 01234 567 890″. Set the color of the titles to #555555 (dark grey/black) and the color of the email address and phone number to #AAAAAA (light grey). You should end up with something like the following:
Underneath the contact details we need to add the bio section – keep the font as Arial and the size as 20px – set the color as #555555 and type “About Me”. Then set the font size to 16px and the color to #666666 and type some dummy text under the “About Me” heading:
The final thing we need to add to the header section is the photo – add a vertical border about 60px in from the right border of your white box. Then, using the Rectangle Tool, draw a white box (#FFFFFF) that has dimensions of 250x250px. Add a Stroke effect with the following settings (where the color is set to #CCCCCC):
Also add an Outer Glow with these settings (where the color is set to #AAAAAA):
Finally, you need a photo that has dimensions of around 230x230px – add this in a new layer above the box that you just created – you should then have something like the following:
Step 4 – Create A New Section
Before creating a new section in the content area we need to add a line break between the header and content area – using the line tool, set the color to #E5E5E5, and then draw a line (with a weight of 1) from the left border to the right. Once you’ve done this, create another line in exactly the same way, but use the color #F5F5F5 and place it directly under the first line.
We now need to create the “Experience” section – select the Myriad Pro font and set the font weight to bold, the color to #555555, and the size to 40px. Then type “Experience” and place it next to your left border.
To create the arrow that goes next to the section heading we need to use the Custom Shape Tool – select the arrow highlighted in the screenshot below, set the color to #CCCCCC, and then draw an arrow next to the heading. Change the size of the arrow to something like 68x40px.
Now we need to add some actual content – using the Arial font, set the size to 20px, the color to #E86E14, and the font weight to “regular”. Type something like “Senior Project Manager” and place it to the right of the arrow.
We then need to include some more text underneath, so set the font size to 16px, change the color to #555555, and write something like “Web Design Studios / Full Time / June 2008 – Present”.
Finally, we need to include some dummy text below these headings – set the font size to 14px and the color to #555555 – then add some text below.
Once you’ve done this it’s then just a matter of copying these different headings and objects, positioning them in the correct place, and then editing the text to what you want to include in the template.
The Final Result
After you have created copies of the headings and objects and positioned them appropriately you should end up with something like the following:
Conclusion
I hope you found this tutorial useful – remember that you can check out the live demo if you want to take a closer look and can download the template from the Jamba features page.
January 28th, 2010 at 9:07 pm
lovely!
January 30th, 2010 at 1:05 pm
While this is really cool – and this is something I’d love to do, I’ve always been told the following:
1) Not supposed to put a photo on your resume – it’s somewhat against best practices because while it might not happen, you *could* be discriminated against because employers see what you look like beforehand (illegal yes, but let’s be realistic…it probably can – and does – happen).
2) For at least business people, these types of resumes aren’t friendly for HR and recruiter because they usually run a program to scan through for key words to find out if the prospect is appealing. Plus the websites we submit to usually require us to email them Word docs.
I get that these creative and professional resume tips above are really helpful and will convert it to a PDF. Believe me, I would totally do something like this – at least as a website, but to submit to an employer, I don’t think they would like to get a cool visual like this – lowest common denominator dictates it being in Word. Am I totally off base here?
But don’t think that I’m being universal in my thoughts here…because I get that designers have a different way to present their resume, so do engineers, doctors, etc. Every profession probably is different. From a business background, this is what I’ve encountered during my job searches.
I’d still try and do the tips above though.
January 30th, 2010 at 3:43 pm
Thanks for comments Ken. You make some interesting points – an online resume like the one described in this tutorial clearly isn’t ideal for all professions. I think it probably is best suited to creative/design job-seekers as many employers in this area look online for new talent and having a clean and professional resume can potentially help you stand out from the crowd.
I think a mistake that many people make, however, is that when they move their resume online they simply copy and paste it. This isn’t ideal as traditional resumes typically contain lots of text and this can make them hard to read on a screen. In such situations, I think it’s potentially useful to have a design something like what’s in this tutorial (or anything else that makes it easier to read) that’s better suited to the online medium.
1) With regards to your comment on photos, I think there are many pros and cons to including them in an *online* resume. Obviously it can result in discrimination (despite this being illegal), but it can also create a good impression and a positive perception of you (especially if it’s a warm and friendly photo). I personally wouldn’t include a photo in a paper resume (just because that’s standard practice), but I think the positives outweigh the negatives in an online CV. If someone was going to discriminate against me based on my photo I don’t think that’s the type of individual/company I’d want to work for anyway
2) You’re right. This type of resume wouldn’t be suitable in this scenario – it’s important to have a traditional resume even if you decide to create an online one – that way you can still submit it to job sites or send it directly to employers (in addition to having an online presence).
I think having a well-designed online resume is important if potential employers in your area of work frequently recruit new talent by actively searching around on the Web. If this isn’t the case in a particular profession then having an online CV clearly has less value.
Thanks again for your comments
January 30th, 2010 at 1:32 pm
Hello.
In Portugal, most of companies only receive CV on an European Format because of standards. In the begging I had a model of a nice CV with my stuff, but I have to change it to be compatible with Europass and to submit it by PDF or even Word doc…
But yes, this simple CV is really amazing… it stands out.
Daniel
January 30th, 2010 at 3:49 pm
Thanks Daniel.
January 30th, 2010 at 2:02 pm
The most impressive format of a resume I have seen could be found here.
http://www.xemion.com/blog/5-steps-to-the-perfect-web-designer-resume-19.html
This could be created in both word and scannable PDF.
January 30th, 2010 at 3:59 pm
Hi David – I really like the clean and minimal design of that resume – I suppose my only criticism would be the column on the right-hand-side. It lists things like expertise, research, tools, etc. but it doesn’t really provide any details of the experience he has in these areas.
Whilst I’m sure Kevin Fox does have a lot of experience in persona design, heuristic evaluations, and design leadership, etc. it would be useful to get more specific details about these different areas.
Although in saying that I think there has to be a balance – obviously you don’t want to include too many details as that will just bore potential employers and they’ll probably throw your resume in the bin
December 7th, 2010 at 3:57 pm
David, I have job opportunities available. Can you contact me at big1papi1@gmail.com
January 30th, 2010 at 11:27 pm
Will that resume be more than one page?
January 31st, 2010 at 4:47 am
Hi Tony – it largely depends on how much information you need to include in the template. Given that this is meant to be used as an *online* resume I think it’s OK if it’s longer than one printed page – as long as the content within the resume is concise and easy to read.
January 31st, 2010 at 1:41 pm
Very fancy and clean. I love it!
February 6th, 2010 at 4:41 pm
Thank you so much for this clean and nice tutorial, it has been a great help!
February 7th, 2010 at 3:57 am
Thanks Dairox – glad it’s been useful.
March 6th, 2010 at 3:45 pm
Perhaps consider an alternate version without photos as an option. I know some recruiters really balk when photos are used.
I would also strongly recommend including a link to a LinkedIn profile. They are preferred by more and more hiring managers and recruits these days. They are also very portable and exportable, which helps with needing alternate versions.
As a final note, I’d encourage you to look at HTML5 form options, which can make filling out emails and web adresses much easier for those of us submitting comments from an iPhone.
March 6th, 2010 at 6:23 pm
Thanks for your suggestions Dennis – especially about including a link to a LinkedIn profile – I think that would definitely be a useful addition.
March 6th, 2010 at 3:55 pm
I like the tutorial and the result. You could improve it more by using less images and more CSS. Most of what you are doing with images can be done with CSS2 and CSS3 too, which makes your template even cleaner
For instance remove the line image and replace it with a border-top in css. Same for dropshadow.
One downside is that CSS3 is not yet supported by all browsers, but will in the future…
March 6th, 2010 at 6:29 pm
Hi Evert – thanks for your comments – your right about making more use of CSS, although it is frustrating that CSS3 isn’t fully supported by all browsers yet. Looking forward to when that becomes a reality
March 6th, 2010 at 10:31 pm
How a resume should be. Clean and to the point. Much, much better than all the over-the-top resumes Hongkiat posted recently.
March 7th, 2010 at 5:14 am
Thanks TheAL – appreciate your feedback
March 12th, 2010 at 1:08 am
Very useful
April 18th, 2010 at 12:32 am
In step-3 you asked to set a horizontal guide at 60px down and a vertical guide at 60px across. But that 60px will set the guide above the outer glow top and left. With 160px it will set correctly as you shown in the screen-shot .
April 18th, 2010 at 3:50 am
Thanks for highlighting this Kumaresh
April 24th, 2010 at 5:07 am
Just started reading your site, Excellent articles, great tutorials, you’ve truly helped me, Thank you so much for all your great examples, advice and lessons. I look forward to reading more of your site, and would be happy to help contribute any kind of articles on ‘development’
May 7th, 2010 at 7:43 am
It seems like an Excellent guide for Designing Simple professional Resumes. Thanks.
August 12th, 2010 at 8:02 pm
Very nice tut. Thanks for sharing it!
September 24th, 2010 at 11:09 am
Nice article. Wish we were given some of this kind of preparation from our University courses! We’ve also written a brief article for new designers on things to consider when applying for a job. You can view it here:
design career advice
Hopefully it might just help someone to get moving in the right directions.
Thanks for posting.
October 1st, 2010 at 3:05 am
very helpful article..cheers…
December 28th, 2010 at 6:10 am
Hi
Nice
December 28th, 2010 at 6:12 am
Hi
Good CV
December 30th, 2010 at 5:56 am
Excellent work, Keep it like this!
January 22nd, 2011 at 4:17 am
i think it is probably the best that has come along!
February 12th, 2011 at 12:58 pm
That’s a really nice and clean CV design I will have to give it a try.
May 24th, 2011 at 3:59 am
Hi there, can someone tell me how can i make this cv fit to a A4 page? I am kinda new with photoshop….
Thanks