MockFlow updates
MockFlow updates
mockflow.com

Launching Wizard for your UI ideas

 

New

  

D3ec2a088867736a59c4e893284a47f6d.png

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!

Introducing prevjs - super easy static builder from MockFlow

 

New

  

prevjsbanner.png

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.

Dac46139f7031c079bbc4e159c63f4514.png

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.

Redesigned MockStore - your goto place for wireframe packs, templates and powerups

 

New

  

mockstore4.png

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.

Screenshot 2022-11-28 at 12.57.41 PM.png

Powerups are now standalone in design space

 

New

  

nn.png

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.

UI Pack for Tailwind v3 released with over 150 wireframe components

 

New

  

Mf374100e9ea8855e75b640211778008d1662598155720.jpeg

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.

Support for new design embeds - Office365, Wistia, Airtable...

 

New

  

fitness.png

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:

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.

New: A unified sidebar for all your product design needs

 

New

  

nsidebar.png

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.

Placeholder UI packs for Images and Logos are now available

 

New

  

new.png

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!

UI Pack for iPadOS 16 has been released

 

New

  

M2d676e90f637be8ea5fe1880e91be7e41657248077301.jpeg

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.

Introducing Component level themes in MockFlow

 

New

  

component-level.png

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.