Revision history 2.0: Timeline view, compare changes, now in Offline mode

Visualize revisions like Git.jpg

The title of this post summarises today's release of MockFlow web and desktop apps which brings major updates to Revision history. One of the benefits of having a digital whiteboard is to track changes and save versions.

While MockFlow had revision history function right from its first release, this update pushes this feature to the next level. Let us see how:

New UI: Visualize revisions like Git

Previously revision history was listed in plain data grid style in a dialog box. While it served its purpose, it lacked the flair and perception of a graphical timeline.

Now we have redesigned Revision History UI from scratch deeply inspired from git, the popular version control system. In this visualisation, it is easy to track change log by user or time and also make out manually checked-in revisions from auto-revisions.

Find diff: Compare revisions

Compare revisions Final.jpg

Now revisions can be graphically compared with one another to easily highlight the design changes between revisions. When a revision is previewed, a new compare button helps to find its differences with any other revision including the master version.

Offline revisions: Revision history inside .wire files

Unlike many other tools, Revision history need not be a feature only for cloud based software. Tracking changes is an essential feature irrespective where the data resides. Therefore we now bring offline revision history built right within your MockFlow file format - .wire files.

Just like the online app, all its functions - auto revisions, manual check-in revisions, save, restore, preview, compare revisions are available for .wire files in desktop app. And it is all saved within the .wire file even without network connection. So sharing the .wire file (just like any other file), will also include its built-in revision history. Imagine sharing an image to a designer that will include its entire change log within the same file.

Offline revisions.jpg

Bonus: Trash can for pages in Offline mode

Here is a bonus feature for desktop app users with Offline mode. Just like revision history, trash feature for pages is now available for .wire files. Say goodbye to accidental deletes even in Offline mode.

Introducing: Mobile web app for WireframePro

Blog Image Final.jpg

Collaboration is key to brainstorming UI ideas. For better and faster decisions on creating user interfaces, stakeholders should be able to collaborate easily and seamlessly irrespective of their platform, device or the tool they use.

We at MockFlow aim to provide a full 360 degrees collaboration environment for UI. Which is why apart from our web and desktop apps, MockFlow integrates deeply into flagship business software like Slack, Trello, Office…

As part of this approach, It is now time to make MockFlow available for mobile devices. We are thrilled to release our official mobile web application for WireframePro. Listed below are the main features of this mobile app.

  • Opening any WireframePro link in a mobile device will automatically switch to a touch friendly interface
  • Use mobile app to interact and review wireframes, view notifications and make comments
  • Preview WireframePro mockups in mobile devices from your desktop app easily using QR code
  • The dashboard and viewer has been redesigned for touch in a responsive way whether it is tablets or phones

This release can be considered as our first step towards providing a fully touch based editing and collaboration experience. More coming soon…

Open https://mockflow.com in any mobile device. Tested in iOS and Android.

Screenshot 2020-07-17 19.27.05.png

New component: Advanced data grid

adv.png

Datagrid components are widely used in wireframing UI for business apps and sites. They help to quickly draw tables, fill data and imitate the real implementation.

In addition to the existing basic datagrid component, we are releasing a new advanced version of this today. The basic datagrid component will continue to exist as it is easy to enter data with its comma separated syntax. However it misses on certain core features that required a new component.

Advanced datagrid component is all about customization and visual editing. It brings the following features:

  • Graphical editing of columns and rows
  • Support for multi-line text
  • Support for icons
  • Click-to-edit cell feature
  • Easily resize rows or columns
  • Style individual rows, columns or cells
  • Cell based linking

Try out this new component in WireframePro editor. It is available as part of Web and Common UI packs.

Neumorphism UI Pack

M9a786ebd38168781774803fb7aaa9fe21591184040519.jpeg

Neumorphism is a fresh UI design trend characterised by its subtle shadows, rounded edges and extruded visual styles. It is now increasingly used in mobile apps as an alternative to skeuomorphism.

To make wireframes for Neumorphism UI layouts, we have now released a new UI pack in MockStore that includes over 100 components specifically crafted for drawing Neumorphism based mobile UI.

View UI Pack

New Powerup: Font manager

Screenshot 2020-06-08 12.05.00.png

We are excited to introduce another new Power-up to MockStore. This time its all about Fonts. In follow-up to the previous release, Fonts are as important as colors when comes to UI designs. Selecting and mixing the right font faces with font styles based on content not only makes it look good but also improves accessibility for viewers.

Font manager powerup helps designers select the best font for their UI by providing the following tools:

  • Manage and share all your font assets easily
  • Create and view custom text styles based on font settings
  • Select and compare fonts side-by-side
  • Google font support

To know more and install this Power-up in your editor. Please visit the below link Fonts powerup

New Powerup: Color palettes

D720f03cc1dac84f7a424d5e57ae19dfb.png

Choosing the right colors, form one of the crucial pieces of any UI design. The right colors can even turn a UI into a brand, create a better user experience, try to make an appeal and attract users. The new "Colors" power-up helps designers in every way to pick the best colors for their UI designs.

What it does?

  • Choose from popular color palettes - Material, Bootstrap, Fluent…
  • Create and share custom color schemes
  • Save favorite colors directly to your Wireframe project
  • Colors converters for RGB, CMYK, Hex…
  • Grab colors directly from any image
  • Color wheel picker

To know more and install this Power-up in your editor. Please visit the below link Colors Powerup

Introducing "Page blocks" in Sitemap nodes

mj.png

MockFlow SiteMap - Software for quickly creating visually appealing outline structures for websites and apps has now got its long deserving big update with the introduction of "Page blocks" for sitemap nodes.

"Page block" helps to provide a drill-down view of a node in just a glance. Let us assume we are creating a SiteMap for a business website with pages for homepage, products, about us and contact.

In addition to creating this website structure, page blocks allow users to create distinguishable blocks inside each page that appears within the nodes.

For example: Homepage will have header,main banner, customers and footer blocks. About us page can have header, team, company timeline and award blocks.

With this feature, SiteMap now provides a comprehensive solution for users to model their Information Architecture (IA) for websites and apps. It is now available for immediate use at sitemap.mockflow.com

Sample: View example sitemap using blocks

New component - "Arrow path" for creating user flows

arrowpath.png

"ArrowPath" is a new component introduced in the latest updates for WireframePro web and desktop apps. ArrowPath lets you easily create composited lines with multiple joints that can be dragged to create your own flow. It also provides several arrow styles for start and end points for creating custom pointers as per your needs.

flowchart.png

The above features make the component highly useful in the following use cases:

  • Demonstrating user flows between various wireframe UI screens as shown above.
  • Flowchart diagrams for depicting algorithms and workflows for UI
  • Illustrating mockups with annotations

ArrowPath is now available as part of Common and Annotation UI packs. And also as part of the handy toolset bottombar under components section.

TeamChat feature improvements in WireframePro

cb3f00512967406a9d0c8827c82bb967.png

Screenshot 2020-04-08 14.00.30.png

Communication and feedback are key elements for teams when brainstorming user interfaces. The new refreshed TeamChat feature in WireframePro helps make discussions - real time, annotated and fast.

Apart from a complete design overhaul, the new TeamChat has the following improvements:

  • Direct chat launch within the editor
  • Do-not-disturb mode
  • Online status of project members
  • Send selective chat invites
  • Start video meetings

Also in response to the recent COVID-19 outbreak, we are providing free TeamChat access to all plans in MockFlow to facilitate easier remote UI collaboration.

Create illustrative mockups with this new UI pack

Ma075999a4338333eed91b3af8ac6507f1583824829811.jpg

We are happy to release a new UI pack called "Illustrative mockups" for WireframePro. It provides over 100 components for building colorful UI illustrations. Illustrations are unlike regular wireframes as they help to visually represent user interfaces in a colorful and appealing way. Which is why they are used in places that attracts viewers such as webpages, presentations etc…

Quickly design and export your UI representations with "Illustrative mockups" UI pack for making attractive layouts of your apps.

Link to UI Pack - Illustrative Mockups