Getting Started

Home » Tutorials » Getting Started
November 25, 2014 Tutorials No Comments

Start Sketching Mockups in Minutes *

MockupScreens is a very light wireframing tool. You can download it, install it, and have your first screens sketched within minutes.

Download Trial Version from MockupScreens Website

1. Go to the download page at MockupScreens website:
http://www.mockupscreens.com/index.php?page=Free-Download

2. Download the version you need (Mac or Windows):

Download Trial from MockupScreens Website

 

Install MockupScreens

Double-click downloaded file and follow setup instructions (Windows) or drag MockupScreens icon into Applications (Mac):

MockupScreens Installer

Sketch a Screen *

When MockupScreens opens, an empty new screen is created. Available widgets are on the left toolbar:

Available widgets are on the left toolbar

Add Widgets to the Wcreen

To mockup a login screen, drag Texts, Fields, and Buttons from the left toolbar onto the screen:

Drag widgets from the left toolbar onto your mockup

Alter Text Displayed on Widgets

Select each widget and change its caption on the property panel below the screen:

Edit texts of your wireframe

And that’s it, you have created your first mockup:

Wireframe can look like a real thing

What Next? *

Below is just a preview of where you can go from here. You can continue with tutorials to learn more on each topic.

  • Skins – You can switch among a dozen available skins, including black & white.
  • Slideshow – Slideshow mode is designed for presentations or live workshops.
  • Interactivity – Links provide some interactivity for slideshow and HTML exports.
  • Annotations – You annotate your mockups to discuss them or document them.
  • Exports – By exporting your project to MS Word or PDF or HTML, you get both a way to share your mockups and a quick specification.
  • Masters – When you have many similar screens, you can create a Master and derive other screens from it. Common example is a web heading.

Skins Example *

Same mockup in different skins

Annotations in a Slideshow Example *

Annotated mockup example

Export to PDF Example *

Printout of a wireframe includes your annotations below each screenshot