The setup.json contains all the specs of your Moockup: Edit it to compose your Moockup, and preview it by opening the index.html locally in your browser.
If you're familiar with the JSON format, take a look at the provided setup.json file and you'll easily understand how it works. If you don't know what JSON is, don't worry, it's quite easy to learn and you'll be creating your Moockups in no time.
First, some basics you should understand:
Your Moockup can be divided in multiple screens. The user can navigate between screens using the top menu:
Each screen can have more than one mockup:
Each mockup can be of any of the following available types:
Now, let's start creating your Moockup. This setup.json file is a very minimal example of a Moockup containing only one screen, with only one mockup:
{
"screens": [
{
"title": "Home",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg"
}
]
}
]
}
The title of the screen is "Home", and the only mockup it contains is a "MacDesktop" type mockup, and the image of the mockup is "images/mockup.jpg". Got it? A Moockup with this setup.json would like this:
Now let's add another mockup:
{
"screens": [
{
"title": "Home",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg"
},
{
"type": "iPhoneXPortrait",
"image": "images/mockup_mobile.jpg",
"notchBackgroundColor": "#fff"
}
]
}
]
}
The iPhone X has a notch at the top. To accomodate for this, you should specify the "notchBackgroundColor" item. This makes mockups for devices with notches look really cool.
It would like this:
See how we did it? Simply adding another { … } block inside the "mockups": [ … ] block was enough. This time it's an "iPhoneXPortrait" type mockup, and the image is "images/mockup_mobile.jpg". You can add more mockups to each screen, but more than 3 or 4 might look too crumpled.
Pay special attention to commas: When you have multiple { … } blocks, they must be separated by commas.
Now let's add another screen to your Moockup, take a look:
{
"screens": [
{
"title": "Home",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg"
},
{
"type": "iPhoneXPortrait",
"image": "images/mockup_mobile.jpg",
"notchBackgroundColor": "#fff"
}
]
},
{
"title": "About us",
"mockups": [
{
"type": "MacDesktop",
"image": "images/about_us.jpg"
}
]
}
]
}
See? This time we've added an entire screen block instead of a mockup block. This new screen is titled "About us" and it contains one mockup. It will look like this:
See how a menu appeared at the top? Now the user can navigate through the screens in your Moockup. You can add as many screens as you need, but take into account loading times of your mockup JPGs and PNGs, remember your client will see this as a webpage on his browser, via his internet connection!
If you're not fluent in JSON, take special care also with the { … } and [ … ] brackets. See how in the examples we never forget to close them, even when we have bracket blocks inside other bracket blocks!
Now that you've got the basics, let's take a look at some interesting customization options. First, let's set a background color for each screen. Do it simply by adding a "backgroundColor" item to the screen block you want to customize:
{
"screens": [
{
"title": "Home",
"backgroundColor": "#E01A4F",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg"
},
{
"type": "iPhoneXPortrait",
"image": "images/mockup_mobile.jpg",
"notchBackgroundColor": "#fff"
}
]
},
{
"title": "About us",
"backgroundColor": "#F15946",
"mockups": [
{
"type": "MacDesktop",
"image": "images/about_us.jpg"
}
]
}
]
}
Sometimes you might need to add a title to a mockup, just to give some context to the viewer. You can do so by adding the "title" item to the mockup block, like this:
{
"screens": [
{
"title": "Home",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg",
"title": "Home"
},
{
"type": "iPhoneXPortrait",
"image": "images/mockup_mobile.jpg",
"notchBackgroundColor": "#fff",
"title": "Sub section"
}
]
},
{
"title": "About us",
"mockups": [
{
"type": "MacDesktop",
"image": "images/about_us.jpg",
"title": "About us"
}
]
}
]
}
And it looks like this:
There are some additional items you can add at the root level of the JSON structure to customize your Moockup, take a look a this example featuring all of them with self-explanatory names:
{
"pageTitle": "The title of the page",
"headerTitle": "The message that appears on top of your Moockup",
"footer": "A footer message that will appear at the bottom of your Moockup",
"backgroundColor": "#E01A4F", // A global background color for all screens
"screens": [
{
"title": "Home",
"mockups": [
{
"type": "MacDesktop",
"image": "images/mockup.jpg"
}
]
}
]
}
That should give you tools enough to customize your Moockup in lots of different ways. Let's impress your clients the next time you present them your work!
Moockup has been prepared to be extremely easy to setup for easy to share, fullscreen presentations, but it can be used as a jQuery plugin to embed Moockups in more complex scenarios, like the example Moockup you can see throughout this site. For advanced users, here's how to use Moockup as a jQuery plugin in your project:
Include the jQuery library and the moockup.min.js + moockup.min.css files in your head section.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="moockup.min.js"></script>
<link rel="stylesheet" type="text/css" href="moockup.min.css" />
</head>
<body>
...
Create an empty div in your HTML where you want your Moockup to appear. Assign it a unique id:
<div id="moockup"></div>
Call the Moockup jQuery plugin on your div:
<script>
$('#moockup').Moockup();
</script>
This will create your Moockup, but it will still work like a regular Moockup by reading the file setup.json. The interesting part is that you can now pass some additional options to the Moockup jQuery plugin:
For example:
<script>
$('#moockup').Moockup({
'gapPercentage': 10,
'setup': {
'headerTitle': 'My Moockup',
'backgroundColor': '#fff',
'screens': [
{
'title': 'Home',
'backgroundColor': '#E01A4F',
'mockups': [
{
'type': 'MacDesktop',
'image': 'images/mockup.png'
}
]
}
]
}
});
</script>
The beautiful website https://stories.readymag.com/mollino by Readymag has been used as an example mockup.
iMac vector image based on the work by Vecteezy.com
iPhone X vector image based on the work by DesignBolts