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!

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.

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.

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

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.

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.

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

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

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

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

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.

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

AI is the buzzword nowadays, Thanks to innovations like OpenAI, now generating content is fast and more meaningful. Leveraging these modals, the new AI Text powerup for MockFlow, can now generate text for your wireframes with just a prompt.

Simply say "Write a tagline for our shoe store" and AI will generate a fancy headline for your UI design. From simple taglines to long descriptions, the AI text powerup will help you speed up your wireframe process.

Since wireframes are the pre-cursor to your actual UI designs, it is important that wireframes have real text as the design arrives to the expected level. At MockFlow we value saving time, Whether it is kickstarting your new wireframe with wizards, or generating text content in a click.

Note: AI as good as it sounds, it also incurs costs. So we have a generous credit system called "AI credits" to use this powerup. There are 20 AI credits per user per day for Wireframing plan. And 30 AI credits per user per day for ProductDesign. The credits reset each day and cannot be shared or carried forward.

For more details visit store.

MockFlow's wireframe editor is made for project managers, program managers, developers who want to bring out their UI ideas in a digital way without a learning curve. Which is why when compared to other tools, users find MockFlow simple to use, fun and having an hands-on approach to drawing UI.

Today's release makes it one step more easy with the introduction of the new "Wireframe Wizard". With this wizard, you don't even require an idea to start with, as you can simply build your page with pre-created UI blocks just like building a lego. And it does not end here, there are three types of wizards to choose from - Bootstrap styling, Tailwind UI and AMP email layouts.

Simply select the wizard, add the blocks for your page, and hit 'Save as wireframe' button. You can always edit and customize the saved pages with the wireframe editor.

Wireframe Wizard is free for all users. Now create a wireframe in seconds and share your ideas.

Usage

Wizard can be accessed when creating a new wireframe project from your design space. It is also available from the top menu inside the wireframe editor or pages sidebar.

Happy Wireframing!

When we set out to build a static website for one of our sub-sites with html pages, our first step was to select a static site generator from the numerous options mentioned here - https://jamstack.org/generators/ and when we researched this list, the popular ones like next.js and gatsby used React library as their underlying framework for building static sites. And some generators were specific for a particular purpose like blog, documentation site. and a few others had missing features or were not maintained.

After trying most of the tools mentioned above, we found NextJS and Gatsby better tools for this purpose. However it comes with certain catches. Here are our observations:

• Both started as simple static website generators but now started moving into the app realm. Which makes them powerful but also overwhelming for new users.

• Based on React Framework. This can be good or bad. While R eact has its benefits, You do not write code inside these libraries like a regular website developer but like an app developer. Which means you can't simple use css classes or easily insert regular JS libraries like jquery.

• Focuses on the core. What we mean is that they relegate control like hosting and deploying and even image conversion to third party libraries. For example finding a capable webp conversion for our nextjs site took a lot of time to figure out as it does not work out-of-box.

• It feels it is more directed towards application developers who want to create websites which makes it more complicated and increased learning curve for new users.

Although everything is not sour, they are fantastic tools and have a huge community of developers and users. Would definitely be a choice for react developers looking to develop sites and apps.

Now enters PrevJS

The start

Based on the above facts, we decided to create a slim static-site generator that focuses only on creating websites. Not apps, not fancy frameworks, just good old website development that everybody knows. As like any other static site generator, a good templating library is important. For this instead of creating our own library from scratch, we narrowed down on EJS (Embedded Javascript Templates). Which is great and simple to use. As the name suggests it allows to mix javascript with html to creating dynamic data within a page. There is no learning overhead as long the developer knows basic html and vanilla js.

Indeed PrevJS + EJS became the perfect union for creating static sites.

Focus on website

The essential parts of a website development cycle is Create, Build and Deploy. While the main trait of PrevJS is to be easy as possible compared to other generators. It also wants to be a complete tool from development to deployment with focus on websites. This focus makes all the SEO features like sitemap generation, webp conversion, page pre-fetch, live preview, search index available out of box.

With MockFlow

The Bootstrap website builder in MockFlow allows you to create website templates by simply drag-n-dropping blocks from a catalog of different website parts. After forming your pages, it can be exported to a prevjs recipe.

Availability

PrevJS is an opensource command like software. More details on how to install and use is available at https://github.com/produle/prevjs

To lean about its features, visit https://prevjs.com

npm install @produle/prevjs -g

Future

We already working on interesting features for PrevJS, built-in search functionality for websites including templates. More deployment options like GCloud and Azure. And a cloud service with features like a/b testing and analytics.

MockStore is the resource hub for all your wireframing needs. Integrated within the editor, it provides easy access to hundreds of UI packs, templates and also add-on tools. Today's release makes MockStore better and more useful. The core part of this release is to enhance the user experience in MockStore to easily discover, find and install for your wireframing at one place.

Re-designed UI/UX

The new theme used in MockStore makes it seemless with rest of the editor. Now UI Packs and Powerups are better organized with categories and templates have larger thumbnails.

Curated Templates

Thanks to the MockFlow community who have contributed thousands of templates to the MockStore over the years. However from today, we have decided to provide high-quality and a curated set of templates for various frameworks brought to you by our in-house design team. It is now available in MockStore.

Powerups in MockFlow help to extend your wireframe ideas onto other stages of product design. Thus, so far to create a Powerup project, it requires an existing or new UI drawing. While this is great for having deeper integration between the wireframing tool and powerups, it might not be required in all cases.

For example, a product manager would want to create a Powerup project like SiteMap or an Agency wants to do a brand guide for their client without attaching it to a Wireframe. Today's update lets you do just that.

Introducing "Standalone Powerups", Now when you create a Powerup project from a design space there is no need to associate it with an existing UI drawing project. Which means each powerup project can be individually created, shared or deleted. Create your own standalone "SiteMap", "StyleGuide", "UX doc", "Personas" and many more projects for your design space.

What it means for us? This basically makes Powerups more powerful as they are now standalone apps. In the near future, you can expect more feature-rich apps for design space to achieve our goal of bringing the entire product design process under one roof.

Get the new UI pack for Tailwind version 3. It comes with over 150 components designed for brainstorming Tailwind based apps and websites. It includes, basic elements, widgets, hero sections, sample screens, avatars, modals, popups and more. It is available in MockStore now for free.

MockFlow's design space is about bringing everything about your software design together in a single unified view, even if you use different services for your product design. Design embeds helps you embed third party projects from other cloud services such as presentations, prototypes, videos, animations, 3D renders and more inside your space.

Today's update brings support for the following new embeds:

• Office 365 - Word, Excel and Powerpoint
• BrightCove - video service
• Wistia - Video service
• WowTo - Product explainer videos
• Airtable - Database and lists
• Arcade - Interactive product demos
• CodePen - Shared code demo snippets

Also with this update, you can set custom thumbnails for your design embeds.

Note: Design embeds is available in all plans of MockFlow including the Free basic plan.

It is known MockFlow offers the best way to manage your product design process with design spaces, by bringing tools, teams and files together. In this release, we have focussed on improving the "add" part of the product design.

Currently inside a design space, there are dedicated dialogs for adding each type of content into a space. Although it serves its purpose, there is no standard styling across the dialogs and it is difficult to access a particular dialog for adding content. With this new release, we are happy to announce the availability of a single "Create" button and a unified sidebar for adding almost anytype of content into a space.

As shown in the picture above, the new create sidebar intuitively lists the actions for easy access. All create actions can be now performed without leaving the sidebar. Whether it is creating new UI drawings, adding new powerups, uploading design files or embedding cloud projects, the sidebar provides everything for your product design process.

At MockFlow our mission is to make UI design fast, fun and easy. In keeping with these lines, we are pleased to announce the release of two new UI packs to address one of the core areas of wireframing which are "Placeholders".

Image placeholders

This UI pack contains commonly used image placeholders for many purposes like profile pic, hero image, grid and more.

Logo placeholders

Thanks to LogoIspum service, this UI pack contains a variety of generic logos in different patterns like monochrome logos, logo text, icons and 3D logo designs.

Hope these UI packs help to visualize your ideas even more faster by spending less time on searching and more time on iterating.

Happy Wireframing!

In follow-up to our iOS 16 UI pack for iPhone, we are pleased to announce the exclusive release of wireframe components for the latest iPad OS. Although the styling is same, there are many layout and interface changes when comparing iPad OS with iPhone.

It comes with nearly hundred components in the following categories:

• Frames
• StatusBar
• Navigation
• Keyboard
• Buttons
• Icons
• Memoji
• Alert
• Form
• Popup
• Widgets
• Tooltips
• Notification elements
• UI Screens

It is now available in MockStore. Install now.

We all know MockFlow offers a huge library of UI packs for almost every UI framework, industry and use case out there. Today's release goes one step further as we introduce component level themes.

What are component level themes?

Themes that are component specific and apply styles only to the selected component. With component level themes, you can easily change its appearance by applying a theme from its list as shown above. Current support includes button, text, shapes, charts and grids.

Benefits of component level themes

• Easy switching of component styles
• Includes popular themes like outline, dark, light, gradient
• Has advanced options like background patterns and complex shadows
• Avoids opening of UI packs for common themes like primary, disabled buttons

In the coming weeks, themes will be supported in more components and also will see in increase in theme options.