Product updates

Design Spaces in MockFlow serve as a brainstorming hub where businesses can ideate, create, collaborate, and evaluate their next big software ideas, design updates, client projects, and more. It’s more than just a folder for grouping projects; it's a dynamic space where projects, team members, and ideas come together. Today, alongside space analytics, we’re excited to introduce "Space Activities.".

With Space Activities, members can easily track key actions within the space and see when they occurred. They can also quickly search for specific activities— for instance, searching "delete" will display all deletion actions, whether it’s an image, project, or page removal. Only essential activities relevant to the space are recorded, ensuring members have access to vital updates.

Benefits of space activity

1. Overall activity viewer of all projects inside a space
2. Track activity by member
3. Relate between member responsibilities and activities done
4. Search activities or filter by type
5. Visual timeline that also displays related thumbnails

Note: This feature along with Space Analytics is only available for Business and Enterprise plan users.

MockFlow now offers real-time call alerts for its prime in-design video meetings feature. Call alerts helps your team stay on top of their design work without missing important audio or video meetings! Our new "Call Alerts" feature sends real-time notifications during in-design sessions. It lets your team focus on brainstorming while staying connected with project members.

How it works?

When brainstorming a new UI idea, or ideating a process flowchart or designing product assets with your team, it is important to not just collaborate in real-time but also communicate in sync. For this MockFlow already offers the ability to conduct audio or video meetings inside its editor without any third-party software. At the same time, when you start a meeting, it is important to bring your online project members together by alerting them.

By clicking the 'Headphones' icon in the top toolbar, anybody in your team can now kickstart a design meeting or a brainstorming session face-to-face. On clicking start, it sends a call like alert to other project members to either accept the meeting or decline just like your phone.

With design meetings + call alerts, MockFlow brings your remote team closer than before for brainstorming your next 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.

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

1. Outline style with straight lines and raw components
2. Hi-fidelity with images and css based styling
3. Sketchy UI pack like drawing in a real paper or whiteboard
4. 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.

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.

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

Running out ideas for UI designs?. Use the new "Surprise Me!" button inside all our UI builders - Bootstrap, Tailwind 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.

We are super excited to release a new feature for adding custom css code to wireframe components. This change brings endless possibilities with which you can style your wireframes just like your real website or app.

Simply type-in or copy-paste your css code to create a text gradient, 3D transform, custom shadow or any style that CSS supports. Custom CSS code is faster than GUI based settings panel and is highly configurable.

In this release, the following components include support for CSS - rectangle, button, image, label and text. Support for more components is coming soon.

.TextGradientCSS {

}

Benefits

1. Designers will find it faster to design with direct CSS code
2. Ability to design components with styles not found in settings panel
3. Developers can export CSS code using specs mode for faster handoff
4. CSS code can be added to existing wireframes
5. This feature is component based, so it is saved with components and UI packs

Note: Custom CSS code is a paid only feature not available to Basic plan. Upgrade to any paid plan for access.

The simple chart components that are currently available in MockFlow provide quick and basic visualization. However they have no labels and legends. And they are also limited in styling and types.

Today's update provides a complete set of new chart components with advanced capabilities and styling. Also they come in two different styles - regular and sketchy.

Both styles include:

1. Easy coloring
2. Grid option
3. Legends
4. Labels
5. Sketchy properties
6. Font styling

All the new charts, retain the same ease of entering data of the simple charts.

Now wireframe your dashboards and analytics UI layouts faster with the new chart components. And choose your chart style whether outline, high-fidelity or hand-drawn.

Included charts:

1. Horizontal bar chart
2. Vertical bar chart
3. Area chart
4. Line chart
5. Pie chart
6. Radar chart
7. Scatter chart
8. Bubble chart

Here is sample dashboard with sketchy styled charts. View here.

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.