Case Study: TIME magazine cover

Work Jan 03, 2020

I recently applied to a call for models on a Facebook advert I saw just to see if they would bite, and they did! My experience taught me not just about the funnel of acquiring customers for digital products I work on, but I thought I'd have a bit of fun with the photos that I now had the rights to. I'm going to show you how I created this in about 30 minutes in Figma—my tool of choice.

Gag TIME magazine cover of Chuck Rice. "What a lad".
Me as a TIME magazine cover. Pretty convincing, right?

Getting Assets and Examples

Style Guide

This is where every designer should start. Find what exists and use that to your advantage! A quick Google revealed this PDF. The design language and logo have moved on a little bit from the classic covers we know and love, but it had the exact colours I needed to recreate the frame.

https://www.timeinc.com/wp-content/uploads/2016/07/LIFE-Style-Guide.pdf

Live Examples

TIME magazine cover of Donald Trump. "President of the Divided States of America".
This is the BEST cover to work from. Is it not?

Find an example to base your work off of. Designers don't work from memory, we remix real tangibles using our crafting skills. Above is the copy of Donald Trump's 'Person of the Year' cover. As you might have noticed there's already a bit of a difference between this one and my gag, but did you notice the differing date format at the top before comparing the two side by side?

Thought so 😉.

Fonts

This is the trickiest part. Now, I don't have any Adobe products or fonts so I had to make do with alternative free fonts. A bit of Googling alternatives to Proforma and Folio Std revealed PT Serif for the TIME logo and Gothic A1 for the body font as decent alternatives.

Assembling the Cover

Creating the Frame

Nothing too complex yet; red outer border and white inner border with some text.

The easy part is importing the picture I wanted to use and drawing a frame. It's a couple of rectangles using the flagship red together with a white trim on the inside. Creating the font took a bit of tweaking to change the spacing to look right and then creating that text as a new Local Style in Figma. Below you can see the final styles I put together for the cover.

There are only four styles I created for this gag mockup.
Showing the mask layer I used to put the text behind my face.

This was the trickiest bit but wasn't as difficult as I thought it would be. First I created the text and adjusted the size until it looked right. Next I knew I would need a mask, and made a rectangle. Double-clicking it will let you adjust the points and allow you to create more points between each edge. I carefully traced around my head until it created a believable silhouette. Group the rectangle, the text and apply a 'mask' transformation (middle of your top control bar, or Option + Cmd + M) et voila.

I wasn't sure I could iron out the hard edges, but there is a way!

What was the solution to get the edges softer? Apply a 'Layer blur' effect to the rectangle mask layer. The default settings were good enough. Simples!

The edges are much softer and look decent enough. Brilliant!

Finishing Touches

Showcasing the text excerpt I added next to my face.
Getting the little pieces that bring the whole cover together.

Along the bottom is a small 'time.com' stamp, plus all the covers usually had some piece of copy to get across a teaser for the article inevitably written inside. Here I decided to use a heavier font weight for my name, and a lighter weight for the text underneath. Short, sweet and to the point!

Conclusion

My gag cover updated with the date written as per the American format.
Yes, I had to fix the date halfway through writing this post. Hahah!

As long as you're using the tools correctly and have spent a decent amount of time using tools for a specific purpose, you can create anything. This was for fun and to flex my design skillset, but when crafting prototypes or artefacts for Design Sprints or conducting user research it's all possible. It just takes some ingenuity, creativity and you can make anything believable.

Thanks to @_beingamodel_ and big thanks to the photographer Laura (sorry I don't have your social, but you were an absolute pleasure to work with).

Chuck Rice

Digital Product Designer aiming to educate, facilitate and liberate teams from "build it and they will come" syndrome. Problem Solver. Ex-Coder. Traveller. Learner. Fitness Buff. Corgis 🐶.