DEV Community

loading...
Cover image for Mockups for Portfolio Website: How to add project screenshots onto digital devices for FREE

Mockups for Portfolio Website: How to add project screenshots onto digital devices for FREE

Sonia
Junior Developer | General Assembly's Bootcamp Grad | Coffee Lover
・1 min read

Hello friends!

I'm in a particularly good mood this evening after I finally discovered an even EASIER way to mockup projects without Photoshop or Figma.

(No shade to Figma, but I like things done quickly sometimes and the options on there can be overwhelming when I don't use it often enough!)

Mockups are models or replicas of well... anything really. BUT in the world of UX, UI and software development:

A mockup is a model of a design or device, used largely for product presentational purposes. It's a way for designers, engineers and you (yes, you!) to show off what your design will actually look like when it's launched out into the real world.

You may have heard of Figma, Placeit, Artboard.Studio,
Vexels, WoFox, MockupsJar aaaand others that the industry swears by to Generate Mockups, but I personally like how easy smartmockups is to use.

Here's a working example of one of my creations:

le instructions

  1. Take a screenshot of your project in Mac and iPhone format (Chrome has a toggle device toolbar to switch between devices in the inspector panel)
  2. Search on smartmockups.com for the type of device you'd like (there's a lot of free options!)
  3. Upload your photos and arrange as required.
  4. Download their premium (paid) and non-premium (FREE!) versions of the image.

And voila!

Discussion (0)