Wondershare’s Mockitt is Subtly Brilliant

The nice folks over at Wondershare reached out and asked me to try out their UI mockup software, Mockitt, and write about my experience. I was already planning a series redesigning popular apps, so it made sense to combine the two projects and learn Mockitt by using it for something I intended to publish anyway. When I started using design software, I used the Windows 10 Beta of Adobe XD. After a few months I switched to Figma, which has been my main design software since. Most software uses the same basic project structure and has one or two unique features. Between my long history with Figma and the similarities between tools, I wasn’t expecting my workflow to change so much using Mockitt. It really subverted my expectations in ways I didn’t fully appreciate until about halfway through this project. At first blush, Mockitt seemed like a strange collection of choices I didn’t think were particularly useful to me. In hindsight I wasn’t judging it on its own merits, but by how it fell in line with the structural choices I had come to take for granted in other design software. About halfway through these redesigns, it clicked. Mockitt is different in some really nuanced and thoughtful ways. There are a couple of oversights (like proper support for importing vectors), but Mockitt organizes itself in ways that subconsciously push you to be more organized and laser focused.

(Just as a note, this reflects my experience and my workflow. I’m a college student designing concept phones, concept operating systems, and, in this case, concept app redesigns. My work is heavily focused on custom design systems made from scratch. Your experience will probably be a little different. But there’s a good chance it’ll be even better than mine!)

I’ll start with the first difference between Mockitt and other mockup platforms: project structure. Most UI design software uses an open project space, with “artboards” all simultaneously visible and organized spatially. Mockitt does things a bit differently, using a more Visual Studio Code inspired structure. Instead of artboards, you have “screens”. These are self-explanatory, but they represent the different pages or screens you’d encounter in a UI (much like artboards). Instead of having all your screens laid out in a project space, Mockitt focuses in on the selected screen. While it means you can’t easily reference other screens or have free-floating components all over the place (a mess I’d come to accept in my projects), I found it transformative for my workflow. My screen creation was much more focused than with other software, and I found myself fiddling around with variations far less often. Though my project spaces are usually visually cluttered, I like to keep everything organizationally labelled and sectioned off. Mockitt’s project structure still let me do this with screen folders. For this project, I had a folder for each app with screens in each for each, well, screen! They say restrictions can boost creativity, and I felt that while using Mockitt. Even though the project structure was a bit more linear and templated, I felt so much more organized by the end. Figma’s very open-ended structure lets me create extremely complicated nested groupings and artboards, separating different sub-projects within the overarching project via the “pages” feature. In Mockitt, I felt much more compelled to delete what I didn’t need and keep everything organizationally simple and clean.

Mockitt has an interesting “widgets” feature. Widgets are like components in other programs. They let you reuse layer groups across designs, without constantly copying and pasting. All you must do to make a widget is select a few related layers, group them together (ctrl + g), and select “add to my widget” on the right-click menu. This saves your group in a side-menu to be reused in any project. It’s like components in other programs, but without forcing the copies to adapt to changes made to the original. Widgets can be made into master widgets though, bringing that dependency in. This lets you automatically update all copies of the widget at the same time. I like that Mockitt allows that choice. Sometimes I want reusable widgets without having to remember to detach every instance I want to make independent. I found this feature useful for carving up my designs into segments, making everything a bit more organized and portable across screens. Since this project focused on a design system, with a similar layout across apps, the widget feature was great for establishing basic elements and reusing them across designs. I specifically used the “my widgets” menu for app backgrounds, navigation bars, and the system gesture bar. I loved that I was able to just drag, drop, and edit when I started a new screen. The editing UI for widgets is nice too! Instead of keeping all the distracting layers I’m not working on visible, Mockitt switches over into a new “widget” workspace, free from clutter. Instead of seeing layer after layer in the sidebar, you only see the layers in your selected widget. It’s an interesting difference from other programs, and it makes Mockitt feel more focused on individual components. Just like the overall project structure, it enforced just enough of a constraint onto my workflow to direct my attention to the widget at hand, instead of wondering around other artboards and making tiny adjustments everywhere.

One of my favorite features of Mockitt is “states”. These let you quickly set up varying layouts, colors, content, and anything else you could possibly want to change for quick switching later. States can be set for widgets or screens, and they can be switched within each other. Once again, the editing UI for states is quite different than other software in ways that encourage simplicity and organization. In other software, you must duplicate the widget of the original state, then you have to make the necessary changes in each duplicate, rename each one, and convert them all back to main components. In Mockitt, you just have to select your widget, click “add widget state”, and edit the widget in front of you. When you want to change states, just open the states menu and switch between them. I really love the simplicity in this implementation because it does wonders for Mockitt’s RAM usage! Figma requires all states to have original, template components existing somewhere in the project to be accessible, and the state is deleted along with the original. This means every state you’ll use must be loaded into memory with the rest of your project, ballooning file sizes. Figma just chows down on my laptop’s respectable 16GB of RAM. Mockitt lets you simplify the visible, loaded-in widgets to only what you currently need in the moment. It’s a fabulous change that de-clutters projects by design. Since I already had widgets for app navigation bars, pop-up menus, backgrounds, and everything else common between my app redesigns, I made light and dark mode states for all of them. I’d hit “add widget state”, change shape fills and strokes to the darker colors I was using, and change the text to white. There was a sense of continuity in the creation of dark mode states that felt more natural than implementations in other software. I was creating a widget and then changing it into a different version, not tying together different original widgets. After I’d add dark mode states for all the widgets, I’d do the same for each screen. This was much simpler since I just had to click in a drop-down menu for each widget.

Another neat feature Mockitt adds is the “library”. First, I’ll talk about the “mine” section of the library. The library is an integrated cloud-storage space for images and widgets. I tend to create folders for reference images, profile pictures, content pictures, and icons for current projects. This is a nice, integrated replacement for that. Widgets are automatically brought over from “my widgets” and can be organized in folders. You can even create a new widget not tied to a project directly in the library menu. You’re going to use the library more for images, which you can also organize with tags. I admittedly didn’t use the library for much aside from my standard widgets, but I thought of a use in hindsight that would have helped me quite a bit: custom icon libraries. Mockitt doesn’t seem to support external vector icons now. There’s a tool that mitigates the problems this creates quite a bit, but I’ll get to that in a minute. To retain the brand-specific icons in this project, I had to use some external icons. I had to use them as PNGs instead of vectors, and I was constantly copying and pasting. In hindsight, I should have uploaded all the icons to the library, made folders for each of the apps, and made a few icon widgets of varied sizes (you can swap image fills from the library super easily). This would have made my workflow for my Instagram and Twitter redesigns so much simpler, and I’m kicking myself for not thinking of it sooner!

This last feature is one of the more obviously compelling parts of Mockitt: the built-in library. Beside the “mine” tab at the top of the library is a “built-in” tab containing wonderful drag-and-drop components. First, let’s talk built-in widgets. Mockitt has widgets for iOS, Android, Windows 10, and “Element”. These are pre-maid keyboards, dropdown menus, switches, radio buttons, navbars, title bars, calendar pickers, notifications, permission prompts, just about any platform-specific UI element you could need. And it’s as easy as dragging a widget onto a screen! My work tends to be design-system focused, so I didn’t really use these, but my heart skipped a beat when I first opened the menu. I can see this being absolutely transformative for designers working within platform-specific design languages. I definitely used the built-in library for icons, though. Here, you’ve got extensive icon collections from Font Awesome 5, Material Design, Ant Icon (fill and outline versions), and a custom Mockitt collection. Just like the widget collections, these can just be dragged and dropped onto a screen or widget, they’re scalable vectors, you can change the fill, stroke, shadow, etc., and they can be easily swapped out for one another. I added my Google Meet and Stadia redesigns last minute just to use this feature, and it made everything so easy! In Figma, I have a whole project file filled with Material Design icons, meaning I have to switch between projects, use a plugin to search for the right icon, and copy and paste them into the project I’m actually working on. It’s a pain to use and was so much worse to set up. Mockitt made this ridiculously easy. My Google Meet and Stadia redesigns took about 30 minutes each from the initial idea, to gathering all the reference screenshots and images, to having a complete mockup with light and dark modes. I couldn’t believe how quickly I could whip something up with the built-in library and the focus Mockitt enables.

Mockitt highlights how the software we work with shapes our work, and how seemingly inconsequential changes can subconsciously guide us into working faster and being much more organized. This idea is key to my work, optimizing systems to shape the way we work for the better. Mockitt isn’t as open-ended as other design software, but it can shape your workflow to be laser-focused, and lightning-fast! The structure of Mockitt optimizes use for organized, tidy, and simple projects. I came out of this project quite impressed and very excited to see where Mockitt goes next! Check out Mockitt and get a 5-day free trial of Premium!