Product updates

Keep track of announcements and product updates in MockFlow

Get your wireframes reviewed and rated by AI

Major
Get your wireframes reviewed and rated by AI

We are excited to introduce a new way to get your UI designs analyzed and reviewed automatically with AI and download them as PDF reports.


Feedback is a crucial aspect for a design to evolve in the right way especially in the idea stage. This is the reason why MockFlow provides annotated comments, in-built video chat, and also user testing software to accelerate discussion and get feedback from stakeholders. While all these help in their own ways for better design outcomes, it is also important to have continuous, automatic and impartial reviews for faster design progress. Hence Introducing "Design review by AI" as part of our Genius AI package in wireframepro editor.


How it Works?

To access "Design Review By AI", click the "Genius" icon inside the editor. It comes with two options, either you can get the full wireframe page reviewed by AI or you ask it to review only the selected portion of the design (In this case, You need to select parts of the design before clicking this button). In a few seconds, AI will generate a detailed report based on your design. AI will analyze your design with regard to various aspects such as clarity, usability, design aesthetics, creativity and various other attributes related to design. It is also powerful enough to detect the difference between a low-fi wireframe or a high-fidelity design. Also it can read and understand the text and images inside the design.


On generation, it produces a detailed report with an overall design score and smileys for each attribute to indicate its design level. Sad for bad design, Poker face for OK design and Happy for great design. This way editors can easily identify the key aspects of their design which needs improvements.


Export Review Reports


Screenshot 2024-03-27 at 1.40.49 PM.png


You can save the generated reports in PDF format. The PDF report includes both the detailed review, rating and also the design for which it was reviewed. This way you can go back and check how AI has evolved its review based on your design progress. Also PDF reports are useful in sharing the AI perspective of your design with your team members and stakeholders.


"Design Review By AI" comes part of Genius AI credits. For more information and credit limits check on the pricing page.



Improved insights for DesignSpace

Update
Improved insights for DesignSpace

In today's update, we have overhauled design space insights with better graphics and more informative charts that speaks about your design projects.


Next to wireframing, MockFlow is known for its design project orgranization as it brings tools, files and members together under one roof. With design spaces, it is easy to organize, manage and share design projects just like a folder but better than that. Each design space comes with an insights button where it displays key information about what is happening in that space like top creators, project types, activity and more.


With just a click and a glance, check how your design space has evolved with your project and how your collaborators are involved. Space insights are useful in multiple cases like in agency-client relationship, client can have a better view of their agency's work progress. In a business related design space, it offers how their project uses different aspects of design to bring it together.


This is just the start, more features like activity timeline, AI related insights and integrations with regard to your design project organisation is coming soon to design spaces.





Not just Sketchy wireframes, now draw sketchy UI flows, flow charts and diagrams

New
Not just Sketchy wireframes, now draw sketchy UI flows, flow charts and diagrams

MockFlow now offers full support for drawing UI flows, flow charts and diagrams in sketchy format with a hand-drawn look and feel just like our UI wireframes.


MockFlow is all about bringing your ideas to the digital realm. Ideas in its original form, are usually rough, incomplete with lots of open-ended questions. However ideas are the core of your next product, upcoming major release. It is important for product managers, CEOs, CTOs to bring these ideas to the table in a format that can be easily conveyed, collaborated and worked upon with their team. At the same time it is important to represent the diagrams as though it was sketched on a piece of paper to make sure it visualizes only the idea stage.


In this latest release, we are excited to provide full support for drawing sketchy diagrams and UI flows. Just like wireframes, simply select the sketchy Flow pack and also enable sketchy drawing for connectors. Note: Connector animations and all other aspects still work in sketchy format.


The above features is available in all plans including Free.






Now brainstorm apps for Apple Vision Pro

Update
Now brainstorm apps for Apple Vision Pro

Introducing a new UI kit for Apple VisionOS with over 132 wireframe components.


Vision Pro is a next generation VR device from Apple. Long time after watch (first released in 2016), Apple is trying to establish entirely a new device line. Which means a new way on how users interact with the UI with altogether a different user experience. VisionOS that powers this device is built from ground up for AR and VR.


Like any other UI, straightforward implementation or prototyping of your application will only cost more time and resources. It also provides few opportunities to make decisions and choices. It is always better to wireframe your idea first to avoid these. UI kit for VisionOS helps with you bring out your ideas to picture and helps you to convey your layout, process, features even before implementation starts.


Here are some example UI screens that was created with this UI kit


Wireframe VisionOS apps with MockFlow

Apple ios 1.png


Wireframe UI kit for Apple VisionOS is available for Free and can be accessed from within the MockFlow app. For more details visit MockStore link.




Introducing Flow app integrations for Microsoft Office 365

New
Introducing Flow app integrations for Microsoft Office 365

We are excited to announce a new wave of integrations for MockFlow Flows app. Just like the wireframe tool, we want to empower users to create UI flows, flowcharts , diagrams inside their favourite productivity and collaboration software. Today our MockFlow Flow app plugin for Microsoft Office 365 was published in Microsoft AppSource repository after a review by Microsoft Review Team.


2.png



After installing the plugin this link, Flows icon will appear inside your Microsoft Word and Microsoft OneNote apps. This is for both cloud based Office 365 and also Office desktop versions. With the Flows app, you can open the full fledged editor right within Microsoft Office. Also draw and insert your diagrams within your Microsoft Word Document or Microsoft OneNote project.


Now enhance your Microsoft Word and OneNote to draw diagrams with just a click. This plugin is free and is available to all MockFlow plans. Get it now.



New UI kit for drawing sketchy mobile interfaces

Update
New UI kit for drawing sketchy mobile interfaces

Sketchy or hand-drawn like wireframes convey in style that this UI design is not final and is unfinished. While MockFlow already provides several components and UI kits for drawing sketchy UI, Today we are introducing an exclusive UI kit with over 50 components for drawing hand-drawn like user interfaces just for Mobile devices.


It provides several elements that are commonly used in both iOS and Android UI frameworks like buttons, navigation, statusbar, keypad, device frames, lists, form inputs, popups and also example UI screens.


All great (mobile) software, start with an idea, now brainstorm your thoughts into drawings as fast as you think and as though you have drawn it on a piece of paper with this new UI kit.


It is now available in MockStore can be installed as a UI kit in your MockFlow WireframePro editor.

Launching separate "Flow app" for drawing flowcharts, architecture diagrams and more...

Major
Launching separate "Flow app" for drawing flowcharts, architecture diagrams and more...

MockFlow DesignSpace just got bigger with the new "Flow app". Following up our release on Flow mode inside WireframePro which is great for creating UI flows for wireframes, we are now excited to bring a explicit application for drawing flowcharts, software architecture diagrams, UML, flow visualizations and more. As a separate app, it will help us provide features geared towards flowchart creation.


Why should you use Flow app over other flowchart apps or whiteboard tools?


Tons of Flow shapes

Flow app provides an extensive list of shape libraries and icon libraries all out-of-the-box. Nothing to search or install separately. What's more there is universal search across all libraries to quickly find the type of shape or icon you are looking for your diagram.


s1.png


Flow packs

Like how WireframePro provides various UI packs, Flow app has Flow packs and Flow components. Flow packs provides easy access to a set of related components to draw a particular kind of diagram. For example "Cloud Architecture pack" provides icons, shapes, containers, user icons, indicators to quickly draw SaaS diagrams. Similarly there are packs for UML diagrams, SAP architecture and more...

Also you can make your own Flow pack and share it with your team like a brandkit.

s3.png



Animated Flows

Connectors in Flow app has options for various styles including animated line style. Which will capture user attention to important flows inside a diagram. More animations and interactivity options are coming soon to Flow app.




Generate with AI

Generate flow diagrams for anything that you can think of with the Flow AI. It can be HR process, Cloud serverless diagram, Process to book train ticket... Note: Flow AI is in alpha and we are constantly improving its results.


Shape modes

Flow app generally provides three types of shape types - General, Sketchy, 3D. Use general for normal diagrams. Sketchy to represent draft or flows under working. Use 3D as an alternative visualization for representing flowcharts in a new dimension.


Screenshot 2023-12-20 at 10.35.49 AM.png




Offline Flow app

Flow app is also available in offline form through our flagship MockFlow desktop app. Where you can save and read your own .flow files from your disk without storing data on our cloud servers.


Interactive Flowcharts

You can simulate drill-down flowcharts by using basic interactive options. Develop a network of interconnected diagrams, avoiding clutter and ensuring a clear, organized representation across multiple linked charts.


Other features

It also includes Advanced collaboration, Sharing, Embedding, Annotated comments, Revision history, Layers and other more features.


About Flow App

We believe the new Flow App provides a natural extension on our quest to make software planning easy, accessible and fun. Now in addition to brainstorming UI in MockFlow, also brainstorm process, flows, and architecture with minimal effort. Also to note we have many interesting features for Flow app on our roadmap so let us know your feedback and stay tuned.






Introducing new "Flow mode" in WireframePro

Major
Introducing new "Flow mode" in WireframePro

We are happy to introduce the new "Flow mode" in WireframePro which takes brainstorming UI to the next level. With Flow mode you can conceptualise UI flows, process charts, diagrams and walkthroughs all without leaving your favorite editor for wireframing UI. And the best part is your flows can co-exist with your UI design to provide an intrinsic meaning to your concepts.


How to use Flow mode?

Just select any component inside the editor, its resize handles will now change to flow handles. Pull the flow handle to connect with any other component or group.

The connectors can be styled and re-aligned as preferred. You can toggle between "Mock" mode and "Flow" mode anytime within the same editor whether you want to draw UI or connect Flows.


Screenshot 2023-11-29 at 9.28.25 PM.png


Create amazing UI flow diagrams in minutes

With MockFlow's huge library of UI packs, icon sets and new shape libraries made exclusively for flow mode, make beautiful UI flows in minutes to explain your software concepts.


Screenshot 2023-11-29 at 8.29.38 PM.png


Flow mode is free

Flow mode in wireframepro editor is available free for all users including Basic plan. So start drawing without any hassles.



MockFlow - now UI design + UI flows goes hand-in-hand.









Wireframe UI kit for MacOS 14 Sonoma is now available

Update
Wireframe UI kit for MacOS 14 Sonoma is now available

Now brainstorm your desktop app ideas for the latest MacOS 14 Sonoma using this newly released wireframe UI kit. There are totally over 160 components in 11 categories in this UI kit.


The wireframe UI kit for MacOS sonoma includes layouts of its latest features, theme and wallpapers. Some of the major highlights introduced in MacOS sonoma in addition to many subtle themes changes are : Widgets for Desktop, better messaging, and improved privacy features.


With the super-easiness of MockFlow Wireframing tool and the wide range of components included in this UI kit, brainstorming your UI ideas for the next generation MacOS is now a breeze.


This UI kit is available in all plans including Basic. For more information and using this wireframe kit, click here.



Added Offline support (*.dsgn file) for MockFlow Designer

New
Added Offline support (*.dsgn file) for MockFlow Designer

As promised in our last changelog, today we have brought full file based offline support for Designer in MockFlow desktop app. It is available in both Windows and MacOS.


What is Offline Support ?

MockFlow Designer being a web based designer application requires cloud to operate inorder to load its editor, store designer data on our servers and restore them. While cloud comes with its own benefits such as better collaboration and easier sharing, it need not be accepted by all organizations especially when it comes to data storage.


The offline support for MockFlow Designers allows designers to own their design data by saving and opening their design files in .dsgn format from their storage / machine. Just like other desktop apps such as Adobe Photoshop which supports PSD files, MockFlow Designer uses .dsgn file format for this purpose.


Bonus - Encrypted design file

While how the file (.dsgn) is stored and shared is the responsibility of the user, we at MockFlow understand how important is file level security. Just like in *.wire files used in MockFlow WireframePro. *.dsgn files too can be encrypted with 256-bit encrypted password. This means your file is secured even if your storage is compromised.


Screenshot 2023-10-15 at 7.29.52 PM.png


Why Offline Design is important?

Just like Cloud, Offline has its own salient features, let us check them out in the following points:


  1. Work anywhere even in conditions where Internet is not available
  2. Better compliance for design data without relying on third-party services
  3. Works as is, with enteprise ready file-sharing/hosting programs already installed in your organizations
  4. Make your own versioned design copies for better design organization
  5. Multiple ways to share your design copy, even send via email, chat...


Note: Offline design is a product design + feature, available only in higher plans as mentioned above. For more information, contact us.


Download Designer app for Windows

Download Designer app for MacOS


What is MockFlow Designer?

An easy-to-use tool for non-designers to quickly create graphics for website images, blog hero, app assets, social media images and more...






Introducing our new app - "MockFlow Designer" for designing graphics

New
Introducing our new app - "MockFlow Designer" for designing graphics

Launching our new app called "MockFlow Designer" to quickly create graphics for blog images, website assets, social media graphics, static ads, and more...


Note: ☝️ We created the above changelog hero image using "MockFlow Designer"


MockFlow is widely known and associated with its easy-to-use wireframing tool. Over the years, we learned from our customers that they use MockFlow not just for brainstorming but also for creating high-fidelity graphics by using its large set of UI packs, illustrations, and icons. Adding graphic design capabilities feels like a perfectly fitting extension within the domain of product design.


Today, we are excited to launch a specialized version of our wireframing software geared just toward creating graphics. This means it has all the collaboration features like chat, feedback, sharing, no-doc overhead, revision history, multi-page support, and AI tools already incorporated into the designer tool. However, many specific changes were also made to make Designer one of the fastest and most flexible tools to help non-designers create graphics.


9cf8b951513d4082beca6b8e432a9f10 (1).png


Template Store

A fast-growing library of templates is available for various purposes like social media, ads, blogs, and more. In Designer, you can apply and switch between templates almost instantly.


Designer-friendly component packs

A "Designer" exclusive pack is available with various components that are frequently used in designing graphics. More designer-focused packs will be available shortly with specific purposes, just like UI packs in Wireframepro.


Editor UI

The UI has been modified with a centered canvas and easy access to graphic components such as illustrations and icons.


Retina-ready export

Any graphics exported from the designer can be configured for retina-ready resolution, which is 2x of its original size.


Desktop app support

Designer is also available as part of our MockFlow Desktop app. It is more convenient with system-level windows, native top menus, and OS-friendly shortcuts.


As already mentioned, since it is a fork of our wireframing tool, it includes access to


  1. Third-party image libraries like Unsplash
  2. Ability to import from External cloud drives like Dropbox, Gdrive
  3. AI tools to generate messaging for graphics, generated images, color palettes
  4. Top-notch collaboration


Coming soon: "MockFlow Designer" will be available as a fully offline desktop-based app for Mac and Windows. Like Adobe Photoshop, you can save your designer (*.dsgn) files on your storage for compliance and security.


This is just the first iteration of MockFlow Designer to bridge the gap between product design and brainstorming. More new features are on the way. And as usual, your feedback matters most. Keep your suggestions rolling in!

New in AI Co-Pilot - Generate any color palette with just a prompt

Update
New in AI Co-Pilot - Generate any color palette with just a prompt

We are pleased to introduce "Generate Colors using AI," which is a new addition to the recently launched AI Co-Pilot. Like other tools in the co-pilot, this also helps users to brainstorm UI faster.


D6e811ccf59e93c4a56a7b4a8e4dab11e.png


Colors are one of the key aspects when it comes to designing user interfaces. This tool helps to find the right colors for your UI with just a text prompt. Simply type "Best colors for Dark UI", "IBM brand colors", "Light green pastel palette". The system automagically generates colors based on the text prompt within a few seconds.


After the colors are listed, you can either copy the color code to your clipboard or directly favourite the color to the color picker of your current wireframe project.


c3.png







Wireframe UI kits for iPhone iOS 17 and iPadOS 17 are now available

Update
Wireframe UI kits for iPhone iOS 17 and iPadOS 17 are now available

MockFlow in keeping up with its promise to be up to date with the latest versions of all major UI frameworks, we are happy to release today - Wireframe UI kits for iPhone iOS 17 and iPadOS 17. iOS 17 is the next generation operating system and UI framework from Apple for its iPhone and iPad devices.


Now start brainstorming your mobile ideas for this upcoming OS using the latest UI components available for version 17.


iOS 17 wireframe components for iPhone

This UI pack includes over 240 components in 17 categories. The UI pack also includes pre-made designs of important screens like Home, Settings, Gallery...


M8c81a8e65fc75b3db601a126bff289971695028953328.png



iPadOS 17 wireframe components for iPad

Mc4881fbf180b328190b22ad1bdd2c7f01694710026067.jpeg


The UI kit for iPad provides frames, status bars, keyboard, navigation components, buttons, form elements, and widgets. It has over 200 components in over 15 categories.


M859acb7434d4bac663732b5a13ee9a581695031651375.png


With MockFlow's rapid wireframing platform and iOS 17 UI kits, brainstorm, iterate and visualize your upcoming iPhone and iPad apps in little time.





Introducing "AI Co-pilot" for brainstorming UI

Major
Introducing "AI Co-pilot" for brainstorming UI

Nowadays AI is not just a buzzword but an invaluable tool that has become part of our tools we use. Following our release last month to generate sitemaps using AI with just a prompt , we are now happy to bring AI for brainstorming UI. Introducing "AI Co-pilot" for MockFlow WireframePro. AI Co-pilot is a suite of generative AI tools and wizards to assist you in brainstorming interfaces. As of now it includes the following tools:


Generate Text


D85a9a0ab668e4de4d0f146c6a835083e.png


Generate text for any UI with just a simple prompt. Enter a prompt like "write a tagline for our ecommerce site.", the AI will automatically generate a text. You can also specify the length of the text and the text style tone like from being professional to downright casual. Next time replace your mockup text or redacted font with generative text for high fidelity wireframes.


Generate Images


D85a9a0ab668e4de4d0f146c6a835083e (1).png


Produce images for your wireframes based on a given prompt, and choose a suitable style for the resulting images. When it comes to generating the images, the more specific and detailed the prompt is, the higher quality the generated image will be.


Generate Data tables


table.png


WireframePro provides native datagrid components for wireframing. Using AI Co-Pilot you can now fill data for tables in just a click. It is useful when designing e-commerce products, data related applications and any app that involves data listing.


Besides the above tools, AI Co-Pilot also includes "Generate BYOC" for generating BYOC (or code based components) with AI from prompt. Like "Create a button bar for business website", "Feature grid for homepage"...


It also brings "Generate from Wizard" tool to produce custom templates for brainstorming in a flash.


All these tools are available for all plans, Open your wireframepro app and explore now.


D101332356bc259ce587398d7e9e2de45.png








Wireframe UI kit for Shopify Polaris

Update
Wireframe UI kit for Shopify Polaris

Polaris is the design system for the Shopify admin. It includes components, icons and styles for developing high-quality merchant experiences in Shopify.


We are pleased to bring the power of brainstorming to ideate ecommerce apps with Shopify Polaris UI kit. This UI kit brings in over 140 components in 12 categories including buttons, form elements, cards, avatars, badges, modals and more...


To know more and install check here


M165e8fc27daecdf4d49b703b813f0cee1694004967250.png


Introducing "Illustration packs" in MockFlow WireframePro

Major
Introducing "Illustration packs" in MockFlow WireframePro

Wireframe means fast visual representation of UI. So it makes brainstorming and iterating your UI blueprint as easy as possible.


Unlike other UI tools like Figma, XD or Sketch, MockFlow focuses on speed and not visual perfection. Which is why UI brainstormed in MockFlow is quicker as it provides numerous UI kits, pre-built components like tables, icon packs, image libraries and integrations at the click of a button.


Today's update adds one more to its arsenal in its quest to make wireframing more fast and fun. Introducing "Illustration packs", we all know majority of today's websites and apps include various illustrations as part of their UI to easily communicate their message to users. Illustration are very useful since they transcend across languages and using it in the wireframing stage increases the visual appeal of your idea.


Instead of scouting the web and finding an illustration , then uploading it to MockFlow. Now with illustration packs save all these extra steps. MockFlow already offers 5 different illustrations packs with over 1000 vectors to choose from. It does not end there, but in each illustration you can customize its color theme as per your design brand.


MockFlow Illustration Packs


In the near future, you can expect more new illustration packs and also an exclusive library of MIT licensed vector illustrations designed by our MockFlow Team.


Editable SVG vectors

Screenshot 2023-08-29 at 12.02.04 PM.png


On a additional note, you can also now edit colors of any SVG or vector illustration uploaded to MockFlow directly. This is useful if you have your own illustrations or downloaded from any licensed store.


Illustrations packs are available free of cost for all plans include "Basic".




Wireframe UI kit for Microsoft Fluent 2 Design System

Update
Wireframe UI kit for Microsoft Fluent 2 Design System

Microsoft Fluent is a design system developed by Microsoft that aims to create a consistent and cohesive user experience across all Microsoft products and platforms. Fluent Design System 2, also known as Fluent 2, is an update and expansion of the original Fluent Design System.


Fluent 2 builds upon the principles and concepts of the original Fluent Design System, which include depth, motion, material, light, and scale. It introduces new design elements and enhancements to provide a more immersive and engaging user experience.


MockFlow has updated its Fluent wireframe UI kit for version 2 with 111 pre-built components spread over 12 categories. Now brainstorm your UI ideas for MS Fluent 2 at breakneck speed with the easy of MockFlow editor.


For more details visit this link - UI kit


Example wireframe created using this MS Fluent 2 wireframe kit

Example wireframe created using this MS Fluent 2 wireframe kit


New layout for SiteMap app - "PageFrame"

Update
New layout for SiteMap app - "PageFrame"

A new layout called 'PageFrame' theme has been added for SiteMap app. As the name indicates each node in the sitemap is encompassed in a browser frame like box. Like other themes in SiteMap app, each node can be customized for colors, thumbnails and node sections.


For those new to SiteMap in MockFlow, it offers a superfast way to plan and structure sitemap structures for your website. Also entire sitemaps can be generated with AI using just a prompt.


Here is the complete list of themes now available for SiteMap


Screenshot 2023-08-18 at 10.19.07 AM.png




New UI Pack for brainstorming AI based software

Improvement
New UI Pack for brainstorming AI based software

With the advent of OpenAI and LLM, AI based features and tools are the new trends in industry. Almost every new product or updates of an existing product has something do with AI. It goes without saying, AI makes software easier to use, saves time and reduces steps. In most cases, AI features starts with just a prompt or message, which its language model processes it just like humans and gives the required output.


AI is not just text based, it does a variety of tasks like generating images, creating sitemaps, writes code and does much more. To do an AI based user interface, it is important to understand the nature of the problem it solves. AI can be part of anything such as a search engine, chat bot, icon generator...


It is important to brainstorm the interface on how users interact with your AI based functionality. MockFlow now offers an exclusive UI pack with ready-components for many AI based scenarios that you would require in your application.


With over 50+ components and templates designed for creating AI tools whether in web or mobile, the new AI pack along with MockFlow will help you visualize iteratively just like a whiteboard.




Generate sitemaps for any website type with AI

New
Generate sitemaps for any website type with AI

MockFlow helps website planning with its SiteMap tool. Using the SiteMap app, managers can easily make an overall outline of their website's structure and also add in-depth details to each page in the structure with status, description, attachments and comments.


Today's update helps you can create an entire sitemap structure for your upcoming website with just a prompt. Simply enter the type of website for which the sitemap has to be created, the rest is done using our AI.


Examples include: Ecommerce website, Business site, Crypto portal and virtually for anything you need sitemap structure.


Screenshot 2023-08-04 at 4.00.47 PM.png


Steps to use


  1. In the dashboard's create menu, click on the "SiteMap" button
  2. Select "Create with AI"
  3. Enter prompt with your website type
  4. That's it your visual sitemap structure is generated


Once the sitemap is generated, you can share, collaborate and edit with your team members. Save time for better planning with this new feature.

Launching our next iteration of MockFlow Dashboard

New
Launching our next iteration of MockFlow Dashboard

Two years ago after we first released design spaces for MockFlow, it has become the de-facto way for many businesses to organize all their cloud based UI design content into spaces. Our customers used design spaces in many ways than we imagined - Space for organizing client design, Space for branding, Space for brainstorming UI and more like this. Spaces are not just for MockFlow content, it brings design related files such as images, videos, pdf and cloud based projects like Figma, Miro, Prezi - all put together in a single workspace making them logically related to each other.


Today we are happy to release the next major iteration of MockFlow Dashboard including spaces. Let us go for a tour of the key points in this release:


MockFlow Home


MockFlow New Dashboard


On opening MockFlow, you will now be taken to a default start screen. Here you can use the new "Create" bar for creating your MockFlow related projects like wireframing, styleguide, user testing. Also the home screen lists the last 10 projects you have opened.


New SideBar


New SideBar - MockFlow Dashboard


Instead of the grid based layout used in the previous dashboard, this new version provides an easy to navigate sidebar. With the sidebar, the spaces are always listed and makes switching between spaces simple and fast. And all common operations like account settings, notifications, search are also part of this new sidebar which is always available no matter in which space you are.


Simplified Space layout


MockFlow Dashboard Layout


We know how much our customers love their spaces. This iteration only makes spaces more simple, sleek and accessible with few subtle changes. The header height is reduced to a single horizontal section. A new "Create" bar that was seen in the home screen continues here. Now each design space is divided into only two sections - Projects and Files for easier understanding. Also there are numerous minor design updates that has gone into the new space layout.


Overall the new MockFlow dashboard brings a fresh perspective for UI design with its new "Create" bar, home screen and improved space.






Now create BYOC components in MockFlow with AI

Update
Now create BYOC components in MockFlow with AI

In MockFlow, BYOC stands for "Bring Your Own Components." It is a feature that allows users to create and add their own custom design components using CSS and HTML to the MockFlow library, which they can then reuse in their designs.


These custom components can then be easily dragged and dropped into their wireframe projects, saving time and effort in the design process.


BYOC is particularly useful for design teams who need to maintain consistency across their projects or for individuals who have specific design requirements that are not met by the default components available in MockFlow.


Now with AI power, users can generate BYOC components with just a prompt.


Example Prompts:

  • A curved blue button with white text
  • Hero section with title and description
  • A modal box with action buttons


The best part is any component generated with AI can be customised with code to make it perfect.


AI + BYOC is a perfect combination to save time on design projects that requires deep customization without much effort.


It is available now in both on our online and desktop editors. Try now!


Introducing new UI style for creating wireframes with "Block UI pack"

Improvement
Introducing new UI style for creating wireframes with "Block UI pack"

Wireframes are all about representation like how prototyping is for interactions. MockFlow already provides many ways with which you can wireframe your UI ideas


  • Outline style with straight lines and raw components
  • Hi-fidelity with images and css based styling
  • Sketchy UI pack like drawing in a real paper or whiteboard
  • New! Block style - inbetween outline and sketchy


Each has its own use cases and it is important to choose the right style based on the intent of the design. Today's update brings Block based styling of components to create an informal UI design that stands between lo-fi and hi-fi.


preview.png


It is represented by thick shadows, vivid use of colors within a small palette. It is really expressive in its own way. If you find sketchy wireframes are too unofficial or outline very basic, then the block style will suit you just right.


Here is a representation of Gmail UI using the block style UI pack. It lays stress to the UI elements and gives a better basic level picture of its components.


M4077846a2d632838cf1ead537003b7551681299840920.png



For more information and installing Block Style UI for your wireframe editor, click here.

OTT UI packs for ideating web and mobile based media apps

New
OTT UI packs for ideating web and mobile based media apps

We all know there is a sudden surge in OTT platforms (Over-the-top media service) delivering various forms of media content with a direct-to-customer approach. It is not just the big players like Netflix or Disney but many creators, agencies and small media companies start their own media platforms for better revenue share and to increase their brand equity.


Creating an OTT platform involves a multi-layered approach. In addition to a robust backend infrastructure, the user experience and UI are the most important factors to consider to increase viewership by delivering a satisfying experience. It also depends upon the target market reached like median age of the viewers, region and more such factors.


Designing and iterating UI for OTT can easily turn into an expensive affair if not properly brainstormed. It is important to make things clear in the idea stage of the application itself. Today, we are providing exclusive UI packs with hundreds of components to ideate both web and mobile for OTT.


It not only includes specific components like video player, playlists, video description but also pre-made screens that are usually part of any OTT service like a payment screen, search, homescreen etc..


Install the OTT packs from MockStore today and start ideating your media apps before it is actually developed. Save effort, time and budget.


Link to OTT web pack

Link to OTT mobile pack



New UI pack for brainstorming apps with AWS Amplify framework

New
New UI pack for brainstorming apps with AWS Amplify framework

AWS Amplify is a full-stack framework for creating web and mobile apps with less time. It provides dozens of react based pixel-perfect UI components for faster development. It is important to brainstorm AWS amplify with its original look and feel to make sure the developers get the correct idea and iterate faster to the finished design. The new UI pack for AWS Amplify lets you do exactly that by providing nearly 100 components and templates from the latest version of this framework.


For more details and usage visit MockStore.

Use the new "Surprise Me!" button in UI builders to create a random page

Improvement
Use the new "Surprise Me!" button in UI builders to create a random page

Running out ideas for UI designs?. Use the new "Surprise Me!" button inside all our UI builders - BootstrapTailwind and AMP builders to create a random page for you. This page can be exported to actual code or saved as editable wireframe design for further mockup. Every time the function produces a unique design based on the available UI blocks inside the builder. Let our UI builders ideate for you.

Released new UI pack for brainstorming Slack based apps

New
Released new UI pack for brainstorming Slack based apps

Building apps for the popular team communication software - Slack has become increasingly popular. Since Slack provides the required UI components, built-in sharing and communication, the developer only has to worry about a good use case to integrate their app inside Slack.


At the same time, iterating UI for the Slack app is not a smooth process as it requires lot of initial setup and a backend server. Our new UI pack for Slack in MockFlow helps you to brainstorm and iterate the frontend of your Slack app idea before you actually start developing it , saving time and effort.


Click here for the Slack UI Pack

New Powerup: Replace your wireframe placeholders with real pics using AI

New
New Powerup: Replace your wireframe placeholders with real pics using AI

When kickstarting UI design for your software or website, wireframe is the first stage of the process. Wireframes has to be done really quick and should be open to iterations. But it is also important for the creator to make an impact at the wireframe stage itself inorder to take it forward. But filling your wireframes with dummy text or image placeholders isn't going to create great opinions of your design.


Here comes our new powerup "AI Image", it leverages artificial intelligence to quickly create an image using just text. All you need to do is just describe what you want in a few words and the AI image powerup delivers a picture that is closer to your imagination. And voila simply replace your placeholders in wireframe.


Simply say "Laptop on a table with window in background" and click generate image. As easy as it gets.


In the end, deliver a wireframe that is closer to the real UI design without spending time searching for images around the web or creating from scratch.


AI Image powerup is strategically placed at a number of places inside the wireframe editor like in image component's settings panel and option to add image in image manager.


AI image along with AI text powerup makes wireframing in MockFlow fun, fast and exciting.


Note: There are AI credit limits for both powerups, for more details visit pricing page.


Install now

Check out our new Video Promo about MockFlow 🎉

New

We just released a short and exhilarating video on what is MockFlow and how it transforms product design. Check it out.



Updated desktop UI packs - Windows 11 and MacOS 13 "Ventura"

New

We are pleased to announce updated UI packs in MockStore for popular desktop app frameworks - Windows and MacOS.


macOS 13 Ventura UI Kit


Now wireframing apps for the latest MacOS design language has got easier with the "Ventura" UI pack. It provides more than 100 components covering all important UI areas that includes fundamental elements, notification UI, wallpapers, icons, memojis and many ready made templates like Finder, Settings panel etc. Brainstorm your next application for the latest generation of MacOS with MockFlow.


For installation and usage, visit store.


Windows 11 UI Kit


Fluent Design is a revamp of Microsoft Design language currently used for creating native apps for Windows 11. The new UI pack updated for Fluent language features several pre-built components like start menu, explorer, wallpapers, toolbar, new design elements and also Windows based placeholders.


For more details and screenshots, visit store