How To Create High Quality Design Mockups With Minimal Effort Using Mockdrop

William Elcock

For those of us in the design and blogging arena, mockups can be invaluable for showcasing designs or expressing ideas and themes. In this article when I say ‘mockup’, I’m referring to an image displayed in the context of a device screen such as that of a computer monitor or mobile phone screen.

nature-laptop-outside-macbook

Mockups are great for giving a sense of what an image will look like on a particular device screen as well as what it will look like from different angles.

Today we will be discussing the website Mockdrop which allows for the easy generation of mockups. The website contains plenty of mockups which should suit the needs of a wide range of users.

Note: Mockups can, of course, be created manually using image editing software, however, Mockdrop makes the process way easier and generating a mockup is achieved with just a few clicks. It is designed with the intention of saving users time and effort.

How it Works

On visiting Mockdrop, you will notice several mockup templates with various device types as bases. It is possible to create smartphone, laptop, desktop, smartwatch and tablet mockups.

MockDrop-main

When browsing through the templates you can choose to filter them by category or simply choose to display them all. Clicking on any of the images displays an enlarged version of the template, giving a better idea of appearance.

When you have decided on the template you wish to use, click on it and it will be blown up. You should then click on the screen area and you will be allowed to browse your computer for the file of your choice which you wish to upload and generate your mockup with.

mockrop-smartphone_iphone_6-mockup

Alternatively, you can simply drag and drop the image of your choice onto the template of your choice in order to upload your image of choice.

The final product should come out looking great like the example below since Mockdrop’s base templates are really quite attractive.

mockDrop_iPhone 6 in left hand

Note: The author of the website assures us that the images found there are free to use, however, you should not resell them.
Please note: Mockdrop requires a newer browser in order to function correctly. It is compatible with the latest versions of Chrome, Safari and Firefox.

Conclusion

Overall Mockdrop works quite well and I only notice one slightly annoying issue with the website. When you click on an image in order to view a blown up version, clicking away from that image does not return the website to its original form and from this point, I can only click on other visible images and view their blown up versions. If I wish to return to the regular view I must point my browser to the main page of Mockdrop again.

This does not hamper the functionality that greatly but it is one of these little things that could potentially get on your nerves. Using Mockdrop is definitely a hassle-free experience, literally only requiring a couple of clicks in order to produce the desired results.

ALSO READ: How to Organize Design Visuals on a Mac with Lingo

Also See
#design#image editing

Join the newsletter

William Elcock

Written By

William Elcock

William has been helping friends troubleshoot tech problems for several years and thus made the natural progression into tech blogging. In addition to consumer electronics William also has a vested interest in various renewable energy topics.