How to design a credit card mockup in Sketch

Whether you’re designing an app, landing page, or even a logo, mockups can come really handy. Simply put, a design mockup is a high-fidelity rendering of your finished product. It’s a great way to share your design ideas with teammates, clients, and any other stakeholders you might be pitching to or looking for feedback from.

Today, we’ll be showing you how to design a beautiful credit card mockup that you can use for any of your projects. Let’s dive in!

How to design a credit card mockup step-by-step

Before we jump in, let’s get a quick look at the end result:

1. Create an Artboard

First things first, let’s set up our Artboard — which will help to define the size and shape of our credit card. Hit A to trigger the Artboard tool, then click anywhere on the Canvas and drag until your Artboard is 830x540 pixels. You can manually adjust these dimensions in the Inspector, so don’t worry if you’re not perfectly accurate when dragging.

2. Give the credit card a background image

Next, let’s give the card a background image. We grabbed a colorful, abstract gradient from Unsplash — a great website for finding all kinds of free-for-use images. Keep in mind that we’ll be adding all kinds of foreground elements to the Artboard, like a credit card chip, logo, name, and card number. So it’s best to choose a clean background image that will keep your mockup readable.

3. Please enter your (fake) credit card details

We want our mockup to be believable, so let’s add a few standard card details — starting with a name and a card number. Hit T for the Text tool and click on the bottom-left of your Artboard to start typing any random 16 digits. Be sure to add a space after every four digits, too!

Add another text layer below the numbers to start typing a name. When you’re done, hit esc to leave text editing mode. Then, hold ⇧ and click on both text layers to style them at the same time. Head to the Inspector to change the Typeface to Courier New and the size to 32.

Next, we’re going to add a logo and a contactless icon — both of which you can grab from our Workspace! Place the logo on the top left of the Artboard, and the contactless icon on the right — about halfway down.

4. Design the credit card chip

It’s time to create the credit card chip. For this step, we’ll also move away from the Artboard for a bit and design all of this directly on the Canvas — anywhere you like!

Hit R for the Rectangle tool and draw a 128x90 rectangle, head to the Inspector to remove its border, and give it a Rounded Corner radius of 16.

To give the chip that shiny metal look, we’ll give it a gradient fill. Select your rectangle and head over to the Inspector again, but this time to the Fills panel. Open the Color Popover and change the fill type to Linear Gradient. Next, drag to adjust the start and end points directly on the Canvas, so that the gradient forms a diagonal line from the top left of your rectangle to the bottom right. Then add four more color points along the gradient line. You can click and drag each point to adjust their positions and keep them somewhat evenly spaced.

Now that your gradient is all set up, let’s give each point a unique color. You can change each point’s hex code by clicking on one point at a time. Starting from top left to bottom right, use the following hex codes for each of the six points:

• #A4A4A4 (top left)
• #DFDEDE
• #848484
• #BCBABA
• #979797
• #D2D2D2 (bottom right)

5. Give the chip some depth

As a finishing touch to the chip, we’ll give it some grooves by creating six little rectangles. But don’t worry, we’ll only have to create one and then duplicate it!

So hit R one more time, and create a 50x22 rectangle. Give it a Rounded Corner radius of 11, adjust its border width to 3, and remove the fill.

Next, we’ll give it a border fill using a similar diagonal Linear Gradient to the one we gave the chip — that starts at the top left of the rectangle and ends at the bottom right. We’ll add four more points in between again, only this time, we’ll use the following hex codes:

• #979797 (top left)
• #FFFFFF
• #848484
• #979797
• #FFFFFF
• #979797 (bottom right)

Then, adjust the points along the gradient so that the third one touches the top of the rectangle, and the fourth touches the bottom.

When you’re done adding your gradient, duplicate it five times so that you have a total of six. Then, place all six shapes inside the chip we made in step 4, forming two columns of three.

Finally, group all the elements by selecting them and hitting ⌘G, and rename it ‘Chip’. That’ll make your layers easy to sort through later on! Then, place the chip on the Artboard, to the left of the contactless icon.

6. It’s tilting time

Before we can call it a day, let’s give the credit card a finishing touch. We’ll step away from the Artboard again for this one and design directly on the Canvas. Hit R to draw a rectangle that’s roughly the same size as the Artboard, and remove the borders. Then, with the shape selected, rotate it by -45°, hit ⌘⇧T to trigger the Transform tool, and drag the top edge down to make it look like it’s laying on a flat surface:

Next, we’re going to round the corners by giving each one a unique radius value. Select the shape, head to the Corners section in the Inspector, and select Individual. Then enter the following values for each field:

• 20 (top left)
• 75 (top right)
• 100 (bottom left)
• 20 (bottom right)

For this last part, make sure you’ve installed the Angle plugin first, which will use to tilt our credit card design.

When you’re ready, select the shape, head to the menu, and choose Plugins > Angle > Apply Mockup. You’ll then see the design from your Artboard appear within the shape, at the same angle. Slick!

And there you have it. A colorful credit card design that you can integrate into any wider FinTech mockup. Nice job!

And if you like what you’ve made, we’d love to see it! Share it with us on Twitter using the hashtag #MadeWithSketch.