Documenting web de­sign work

If you make web­sites for peo­ple, you prob­a­bly want to show that work in a port­fo­lio of some kind. What’s the best way to do that?

Let’s look at some op­tions

I’ll list them roughly in or­der of elab­o­rate-ness.

Linking to the live site

This re­quires the least amount of ef­fort on your side, and ar­guably it gives peo­ple the most ac­cu­rate im­pres­sion of your work. They can click around the site, look at an­i­ma­tions, and see your de­sign work at dif­fer­ent screen sizes by re­siz­ing their browser. They can even look at things like load­ing times and ac­ces­si­bil­ity if they’re so in­clined.

The biggest po­ten­tial down­side is that you can only re­ally link to one page — typ­i­cally the home­page. If you spent weeks de­sign­ing a beau­ti­ful ar­ti­cle tem­plate, peo­ple look­ing through your port­fo­lio might never see it. This be­comes even more of an is­sue when you’re work­ing on an app. In that case most of your work prob­a­bly lives be­hind some lo­gin sys­tem, which makes it dif­fi­cult for peo­ple look­ing at your port­fo­lio to ac­cess.

In any case, you should prob­a­bly throw in a link to the live site even if you’re us­ing screen­shots or some other pre­sen­ta­tion method. Should you set the link to open in a new tab? Probably not.

Screenshots

In my ex­pe­ri­ence, screen­shots are prob­a­bly the most pop­u­lar way to show web de­sign work. They’re easy to pro­duce, you can have more than one to show dif­fer­ent parts of a site, and they al­low you to show stuff that’s be­hind lo­gin sys­tems.

There’s all kinds of ways to do them:

The Window-less Screenshot

![Window-less screen­shot](/​as­sets/​show­ing-de­sign/​bond header.png) Bond Conference 2018 web­site by Andy McMillan et al. Via Fonts in Use

I’d say this works best when the site has a coloured back­ground that makes it stand out on your port­fo­lio, like the one above. Then it’s a nice, clean op­tion with noth­ing there to dis­tract from your work.

These also have the ad­van­tage of be­ing pretty easy to pro­duce. Chrome and Firefox both have built-in tools to take reg­u­lar and full-page screen­shots.

The Minimal Windowed Screenshot

Windowed Screenshot Katya de Grunwald by Studio Thomas. Via Fonts in use

I can think of two ways to make these.

  1. Do the whole thing in Illustrator: Draw up a browser win­dow, im­port a screen­shot of the site and ex­port the two to­gether as a PNG.
  2. Do it pro­gra­mat­i­cally. Draw the browser win­dow in Illustrator as be­fore, but this time ex­port it as an SVG. Then write some front-end code that in­serts all your screen­shots into that browser win­dow au­to­mat­i­cally. You could get pretty clever and have it re­spond to dif­fer­ent-sized screen­shots au­to­mat­i­cally. You could even au­to­mate the screen­shot-tak­ing it­self through some kind of head­less browser, but that’s prob­a­bly tak­ing things too far.

The Windowed Screenshot

Windowed Screenshot hat­tienew­man.co.uk by Art Department/Hattie Newman. Via Fonts in Use

I like these be­cause they give peo­ple a sense of scale of your work. With the browser in­ter­face act­ing as a ref­er­ence point, it’s eas­ier to judge how big things are in pro­por­tion 1.

You def­i­nitely want to set your desk­top back­ground to a nice colour and make your browser win­dow look as clean as pos­si­ble. Hide the book­marks bar, close all other tabs, and hide all plu­gin icons. It might even be worth us­ing a dif­fer­ent browser if it has a nicer-look­ing in­ter­face. Chrome and Safari seem to be the most pop­u­lar, though I do see Edge every once in while.

Apparently the drop shadow in the ex­am­ple above is a na­tive fea­ture on Mac. I can’t re­ally think of a Windows equiv­a­lent other than set­ting your desk­top back­ground to white and man­u­ally tak­ing a screen­shot that in­cludes the drop shadow.

The Screenshot-on-device

mockup Betamatters by Chiu Candy. Via Fonts in Use

If done taste­fully, these can be very ef­fec­tive. The de­vice es­tab­lishes the scale of your work, just like the browser win­dow in the pre­vi­ous ex­am­ple.

A pop­u­lar vari­a­tion of this is what I call the triad:

mockup Sight Unseen OFFSITE by Kokoro & Moi. Via Fonts in Use

I re­mem­ber these be­ing ex­tremely pop­u­lar when re­spon­sive de­sign was new. Showing the site on a desk­top, tablet and phone was a way to show off you were part of the move­ment. Responsive de­sign is pretty much the de­fault now, so I’m not sure it’s that much of a sell­ing point any­more.

The biggest is­sue with the screen­shot-on-de­vice might be how quickly de­vices be­come out­dated. If your port­fo­lio is full of iPhone 4 mock­ups, that’s not the best look. Do you go through every cou­ple of years and redo all your screen­shots on mod­ern de­vices? Is this worth au­tomat­ing?

As far as de­vice im­ages go, Facebook seems to have by far the nicest ones. I like the idea of look­ing be­yond the typ­i­cal Apple de­vices - maybe your work looks bet­ter on a Microsoft Surface? 2

The screen­shot-on-de­vice-in-hand-in-cof­feeshop

facebook photograph Via Facebook Design

Facebook seems to do this a lot. I think it works for them, maybe be­cause we’re al­ready so fa­mil­iar with their in­ter­face we don’t need to see it in de­tail? Most of the time though, these feel kind of cheesy to me. Who holds their phone up in front of their face like that?

I guess it all de­pends on the au­di­ence you’re try­ing to ad­dress. If these full-on mock­ups seem right for you, there’s all kinds of prod­ucts that make it easy to gen­er­ate them. This looks like one of the nicer ones.

Video

[AKU Collective](https://aku.co/). Via [Hover States](https://hoverstat.es/features/aku-collective)

Videos are great. They can show off multi-screen flows, an­i­ma­tions and fancy in­ter­ac­tions all at once in a di­gestible way.

They’re also sur­pris­ingly dif­fi­cult to pro­duce. First, you need the right record­ing soft­ware — I like the built-in game recorder on Windows (press Win-G and you’re good to go). You prob­a­bly also want to trim the record­ing and ex­port it to the right for­mat, so you need soft­ware for that.

Once you’ve worked out your soft­ware sit­u­a­tion, you need to do the ac­tual record­ing. The last time I did this, it was much harder than I thought. You want to move your mouse around calmly, scroll up and down slowly and pause at the right mo­ments to give peo­ple a chance to take in the work — pretty much the op­po­site of how I’d nor­mally in­ter­act with a web­site.

I found it help­ful to write down a lit­tle script to re­mind me what I was do­ing: Click on the about page, scroll down, in­ter­act with the slider, open the menu etc. Even so it took me mul­ti­ple at­tempts to get a de­cent re­sult.

Embedding the site as an iFrame

This seems to have a lot of up­sides: You don’t have to mess with screen­shots or record­ing soft­ware. It’s in­ter­ac­tive, and an­i­ma­tions play in real time. You could even make the iFrame re­siz­able to show off how your de­sign works at dif­fer­ent screen sizes.

On the down­side: Since you’re load­ing a whole web­site in­side that iFrame, per­for­mance could be an is­sue. There’s also the risk that the client makes some dras­tic change to their site. What if they bring on an­other de­signer and they start to make changes? It would be weird to have their work pop up on your port­fo­lio.

AKU Collective are one of the few peo­ple I found do­ing this out in the wild.

Conclusion

There’s all kinds of ways to show web de­sign work. Screenshots are prob­a­bly a good de­fault choice. I tend to grav­i­tate to­wards the more min­i­mal mock­ups, but your work might need a nice cof­feeshop around it. We can prob­a­bly stop do­ing the triad at this point. If you’re do­ing a lot of an­i­ma­tion work, videos or iFrames might be a good op­tion to show that off.

In any case, make sure you link to the dang thing.

  1. in this vein, I also like the Dropbox idea of de­sign­ing in­ter­faces in a sim­lu­ated desk­top enivron­ment. They’re us­ing this pri­mar­ily as an in­ter­nal de­sign tool, but maybe it could be a way of pre­sent­ing fin­ished work, too? ↩︎

  2. Facebook also has good pho­tos of phones in hands. ↩︎