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.
Presentation Styles for Web Design Portfolios:
- Drop Shadow + Background
- Computer or Mobile Mock-up
- Break-out Elements
- Collage
- 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
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
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!
