Interactive Design Portfolios

Your constantly-updated definition of Interactive Design Portfolios and collection of videos and articles
84 shares

What are Interactive Design Portfolios?

Interactivity brings your design portfolio to life!

© Interaction Design Foundation, CC BY-SA 4.0

Design portfolios are crucial in successfully landing a variety of roles, but what form should they take? Interactive portfolios are a great way to show off your design skills while engaging with your audience in ways that just aren’t possible with static media. And for interaction design, they allow you to showcase the same skills you’ll be using on the job.

In this clip, Morgane Peng, Design Director at Societe Generale CIB, explains the important role of a portfolio.

Show Hide video transcript
  1. Transcript loading…

What a Design Portfolio Should Include

It’s important not to focus solely on finished designs. Your portfolio will be more persuasive and informative if it tells the stories of design from problems to solutions. If you also do user research, be sure to include examples of that too, showing how research results affected design decisions. For a user experience portfolio, consider including

  • Initial user research

  • Concept sketches

  • User stories

  • Journey maps

  • Wireframes

  • Prototypes

  • Evaluative user research

  • Finished designs

The complete list sounds daunting, but bear in mind that you are only giving highlights at each step of the story.

You should focus on three to four projects that showcase the range of your work.

Multiple Mediums for Flexible Presentation

Websites offer the greatest scope for demonstrating design skills, but it is often necessary to have a backup. This is especially true if a mobile rendering of a site does not show it in the best light.

Some website platforms support the ability to export your CV as a PDF. Alternatively, sites such as behance.net allow users to create interactive PDFs. These mostly rely on simple scrolling for navigation, but other interactive elements are present, such as drop-down lists and popups.

Where to Start

Building a UX design portfolio, as described below.

© Interaction Design Foundation, CC BY-SA 4.0

In a step-by-step article on how to build a UX design portfolio, Rachel Krause at NNG (see Where to Learn More) suggests:

  1. Review your projects. What makes them good, bad or different from others? What is likely to attract the attention of hiring managers?

  2. Whittle your list down to a handful and consider the story behind each. If you have many to choose from, consider those that might make an interesting conversation when someone asks what you do for a living. Talk about the problems you were solving, how you worked with others and how successful the solutions were.

  3. Choose the format of presentation. As discussed above, websites are great for interactivity. However, they may not always be the easiest to present. Interactive PDFs are a little more linear.

  4. Build it. If you are a confident website designer, starting from scratch can wow your prospective employers or customers. If you would rather focus on telling the stories behind your projects, consider template-rich environments like Wix, Squarespace, Behance and WordPress.

  5. Share your portfolio and get feedback. You can start with online communities but focus on those you already contribute to. Crashing into a community just to ask for feedback may be counterproductive. As you talk to hiring managers and recruiters, take note of what works for them and what doesn’t.

Sample Portfolios

Be sure to have a look at what others are doing. The great thing about interactive portfolios is that they can often be open to view. Naturally, sensitive or detailed information may be stashed behind a password-protected link, but your main goal is to generate enough interest to carry your portfolio past the initial filtering stages.

Here are some collections of good portfolio examples:

Where to Learn More

Literature on Interactive Design Portfolios

Here’s the entire UX literature on Interactive Design Portfolios by the Interaction Design Foundation, collated in one place:

Learn more about Interactive Design Portfolios

Take a deep dive into Interactive Design Portfolios with our course Build a Standout UX/UI Portfolio: Land Your Dream Job .

“Your portfolio is your best advocate in showing your work, your skills and your personality. It also shows not only the final outcomes but the process you took to get there and how you aligned your design decisions with the business and user needs.” 

— Morgane Peng, Design Director, Societe Generale CIB 

In many industries, your education, certifications and previous job roles help you get a foot in the door in the hiring process. However, in the design world, this is often not the case. Potential employers and clients want to see evidence of your skills and work and assess if they fit the job or design project in question. This is where portfolios come in.  

Your portfolio is your first impression, your foot in the door—it must engage your audience and stand out against the hundreds of others they might be reviewing. Join us as we equip you with the skills and knowledge to create a portfolio that takes you one step closer to your dream career. 

Build Your Portfolio is taught by Morgane Peng, a designer, speaker, mentor and writer who serves as Director of Experience Design at  Societe Generale CIB. With over 12 years of experience in management roles, she has reviewed thousands of design portfolios and conducted hundreds of interviews with designers. She has collated her extensive real-world knowledge into this course to teach you how to build a compelling portfolio that hiring managers will want to explore. 

In lesson 1, you’ll learn the importance of portfolios and which type of portfolio you should create based on your career stage and background. You’ll discover the most significant mistakes designers make in their portfolios, the importance of content over aesthetics and why today is the best day to start documenting your design processes. This knowledge will serve as your foundation as you build your portfolio. 

In lesson 2, you’ll grasp the importance of hooks in your portfolio, how to write them, and the best practices based on your career stage and target audience. You’ll learn how and why to balance your professional and personal biographies in your about me section, how to talk about your life before design and how to use tools and resources in conjunction with your creativity to create a unique and distinctive portfolio. 

In lesson 3, you’ll dive into case studies—the backbone of your portfolio. You’ll learn how to plan your case studies for success and hook your reader in to learn more about your design research, sketches, prototypes and outcomes. An attractive and attention-grabbing portfolio is nothing without solid and engaging case studies that effectively communicate who you are as a designer and why employers and clients should hire you. 

In lesson 4, you’ll understand the industry expectations for your portfolio and how to apply the finishing touches that illustrate your attention to detail. You’ll explore how visual design, menus and structure, landing pages, visualizations and interactive elements make your portfolio accessible, engaging and compelling. Finally, you’ll learn the tips and best practices to follow when you convert your portfolio into a presentation for interviews and pitches. 

Throughout the course, you'll get practical tips to apply to your portfolio. In the "Build Your Portfolio" project, you'll create your portfolio strategy, write and test your hook, build a case study and prepare your portfolio presentation. You’ll be able to share your progress, tips and reflections with your coursemates, gain insights from the community and elevate each other’s portfolios. 

All open-source articles on Interactive Design Portfolios

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2024, September 5). What are Interactive Design Portfolios?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,554 designers enjoy our newsletter—sure you don’t want to receive it?