MockFlow updates
MockFlow updates
mockflow.com

Get UI design approvals within WireframePro

design_collab_thumb.png

Designs are always subjective and evolves best when there is feedback. Lets for example take a designer wireframing a "signup page" for a business app. The designer will typically create different variations of the signup page and submit it to stakeholders for review. This whole process is cumbersome and undocumented when done via chat or email. Here is where this powerup steps-in, as it streamlines the entire design review process in a visual way and all without leaving the editor.

  1. Upload design variations - 2. Receive feedback - 3. Get the best design approved.

The Approvals powerup helps to make UI decisions faster by improving the review process. Create boards for each design item like logos, background, UI layout…, upload design variations to the boards and then get feedback from project members. Based on review, upload new variations and get approvals.

  • Organize design items into boards
  • Compare variations with different modes - side-by-side, overlay and diff
  • Annotated comments that can be pointed in the design
  • Different approval stamps like Approved, Rejected, Needs work…
  • Upload custom images or directly add UI drawings from wireframepro
  • Export all approved design items in a single PDF for documentation

For more details and installation, visit this link.

New Powerup to markup UI designs and screenshots

2b2e3fde-ba4d-4116-9fa2-e5b039e70900.png

More than comments and descriptions, it is essential to convey the details of an image like screenshots or UI designs visually. This helps viewers to identify the context of the illustration quickly. Today we are releasing a new Powerup that allows you to do precisly the above mentioned in a far better way.

Introducing, Markup - an AnnotatePro powerup that allows you to describe your UI mockups with interactive annotations.

Use Markup to:

  • Annotate wireframes with over 20 markup components
  • Create interactive spots over screenshots and wireframe with text,images,video…
  • Hide sensitive content in screenshots and highlight important areas in UI
  • Use Sticker Store to access a wide library of annotations like for example: approval stamps

For more details and installation, visit this link.

Identify WCAG accessiblity issues with this new Powerup

Screenshot 2021-03-11 at 3.03.21 PM.png

Planning for a good product design involves following the best accessibility standards to make the product usable for all its users. We are pleased to inform the release of a new Powerup called "Accessibility Checker" to identify and fix WCAG compatible issues even before your product's UI is developed.

It follows WCAG guidelines for checking the below parameters:

  • Alt text in images
  • Font size legibility
  • Color contrast ratio

To use this checker, open the Powerup and click on the 'Select component' button to select the component to be validated for accessibility standards.

For more details and installation on this Powerup, visit this link.

Now make your editor sidebar more powerful

blogImage.png

The latest cloud and desktop release of MockFlow enables project owners and admins to customize their project's sidebar by adding related Powerups for faster access. Upto 3 Powerup icons can now be saved to the sidebar for easier opening and switching between Powerups.

Added Powerups will automatically show/hide based on permission and editor mode. This feature will help collaborators in extending and improving their wireframing experience with frictionless access to addons. Here are some examples that you can follow to provide a customized environment for your project members:

Hope you get the idea on how to keep your stakeholders engaged by providing access to important tools at their fingertips.

New Powerup to manage and export "Design Tokens" for UI

Screenshot_1.png

Design Tokens help in creating the design system of an interface with indivisible pieces like colors, font-sizes, spaces, animations, etc. This Powerup lets you to create, manage and export DesignTokens for your UI and also group them into logical collections.

Features:

  • Create and preview design tokens in a visual way
  • Generate tokens from your wireframes
  • Export design tokens into Android, iOS, SCSS, SASS and Less formats
  • Supports reference tokens for creating dependency hierarchies

For installing this Powerup visit DesignTokens Powerup

SpellChecker Powerup: With this new addon correct spelling mistakes in wireframe

Screenshot_2.png

Check and correct spelling mistakes in wireframes with the new SpellChecker Powerup. Simply select text based components in your wireframe and click on the auto-correct button in the powerup to check for misspelled words and update them in text components with corrections.

Under the hood, it uses Microsoft Bing Spell Check API. While most spell-checkers rely on dictionary-based rule sets, the Bing spell-checker leverages machine learning and statistical machine translation to provide accurate and contextual corrections.

For installing this add-on visit SpellChecker Powerup

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