Digital mockups are a great way to showcase your work such as a new app idea, new logo or new innovative UI design. But making one is not an easy task and usually requires knowledge of tools such as Photoshop and Illustrator.
Learning these two is a challenge in itself, and no one has the time to show their app idea to someone at the back of a paper napkin. Online mockup creators are the tools which make this process as easy as a matter of few clicks.
But if you go searching on Google, most of the services you find will be paid. So we have compiled a list of top 10 websites, which we also use often, for creating beautiful mockups for free.
Note: While none of these sites show intrusive ads, disabling your ad blockers is recommended as some of the web elements may not load completely leading to usability issues.
Our first pick, Smartmockups, features a huge collection of mockups for different mediums such as digital and print. You can visualize your idea on a smartphone, tablet, laptop, mugs, cups, stationery, and even t-shirts.
Signup is required to use the service, and the free account has some limits like it restricts customization of the final mockup. It does offer basic tools such as Align, Crop, Rotate, and Flip to alter the uploaded image but doesn't offer Glare settings. Another nice feature is that you can download the final mockups in high resolution with a free account.
The second website on the list doesn't have a collection as large as the one at Smartmockups, but they do specialize in one category. All the mockups at MockUPhone have a plain white or colored background.
It allows uploading local images but doesn't give any edit options like crop or rotate. So make sure you upload your images after necessary edits. The site mainly caters to Apple products and their Android device list isn't up to date with the latest smartphones. Both the portrait and landscape orientations of the mockups once generated are sent to your email (yes, you must provide one) as it doesn't offer an instant download.
Mockuper offers mainly mockups of gadgets with a few other items such as business cards and some apparels. It provides over 637 community-sourced mockups containing links to the original creator.
Mockuper is also one of my favorites as it offers several options to edit uploaded images and lets you download final mockups in different resolutions. Source images can be uploaded locally or from an URL. Once uploaded you can crop, align, flip, zoom, and even choose how to mimic a glare (reflection) on the screen. The site's UI is also very easy to understand and use.
Tip: Click on the All Mockups button on the top bar of the page to see all the 637 mockups.
MagicMockups is a very simple mockup generator and has a limited collection of devices, mostly iPhones. All the other devices such as laptops and desktop PCs are from Apple's product family.
But its strength lies in turning the beautifully shot stock images into mockups. You can only upload images locally, and the site doesn't offer editing options. You will notice that the background of the mockups is mostly wooden tabletops and dark surfaces. Finally, this site puts no restriction on the resolutions while downloading the final mockups.
Before you start to imagine your mockups on LeBron James jersey, let me tell you that Dunnnk has nothing to do with Basketball. It is another simple mockup generator which mainly offers gadget mockups.
Majority of their mockups are in POV-style with devices being held in hand. However, the list of Android devices is not up to date. Dunnnk only supports local upload and offers no image editing tools. Also, the final mockups can be downloaded in just one fixed resolution.
MockUpsJar, like the first one on the list (SmartMockups), has an extensive collection of mockups and follows the Freemium model. They offer both free as well as paid plans. On MockUpsJar, selected mockups are free, and the final downloads are watermarked, but sensibly as to not make them unusable.
Images can be uploaded locally only and post-upload they can be cropped, zoomed and rotated as per your need. The final mockups can be downloaded in up to 2K resolution. Finally, signup is required to download any of the mockups.
Mockup.io is quite different from the others on the list. It is more of a wireframe and prototyping mockup tool for smartphone apps, to visualize how the UI and UX of the app will look and behave. As such there are no phones placed in pretty backgrounds, so you just get a basic phone frame.
There are abundant collaboration features for teams to work together. Using this tool, you can upload a bunch of your app's design sketches and link all of them to show how the navigation and interaction will work in reality. This tool is the best one for those who want to show a dynamic mockup of their work.
As one of the simpler websites on the list, MockDrop.io doesn't fiddle with signups, image edits or emails. Just select a mockup, upload your image and hit the download button. That's as simple as it gets. The designs are also one of the better ones compared to others on the list.
The mockups are community sourced, like with the most others on the list, with the original creator's link shown on each mockup. The final mockups are downloadable in high resolutions and the collection, as usual, favors the Apple devices.
Threed is the second unusual mockup creator on this list after the Mockup.io site. Threed is a 3D mockup generator, where you are given a single iPhone-like 3D model of a smartphone.
You can drag, rotate, zoom, change the camera angles, select screen glare and plenty other things to get a get a better idea of how your designs will look on an actual device. The generator is smooth and easy to understand.
The last one on our list is Mockup.photos, a freemium site that also offers freebies in the form of select mockups. There are around 380 free mockups which include a mix of smartphones, tablet, laptops, photo frames, and more.
The site lets you upload images locally or from a URL. There are no image editing options for the uploaded images, and the final mockup can be downloaded in only single high resolution. Upgrading to their paid plan gives you access to over 900 mockups and few other features too.
For your convenience, I have created a handy comparison table below to understand which website supports what type of devices.
SmartMockups is the only service which supports all types of digital devices as well as the print medium.
Things to Keep In Mind
After checking the above list, you must've realized that the process of making a mockup is just a matter of a few clicks. But still, there are few things to consider if you want a mockup which is better than just good. First is the resolution of the image you upload. All the mockups usually show the required/supported resolution, and it's better to stick with the suggested resolution as well as the aspect ratio to get the best results.
Second is the contrast and color matching. Choose a mockup with a background which doesn't clash with the prominent color scheme of your image. This mockup image will help you visualize that.
Note: If you want to know more about Color Matching, this guide from Lifehacker.
Also, if the image you upload is not of a high resolution, refrain from downloading a very high resolution version of the final mockup as it will not accentuate your work.
Lastly, as all these sites are offering their services for free without showing intrusive ads, consider donating or in case of freemium sites, subscribing just for a month to help them. If you come across any other such cool sites to make mockups, do share with us in the comments.