UX/UI Design Portfolio Guide

In today’s digital landscape, user experience (UX) and user interface (UI) design have become integral components of successful product development. Your UX/UI portfolio is your digital showcase, and in this article, we’ll explore the critical elements that can help you stand out and make a lasting impression in this dynamic field.

Portfolio Criteria

  • Includes name, email address (not hotmail, yahoo, aol, or school), and link to LinkedIn page.
  • Includes a button or link to a PDF of your CV/resume.


About Section and Skills

  • Minimum of 5 skills or technologies listed as proficiencies.
  • Clear and concise description of your passion for design.
  • Visualizes design skills over a long list of keywords.


Professional Presentation

  • Demonstrates experience in and passion for the role you are currently pursuing.
  • Quantifies your work with accomplishments, not duties.
  • Includes no more than 3-5 lines.


Simple Navigation Structure

  • Portfolio contains no more than 3-5 primary sections:
    • Homepage (case studies, work highlights, etc).
    • About you (skills, passions, personal background).
    • Portfolio works (list of projects and case studies).
    • Services (overview of UX/UI/FE skills).
    • Contact (email, social media, etc).

Project Overview

  • Includes 3-6 of your strongest projects, with brief descriptions and direct links to prototypes.

Project/Case Study Pages

  • Includes at least one case study of a project.
  • Case study includes:
    • Design and development process and the design thinking methodologies used to solve the problem.
    • User exercises.
    • Low fidelity designs (sketches, post-it notes, exercises) and how those became high fidelity prototypes, ui, or system visualizations.
    • Your role and what problem the exercise helped solve.
    • The time it took to complete the project.
  • Includes external links to outside portfolio platforms like Behance or a website.
  • Includes links to prototypes where applicable.


DESIGN AND FORMAT

Clean and Simple Design

  • Web design does not overshadow content.
  • Clear use of grids and RWD. Name and headlines stand out.
  • FE web design uses ui framework and customized Bootstrap.
  • Consistent and professional text
  • Clear and clean use of typography.
  • Consistent and professional font style.
  • Consistent use of bold, italic, and underline; same bullet point style for all lists.
  • Legible storytelling with designed content sections and process descriptions.


Correct Grammar, Spelling, and Punctuation

  • Consistent punctuation throughout.
  • No grammar or spelling errors.
  • Abbreviations or acronyms are not used unless necessary.
  • Easy to read and professional tone.
  • No jargon, slang, or superlative adjectives like “great,” “good,” or “awesome”.

Images, Video, and Audio

  • Clear thumbnails or screenshots from each project.
  • Images are appropriately sized with good quality and lighting.
  • Images are contextually appropriate with labels and captions.
  • Videos are embedded from YouTube or Vimeo.
  • Video content is sized and timed appropriately. (Avoid long videos; The average recruiter spends 60-120 seconds per project.)
  • Videos have clear titles and contributors sourced.
  • Use of sounds sparingly.
  • No music.

Top 10 Coding Projects for Beginners

The best way to begin to learn to code is to simply start coding! When you gain experience developing challenging projects from inception to completion, you establish a strong work ethic that will benefit you throughout your career. 

Related Industries: Coding, Data
A woman works at a laptop.

Help Us Improve