Portfolio Tips

for Web Designers and Developers

How to Design Your Portfolio to Get Hired: Tips from Jad Limcaco's Website

August 26, 2014
Small screenshot of Jad Limcaco's portfolio

As a web developer or designer, 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 this portfolio example post you'll find tips extracted from Jad Limcaco's fantastic web design portfolio—highlighting ways that you can optimize your own portfolio for getting hired. Jad is an incredibly thoughtful, intelligent, and articulate designer, and this comes across when he demonstrates his work.

Working on your portfolio?
Get my free portfolio checklist—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.

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

Homepage

The Homepage on Jad Limcaco's portfolio website

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.

Starting with a single sentence summary of who you are

If you had any doubt about what Jad does, it's cleared up right away with the text over Jad's picture. 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.

Providing a quick route to your work

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.

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.

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, which are included in his footer. 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.

Portfolio

The Portfolio on Jad Limcaco's portfolio website

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.

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 (as shown with the KNVBC Radio in the screenshot). 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.

Segmenting your projects into groups

One thing that could be improved on this page is the lack of organization of Jad's projects. 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.

Project: Designer News App

The Project: Designer News App on Jad Limcaco's portfolio website

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.

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.

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!

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.

Project: Mint Website Redesign Concept

The Project: Mint Website Redesign Concept on Jad Limcaco's portfolio website

Including a link to view the current website

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

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.

Showing your attitude

In Jad's final paragraph, on lessons learned, he 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.

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.

About Page

The About Page on Jad Limcaco's portfolio website

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!

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.

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.

Including a PDF resume download

For employers who still like printing things.

Including a little technical info about your website

Jad's last 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.

Blog

The Blog on Jad Limcaco's portfolio website

Writing up your notes from a Meetup

In his blog post 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.

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.

Writing 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.

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 3 biggest tips from Jad's web design portfolio

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

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 by including 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.

You don’t need to complete websites to include them in your portfolio

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.

Get My Free Portfolio Checklist

It summarizes 10 of the most crucial things to include in your portfolio in one PDF. Also includes 3 bonus ways to make your portfolio stand out from the crowd.

You'll also get each of my new posts (one email every two weeks, at most).