DEV Community

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

Posted on

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

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!

Top comments (1)

Collapse
 
jioptret profile image
jioptret

For anyone in need of customizable 3D mockups to enhance digital visuals for online ads and promotions, PixelBuddha pixelbuddha.net/search?text=3d+mockup is a go-to resource. Their collection offers a diverse range of mockups with a three-dimensional image, perfect for creating eye-catching and immersive digital campaigns. Whether you're designing banners, social media posts, or website graphics, PixelBuddha's 3D mockups provide the perfect visual elements to make your digital visuals stand out. With their easy customization options, you can adjust colors, textures, and lighting to create impactful and memorable visuals that resonate with your audience. Explore PixelBuddha's 3D mockup collection today and discover top picks to enhance your digital marketing efforts.