5 Creative Ways to Display Web Design Work in Your Portfolio

5 Creative Ways to Display Web Design Work in Your Portfolio
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

It can be tricky to display web design work in your portfolio. Firstly, websites are interactive, whereas your portfolio might be static. Then, websites scale and adapt to a variety of sizes—but its spot in the portfolio is probably a fixed, standardized size. Finally, static website screenshots are plain boring teasers. So how does a web designer showcase a website design in a portfolio? Plenty of interesting examples in the wild show the best ways to present web designs. Here’s five creative ways to display web design work in your portfolio.

Why a Simple Web Design Portfolio Can Be Bad

The simplest way to present a web design in a portfolio is posting a screenshot view. It might be an actual screenshot, or it might be a nice export from Photoshop, Illustrator, InDesign, or Sketch. This presentation style allows viewers to see the full website design in all its details—or does it?

Displaying a flat screenshot view can rob viewers of gleaning more information about your web designs, such as:

  • What the web design looks like on a device
  • How they would interact with the design
  • Where that screenshot fits into the whole website
  • How the web design fits into the whole brand

Instead, consider building your web design portfolio with several presentation styles. Make your imagery purposeful instead of decorative.

Lara Lee Design | 5 Creative Ways to Display Web Design Work in Your Portfolio, Learn More >

Presentation Styles for Web Design Portfolios:

  1. Drop Shadow + Background
  2. Computer or Mobile Mock-up
  3. Break-out Elements
  4. Collage
  5. Animated

Drop Shadow + Background

This web design presentation style:

  • Extends the brand
  • Allows easy resizes for portfolio thumbnails, social shares, etc.
  • Quick and easy

Computer or Mobile Mock-up

Another popular way to display web design work in a portfolio is the mock-up. This:

  • Shows website design in usage context
  • Demonstrates how people would use the design
  • Can be quick and easy depending on simplicity
  • Can be realistic with some time to warp/mask a design around tilts, hands, and other environmental factors

Break-out Elements

An interesting but lesser seen way to showcase web design work for a portfolio is to break-out elements in, out , and around the web design. This presentation style:

  • Adds serious depth
  • Extends the brand
  • Can imply website interactivity, such as horizontal scrolling
Credit: Wix advertisement on Pinterest.
Credit: Wix advertisement on Pinterest.

Collage

Super useful to showcase several related web designs at once, collages:

  • Show web pages in context of whole website design
  • Shares the multiple approaches to designing for different web content
Credit: Balance.
Credit: Balance.

Animated

Animations can be one of the more difficult presentation styles to display web design work in your portfolio. They:

  • Show website design in usage context
  • Demonstrate website interactivity

But how much you show depends on your animation skill. Consequently, this style:

  • Can be limited by what you can record on screen
    • Includes menu interactivity, hover effects, and scrolling effects like parallax
    • Excludes break-out elements
  • Can be re-created in animation program to add whatever you want
    • Some assets might have to be re-drawn manually

Save the infographic for later!

Infographic from Lara Lee Design | 5 Creative Ways to Display Web Design Work in Your Portfolio, Learn More >