Get Started with MockFrame

As low as $14.99/user. All 50 apps

Explore our other progressive applications

Overview

MockFrame is a graphical user interface wireframe software for enterprises. It is used for creating and designing web-based graphical prototypes. It can be used for creating wireframing websites, designing mobile app interfaces, and prototyping designs.

It gives you access to multiple projects and allows you to start designing without having to buy multiple licenses or install the software. It is a simple editor that enables you to create designs from scratch. You can speed up your design tasks by automating them with icon libraries for repeated elements.

It allows you to create an unlimited number of mockups and prototypes for all of your projects. You can easily collaborate with your project members on one platform. You can share your mock links with multiple users to generate new ideas for the prototype.

MockFrame is an ideal tool for individuals who work in more collaborative teams. It supports real-time editing and includes a list of various components. It can also have an unlimited number of viewers on mocks to inspect and comment on design files. With MockFrame, create realistic mockups using the toolbar options and share them with other users by creating the mock URL.

Getting Started - MockFrame

Go to infinity.500apps.com > Select Productivity from the top bar > Select MockFrame

MockFrame

Create a New Project

You can add a project by clicking on Add Project to get started.

Add Project

Give the project a name and a description. You can also add people by clicking Add Member to your project. Change the color of the project icon and click on Save.

Add Mock

Add More Projects

By clicking on +Add Project, you can add as many projects as you want.

You are now ready to get started. We can add as many projects as required.

Add More Projects

Create Mocks

You can create Mocks using Drag and Drop components builder such as containers, text, buttons, charts, shapes, icons, and so on.

With the use of the Design tools component, you can add Color, change the font, and component settings, and other design tools can be used to enhance the components of a Mock.

With a single click, you can generate a Mock URL or a Single URL for all the mocks in a project and share the URL with the specified users.

Mockframe can be used to build prototypes of any application. By clicking the Add Mock button, you can create or design a mock.

  • Click on Add Mock or Plus button (+), to create or design a mock.

Templates

Select Templates

You can pick from the built-in templates to get started.

View Option

Choose from one of the pre-built templates, and click on the view option to view the template.

User Journey

In which you can find Pre-built templates such as Ecommerce payment, User login, and Admin login for both mobile and web.

Use Template

If the template meets your requirement, use the template by clicking Use Template.

requirement

Charts

Where you can find sales dashboards, HR dashboards, and organizational charts for both the web and mobile.

sales dashboards

Database Modelling

Where you can find an ER diagram, a use case diagram, and a flow chart.

Database Modelling

Others

Where you can find pricing pages for both mobile and web, timelines, a decision tree for Project Planning, and ordering services.

Project Planning

Edit Mock

After clicking on Use Template, a new pop window will appear for editing the template, where you can edit by using the components such as Containers, Text, Buttons, Charts, Shapes, Icons, Images crop, and rotate.

Containers

It can be used to create prototypes or insert the specific device screen into the canvas.

Containers

  • In the Containers dropdown, you can see Web Page, Mobile App, Horizontal Tab, and Vertical Tab.

  • Select any options from the dropdown and drop them on the edit path.

Text

It is used to add text columns where text can be inserted into the mock.

Text

  • You can see Line Text, Link, Paragraph, Number Inc/Dec, List, Comment, and Table in the text dropdown. Select any options from the dropdown and drop them on the edit path.

Buttons

It is used for the clickable actions that are used to call a function via buttons.

Buttons

  • In the Button dropdown, you can see Button, Button bar, Dropdown, Radio, On/Off, Checkbox, Help button, Date time picker, Date picker, Time picker, Search bar, and Image. Select any options from the dropdown and drop them on the edit path.

Charts

It is used to represent values in a visual manner.

charts

  • In the Charts dropdown, you can see Bar Chart, Pie Chart, Column Chart, and Line Chart. Select any options from the dropdown and drop them on the edit path

Shapes

It is used to represent the object outliner's geometric structures.

Shapes

  • In the Shapes dropdown, you can see Triangle, Circle, Semi-circle, Ellipse, Pentagon, Hexagon, Rectangle, Horizontal line, and Vertical line. Select any options from the dropdown and drop them on the edit path.

Icons

It is a graphical or symbolic representation of something.

Icons

  • In the Shapes dropdown, you can see Brand, Chart, Currency, Directional, File Type, Form Control, Gender, Hand, Medical, Payment, Spinner, Text Editor, Transportation, Video Player, and Web Application. Select any options from the dropdown and drop them on the edit path.

Images

Any photographic representation of an object or a material

Images

  • Upload any image or Choose any Image by clicking on Browse.

Browse

  • After selecting the image of your choice, click on Upload

  • The uploaded image will be previewed under the image column.

Uploading Images

Drag and Drop the Image

Drag and Drop the selected image to the edit path, where you can modify it as needed.

Selected Image

Image Edit

On the right side of the image, you can change the dimensions of the selected image by changing the Height, Width, X, Y, and Z indexes.

Image Edit

After editing the image, you can preview it by clicking Preview or save it by clicking the Save button.

Save

After editing the image and saving it, you can name the mock and save it to make it visible on the prebuilt mock.

Prebuilt mock

Custom Template

In MockFrame not only that we have a pre-build template but also you can create a custom template by clicking on the Custom option while selecting the template.

Custom Template

  • You can build custom mock templates by using Containers, Text, Buttons, Charts, Shapes, Icons, Images, etc

Design Custom Mock

  • Containers: With Container you can build a custom outlier of the template like a Web page, Mobile App, Horizontal Tab, Vertical Tab

Containers

  • Text: It allows you to include text columns in your customs mock such as Line text, Link, Paragraph, Number Inc/Dec, List, Comment, and Table.

text

  • Button: It allows you to add a clickable action to the mock like Button, Button bar, Dropdown, Radio, On/Off, Checkbox, Help button, Date time picker, Date picker, Time picker, Search bar, Image.

Button

  • Charts: It allows you to add visual representation graphs such as a bar chart, pie chart, column chart, and line chart to the mock.

Charts

  • Icons: Icons are small images that represent the object.

Icons

  • After finishing the mock frame, click the Save button to save it to the dashboard.

After Finishing

Add a name to the mock and then click Save to save it to the dashboard.

Add a Name

Mock Dashboard

The Saved Mock will appear in the Mock dashboard.

Mock Dashboard

Mock Link

  • By clicking on the Mock Link Icon, you can share the Mock link.

Mock Link

  • When you click on the Mock link, a pop-up tab appears where you can share the tab's link.

Clone Mock

You can make a Mock in the same way you did a clone in Clone Mock.

Clone Mock

  • You can change the mock as much as you want as a copy of the previous mock, while the main mock remains unchanged.

  • You can make changes and save the new mock of the copied ones.

New Mock

Modify Mock

By clicking the Edit button, you can make changes to the existing mock.

Modify Mock

The new mock edit tab will appear for editing.

new mock edit

After you've finished editing the mock, click Update to save your changes.

Update

Delete Mock

You can delete a mock by selecting it and clicking the Delete icon.

Delete Mock

Collaborate with Team

Everything should be done in real-time, including commenting, sharing, discussing, and providing feedback. Accelerate the development of your wireframe prototype with real-time collaborations.

Here you can share the design with your team by clicking on the Mock Link

Collaborate with Team

When you click on the mock link, a new tab opens in which you can communicate with team members about your design.

You can add comments to the mock's selected area by clicking on the design and addressing people.

add comments

To display your comment on the design and also in the comment section, click Add in the Add Comment block.

comment section

This is how MockFrame by 500apps allows you to create mockups and prototypes using MockFrame components.

Go to the next level with 500apps logo

Get 50 other apps with Mockframe - Join the SaaS Revolution - 500apps, $14.99/user flat pricing, 24/5 Support (Phone/Email/Onboarding)

500apps banner