Designing a Winning Portfolio

Tips + Tricks from a Designer at Google

Lisa Fischer

lisasuefischer@gmail.com

@lisasuefischer

Who is this for?

Who is this for?

Interaction Designers

Service Designers

Product Designers

Visual Designers

Graphic Designers

UX Designers

Who is this for?

Interaction Designers

Service Designers

Product Designers

Visual Designers

Graphic Designers

UX Designers

UX Researchers

Brand Designers

UX Engineers

Creative Strategists

Interaction Designers

Service Designers

Product Designers

Visual Designers

Graphic Designers

UX Designers

UX Researchers

Brand Designers

UX Engineers

Creative Strategists

Anyone looking to design a stellar portfolio

Who am I?

Who am I?

A designer, runner, pianist, and comedy lover

Who am I?

A designer, runner, pianist, and comedy lover

devoted to helping designers craft stronger portfolios

Who am I?

A designer, runner, pianist, and comedy lover

devoted to helping designers craft stronger portfolios

that lead to awesome creative opportunities :)

Intro

0 0

Lisa’s path

Google

Visual Designer

Duffy & Partners

Design Intern

SCAD

M.A. (Graphic Design)

George Washington University

B.A. (Business Administration)

Undergraduate

2 0 1 0 2 0 1 4

Graduate

2 0 1 4 2 0 1 6

First Design Job

2 0 1 7 P R E S E N T

First Design Internship

2 0 1 6 2 0 1 7

Disclaimer

!!!

Disclaimer

! ! !

My bias fuses these worlds together for what I believe is not only better portfolio advice, but also a more comprehensive outlook on design.

Disclaimer

01

This comes from a Graphic Designer at heart with a UXer’s brain.

+

Disclaimer

02

Disclaimer

! ! !

I’m giving this advice in contradiction.

My portfolio needs updating that I haven’t got around to yet...some of the following advice applies to myself as well!!

Disclaimer

03

Disclaimer

! ! !

This assumes you’ve done your research first.

Before diving into the portfolio, figure out what kind of job you want, companies you aspire to work for, and how they present their work.

Research Stronger portfolio outcome

Disclaimer

04

Disclaimer

! ! !

Today’s advice: Take it or leave it.

These tricks definitely work. There are also subjective best practices you’ll hear from others that contradict these tips.

Do what feels right to you.

Topics

Personal Brand

0 1

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Personal Brand

0 1

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Topics

Personal Brand

0 1

The “Splash” / Welcome

Personal Brand

0 1

The “Splash” / Welcome

Your first impression meeting someone.

Personal Brand

0 1

Differentiate yourself from other designers

Showcase your personality

Define your purpose

Personal Brand

0 1

The “Splash / Welcome Example

Dedicated Full Page Takeover Video

Personal Brand

0 1

The “Splash / Welcome Example

Dedicated Full Page Takeover

Personal Brand

0 1

The “Splash / Welcome Example

Full Screen Homepage Takeover + Video

Personal Brand

0 1

The “Splash / Welcome Example

Subtle Homepage Intro

Personal Brand

0 1

The “Splash / Welcome Example

Descriptive Homepage Intro

Personal Brand

0 1

Brand Identity

Personal Brand

0 1

Brand Identity

Typeface

Colors

Photography Style

Art Direction

Copy

Illustration Style

Logo / Monogram

Personal Brand

0 1

Brand Identity

Logo / Monogram

Typeface

Colors

Photography Style

Art Direction

Copy

Illustration Style

This should extend into your resume, business cards, cover letter, etc.!!

Personal Brand

0 1

Brand Identity Example

Website Homepage

Personal Brand

0 1

Brand Identity Example

Personal Logo

Typography + Color

Art Direction

Project + About Pages

Personal Brand

0 1

Brand Identity Example

Same logo, typefaces, color palette as on site

Personal Business Cards

Personal Brand

0 1

Tone of Voice / 1st or 3rd Person?

Personal Brand

0 1

Tone of Voice / 1st or 3rd Person?

More personal?

1st

More professional?

3rd

No right or wrong.

Personal Brand

0 1

Tone of Voice / 1st or 3rd Person?

More personal?

1st

More professional?

3rd

No right or wrong.

Both work fine

Personal Brand

0 1

Avoid portfolio & design cliches.

For a comprehensive (and hilarious) list of cliches, view here

Personal Brand

0 1

Avoid Portfolio Cliches

Portfolio Bingo: Link

Personal Brand

0 1

Avoid Portfolio Cliches

Portfolio Bingo: Link

Personal Brand

0 1

Avoid Portfolio Cliches

Portfolio Bingo: Link

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Personal Brand

0 1

Topics

Presenting Process

0 2

Outline Storytell Declutter

Presenting Process

0 2

Outline Storytell Declutter

And keep a consistent layout across projects!

Presenting Process

0 2

Outline Storytell Declutter

Make the viewer feel something!

Presenting Process

0 2

Outline Storytell Declutter

And remember:

Beginning

Middle

End

All stories have a...

Presenting Process

0 2

Beginning

Middle

End

This might be…

hero banner or image, beauty shot, intro description, key

final designs

This might be…

process, neatly

curated moodboards

or sketches, user flows, design deliverables

This might be…

findings, takeaways, final ‘beauty’ hero shot,

quote, links: to press, full process or prototype

All stories have a...

Presenting Process

0 2

Outline → Storytell → Declutter Example

ARise / Part 1

Presenting Process

0 2

Outline → Storytell → Declutter Example

ARise / Part 2

Presenting Process

0 2

Outline → Storytell → Declutter Example

Runsocial

Presenting Process

0 2

Example project outline

Role, Team

0 1

Goal, Objective,

Outcome

0 2

Audience / Users / Personas

0 4

Moodboard / Concept (VisD + Branding) / Design Architecture (UX)

0 5

Sketches, Wireframes

0 6

Research

0 3

Curated Design Explorations / Any User Testing

0 7

Final Polished Design

0 8

Conclusion

(if necessary)

What I learned, What I’d do differently, More links

0 9

Role, Team

0 1

Goal, Objective,

Outcome

0 2

Audience / Users / Personas

0 4

Moodboard / Concept (VisD + Branding) / Design Architecture (UX)

0 5

Sketches, Wireframes

0 6

Research

0 3

Curated Design Explorations / Any User Testing

0 7

Final Polished Design

0 8

Conclusion

(if necessary)

What I learned, What I’d do differently, More links

0 9

Presenting Process

0 2

Example project outline

Use this as a baseline not a checklist.

Role, Team

0 1

Goal, Objective,

Outcome

0 2

Audience / Users / Personas

0 4

Moodboard / Concept (VisD + Branding) / Design Architecture (UX)

0 5

Sketches, Wireframes

0 6

Research

0 3

Curated Design Explorations / Any User Testing

0 7

Final Polished Design

0 8

Conclusion

(if necessary)

What I learned, What I’d do differently, More links

0 9

z

Presenting Process

0 2

Example project outline

Use this as a baseline not a checklist.

Checklists are boring and won’t make your portfolio stand out.

Nor do they represent the true design process :)

Presenting Process

0 2

Show, don’t tell

Keep any supporting text short and sweet.

Presenting Process

0 2

Show, don’t tell

Keep any supporting text short and sweet.

Work may require explanations, but don’t overdo it! Let the designs speak for themselves.

Presenting Process

0 2

Show, don’t tell

Keep any supporting text short and sweet.

Work may require explanations, but don’t overdo it! Let the designs speak for themselves.

* You can always link out to additional process & details more info on that here

Show, don’t tell

Too much text

X

Presenting Process

0 2

Show, don’t tell

Just right

Presenting Process

0 2

Show, don’t tell

Even better :)

Presenting Process

0 2

Show, don’t tell

Brand + Visual + Graphic Designers your storytelling should especially live in visuals.

Presenting Process

0 2

Show, don’t tell

Brand + Visual + Graphic Designers your storytelling should especially live in visuals.

If you do use supporting text, use it wisely and concisely.

Presenting Process

0 2

Presenting Process

0 2

Make the page layout dynamic

Treat the portfolio layout as a design project in itself.

Presenting Process

0 2

Make the page layout dynamic

Art Direction

Negative Space

Clean Text

Image Size Variation

Gifs / Video

Visual Rhythm / Harmony

Too static

X

Dynamic Page Layout

So much text taking over page

No image variation

Boring grid /

No visual rhythm

Presenting Process

0 2

Dynamic Page Layout

Much better

Image size variation

Video

Negative, breathing space

Digestible amount of text

Clear grid /

Engaging

page layout

Presenting Process

0 2

Hero “splash” image

Presenting Process

0 2

Dynamic Page Layout Example

Blizzard / Part 1

Presenting Process

0 2

Dynamic Page Layout Example

Blizzard / Part 2

Presenting Process

0 2

Art Direction

Negative Space

Clean Text

Image Size Variation

Gifs / Video

Visual Rhythm / Harmony

Can’t code? All good. Most website builders have built in support.

Presenting Process

0 2

Squarespace

Cargo Collective

Semplice

Recommended website builders:

Wix

M O R E P O P U L A R F O R U X

M O R E P O P U L A R F O R G R A P H I C D E S I G N

Webflow

Presenting Process

0 2

Squarespace

Cargo Collective

Semplice

Recommended website builders:

Wix

M O R E P O P U L A R F O R U X

M O R E P O P U L A R F O R G R A P H I C D E S I G N

Webflow

Brand the page layoutsotherwise your page will look like a generic template

Presenting Process

0 2

Link out to “the clutter”

Presenting Process

0 2

Presenting Process

0 2

Link out to “the clutter”

Provide thorough process without cluttering the page.

Supporting Research / Case Studies

Lengthy Prototypes & Demos

Process Books / PDFs

Presenting Process

0 2

Presenting Process

0 2

Link out to “the clutter”

!!

Make sure the link is noticeable! TIP: Use a button

Supporting Research / Case Studies

Lengthy Prototypes & Demos

Process Books / PDFs

Presenting Process

0 2

Link out to “the clutter”

Presenting Process

0 2

Link out to “the clutter”

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Personal Brand

0 1

Topics

Portfolio UX

0 3

Recruiter Psychology

Portfolio UX

0 3

Recruiter Psychology

Recruiter is your user

Portfolio UX

0 3

Recruiter Psychology

Recruiter is your user

And your user has a 3 second attention span

Portfolio UX

0 3

Recruiter Psychology

Recruiter is your user

And your user has a 3 second attention span

Design for it!

Design for it!

Homepage

Page Hierarchy

# of Projects

Portfolio UX

0 3

Category Filter Tags

Portfolio UX

0 3

Homepage

Page Hierarchy

# of Projects

Category Filter Tags

Homepage

Page Hierarchy

# of Projects

Portfolio UX

0 3

Logo / Easy navigation

Designer’s name + intro

Project Thumbnails

1

2

3

Category Filter Tags

Recommended number:

Page Hierarchy

# of Projects

Category Filter Tags

Portfolio UX

0 3

You’re only as good as the worst project in your portfolio.

3-6 depending on length, scope & variety

Projects should be diverse.

Page Hierarchy

# of Projects

Category Filter Tags

Portfolio UX

0 3

You’re only as good as the worst project in your portfolio.

Showcase your flexibility and ability to adapt as a designer.

If two projects are strikingly similar, only show the stronger one.

Navigation

Portfolio UX

0 3

Navigation

Keep it simple and intuitive.

Portfolio UX

0 3

Navigation

Keep it simple and intuitive.

Easy to go from one project to the next

Clearly visible “About” and “Contact” info

Access Homepage from anywhere on site

Portfolio UX

0 3

Side projects / Unrelated work?

Portfolio UX

0 3

Side projects / Unrelated work?

Portfolio UX

0 3

Yes, definitely!

Side projects / Unrelated work?

Portfolio UX

0 3

Yes, definitely!

Just make sure they enhance not distract.

Contact Info

Portfolio UX

0 3

Phone Number

Social Links

Email

Contact Info

Portfolio UX

0 3

Make it easy to find and easily accessible from anywhere on the site.

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Personal Brand

0 1

Topics

Devices!

Polish - It’s all in the details

0 4

Devices!

Polish - It’s all in the details

0 4

Use them! It’s great to show your work in context.

Devices!

Polish - It’s all in the details

0 4

Be sure to use the latest models don’t make your portfolio feel outdated!

Use them! It’s great to show your work in context.

Devices!

Polish - It’s all in the details

0 4

Be sure to use the latest models don’t make your portfolio feel outdated!

Use them! It’s great to show your work in context.

And make sure the image is zoomed in enough to make out designs on the device!

Mockups

Polish - It’s all in the details

0 4

Mockups

Polish - It’s all in the details

0 4

Easily showcase your designs in context

Mockups

Polish - It’s all in the details

0 4

X

But your design looks generic, lazy, trendy

Easily showcase your designs in context

Mockups

Polish - It’s all in the details

0 4

Especially Brand / Graphic Designers there’s nothing relevant or interesting in seeing a logo pasted on random objects 100 times!

Avoid them and shoot your own in-context photos.

Isometric Screens Layout?

Polish - It’s all in the details

0 4

Isometric Screens Layout?

Polish - It’s all in the details

0 4

Looks cool!

Isometric Screens Layout?

Polish - It’s all in the details

0 4

X

But can’t see designs on the screen!

Looks cool!

Isometric Screens Layout?

Polish - It’s all in the details

0 4

Only use tastefully as a “hero overview” or “final shot” at the end of a project.

Or use them stacked to strategically show interaction flow through multiple screens.

Isometric Screens Layout?

Polish - It’s all in the details

0 4

Presenting your designs

Polish - It’s all in the details

0 4

Presenting your designs

Polish - It’s all in the details

0 4

!!

Don’t upload raw artboards to your site! This looks sloppy and unprofessional :(

Presenting your designs

Polish - It’s all in the details

0 4

Instead put your designs in...

a browser

an elegant drop shadow

context or within a device

!!

Don’t upload raw artboards to your site! This looks sloppy and unprofessional :(

Presenting your designs

Polish - It’s all in the details

0 4

!!

Don’t upload raw artboards to your site! This looks sloppy and unprofessional :(

A museum wouldn’t hang a painting without framing it first same logic applies to your designs.

Size of designs

Polish - It’s all in the details

0 4

Size of designs

Polish - It’s all in the details

0 4

Make sure designs are big enough on the page

that viewers can make out what you actually designed!

Size of designs

Polish - It’s all in the details

0 4

Don’t overload projects with every screen designed show only enough to convey your idea.

Make sure designs are big enough on the page

that viewers can make out what you actually designed!

Size of designs

Polish - It’s all in the details

0 4

Don’t overload projects with every screen designed show only enough to convey your idea.

Quality > Quantity !!

Make sure designs are big enough on the page

that viewers can make out what you actually designed!

This is overwhelming!

Polish - It’s all in the details

0 4

Size of designs

X

Even this is still overwhelming!

Polish - It’s all in the details

0 4

Size of designs

X

Polish - It’s all in the details

0 4

Size of designs

No clear hierarchy

Hard to make out design details

So many screens at once

Polish - It’s all in the details

0 4

Size of designs

This is more digestible.

Polish - It’s all in the details

0 4

Size of designs

This is too especially if you do have supporting text.

Using a website template? Don’t let it show.

Polish - It’s all in the details

0 4

Using a website template? Don’t let it show.

Polish - It’s all in the details

0 4

Remove original template text, register your own domain, and replace the default favicon!

Is your site responsive?

Polish - It’s all in the details

0 4

Is your site responsive?

Polish - It’s all in the details

0 4

It’s 2019. Your answer better be yes!

Is your site responsive?

Polish - It’s all in the details

0 4

It’s 2019. Your answer better be yes!

TIP: You can use Google Chrome Web Inspector to check all browser sizes.

Is your site responsive?

Polish - It’s all in the details

0 4

It’s 2019. Your answer better be yes!

TIP: You can use Google Chrome Web Inspector to check all browser sizes.

It’s super easy and requires no coding knowledge! Click here for a 2-minute tutorial.

Presenting Process

0 2

Portfolio UX

0 3

Polish - it’s all in the details

0 4

Beyond the Portfolio

0 5

Personal Brand

0 1

Topics

LinkedIn?

Beyond the Portfolio

0 5

LinkedIn?

Beyond the Portfolio

0 5

Yes, boring for designers & creatives...BUT recruiters live here!

Behance / Dribbble

Beyond the Portfolio

0 5

Easy way to get your work out there and seek inspiration.

Be wary of trendy or meaningless design What’s considered trendy?

Great for inspiration and getting your work out there.

Social Media

Beyond the Portfolio

0 5

Medium

Design discourse / Thought pieces

Twitter

Design discourse / Memes / Connecting with designers

Instagram

Inspo (Eye Candy) / Memes / Connecting with designers

/ Showcasing work

Facebook

Glimpse into offices / Company cultures

Design Events / Workshops / Talks / Organizations

Beyond the Portfolio

0 5

Great way to network, practice presenting your portfolio, gain project feedback, and make design friends :)

G R D S

Portfolio Website Examples

Beyond the Portfolio

0 5

Featured in this Deck

UX / UI

Graphic Design

Studio / Agency

U X

Interaction, interface, product design

graphic design, branding, visual design

U X

G R D S

=

=

G R D S

Beyond the Portfolio

0 5

Resources

Inspiration

Thoughtleaders

Organizations / Events

Design Links

G R D S

U X

U X

Interaction, interface, product design

graphic design, branding, visual design

U X

G R D S

=

=

Lisa Fischer

lisasuefischer@gmail.com

@lisasuefischer

Thank you!

Lisa Fischer

lisasuefischer@gmail.com

@lisasuefischer

Questions or comments?

Contact lisasuefischer@gmail.com

Design a Winning Portfolio ✨ - Google Slides