New UI Pack for wireframing Data grids and tables

PreviewThumbnail.png

MockFlow already provides 3 special components for wireframing data grids/ tables. Which include

  • Advanced DataGrid - with individual cell formatting, icon support, visual editing.
  • DataGrid - Simple to use, easy to format with markdown like syntax
  • LayoutBuilder - To create custom grids or page layouts.

Using the above components, we have released a new UI pack in MockStore called "DataTables UI" to represent different types of tables commonly used in websites and webapps. It includes components like excel sheet, pricing table, user listing, sales grid…

For more information and importing the UI pack to your wireframe project, Check this link.

New Solutions from MockFlow

Screenshot 2020-12-29 at 7.55.23 PM.png

Teams, designers and businesses across the globe use MockFlow for sketching their UI. However, over the last few years, MockFlow has grown incredibly huge beyond just wireframing. The new solutions page is a testament to what is possible with MockFlow. It describes with real examples of how MockFlow lets you plan the entire UI process by encompassing the following stages in its workflow:

  • UI Research and Scope
  • Creating Information Architecture
  • Sketching UI layouts
  • Organising UI Flows
  • Interaction designs
  • Building Design Systems
  • UI Evaluation

Click here to visit the new solutions page for more details.

New Power-up: Create 'User Personas' for your product

user-persona_thumb.png

User Personas are fictional characters representing ideal end users of your product. The personas are written as if the individual is real, but at the same time, they reflect common attributes across a group of users that includes likes, dislikes, interests, motivations etc. This will help segment users and target potential customers.

We are excited to introduce a new power-up for creating user personas in a fast and efficient way with the following features:

  • Full-fledged editor designed for creating persona based layouts
  • Auto-generate identity details including user's profile pic
  • Special meter fields to graphically display interests of the user
  • Multiple themes to showcase personas
  • Pre-filled sections for quick turnaround

For more information and installation visit User Personas Power-up.

Here is a public sample on what you can create using this addon View sample

New Power-up: Schedule design meetings within MockFlow

Blog_Desing-meeting.png

MockFlow helps teams to brainstorm UI ideas in real-time by providing an array of communication tools inside the editor like text chat, comments and audio/video meetings. As a result remote teams can discuss and make decisions together about their future UI in a seemless environment.

If your team uses Google Calendar, then today's release just made this more easier. With this new Power-up called "Design Meetings", designers can now schedule their virtual meetings with their stakeholders who might be developers, clients…

Add meeting title, timezone, timings and notes to create a new meeting. Once the meeting is created, it is auto shared with all project members. And the schedule will appear as an event in the Google Calendar of all the invitees.

Also the meeting members will receive prior email and desktop notifications from Google Calendar once it is synced.

The meeting notes are provided with a "Join link" for invitees On joining the meeting, invitees have the option for video/ audio only or text chat. Easily schedule and conduct meetings for your UI sessions using this powerup.

For more details visit Design Meetings Powerup

New! MockFlow app for Microsoft Teams

Screen 1 Final.png

We are excited to announce the availability of MockFlow WireframePro app for Microsoft Teams. Like Slack, Microsoft Teams is a fast growing communication software used as a hub for teams to conduct meetings, chat and for content collaboration.

By making MockFlow available within the Microsoft Teams interface, it provides a seemless way for collaborating on UI designs. The app allows you to create and embed UI projects as tabs within Microsoft Team channels, export created UI drawings to any chat and also permits to use MockFlow as a personal app inside Microsoft Teams for creating wireframes.

Once a MockFlow project is pinned to a Teams channel, the project is auto-shared and visible to all members of the channel when they login and access the tab. MockFlow for Microsoft Teams is available for all plans, however a TeamPack license is recommended for accessing all its collaboration features.

For more information and installing the app visit https://appsource.microsoft.com/en-gb/product/office/WA200002301?tab=Overview

Here is a video demo

New Power-up: Translate your wireframes to over 60 languages instantly

Screenshot 2020-10-08 at 6.52.54 PM.png

Localizing your UI at the wireframe stage is very important for various factors. Each language has a different string length and it can mess up interfaces and text layouts with fixed dimensions. The design might also need an update based on the language it serves as when switching from LTR to RTL.

It is essential to determine all these factors at the planning stage especially when your website or application will be multi-lingual.

Here is where the new "Translator" power-up comes handy. Using the 'Translator' power-up, you can localize a particular set of components in the mockup or the entire page with just a click. Thanks to Microsoft Cognitive Services, the power-up automatically detects the source text's language and translates to the target language. It also auto-saves the project's target language, so you don't have to select it whenever translating.

For more information and installing the 'Translator' for your WireframePro editor, Click here.

New Power-up: Image web search with Bing

bing.png

Finding the right placeholder images for your mockup is not an easy task especially when time is a critical constraint. We now bring the power to search the entire web and import online images at your fingertips.

Powered by Microsoft Bing, this add-on appears as a sidebar where you can look up and browse images just like in a search engine. It also helps to preview or import any image to your mockup in a single click.

This powerup helps to save time and improve productivity in your software planning process by integrating search services within the WireframePro editor.

Note: Make sure you preview the image and use the image as per its license terms before you import them

For more information and installing this Powerup. Click here.

New Power-up: Create websites collaboratively for your wireframes

Blog Image.jpg

We are happy to release a new Power-up for WireframePro - a collaborative website builder. After brainstorming and visualizing your UI ideas rapidly with MockFlow, it is now possible to implement them for real using this Power-up.

It is a highly flexible code-based visual builder with a rich feature set and, most importantly, made for teams.

Use website powerup to:

  • Create static websites from scratch
  • Modify websites easily with visual editor
  • Upload and manage website assets
  • Publish and link websites to custom domain
  • Download entire website as a zip file
  • Create backups of entire site
  • Each file has its own revision history
  • Real-time editing of files
  • Live preview of code changes
  • HTML includes for re-using parts
  • Auto gzip and minification

Make your ideas real with Website Powerup

New feature: Saved components for projects

Banner.jpg

Managing a large wireframe project in MockFlow is now more easier with 'Saved components'. This feature helps designers to save 'reused' components and design elements as part of the project itself.

For example: Imagine a designer creating a wireframe project for a large e-commerce website that will run into multiple pages and screens. The designer can make - product item UI, ratings, ad blocks as part of 'saved components' and reuse these elements whereever required in the project by a simple drag-n-drop.

Not only that, the designer can create themed components specific to that project like blue button, rounded drop-down and icons to visually describe that project's design system.

'Saved components' are tied to a project, so if the project is duplicated, shared or send a copy to another user, the components go along with the project.

Also it can be simply cloned as a custom UI pack, if the components need to be reused across multiple wireframe projects.

This feature is now released and available for both Web and Desktop apps.

In your wirefame project, just select any design element(s) and right-click to add it as a saved component.

New UI Packs: iPhone iOS 14, iPadOS 14 and macOS 11

As announced in Apple Inc's WWDC major releases of iOS, iPadOS and macOS are round the corner. These new upcoming versions bring many changes to UI elements and design across Apple's software lineup.

To help easily brainstorm your UI ideas and visualize concepts for the new OS with the same look and feel, MockFlow now supports the following UI packs:

mac OS Big Sur 11 - 192 components

MockStore Link

macOS Final.jpg

iOS 14 - 97 components

MockStore Link

IPhone.jpg

iPadOS 14 - 171 components

MockStore Link

iPadOS.jpg