How to Build an Impressive Portfolio Site

By: Randle Browning

Category: Blog, Freelancing, Get Hired

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Regardless of which path you’re on en route to tech work—web developer, web designer, UX professional, etc.—you’ll eventually need an eye-catching, client-landing portfolio. But what exactly is an online portfolio when it comes to the tech industry?

While it’s easy to think of a portfolio as a collection of printed out work samples, an effective online portfolio involves designing your own website where you can host and share dynamic digital content. If you’re hoping to land a new job in tech, it’s also the ideal way to demonstrate your know-how through the site design itself.

This might sound like a stretch—especially if you’re brand new to tech and you’re short on projects you can showcase—but there are plenty of ways to create a stunning tech portfolio site even before you start working professionally.

First up, though, we want to cover the basics.

How to Create a Portfolio Website for Any Industry: The 4 Step Guide

Yes, we said this article would focus on tech portfolios, but—before you get to the tech part— there are some universal portfolio site standards that apply to any industry. And yes, as tech becomes more and more ubiquitous across all industries, having your own portfolio website is a good idea no matter what kind of work you do.

Before getting into tech specifics, be sure to follow these four steps that will set you up for general portfolio site success:

1. Start collecting testimonials

You know all those glowing reviews that people with experience feature on their websites? They didn’t get there by accident.

Doing amazing work helps, but here’s a portfolio site secret: whether someone’s been working for 20 years or 20 minutes, chances are they requested those flattering shoutouts. And you should, too!

Whenever you finish a product you’re proud of—whether it’s a job you’ve been paid to do or a project you’ve done pro bono to help a friend or relative or to gain experience—ask the client (and anyone you collaborated with) if they’ll write you a testimonial to add to your portfolio site. Even if you only have a few practice projects under your belt, those reviews will add up and create a narrative of credibility for future clients.

Pro tip: For some people (especially people who don’t consider themselves writers), writing a testimonial might feel daunting. If your former client, supervisor, or coworker balks at the idea of coming up with one, offer to draft something up for them for approval. It happens more often than you realize!

Here are two examples of online testimonials that pop and add authority to their website owner’s services:

2. Include ALL your projects

In the same spirit as mining your education, feel free to cast a wide net when it comes to the projects you include on your portfolio site (especially when you’re just starting out). All the unpaid projects you’ve done to learn new skills are perfectly valid ways to show clients what you’re capable of. And you don’t need to limit yourself to final projects from major courses—include any exercises, “mini-projects,” or even steps of larger projects as separate pieces in your portfolio.

If you built an app using JavaScript and jQuery, go beyond simply including a screenshot and link to the app itself. Put in screenshots of the mock-up you did when you were planning the app, how the app looked before you made it interactive, and even different shots showing off certain features of the app, like maybe the slick drop-down menus you created or the fun onboarding instructions screen.

Web designers can also put in color palettes, assets, or wireframes. And developers can include particularly clever bits of coding. Anything that serves as proof of your skills and knowledge is more than worthy of a place in your portfolio.

Just take a look at Amanda Conrad’s gorgeous portfolio. She features process, not just final product. In a design for a gelato company, she created a user experience flow and featured it on her site:

3. Don’t forget about community/volunteer work

A non-digital aspect to point out in your portfolio is your participation in community groups or organizations. Anything directly related to your industry should end up featured on your portfolio site, but don’t leave out other activities just because they’re not a complete match.

For instance, if you’re looking to work in tech, there might still be “techy” aspects of a group or your role in it—things like creating HTML newsletters for your local entrepreneurs’ club, or maintaining the WordPress site for an annual music festival in the area. Those are both terrific examples of you using your skills “in real life” as well as working in a team and on projects —and it all adds up to experience in the eyes of people looking to hire you.

Check out the way Skillcrush alum Paola Maldonado features her role in co-founding NYC Tech Latinas, front and center:

4. Tell your story

If you’re trying to put together a compelling portfolio website but you don’t yet have a career’s worth of work to share, you can help potential clients get to know you and understand your personal brand by using your portfolio site to share who you are and where you’re coming from.

For instance, try building an infographic that maps out how you got to your most recent career point. Or find a quirky way to describe your personality and work history, like Aisha Souto-Maior. If you’re not sure how to explain what you do, try using our free elevator pitch guide to get you started.

What to Include on a Tech Job Portfolio Website

With those general tips out of the way, it’s time to dig into tech specifics. How do you make a portfolio site for a tech job if you’re brand new to the field?

Our best advice: combine the general ideas listed above with a few specifics depending on the kind of tech work you’re interested in.

While you should obviously showcase any work that’s connected or appropriate to your field, here are a few specific examples of projects you can include (and that don’t require a long history of professional work).

What to Include on a Portfolio Site for Web Developers

Customize a WordPress theme or template—You can use them to structure your portfolio site AND as a sample project

  • When you build a website with WordPress, themes and templates are the frameworks that determine what your site’s pages will look like.There are a wealth of readymade WordPress theme and template options you can use, but with HTML and CSS skills (and additional languages like JavaScript and PHP if you’re familiar with them), you also can tweak those themes and templates to fit your custom whims.If you’re building your portfolio site with WordPress, custom themes and templates will not only give your site a unique look, but they’ll double as a sample project you can highlight.
  • Plenty of web development clients won’t be interested in paying for a completely custom site, either because they love the functionality of WordPress and other content management systems or because they don’t have a large budget.However, these clients WILL want to hire you to take a standard theme and personalize it. And since these projects aren’t as involved as building an entire site from scratch, you can turn them over quickly and fatten your portfolio in a hurry.
  • Skillcrush Web Design Blueprint alum Rashida Balogun originally customized her site used her portfolio to snag clients for her freelance branding business. Now, she builds and customizes Squarespace sites for other entrepreneurs as part of her business, and her own site is some of the best advertisement out there.

What to Include on a Portfolio Site for Web Designers

Redesign an existing site or app

  • If you haven’t been paid to do a lot of web design work yet, why not volunteer? A total spec makeover of a well-known site or app is a great project to include on your web designer portfolio website, and can quickly show potential clients what you can offer them. Pick a site that you’d just love to get your hands on and give it a fresh look from top to bottom—and remember to include descriptions of your thought process and design strategy.
  • By providing a comprehensive illustration of what you can do with a familiar brand, clients will have an easier time picturing what you can do for their own businesses.For some spectacular examples of redesign work, check out designer Ximena Vengoechea’s redesign for Quibb, Sharitive, and iOS.

What to Include on a Portfolio Site for UX Professionals

Mobile App Design

  • With the UX field being a wide one, it can be hard to pin down the best kind of project to tackle for a portfolio site when you’re just getting started. One of the most concise ways to show off your UX skills is through a mobile app design.Mobile apps are everywhere in our daily lives, and so they present an ideal UX challenge when it comes to anticipating and responding to user’s pain points.
  • Make sure to design your mockup mobile project with UX deliverables in mind—things like flowcharts, sitemaps, wireframes, prototypes, and analytics reports. And, as far as getting your project into a digestible website form goes, software programs like Sketch will allow you to build mobile site mockups that can be displayed on a desktop screen for presentation.
  • Finally, you can consider combining this portfolio project with the web designer idea above—if you don’t want to create an app out of thin air, recognizable apps and brands are fair game for a spec redesign. In fact, many established brands offer style guides available online that you can work from. Examples include Urban Outfitters, Skype, Firefox, and the New York Transit Authority.
  • Here’s a look at a sample Netflix redesign from Behance:

Portfolio Sites for Project Managers, Content Strategists, and Digital Marketers

If you’re looking to break into the tech-adjacent world of digital content marketing, having a tech portfolio website is as much a must as it is for more obvious tech roles like web designers and web developers. So where should you start as far as relevant work samples go?

The good news is, there are so many project possibilities when it comes to digital marketing, that you can begin as big or small as you like.

Starting big can include creating a complete digital branding package (either for a fictitious or existing brand or company), while starting smaller means focusing on some of the component parts that make up an overall package. Those parts can include:

  • Social media maintenance. A comprehensive social media suite can now be as essential to a brand as a well-designed website. Which means showing clients how you can create a brand-consistent presence on Twitter, Instagram, and Facebook is a crucial add to any content-oriented portfolio site.
  • SEO friendly web design. Show potential clients some of the content strategies you’d put in place to make a brand’s website SEO (search engine optimization) friendly. This is the practice of tweaking a website’s architecture and content to make it rank higher in search results from search engines like Google and Bing.SEO is a critical part of digital branding and marketing, so people able to display your skills via a mockup web design is a good call for a tech marketing portfolio.
  • A style guide. If you bring design chops to the table along with your marketing skills, consider putting together and presenting a brand style guide. This will give clients insight into your long term brand strategizing abilities and your skills for putting component brand parts into a complete package.Plenty of digital style guides are available online to give you a starting point and yardstick for your own efforts.

Still overwhelmed? Don’t be. The most important thing you can do is share what you’re proud of and do your best to showcase (and explain) everything that makes you you, AND makes you hireable.

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.