Friday, June 25, 2021

How to Make an App Wireframe, Flowchart, Logo, and Prototype with Mockitt

You’re undoubtedly already familiar with design and prototyping tools like Figma, Adobe XD and Sketch; wireframing tools like Balsamiq, Mockflow and Axure; and flowchart tools like Visio, Miro and Lucidchart.

You’re probably using one or more of these applications right now in your UI/UX workflow. And you might also be paying for a couple of these applications individually.

But what if you could have wireframing, designing, prototyping and flowcharting all together, under the same roof, as part of one single package?

a designera designera designer
..you have my attention..

And what if the whole thing was built for collaboration, so you could work cooperatively in real time with your colleagues and clients at any stage of a project?

And what if on top of that, you were given access to a library of over 6,000 ready to use components, widgets, symbols, templates, icons and flowcharts?

At first glance that sounds like a lot to ask, but it is in fact exactly what Wondershare Mockitt, a brand new UI and UX suite, has to offer.

This wide range of functionality and assets in one place, on a unified design platform, is what makes Mockitt one of the most interesting entrances into the UI/UX space in quite some time.

What is Mockitt?

Mockitt is an online design, prototyping, and collaboration platform to empower your UI/UX design journey. It contains three main features:

Prototype

Create wireframes and interactive prototypes with automated animation and exports to PNG / PDF / HTML5 / Android APK.

Design

Vector graphics editing with booleans, masks, artboards, layout constraints and CSS / iOS / Android code generation.

Flowchart

Flowchart and diagram creation, and the extra cool thing is you can import prototype screens and flowchart them together to help with planning.

Let’s Create Something with Mockitt

There’s way too much across three whole apps to cover every single feature and function so instead what were going to do is make something, using all three apps, that gives us a look at some of the coolest parts of Mockitt.

We’re going to wireframe three screens of this bulk image adjustment web app in Prototype:

Then chart the progression between screens in Flowchart:

Make a logo in Design:

Drop the logo into the prototype, then spice it up with colors, ready made components, transitions and animations:

Let’s go!

How to Make a Wireframe in Mockitt

Everything in this tutorial can be done with the free trial of Mockitt, so head over and grab yourself an account.

Set up New Prototype File

Once you’re signed in create a new Prototype file by hovering over the big blue + button like so:

start prototypestart prototypestart prototype

Choose the iPhone size option from the disfigure box that pops up:

choose iphone size documentchoose iphone size documentchoose iphone size document

Choose the Template vertical tab on the left, then the horizontal tab labeled Basic. Under that tab you’ll find pretty much everything you need for wireframing. We’re going to start by dragging in an image placeholder that will represent the logo.

image placeholerimage placeholerimage placeholer

Once the image placeholder is on the canvas set the width and height to 150. Then press the vertical center and horizontal center buttons to align the image:

align imagealign imagealign image

Then drag in a button element:

drag in button elementdrag in button elementdrag in button element

This first screen is going to be the start screen, so double-click the button text and change it to read “Start”:

button text reads startbutton text reads startbutton text reads start

That’s all we need for first screen’s wireframe.

Before we move on, choose the Screen vertical tab, double click the current screen’s name and change it to “Start”:

rename screenrename screenrename screen

We don’t need the default second screen so delete that, as pictured:

delete second default screendelete second default screendelete second default screen

Duplicate the “Start” screen:

duplicate start screenduplicate start screenduplicate start screen

Name the new duplicated screen “Login”. In this screen move the logo up to make some space then drag in two text input fields:

login screenlogin screenlogin screen

Adjust the fields to be a little wider and higher than they are by default and edit the labels in each to “Username” and “Password”. Also change the button label to “Login”:

change button labelschange button labelschange button labels

We’re about to use the text tool. You can find it in the top left of the interface:

text tooltext tooltext tool

Use the text tool to add some text that reads “Or sign in with:”. Then add two smaller images below the text, (we’ll replace these with social sign in icons later):

or sign in withor sign in withor sign in with

Duplicate the original “Start” page again, and name the new page “Home”. Arrange the screen into the  wireframe layout pictured below by doing the following:

  • Move the logo up and shrink it
  • Move the button down and change the label to read “GO”
  • Place a row of three images - these represent the images that will be bulk processed by the app user
  • Create two image adjustment modifier controls using text and the Placeholder object from the Basics tab

You might also want to give your web app a custom name, which you can do in the area pointed to by green arrows in the image below:

give web app namegive web app namegive web app name

That’s our wireframe done!

How to Create a Screen Progression Flowchart in Mockitt

Now let’s pull the wireframe into Flowchart so we can map how progression between screens will work. If our imaginary app was being made for an imaginary client, we could use this flowchart to consult with them at this stage.

Create New Flowchart Document

 Back in the Mockitt dashboard create a new Flowchart document:

create flowchart doccreate flowchart doccreate flowchart doc

Once in the document, click the Import Prototype button at the bottom of the left toolbar:

import prototypeimport prototypeimport prototype

Select your wireframe document:

select wireframe docselect wireframe docselect wireframe doc

Check the Select all pages box, then click Import in the bottom right corner:

select all pagesselect all pagesselect all pages

You’ll then see all your wireframe screens, laid out neatly for you:

.all wireframe screensall wireframe screensall wireframe screens

To make sure the flowchart elements stand out from the monochrome wireframe, click the theme button near the top right of the interface and choose the theme pictured below:

choose themechoose themechoose theme

Now, use the rectangular shaped Process tool to draw boxes around the parts of the “Start” screen you’ll be able to click to progress, those being the logo and the button:

process toolsprocess toolsprocess tools

Hover over a box and nodes will appear on all four sides. Drag from one of those nodes to the screen on the right in order to make a connecting arrow:

nodes and arrowsnodes and arrowsnodes and arrows

Repeat the process until you end up with a complete screen progression flowchart, like so:

you have a flowchartyou have a flowchartyou have a flowchart

And that’s the flowchart done!

How to Make UI Design with Mockitt

We can assume we’ve consulted with the imaginary client over the flowchart and they’re happy, so let’s move onto adding branding. With Mockitt, we can create professional UI design collaboratively. We’ll begin by making a logo.

Create New Design Document

 Back in the Mockitt dashboard once again, create a new Design document:

new design docnew design docnew design doc

In the new document, select the Artboard tool near the top left of the interface:

artboard toolartboard toolartboard tool

Draw out an artboard, set it to 600 width by 600 high, and give it a dark, desaturated purple fill color:

choose colorchoose colorchoose color

Now click the small arrow to the right of the Rectangle tool, and from the dropdown, select the Ellipse tool:

ellipse toolellipse toolellipse tool

Inside the artboard, draw out a circle at 250 wide by 250 high:

draw circledraw circledraw circle

Then create a second circle, this time 125 wide by 125 high, and align it to the top right of the first circle. Design’s snapping will make it easy for you to  achieve this alignment by just dragging the small circle into the correct location:

draw small circledraw small circledraw small circle

Select both circles by dragging your mouse around them, then in the center of the top toolbar click the Subtract selection boolean operator button:

subtract selectionsubtract selectionsubtract selection

This will cut a piece out of the large circle in the shape of the small circle, giving you this composite shape:

composite shapecomposite shapecomposite shape

Add Color

Now let’s add some color.

Click the gray swatch of the current fill to open up the color tool box. Then select the second small circle along the top of the color tool box to convert the full into a linear gradient. Create a purple to pink gradient by click the stops at either end and setting a color of your choosing. Then grab the handles at each end of the gradient directly in the shape to tweak its angle:

add coloradd coloradd color

Design allows you to add multiple fills to a shape, and layered gradients can create really rich colors. So click the plus button above the current fill to add another, edit the fill, and this time choose the third small circle on the color tool box to seta radial gradient. This time set it to go from cyan to transparent purple, and tweak its angle and position like so:

cyan to purplecyan to purplecyan to purple

Export Logo

We’re ready to export the logo, so first let’s rename our composite shape, as this will determine the name our file exports with. On the left of the interface you’ll see the shape’s current name, “Subtract selection”. Right-click the shape here and choose Rename, then change the name to “logo":

rename logorename logorename logo

In the right sidebar find the Export box, then with the logo shape selected click the + button:

exportexportexport

This creates an export for our logo image, and a preview of how it will look. Go ahead and click the Export logo button and save the logo file to your drive:

save logo file to drivesave logo file to drivesave logo file to drive

Our logo is now ready for use!

Create a Prototype: Add the Logo, Colors and Components

Now let’s add some life to the wireframe and convert it into an interactive prototype. Open up your wireframe document in Prototype and let’s edit it some more.

Add Life to Screens

First, select each screen and in the Setting tab in the right sidebar, change their Screen Background Color to the same dark purple you used when creating the logo:

change colorchange colorchange color

Now let’s replace the logo placeholder with the actual logo. Use the Image tool near the top left of the interface to browse for and add the logo file you just exported:

add logo fileadd logo fileadd logo file

Set it in the same size and location as the logo placeholders on each of the three screens:

replace placeholdersreplace placeholdersreplace placeholders

Next up, let’s replace the buttons with something out of the integrated component library. In the vertical Template tab in the left sidebar, go to Explore, then Component:

componentcomponentcomponent

Select the group of components labeled “Element - Button…”:

select groupselect groupselect group

From within that group, drag in the button that looks like this:

drag this buttondrag this buttondrag this button

Change the button’s text to read “Start”. The button is a little too small by default, and needs to match our branding colors, so also change its Text and Appearance properties to the following:

button text and appearance propertiesbutton text and appearance propertiesbutton text and appearance properties

After positioning the button correctly, and deleting or hiding the placeholder button, your “Start” screen will look like this:

start screenstart screenstart screen

You can then also copy and paste that same button into the other screens, change their labels and reposition them to replace the “Login” and “GO” buttons.

Switching to the “Login” screen, now let’s replace the input fields. From the “iOS 14” group of elements, drag in the “Name Input Dark” component twice and delete / hide the wireframe input forks. Edit the new component white text labels to read “Username” and “Password”, and delete / hide the dark gray text they include:

replace input fieldsreplace input fieldsreplace input fields

And now the last task for the “Login” screen is to add the social login icons.

Back out of the Components area in the left sidebar and instead select the Icon area:

social iconssocial iconssocial icons

Once there search for “google”, then drag and drop in the icon of your choosing:

google icongoogle icongoogle icon

Once added, change the color of the icon to hot pink, and set its size and location to match the placeholder image. Repeat the process for the second icon, searching instead for “apple”. Change the text above to white, hide the placeholders from the wireframe, and your “Login“ screen will look like this:

login screen with iconslogin screen with iconslogin screen with icons

Now let’s finish up our “Home” screen. Go back into the Component library and find the “Element- Upload…” group:

component librarycomponent librarycomponent library

Drag in the “Upload multiple i…” group, and use it to replace the rows of three images from the wireframe:

upload multipleupload multipleupload multiple

In the Component library, find the “Element - InputN…” group:

inputNinputNinputN

From inside that group, drag in two of the “Inputnumber-def…” components, replacing the image adjustment modifier controls from the wireframe. Then set each of their numbers to something different, and change the label text for each modifier to white:

label textlabel textlabel text

Your completed “Home” page should now look like this:

home pagehome pagehome page

Our design and branding is all in place, now let’s make this act like a real prototype by adding screen transitions and animations.

How to Add Screen Transitions and Animations

To make an on screen element trigger a transition to another screen, select it and you will see a node appear on it with a gray lightning symbol. Just click and drag from that node to the page name you want to switch to.

In this case we’ll begin on the “Start” screen, by selecting the “Start” button and dragging from its node to the login page:

drag node to pagedrag node to pagedrag node to page

A line between the two will appear to show a connection has been made: 

line between two pagesline between two pagesline between two pages

To define exactly what happens when this button is clicked, go to the Event tab in the right sidebar and configure it as pictured:

event tabevent tabevent tab

Let’s also add a little style to this page by adding some entry animations to the elements. Select the logo, and at the bottom of the right sidebar enter these animation settings:

animation settingsanimation settingsanimation settings

Then select the “Start” button and enter these animation settings:

animations settings for start buttonanimations settings for start buttonanimations settings for start button

Now let’s see how everything looks by clicking the “Preview” button near the top right of the interface:

preview buttonpreview buttonpreview button

A phone preview will open and you’ll see your logo roll in, then your button fade in shortly after. Click the “Start” button and the screen will switch to the “Login” screen.

click start buttonclick start buttonclick start button

Let’s make the transition to the “Login” screen a little more interesting.

Exit the preview, then switch to the “Login” screen for editing. Click the little floating menu near the right sidebar that looks like a target and you’ll see the Screen State box appear. At the top right of that box click the Copy button. With “State 1” selected, delete everything except the logo, then center the logo vertically and horizontally. In the Event tab, add an event and configure it as seen below:

add eventadd eventadd event

When previewed, the Magic Move transition will automatically animate the position of the logo up to the top of the screen, while also revealing the rest of the elements that form the “Login” screen.

And because the logo in “State 1” is in the same position as the logo on the “Start” screen, when the page changes from ”Start“ to “Login” the logo movement will look like one continuous animation.

Add More Animation!

Speaking of animation, let’s round out the “Login” screen by adding staggered fade in animations to the rest of the elements.

Select the first input fields and set its Animation properties as follows:

animation propertiesanimation propertiesanimation properties

Select each subsequent element and give it the same animation, but add 100ms to its Delay time, until reaching the social login elements which can be configured as follows:

social login configurationsocial login configurationsocial login configuration

The last step for the “Login” screen is to connect the button to the “Home” page, and configure the page transition event as follows:

connect button to homepageconnect button to homepageconnect button to homepage

Make Other Buttons Functional

We’re just going to do one more cool thing before we wrap up this prototype, and that is to make one of our image controls work to increment and decrement the number it displays.

Edit the “Home” page, select one of the controls, then in the Style tab of the right sidebar click Add widget state:

add widget stateadd widget stateadd widget state

You’ll see the screen dim - this is because you are now in widget editing mode, that lets you create and switch between multiple states within on-screen elements.

Click the little target icon like you did earlier, only this time you’ll see a Widget State box appear instead of a Screen State box. Click the Copy button to duplicate the current state, then with “State 2” selected, change the number on the control to be increased by 1:

statesstatesstates

We can now set up transitions between widget states in much the same way as we created screen transitions. Switch back into the widget’s “State 1”, select the rectangle on the right end of the control, and drag from its node to “State 2”:

state 2state 2state 2

Now when the right end of the control is clicked it will switch into “State 2”, which you set to show a higher number than “State 1”, hence making the control look like it is really incrementing the number it displays.

Note: You may also wish to connect  the “+” symbol, to make sure the control area is easy to click.

Then switch into “State 2” and repeat the process, but this time have the “-“ end of the control trigger a switch to ”State 1”, so it looks like the number is decrementing:

and back down againand back down againand back down again

For a real prototype you could set up as many states on the widget as you wanted, simulating a fully functional incrementing and decrementing control.

When you’re done, click the Exit editing button at the top of the interface to go back into regular screen editing mode:

exit editingexit editingexit editing

Click the Preview button when you click your control you’ll see the number going up and down:

preview buttonpreview buttonpreview button

And We’re Done!

Just as reminder, we’ve just created a wireframe, flowchart, logo and interactive, animated prototype - all on one platform.

That’s all this:

wireframewireframewireframe
flowchartflowchartflowchart
logologologo
prototypeprototypeprototype

Wondershare Mockitt is still quite new; 2 of the 3 apps are currently in beta, and as to be expected in any beta I did encounter a few bugs.

However the amount of functionality contained in this collection of software is seriously impressive, not to mention all the included assets.

And let’s not forget, all the above is “multiplayer”, with real time collaboration supported, and sharing of documents just by sending a link.

This is what’s in the mix when the platform is just getting started, so it’s very exciting to imagine what the future may hold with the addition of more features and the possibility of further integration between its apps.

Mockitt is already impressive, and is shaping up to have a very promising future indeed.

No comments:

Post a Comment