Illustration showing the visualisation of a case study, which includes the layout, color scheme, typography and high-quality images.

Design with Intent: Craft Your Portfolio with Visual Storytelling Tools

by Laia Tremosa • 13 min read

607 Shares

Does your UX/UI portfolio look like a dry textbook or a captivating story? Use typography, colors, layout and accessibility to create a memorable narrative that showcases your design skills and your personalitymake a great first impression on hiring managers and get that interview for your dream job.

In this video, Morgane Peng, Design Director at Societe Generale CIB, talks about the visual elements of a design portfolio.

Transcript

Visual Design: Form Follows Function

When you work on the visual aspect of your portfolio, think about how you can use the visual elements—typography, color scheme, etc.—to tell your professional story. Think about the content you’ve selected to represent yourself and how you can better showcase it.

Let’s explore how each visual element becomes a narrative tool to captivate potential employers:

  1. Visual hierarchy and layout: Use visual hierarchy to guide recruiters through the story of your work. Take them on a journey—your design story—and help them find what they’re looking for. Also, use grids to keep your content organized and clean.

  1. Typography: Don't underestimate the power of fonts! Choose fonts that are not just aesthetically pleasing; they should speak to your design personality and professionalism. Clear, readable fonts act as your narrator; use them to communicate who you are as a designer to hiring managers. They are the voice that tells your design story. For body text, stick to user-friendly fonts, and be more creative (within reason) for titles.

  1. Color scheme: Keep in mind that colors evoke emotions and thus, have a significant impact on how your work is perceived. Think about the story you want to tell and choose your colors accordingly. Define the color palette and stick to it for the whole portfolio, this will ensure a cohesive and professional look.

  1. High-quality images: Be intentional about the images you choose. Think of them as snapshots of your design story. Each image should have a clear purpose and tell a story, whether it showcases your design process, the final product or a glimpse into your personality. Ensure all images are high-quality, well-lit and cropped to emphasize the key elements.

  1. Your logo and branding: Although logos are not mandatory for portfolios, if you’d like to design one, make sure that it represents you and your brand appropriately. Then feature it in your portfolio to build your identity as a designer.

  1. Responsiveness: Ensure your portfolio looks and functions flawlessly on any device, adapting to different screen sizes. Just like a great book can be enjoyed anywhere, your portfolio should provide a seamless user experience for recruiters, no matter how they choose to view it.

Remember, visual design isn’t just decoration; it’s the language that tells your professional design story. Use visual elements with the purpose to support your narrative, stand out from the crowd—for the right reasons—and captivate potential employers.

Illustration showing the visualisation of a case study, which includes the layout, color scheme, typography and high-quality images.

© Interaction Design Foundation, CC BY-SA 4.0

The Take Away

Don’t just make your portfolio aesthetically beautiful, use visual elements to tell your design story. Every visual element in your portfolio, from font choice to color palette, is a storytelling tool that can help you land your next interview.

Start by choosing fonts that support visual hierarchy, represent your personality and are easy to read. Next, select a color palette that reflects your design style and considers emotional impact. Add high-quality images that have a purpose and convey a specific message that supports your narrative. Also, make sure that hiring managers will have a seamless experience when reviewing your portfolio—no matter the device they use.

Overall, let your visuals be the voice of your design journey and use them strategically to support your professional narrative.

References and Where to Learn More

Want to create a portfolio that gets you hired? Take our course, Build a Standout UX/UI Portfolio: Land Your Dream Job, and learn how to showcase your skills, tell compelling project stories, and impress employers.

Take our course, Visual Design: The Ultimate Guide, to learn the basics of visual design and level up your portfolio’s appearance.

Read the article, The Key Elements & Principles of Visual Design.

Watch our Master Class, The Tone Of Typography: A Visual Communication Guide.

Build a network that supports your career growth—join an IxDF Local Group.

Hero image: © Interaction Design Foundation, CC BY-SA 4.0

Learn More in This Course:

Journey Mapping

1
6
29
21
91 % booked
View Course

What You Should Read Next

  • Read full article
    Why Care about Statistical Significance? - Article hero image
    Interaction Design Foundation logo

    Why Care about Statistical Significance?

    The categorical data depicts the success and failure rate of the low-fidelity wireframe above. There is not a large enough difference between the two to determine if the designs were successful.There is an element of error involved in measuring anything. So, when we want to compare measurements, how

    Social shares
    431
    Published
    Read Article
  • Read full article
    Web Fonts: Definition and 10 Recommendations - Article hero image
    Interaction Design Foundation logo

    Web Fonts: Definition and 10 Recommendations

    Web fonts bring digital content to life. They enhance readability, set the tone, and ensure consistency across various platforms—all vital ingredients. When you understand web fonts and their impact, it can help you with effective website creation—and greatly so. We’ll provide a comprehensive overvi

    Social shares
    781
    Published
    Read Article
  • Read full article
    How to Screen Research Participants - Article hero image
    Interaction Design Foundation logo

    How to Screen Research Participants

    Finding the right participants is crucial for gathering user research. We usually need to do research with participants having a particular set of needs or experience. In this short video, you will find out about the basic need for screening and how we make sure that we have suitably qualified parti

    Social shares
    450
    Published
    Read Article
  • Read full article
    Pitfalls in Recruiting Participants for User Research - Article hero image
    Interaction Design Foundation logo

    Pitfalls in Recruiting Participants for User Research

    The level of participant engagement is an important part of the user research results. Our results are dependent on proper engagement with our participants. In this video we look at some of the issues around participant recruitment and hear practical examples that arose in a large online study.[[vid

    Social shares
    419
    Published
    Read Article
  • Read full article
    How to Fit Quantitative Research into the Project Lifecycle - Article hero image
    Interaction Design Foundation logo

    How to Fit Quantitative Research into the Project Lifecycle

    Quantitative research methods fit into the project lifecycle at different stages of the process.In this video, we see where different quantitative research methods fit into a typical project lifecycle. Bear in mind that even with an iterative process such as Agile, the short cycles still address dif

    Social shares
    510
    Published
    Read Article
  • Read full article
    How to Resolve Conflicts Between Design Thinking and Marketing - Article hero image
    Interaction Design Foundation logo

    How to Resolve Conflicts Between Design Thinking and Marketing

    In the past, designers often reported to marketing managers and were neither expected nor allowed to make business decisions. When traditionally-structured companies transition to a design-driven mindset, there can be friction between the marketing and design teams. Let’s take a closer look at this

    Social shares
    682
    Published
    Read Article
  • Read full article
    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche: User Research - Article hero image
    Interaction Design Foundation logo

    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche: User Research

    User research is indispensable—and without it, well... UX design is guesswork. When you’re a user researcher, you know this well—but it can be hard to communicate your work in a way that grabs the viewer and holds their attention. And that’s what a portfolio is all about—grabbing the attention of yo

    Social shares
    382
    Published
    Read Article
  • Read full article
    Top Service Blueprint Templates - Article hero image
    Interaction Design Foundation logo

    Top Service Blueprint Templates

    Service blueprint tools are vital for effective customer experience design—and for designers to make experiences that are exceptional. Here, we’ll discuss why these tools are so important. What’s more, we’ll explore templates and practical resources to create high-quality, efficient service blueprin

    Social shares
    637
    Published
    Read Article
  • Read full article
    How to Write Research Questions that Lead to Confident Design - Article hero image
    Interaction Design Foundation logo

    How to Write Research Questions that Lead to Confident Design

    Designing with Data provides an extensive background to A/B testing.As with all other research methods, we need to start with a research question. A/B testing concerns itself with changes in user behavior, meaning that our questions need to be centered on measurable goals. In many cases, these will

    Social shares
    449
    Published
    Read Article
  • Read full article
    Getting Started - Article hero image
    Interaction Design Foundation logo

    Getting Started

    We start our introduction to A/B and multivariate testing (MVT) by looking at their basic principles and their differences. Note that the video mentions Google Optimize, which has been withdrawn. Google Firebase can be used for mobile platforms. Third-party solutions are needed for A/B testing on th

    Social shares
    223
    Published
    Read Article

Top Articles

Top Topic Definitions

Feel Stuck?
Want Better Job Options?

AI is replacing jobs everywhere, yet design jobs are booming with a projected 45% job growth. With design skills, you can create products and services people love. More love means more impact and greater salary potential.

At IxDF, we help you from your first course to your next job, all in one place.

See How Design Skills Turn Into Job Options
Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.
Customize
Accept all

Be the One Who Inspires

People remember who shares great ideas.

Share on:

Academic Credibility — On Autopilot

Don't waste time googling citation formats. Just copy, paste and look legit in seconds.

Feel Stuck? Want Freedom?

Get one powerful email each week, like 326,171 others.

Learn to design a life you love.

Next email in
6
days
18
hrs
29
mins
22
secs