STUDIO is a free online mockup design creator for iPhone apps and websites. Using this website, you will be able to easily create stunning mockups for your iPhone app or website and see a live preview of the designs. To create a mockup design, you have to first choose between iPhone app and website for the project. Then you can go ahead and add predefined blocks, images, and icons. The predefined blocks include UI Kits (boxes, text, icons, etc.), Studio Style Designs, Material Designs, and iOS UI Designs. You can add these elements to a mockup design by simply dragging and dropping them.
After adding an element to the mockup design, you will be able to customize it manually. It lets you change the margin, padding, width, height, radius, opacity, and more. You can add as many pages as you want for iPhone app and website mockup and design them separately. There are many websites available which can help you create website mockups, but if you would also like to do that for your iPhone apps, then using “STUDIO” is probably the best option for you.
How to Create Mockup Designs for iPhone Apps and Websites:
After you visit the homepage of STUDIO, simply create a new account to proceed for creating mockup designs. Now, on the “Project” tab, click on the “Add New Project” button to create a new mockup design project. When you do that, it will ask you to enter the project name and choose the mockup type either as iPhone App or Web.
After that, click on the “Create a new project” button to open up the editor. Let’s say, you have selected “iPhone App” mockup design then you will see a blank iPhone screen canvas at the middle of the editor. On the left panel, you will see 3 different tabs named, Block, Image, and Icon.
Now, to start designing, the first thing you need to do is click on the “Block” tab and there you will see the option to add basic blocks including box, image, text, and an icon under the “UI Kits” section. You can drag and drop these blocks directly on the iPhone screen canvas.
Apart from that, you will also see three different block categories named, Studio Style, Material Design, and iOS UI Design. You can explore these categories and add the predefined block elements to your design by dragging and dropping.
On the “Image” tab, you will find various predefined images which you can use for your mockup design. All the images offered by this online mockup design creator are from Unsplash, but you can also upload your own images and add them to the design.
The last tab on the left panel is “Icon”, which exhibits tons of predefined icons that can be used in the mockup designs. When you select this tab, all the icons will appear and you can add them to the design by dragging and dropping.
Now, for each block, image, or icon added to the iPhone screen canvas, you will be able to customize its alignment, size, etc. Actually, it lets you change the margin, padding, width, height, radius, opacity, fill, border, shadow, and also choose screen transition. You can add as many pages as you want and customize them separately.
When you’re done with the mockup design, you can go ahead and click on the “Live Preview” button to see how the design looks like in action. Apart from previewing the design, you will also get a sharing URL and QR code to share the design with others to see.
Closing Words:
STUDIO is a very useful online mockup design creator which helps you create stunning mockups for your website and Phone app. You can create mockups with as many pages as you want with custom designs. Personally, I like it as the database contains tons of predefined blocks, images, and icons for you to use for free.
