This is an export of a presentation given at the latest workshop hosted by the Barcelona Digital Designers group. We developed this deck to communicate portfolio best practices based on our experiences in the design industry.
The workshop began with the following presentation and ended with live portfolio reviews from the audience (as well as some examples found online).
Although some of the content seems super obvious, many designers continue to exclude basic information that can help get them more work. We hope beginners and veterans alike will find it useful!
Credits:
Adam Sadowski
Dario Stefanutto
Bart Goselink
2. What is a Portfolio?
• A place to show your best work
• Convey your skill level, background, vision, and value
• Provides insight into your process
• Your portfolio makes you money
4. Show a quick overview
of your work
• Art directors don’t have much time to spend reviewing long
case studies, since they might receive dozens or hundreds
in a month.
• Keep your content short and to the point. Provide enough
context that can then be expanded upon during an
interview.
5. Perfect is enemy of the
good
• It’s better to have an OK portfolio rather than no portfolio at
all.
• Create a minimum viable portfolio to start with. It could a
simple template, a Behance project or even a PDF.
6. Keep it easy to update
If a website is hard to maintain, then you’ll never update it.
• Squarespace
• Cargo Collective
• Semplice (Wordpress)
• Webflow
7. Keep it simple
• Focus on the content
• Keep navigation and interactions simple
• Don't spend too much time on it
8. Example of a portfolio that is difficult to navigate
9. Example of a portfolio that takes 15+ seconds to
load (not good)
10. Communicate what
makes you unique
• Generalist or Specialist
• What's your background/skillset/education
• Avoid generic statements, i.e. "I design meaningful
experiences" or "I am a problem solver" or "I am a user-
centered designer who designs delightful products with
empathy"
11. Quality over quantity
• Show only your best work (one bad project can disqualify
you as a candidate)
• Show between 4 and 8 projects
12. Show work that you’d
like to do in the future
• Companies hire you on the base of what you have done
before.
• Example: If you don't want to do branding work, don't show
branding projects
13. What if I don't have
projects?
• Pro bono work (friends, family, small businesses)
• Self-initiated projects (passion projects)
• Unsolicited redesigns (be sure to list your assumptions and
base decisions on real-world users and data)
15. Project Elements
• Title of Project
• Type of Project
• Credits + Your Role
• Introduction + Goal
• The Outcome (use data to backup claims if you can)
• A link to the live project (website, app, etc.)
• Process & Experience
• Images w/ Captions (don't assume the viewer will
understand what is being shown)
16. Make it scannable
• Use headlines, short paragraphs and captions.
• If it's a big project, have an executive summary at the top
and then explain the full process below
17. Use simple and clear
language
• Avoid buzzwords
• Clarity over cleverness
18. Prove your claims
DON'T
• "We built a high-converting landing page that is both
appealing and functional"
• "The site was designed to increase customer satisfaction"
DO
• "Improvements we made to the checkout flow decreased the
abandoned cart rate by 12%
• The new landing page decreased bounce rate by 18% and
increased time on site by 2 minutes 34 seconds
19. Check for spelling and
grammar
• Have a friend look it over
• Use tools such as Grammarly
• Hire a professional
20. Don't forget about "you"
• The person/team/organization hiring you wants to know who
you are
• Communicate what sort of opportunity you are looking for
• Full-time or part-time?
• When are you available?
• Are you willing to travel?
• Remote or on-site?
21. Be easy to contact
• Don't make a person dig for your email address
• Have a "contact" page
• Contact forms are OK, but still list your email address
22. Include Relevant
External Links
• Resume/CV
• LinkedIn
• Blog
• Twitter/Instagram/Dribbble/Behance, Youtube etc.
Make sure links aren't broken!
23. Using social media
• Dribbble: Useful for displaying animations, illustrations, and
UI explorations.
• Behance: Can be used for in-depth case studies
• Instagram: Good for discoverability and specific use cases
• LinkedIn: Post product launches, articles, and professional
opinsions
Use these platforms to drive people back to
your website/portfolio!
24. Helpful Articles
The 3 users of your portfolio
• https://www.invisionapp.com/inside-design/the-3-users-of-
your-ux-portfolio/
The most important page of your portfolio
• https://www.vanschneider.com/the-most-important-page-on-
your-portfolio
Does the perfect portfolio exist? Top creatives and studios offer
their advice
• https://www.itsnicethat.com/features/the-graduates-2019-
portfolio-tips-050619
The minimum viable product design portfolio
• https://www.intercom.com/blog/minimum-viable-product-
design-portfolio/