WIREFRAME EDITOR
NinjaMock includes all of the typical stencils for web and mobile wireframing.
Our stencils look sketchy – as if they are hand-drawn. This is because it helps people to concentrate on the interaction and content in your wireframe rather than on colors, style, detailed layout and other high-fidelity aspects.
The stencils are organized in a toolbox in the left pane of the application, and are grouped according to their type and usage. We currently support several types of projects (e.g. iOS, Android, Windows Phone, etc) and for each project type the toolbox contains the stencils you'll need.
(Android, iPhone, iPad, Windows Phone, Microsoft Surface, websites and freehand)
Icons and images
Wireframes aren’t complete without including icons and images. In NinjaMock you have many convenient options at your disposal in order to design your interface to include these visual elements.
Embedded icons
Our embedded icons use the same hand-drawn style as the rest of stencil elements so that your whole wireframe design has a uniform look and feel.
The embedded icons differ by project type. For example in Android and iPhone wireframe projects, they resemble the real icons of the given platform but they still have a sketchy hand-drawn look.
The embedded icons are vectors. You can resize them, and even change the fills and strokes without losing quality.
IconFinder
If you don’t find what you need among our embedded icons, we also have a direct integration with IconFinder. Just search for icons on the IconFinder tab inside NinjaMock wireframe editor, without ever having to leave.
Please note that the IconFinder icons are not vectors and you cannot change their fills or strokes.
Your own files
Do you have icons or images on your computer that you’d like to use in your project? Just upload your visual assets to your personal storage on our servers and you can use them in any project. We currently provide every user with 500MB free space.
You can drag and drop image files directly from your desktop onto the NinjaMock wireframe editor. These files will be automatically uploaded to your personal storage space.
Images from the web
Did you find the perfect icon or image that you need for your project on the web? No problem, just copy and paste the link to the file and you can use it without uploading it to our servers.
Just make sure that this image will not be removed from wherever you find it.
You can drag and drop an image directly from an open browser onto the NinjaMock design surface. We will automatically add the image by referring to the image’s URL.
Manually drawn icons
Sometimes it’s more convenient to create your own icon when you can’t find anything that fits your needs. By using NinjaMock’s powerful vector editing tools you can quickly create an icon on your own.
Follow these 3 simple steps to create your own icon:
1. Use any vector editing tools to draw what you need.
2. Select the newly drawn elements.
3. Right click and choose Export selection to -> My images....
Your vector drawing will now be saved as a reusable image in your personal space on our servers. From now on you can use this image as an icon source. In the example below, you can see a manually drawn icon that is used inside the iPhone’s tab bar element:
Video Support
Ninjamock allows you to use external videos in your projects by just adding the url where the video is stored. Ninjamock supports videos from Youtube,Vimeo,Dailymotion,Rumble. Or video files with formats like MP4, WEBM and OGG.
Emoji Support
In Ninjamock you can use standard emojis in your projects, which can be resized and places anywhere in your projects.
Custom stencils
If you can’t find a stencil you need, you can make it yourself directly in NinjaMock wireframe editor. You can create your own reusable elements from any selection of objects that you create on the design surface.
Custom stencils are currently only available in the project in which they are created.
Here is how to create your own reusable stencil:
1. Create whatever you need by using existing stencils and/or drawing unique elements (by the way,
we have powerful vector editing tools).
2. Select all of the elements you’d like to include in your custom stencil.
3. Right click, choose Assets -> Convert to asset.
The newly created stencil will be added to the group "My assets" at the bottom of the toolbox, and you can now use it on any page in the current project.
You can modify the stencil at any time (right click, choose Assets -> Edit asset) and your changes will be applied to all instances of the stencil throughout your project.
Vector graphics
NinjaMock wireframe editor features powerful built-in vector editing tools. In addition to simple elements such as lines, circles and rectangles, NinjaMock wireframe editor also includes a freehand pencil and a pen tool (with Bezier curve support) for creating shapes of any kind.
The vector editing tools are located in the tools palette on the left side of the drawing surface.
How drawing tools work?
Drawing tools (line, rectangle, ellipse, pen and pencil) work a bit differently from the rest of stencils. To begin drawing a shape, choose a starting point, hold down the left mouse button and move the mouse to the desired end point. Release the left mouse button when the shape is ready. The drawing behaviour is very much the same as the tools you might know from other professional drawing applications.
If your shape turns out to be the wrong size, no worries - you can always change it afterwards, either by resizing it with a mouse or by using the properties pane to make adjustments.
Let's start with the simple drawing tools:
Line tool
With a line tool you can ... ta-da! – draw a line.
Shortcut: L key.
To draw a straight line, hold down the Shift key while drawing. Then the tool will snap to 15-degree increments to assist you.
The line tool produces sketchy lines. The application draws a complex path behind the scenes which makes the line look hand-drawn. If you need a non-sketchy (completely straight) line, you can use our pen tool or convert your line to a path.
Rectangle tool
With a rectangle tool you can ... drum-roll – draw a rectangle.
Shortcut: R key.
To lock the aspect ratio of the shape, hold down the Shift key while drawing.
The rectangle tool also produces sketchy shapes just like the line tool. If you need a non-sketchy rectangle, you can use our rectangle tool or convert your rectangle to a path.
Ellipse tool
With an ellipse tool you can add great looking ellipses to your projects.
Shortcut: C key.
To lock the aspect ratio of the shape, hold down the Shift key while drawing.
Let's have a look at our more advanced vector tools:
Pen tool
With a pen tool you can create any types of polylines and polygons.
Shortcut: P key.
The Pen is useful for making a quick sketch of a shape (adding control points) before applying Bezier curves with Path edit tool. You can also add Bezier curves while adding your control points simply by dragging while you add a point.
Tips on using pen tool:
To add a point to any existing path, select the pen tool and click anywhere on the path to add another point.
To remove a point from a path, select the pen tool and click on the existing point you wish to remove.
To close a polygon simply add your last point directly on top of the first point. The mouse cursor will change to indicate that polygon will now be closed.
Path edit tool
With the Path Edit tool you can modify any existing path, no matter how it was created – whether by pen, pencil or any other vector editing tool.
Shortcut: A key.
The Path Edit tool is useful for making adjustments to your paths, such as moving points and editing Bezier curves.
How to create a curve using path edit tool:
1. Hover your mouse over the path point which you wish to transform into a control point for a
curve.
2. Hold down the Alt key (Option key on Mac) and "pull" your mouse cursor to any side, away from the
point while clicking down.
3. Curve-adjustment handles will appear (blue dots connected with a thin line in the illustration).
Use these handles to adjust the curve as necessary.
4. You can also convert a curve back to a normal angled corner by alt-clicking on the control point.
Pencil tool
With the Pencil tool you can create any freehand drawing.
Shortcut: Y key.
Just make sure you’ve got good hand-drawing skills:-) A Wacom board or other drawing tablet can come in handy when using the Pencil tool.
Hand tool
You can use the Hand tool to pan around the design surface. It’s convenient when you have a high level of zoom applied and you need to make delicate scroll adjustments to bring things into view.
Shortcut: H key. Alternatively, you can hold down the Space key and use the left mouse button to temporarily activate the hand tool. This is useful when you are using another tool (pen, for example) and you need to scroll without deactivating the pen. Just release the Space key and the pen will become the active tool once again.
Generic shapes
In our toolbox you will find many more commonly used vector shapes.
These shapes show up in all types of projects (the other stencils in the toolbox are specific to a project type).
Common properties of vector objects
All of our vector objects are supported with a common set of properties – stroke brush, stroke width and fill brush (where applicable).
This gives you the flexibility to quickly draw a shape in a style that matches the rest of your design.
Page link visual indicators
Sometimes you might choose to add only a few active links to your wireframes. In such cases, it can be difficult for viewers to know which elements in your design are actually clickable. For this reason we’ve included the ability to turn on and off some subtle page link indicators when viewing a project in share or preview modes. These cues provide a visual indication of the clickable elements that are present on every page of your design.
If you've assigned a page link to any element in design mode, a corresponding page link indicator will be displayed on that element when viewing the project in share or preview mode.
Page link indicators are turned on by default when in preview or share mode, but can be easily turned off by clicking the Link toggle in the top right corner of the page.
Copying and pasting
You can easily copy and paste elements between pages or projects. You can copy and paste within the same wireframe project, or copy from one project and paste it into another project that is open in a different tab, window or even a different browser.
Simply select the elements in your design that you would like to copy and use the Ctrl+C (Cmd+C on Mac) key combination on your keyboard to copy them to the clipboard.
In order to paste the elements that are now on your clipboard, just browse to the page in the project that you want to copy them to, and hit the Ctrl+V (Cmd+V on Mac) buttons on your keyboard. That's it! The pasted elements are now copied to the new location.
For security reasons, copying between browser tabs works only when using keyboard shortcuts. It will not work from the context menu activated with the right click.
Pasting graphics
NinjaMock supports your workflow even when you’re working with high-fidelity designs in other graphics applications like Adobe Photoshop. Even though you might be over with the conceptual and wireframing phases of your design work, you can still easily use NinjaMock to continue your workflow by pasting your pixel-perfect designs into NinjaMock. This makes it easy for you to distribute your polished visual designs to your co-workers, stakeholders and clients for feedback and approval. No more heavy email threads or cluttered file shares to handle your design reviews!
When you’re finished with your mockup design work in the graphics application of your choice, all you need to do is use the application’s Copy command to copy the designs you have there, return to NinjaMock and then Paste your the graphics into NinjaMock with the Ctrl+V (Cmd+V on Mac) key combination. You no longer have to worry about saving or exporting your design work as image files from the graphics application! You can also use your operating system’s clipboard functionality to copy the graphics you want. For example, on a Mac you can use the Cmd+Ctrl+Shift+4 key combination to open the clipboard copy selection marquee, drag selection to fit what you want to copy, and then paste it into NinjaMock.
Transparency is not supported. Transparent areas in the visuals that you copy from other applications will be rendered with a white background.
Due to certain restrictions, this type of pasting is currently not supported in Firefox browser.
Collaboration
The fundamental idea behind wireframing is about communicating your ideas. Share your work with your team or clients in order to get instant feedback and ensure that everyone is up-to-date with the progression of the project.
Sharing
With a single click you can share your wireframe project with anyone. NinjaMock automatically generates a special secret link (e.g. "ninjamock.com/s/some-code") which can then be used to open and view your project.
The people with which you share this link do not need a NinjaMock account. This is particularly useful for submitting your work to your customers who do not use wireframing tools. Even though your customers do not have a NinjaMock account, they can still view the designs and comments, and even add their own comments to your project.
If someone who doesn’t have a NinjaMock account leaves a comment on your wireframe or mockup design, the comment author will be displayed as "Shadow Ninja #some-number". This is a special temporary account that we create on the fly specifically for non-customers when they add comments.
How to begin sharing your project:
1. In the top navigation bar, click the Share button.
2. Click on the button "start sharing".
3. Send the automatically-generated link to whomever you wish.
To stop sharing your project, just click on the "stop sharing" button in the same dialog. Your secret link will no longer work until you start sharing again.
Partial sharing
It’s common that you may want to share with your customers only a specific part of your wireframe project without them gaining access to sections that are unfinished. You might want to keep working on the next part of the project while waiting for them to review the stuff that is ready. By using our page statuses you can easily control which pages are shared and which ones are not.
In the illustration above, only pages with status "Design complete" or "Approved" are shared. Anyone who uses the secret link (including yourself if you want to test it) will not see any wireframe pages which are marked "In progress".
Startup page
To test various flows within your wireframe, it is often useful to choose a specific page where you would like your reviewers to start viewing your designs. In NinjaMock, you can set the startup page directly on the Share dialog.
The startup page is saved within the project itself. This means that you can change the startup page at any time without sending tons of different secret links to your customers. Anyone accessing your project via the secret link will begin on the same startup page.
Opening on mobile devices
NinjaMock projects can also be opened on tablets and smartphones, which makes it very convenient to see how your wireframe and mockup designs appear on specific devices!
Work as a team
Being able to share a project for review and receive comments sometimes is just not enough. NinjaMock wireframe editor allows you to share your workspace, and collaborate in real-time with your team. Invite your business partners and colleagues to join your project and assign them privileges so they can contribute directly.
Everybody can be invited to work on your shared workspace. Simply send out invitations and if your invites don’t have an account already, they just create their own account in seconds. Another great thing is that they don’t use up their own available projects, if they join yours! - and don’t worry - you are the boss, and you decide what privileges your collaborators will have for each of your projects.
Access roles
Permissions on workspace are defined with user's assigned role. There are four roles in NinjaMock: owner, administrator, designer and reviewer.
Who can do what?
Owner - is the user who creates folders and projects. Owner has full control over the project. The owner invites collaborators and assign them roles. Each created project count towards the owner's number of available projects.
Administrator - has the full control over folders and projects and can invite other collaborators. The projects does not count towards the number of available wireframe and mockup projects for the administrator's own account.
Designer - as one might expect designers work in the project. However, this user will not be able to administer other users and their roles. The project also does not count towards the number of available projects for the designers own account.
Reviewer - the role with the fewest permissions is the reviewer. As the name explains, they can view the project and comment on it, but will not be able to design in the project and change mockups. Also, reviewers can not administer other users and their roles. The project does not count towards the number of available projects for the reviewers own account.
Share a workspace
Sharing the project's workspace has never been easier: simply click on Team option within the project editor.
You can also start workspace sharing from your list of wireframe and mockup projects on the MY PROJECTS page using the option for Manage Team on either project, folder or account level.
When you send invitations to share your workspace, you can add existing NinjaMock users or invite new users to create their own NinjaMock account and join your project.
You can add as many collaborators as you want.
Manage team
As a project owner, you have full control of your wireframe and mockup projects.
NinjaMock wireframe editor let you set user privileges on both project, folder and account level. Assign your collaborators as much or as little power over the project as you want: make them administrator, designer or reviewer.
Managing team works on three different levels: account, folder or project. Add the permissions and have full customization of access rights and permissions. Permissions set on lowest level will always take precedence.
Accessing shared workspace
If someone shares a project workspace with you, you will receive an email with a link to access the project. If you don’t yet have a NinjaMock account, you will be asked to create one. This takes only seconds!
Together with the project access, you will be given certain permissions: administrator, designer or reviewer. These permissions are given to you by the account owner.
Access all projects' workspace (yours or shared with you) from one place: My Projects. Switch between accounts to access their projects.
Apart from project access, you may be granted access to folders or accounts levels. This way you will have the same rights to all projects in the folder or for the whole account.
Projects that have been shared with you will not affect the project count of your own plan.
Working together
Collaboration on a project means that all users can access the project workspace and contribute to the project depending on their privileges.
All changes and moves are displayed to the rest of the team in real-time and saved to the server.
Page status
You might want to track the progress of your work in order to understand how near the project is to completion. In NinjaMock wireframe editor, you and your reviewers can control the status of individual pages.
Every single page may have one of the following status "In progress" (default status), "Design complete" and "Approved".
All changes to a page’s status occur manually. We haven’t implemented any complex workflows dictating who can change a status or at what time. Instead, we’ve decided to keep it simple and flexible; any user who has access to your project can change any status at any time.
Page status are synchronized in real-time so you don’t need to refresh your browser in order to see the latest status for a page.
Project overview
To see the status for an entire wireframe or mockup project instead of a specific page, you can use the Project Overview web page. You can access it by clicking on "Overview".
The Overview page contains details of all pages in your project, such as page status and the number of unresolved comments.
Export to PDF/PNG
Exporting to PDF and printing out on paper is still an essential part of wireframing. Many idea creators print out their wireframes and put them up on office walls; some use them for inspiration, others are discussing the designs as a group and add comments right on the wall.
In NinjaMock wireframe editor we support this practice by giving you the opportunity to export your wireframes with page links and page comments. This way you can navigate the interaction of your design even when it’s on paper.
When you export and choose to include comments, we add all page comments next to the wireframe page.
The comments have the same unique comment numbers as they have in NinjaMock’s design surface.
Export to HTML
You can also export your Projects as HTML. Exporting as HTML allows you to download the files to your computer or add them to your own web server for convenient access and storage. This can be handy for sharing your projects with your partners and clients.
HTML prototypes offer a more interactive experience when previewing your work by, for example, allowing you to type text and mark checkboxes.
Project management
We like to keep things organized inside NinjaMock wireframe editor. We provide convenient ways to group pages within your projects and we also allow you to organize your projects inside of folders - just like the files on your computer.
Page groups
When your project grows and becomes more difficult to navigate, it’s nice to separate your pages into groups. For example, you can group them by their respective areas in your application design; e.g. login pages, settings pages, etc – or any other way you like.
A page group is simply a named set of pages (a page can be only in one group at a time). You can create as many groups as you need, move pages between groups, or sort them within a group.
To create Page groups, expand the Pages pane by clicking on the corresponding icon in the top-right corner of the pane.
Project folders
Think about the files on your computer for a moment. When you have too many files and it becomes hard to find what you want, you simply create folders and move the files inside, right?
We’ve reproduced the same experience in NinjaMock; you can create project folders, put different wireframe and mockup projects into folders, move folders into other folders, etc. This is a convenient and familiar way to organize your work.
To move a project (or a folder) into a folder:
1. Highlight (hover over) the item in the projects list.
2. Click the "Move..." text-link.
3. Select the destination folder, and finish by clicking Move button.
To expand or collapse the folder in the popup click on the gray folder icon.
Quick Guide - to The Wireframe Editor
Comments
NinjaMock wireframe editor features an intuitive and familiar way to leave comments on individual wireframes and to track their status.
The comments are specific to the page on which they are left. If a page is deleted, its corresponding comments will no longer be visible.
Our comments are synchronized in real-time so you don’t need to re-open or refresh the project to get the latest comments!
Adding comments
New comments can be added either from the Comments pane on the right side of the design surface, or by simply right-clicking anywhere on the wireframe and choosing "Add comment" from the popup menu.
We do not have any restrictions as to who can leave or edit comments. Anyone who opens your project can add, edit or even delete any comment.
Comment bubbles
Each comment is represented by a blue 'speech bubble' icon on the design surface. Inside the speech bubble, a unique comment number is displayed.
You can freely move the bubble anywhere on the design surface in order to help the viewer understand which wireframe element the comment refers to.
Double-click on the speech bubble icon to view or edit the comment.
Tracking comment status
When a comment is resolved, the speech bubble icon is grayed out, and the comment is moved to the bottom of the list in the Comments pane. This helps you concentrate on the active (unresolved) comments which are displayed at the top of the comments list.
To check if there are any unresolved comments in the entire project, use the ALL switch at the top of the Comments pane. This way you will see comments for all pages rather than comments for only the current page.
Click on a comment speech bubble icon and you will be taken directly to the page on which that comment was left. The scroll position will also be adjusted so that this speech bubble icon is positioned in the center of the screen.
Email notifications
NinjaMock wireframe editor also features automatic email notifications when new comments or replies are added.
As the owner of the project, you will receive notifications about comments from all reviewers.
The reviewers however, will only receive notifications for the comment threads in which they are participating if they are a registered NinjaMock user. Non-NinjaMock-users who access the project via the secret link and leave comments will not be notified.