How to Design Your Portfolio to Get Hired (a study of JadLimcaco.com)

August, 2014

As a web developer, your portfolio is an essential piece of your job application. It’s an opportunity to demonstrate a curated selection of your best pieces of work—or maybe your only work if you’re new! If done right, your portfolio will give you a huge advantage amongst a sea of applicants.

In these portfolio studies, you’re going to find out how the pros do it. I’m hand-picking the best web developer and web designer portfolios on the internet and breaking them down piece by piece, giving you ideas and inspiration for your portfolio site.

Working on your portfolio?
Get my free portfolio checklist (at PortfolioTips.co)—I've broken out the 10 most important things to include in your portfolio. Also includes 3 bonus ways to make your portfolio stand out from the crowd.

Jad Limcaco is an incredibly thoughtful, intelligent, and articulate designer, and this comes across when he demonstrates his work. There’s a lot to learn here, so let’s jump in. We’re going to highlight actionable takeaways for your portfolio from the six most important pages on Jad’s site:

  1. Homepage
  2. Portfolio
  3. Project: Designer News App
  4. Project: Mint Website Redesign Concept
  5. About Page
  6. Blog

Note: This portfolio study is image heavy, and best viewed on as big a screen as possible.

1. Homepage

a) Including a pic of yourself
Jad looks like a chill, friendly, stylish dude! It's nice to see who you might be working with. Including a picture lets employers to put a face to your name and work, and feel at ease that they know who you are. It doesn't have to be as big as this one; a small, casual profile shot on your about page works too.

b) Single sentence summary of who you are
If you had any doubt about what Jad does, it's cleared up right away. 100% of the tagline is relevant to the viewer, no words are wasted. Including a concise descriptive sentence is a great way to give visitors that are quickly scanning through your site a clear explanation of who you are, without requiring them to read through a lot of content to find out.

c) Providing a quick route to your work
Visitors come to a portfolio site to find work examples. Giving them an easy path to your work will get them there quickly, reducing their chance of bouncing without finding what they were looking for.

d) Putting your best work front and center
Jad understands that we're here to see what work he's produced recently, and doesn't waste any time getting to it. We can tell a lot about the types of projects that Jad works on, the types of clients he works with, and the quality of his work from these screenshots. Including links to your most recent work on your homepage gets visitors to the most important part of your site right away.

e) Highlighting your best writing
Jad writes a lot of fantastic content so it makes a lot of sense for him to feature this. If you don't write regularly, it's okay to omit blog content from your homepage. Writing blog posts is not a requirement for a great portfolio; however, if you do write about your work, including links to your most recent posts will help give employers extra insight into your thought process.

f) Including links to sites that you're active on
Jad can't fit his entire online footprint into his portfolio, there are a lot of great things that he posts to other sites. He has a fantastic Dribbble profile and regularly tweets about design. Including links in your footer to sites where you produce great content, or show more about who you are, helps employers paint a better picture of you.

2. Portfolio

a) Featuring your most impressive projects at the top-left of your portfolio
Usability studies show that visitors often read websites from the top-left first, so it's smart to place your best projects there. This is where Jad features his most impressive projects, Designer News and Mint, catching our eye immediately.

b) Including a mobile fallback for hover states
Hovering over a project thumbnail in Jad's portfolio displays the name of the project and it's type—a common design pattern for galleries. When you view the page from a mobile device Jad has placed the project information below the thumbnail, making it available without needing to hover. Including a breakpoint for mobile devices that displays the important information from your hover states will ensure that visitors see it.

Tip: Segmenting your projects into groups
The lack of organization of Jad's projects is one thing that could be improved on this portfolio page. There are multiple different types of work: Mobile Design, Web Design, Print, and Branding, but we're left guessing which is which by the images. There is a hover state which shows the project type, but that isn't too accessible. Breaking your work out into groups gives the viewer a high level overview of the types of projects you've worked on, allowing them to go deeper into the types that they're interested in.

3. Project: Designer News App

a) Showing your work visually
Jad keeps the project description and explanation of his goals and motivations brief, diving straight into high resolution screenshots showing his work. Including big screenshots of your work shows it to people immediately, rather than trying to describe it in extensive text that visitors don't have the time to read.

b) Providing easy access to more projects
When we get to the bottom of the page Jad has included buttons that allow us to navigate back to his portfolio page, or to the previous/next projects. Including a link back to your portfolio page will help visitors browse through your work.

Tip: Including unpaid work is awesome
This project was unpaid, and came about purely from Jad's initiative in taking it on. You can't help but love this hustle. This is a fantastic portfolio piece, demonstrating a ton of skill in mobile design, and is just as impressive as a paid project of this type. If you don't have much experience in the field you're looking for a job in, building and including the type of project that you're aiming to work on is a powerful way to show employers that you have the skill crush it for them.

Tip: Descibing the tools you used
It would be interesting to hear a little about how Jad created this project, and the tools that he used. Including a brief sentence listing the tools used to build your project (e.g. Sketch, AngularJS, Twitter Bootstrap, Chef) helps employers match your skills to the position that they're hiring for, and it's interesting for the rest of us too!

4. Project: Mint Website Redesign Concept

a) Including a link to the live site
Given that this is a redesign of an existing website, it was helpful that Jad included a link to the live site so that we can easily compare. If any of your portfolio projects are live, including a link provides proof that your work was shipped.

b) Giving insight into your thought process
Jad does a phenomenal job of talking through the most significant changes that he made during the redesign. For any portfolio piece, including some insight into how you solved problems will give viewers an idea of how you would approach problems for them.

c) Showing your attitude
In the last paragraph Jad states some of the strengths of the project, showing his love for design, and dedication to learn and improve. Including lessons learned or plans for future iterations to your project can show your attitude to continually improve your work. Be careful not to be derogatory towards your project, instead framing future iterations as further improvements—something that Jad does a great job of here.

Tip: Unsolicited redesigns can be a fun way to build your front-end or design portfolio
The second project in Jad's portfolio is also a stunning piece of unpaid work. Working on unsolicited redesigns is a great way to build your portfolio without having to land paid work. Want to learn more about unsolicited redesigns? There's a great subreddit for that.

5. About Page

a) Including fun facts about yourself
Jad shows great personality on his about page, allowing employers to get a feel for him as a culture fit for their team. Including some eclectic or relatable facts about what you do in your spare time is great here. OMG, I love ice cream and the outdoors too!

b) Describing the position you're looking for as your speciality
This high level overview makes it crystal clear that Jad wants to create great websites. Whatever the job is that you want to get hired for, describe yourself as a specialist in it, whether you currently are or not. If you're applying for a Rails job, write that you specialize in creating Ruby on Rails web applications. Including a description of your speciality as the first paragraph on the about page will greatly help employers to mentally place you in the role that they're hiring for.

c) Highlighting your online footprint
Whether it's writing for online magazines, answering questions on Stack Overflow, or discussing programming on technology specific forums. It's worth including links to anywhere online that you're creating awesome artifacts of your work/knowledge.

d) Including a PDF resume download
For employers who still like printing things.

e) Including technical information
Jad's paragraph on how he created his website is a really fun read and here he gets into the tools, technologies, and frameworks that he used. If you spent time creating a custom portfolio site, including information on how you built it is a great way to plug more of the technologies that you're experienced in.

6. Blog

a) Writing up your notes from a Meetup
In Emotional Design, Jad writes up notes from an event that he attended. Writing up your notes from events is a great way to create content quickly from notes that you may be taking anyway. It has the added benefit of showing that you're attending industry events.

b) Writing small blog posts
Most of Jad's posts are under 500 words. Small posts like Great Design Advice demonstrate his personality really well. Writing small posts is a good way to keep your blog up to date. Blog posts don't have to be huge.

Tip: Including a blog is optional
Writing is time consuming and isn't everyone's cup of tea. Including a blog and keeping it up to date isn't a requirement of a great portfolio, but it does have some benefits.

Tip: Exposing your soft skills
Jad's blog posts show that he's not only a great written communicator, but also a very passionate, dedicated designer. Including a blog in your portfolio is great if you enjoy writing, but don't worry if you're strapped for time, you can show off these soft skills in an interview instead.

The most important things that we can learn from JadLimcaco.com...

You don’t need paid work to have a great portfolio

Five out of the 12 projects in Jad’s portfolio are unpaid, and came from his own initiative and hard work. It doesn’t matter if a project was paid or not, it shows the skills that employers are looking for.

Increase the depth of your portfolio with relevant side projects

Jad includes desktop backgrounds, CD covers and book covers. If you’re a web developer, consider including UIs you’ve built that you didn’t make the final product, or server configurations or .dotfiles that make your life easier.

Portfolio projects don’t need to be completed

Jad admitted early in some of the project descriptions that a couple of his projects weren’t finished, and explained why. It was great that he included them, as a lot of impressive work had went into them. Including any unfinished projects that you have could benefit your portfolio.

Working on your portfolio?
Get my free portfolio checklist (at PortfolioTips.co)—I've broken out the 10 most important things to include in your portfolio. Also includes 3 bonus ways to make your portfolio stand out from the crowd.