InVision StudioNEW UX Design

InVision Studio Tutorial: Low-Fidelity Prototyping

Scroll down to learn the basics of screen design with InVision Studio or download our InVision Studio ebook 🎉

Download (free)

Quick summary

Learn how to rapidly transform storyboards into low-fidelity prototypes with InVision Studio.

What you’ll learn

  • Wireframing
  • Prototyping
  • Desktop Preview

Hello Again 👋

Following on from the ideation tutorial, where we used InVision Freehand to sketch initial ideas and eventually a storyboard of our best idea, the natural next step is to create low-fidelity wireframes of each scene in our storyboard using InVision Studio.

We’ll then wrap up the tutorial by turning our wireframes into a clickable prototype.

Storyboard to low-fidelity

Why Low-Fidelity?

Prototyping with low-fidelity means to design with much fewer details. More detail requires more time, and why invest time focusing on the finer details when we haven’t yet refined our wireframes? Mistakes and wrong turns are inevitable, so low-fidelity prototyping allows us to keep iterating and refining until we validate the foundations.

Additionally, it helps make our storyboard more tangible, equipping ourselves with something that we can actually hold (and therefore test) on a real device, and this is exactly how we validate ideas — by testing them on real devices, in real environments.

Let’s begin by creating our first artboard 🎉.

Creating New Projects

In Getting Started With InVision Studio we learnt how to create an artboard via the welcome screen, however, this time around we’ll create our first artboard manually.

Hence, begin by hitting ⌘N or choosing “Blank Canvas” from the welcome screen.

A blank canvas

Creating Artboards

Press A to reveal the list of artboards.

Select your first artboard.

Since I’m designing a mobile website, and the most common mobile screen size in North America (as of Sept 2018) is 360x640 with 25.36% of the market share, I’m starting off with an artboard of those dimensions — which is the Galaxy S6 artboard.

However, choose an artboard that’s applicable to your scenario.

Don’t worry too much about how the design will adapt to slightly larger or slightly smaller devices, because later on we’ll talk a little bit about responsive components.

Creating artboards

Duplicating Objects

We’ll need one artboard for each scene in our storyboard. Selected objects, which include artboards, can be duplicated with ⌘D, option-drag, or the classic ⌘C + ⌘V.

Duplicating objects

Zooming

Sometimes we’ll need to zoom in and out on different objects across different artboards, either to look at them closely, align them accurately, or when there are multiple artboards, view them holistically. Zooming is a feature you’ll use frequently.

Via the keyboard:

  • Zoom In: ⌘+
  • Zoom Out: ⌘-
  • Zoom to 100%: ⌘0
  • Zoom to Fit Canvas: ⌘1
  • Zoom to Selection: ⌘2
  • Center Selection: ⌘3

Via the canvas (image below):

  • Click the zoom dropdown

Via scrolling:

  • Scroll Zoom: or or Z (while scrolling)
Zooming the canvas

Saving Projects

Probably best to do this now 😉.

  • Save: ⌘S
  • Save As: ⌘⇧S

Project all set up? Okay, let’s start wireframing.

Creating Shapes

Kickstart the design by mocking up the basic structure of each screen using simple shapes. If you’re a Sketch user (or similar), then the concept of using single-key shortcuts for switching between different tools and shapes should feel quite familiar.

Selecting Shapes

Via the keyboard:

  • Oval: O
  • Rectangle: R
  • Rounded Rectangle: U

Via the canvas (image below):

  • Click the tools dropdown

Press V or esc to undo shape selection.

Selecting shape tools

Drawing Shapes

Simply use the mouse to draw the shape on the artboard.

Zooming in will make this step easier, if you haven’t done so already.

While drawing:

  • Draw from center:
  • Perfect circle/square:
  • Both at the same time: ⌥⇧

Warning: the shortcuts above only apply to shapes, not artboards.

Creating shape layers

Resizing Objects

Visuals aside, the only level of detail that we need to be focusing on right now is proportion, which means that we need to know how to resize shapes and objects.

Via the mouse (while dragging the shape’s handles):

  • Resize from center:
  • Maintain aspect ratio:
  • Both at the same time: ⌥⇧
Resizing objects

Via the keyboard:

  • Resize by 1px: ⌘↑→↓←
  • Resize by 10px: ⌘⇧↑→↓←

Manually:

  • Specify exact sizes using the Width and Height property
Resizing objects with the inspector

Nudging Objects

Via the keyboard:

  • Nudge by 1px: ↑→↓←
  • Nudge by 10px: ⇧↑→↓←

Manually:

  • Simply move objects by dragging

So, we now know how to select, draw, move, nudge, and resize shapes and other objects — but how do we align them more accurately? Say hello to Smart Guides 👋.

Smart Guides

When we draw, move, resize, or otherwise engage with an object on the canvas, pink-colored lines appear — these are called Smart Guides — the lines illustrate how the object aligns with other objects, and the numbers depict the distance between them.

Smart Guides can be initiated manually by selecting objects and holding , then optionally hovering over another object to measure the distance between those objects specifically. We can also use them while nudging, to align objects with more accuracy.

Smart Guides

Grouping Objects

Sometimes, when moving multiple objects at once, or simply for the intent of organizing the layer list, we might want to group selected objects together.

  • Group: ⌘G
  • Ungroup: ⌘⇧G

Groups are like artboards within artboards, they’re still technically objects — we can rename them, move them, whatever. Objects inside them are called nested objects.

Example: a button consists of a text layer and rectangle layer, and naturally, if we wanted to move this button, we’d need to move both layers. Grouping them together makes this far easier, especially if said button contains a bunch of other layers/objects.

Groups have other uses as well, but we’ll talk more about that later.

Grouping objects

Nested Objects

How do we select objects inside groups?

Groups are like folders; when we double-click them, we can then select what’s inside.

Alternatively, we can hold while clicking on a nested object to “direct-select” it — this is sometimes known as “clicking-through” and is useful when combined with Smart Guides, to measure the distance between a selected object and nested object.

We can also use esc and return to traverse up and down the object hierarchy.

Selecting Multiple Objects

Grouping objects together first requires us to have all of the objects selected — to select multiple objects at once, simply hold while simultaneously selecting the objects, and remember to combine with to direct-select nested objects, if needed.

We can also drag-to-select (image below).

Selecting multiple objects

Deleting Objects

Either hit ⌫ backspace or use right-click » Delete.

Note: right-click opens the context menu. There are other tools and actions that can be accessed from the context menu, but it’s often not the quickest way of accessing them.

Deleting objects

Creating Text Layers

We’ll also want to add some text to our wireframe.

Press T to select the Text tool, then click on the canvas, then begin typing.

Press esc to exit typing mode.

Like with the shapes, the visual design of our text layers isn’t important right now, although we will want to use real data and specify somewhat realistic font sizes.

Via the keyboard:

  • Increase Font Size: ⌘⌥+
  • Decrease Font Size: ⌘⌥-

Manually:

  • Specify exact font sizes using the Size property
Creating text layers

Importing Images

Next, images.

Via importing:

  • Hit I (eye, not el), or…
  • Click the tools dropdown

By filling an object with an image:

  • Inspector » Fills » [select color picker] » Image Fill » [select image]
Importing images

Aaaaaand, Breathe…

Here’s where we’re at now, a simple a low-fidelity wireframe:

A low-fidelity wireframe made with InVision Studio

With the shapes, tools, and keyboard shortcuts mentioned above, we were able to convert our storyboard into a low-fidelity wireframe in only a few minutes, not because we wanted to rush, but because we don’t need a beautiful, high-fidelity design in order to validate our idea. And…because InVision Studio enables it to happen super-quickly.

Next step? Piecing it all together with connections! 🎉

Creating Connections

Connections are what link screens together, and sometimes this is via an animation.

Firstly, we need to select the object that is to be the call-to-action for our connection, and then we need to sway our attention to the Interactions tab in the inspector, where there are a handful of settings that impact our connection, the first of which is Trigger.

Creating connections

Trigger

Trigger refers to the way that we interact with the object. Majority of the time we interact with desktop websites via clicks, and mobile websites via taps, but mobile apps are usually more complex and may require slides, holds, double taps, and the like.

Here’s what’s available:

  • Desktop
    • Click
    • Hold Click
    • Double Click
    • Mouse Down
    • Mouse Up
    • Mouse Over
    • Mouse Out
    • Drag Down
    • Drag Up
    • Drag Left
    • Drag Right
  • Mobile
    • Tap
    • Hold Tap
    • Double Tap
    • Touch Down
    • Touch Up
    • Slide Down
    • Swipe Up
    • Swipe Left
    • Swipe Right
  • Keyboard (meaning, trigger via keypress)
    • Key Down (defines which key triggers the interaction)
  • Timer (meaning, self-trigger after [x] amount of seconds)
    • Timeout (defines the amount of seconds before the transition starts)

Navigate to Screen

Choose a screen from the dropdown. Where does the interaction take us?

Alternatively: select the trigger, hit C, then select the screen from the canvas itself.

Keyboard shortcut for creating connections

Connections are indicated by blue user flow diagrams. Press X to toggle indicators.

Show connections

Transition

Choose Preset. Motion is for complex animations, which we’ll look into much later.

Type

Type refers to the way that screens animate as they transition in and out of the viewport — these transition types are synonymous with the transitions that are built into mobile app frameworks, although, the Instant transition (i.e. no animation) is specifically reserved for websites, since transitions on the web are fairly uncommon.

Here’s what’s available:

  • Instant
  • Fade In
  • Slide Down
  • Slide Up
  • Slide Left
  • Slide Right
  • Push Down
  • Push Up
  • Push Left
  • Push Right

Choose whichever is applicable to your scenario.

Continue until all of the screens make up a single user flow.

A user flow made with InVision Studio

Next step? Testing it locally! 🎉

Desktop Preview

Before we test our design on a real device, we should test locally first. When it comes to mobile, this doesn’t really contribute towards our validation efforts (since we interact on mobile via taps, not clicks), but it does enable us to make sure that our connections work as expected before we start testing and collecting feedback with stakeholders.

Click the play icon near the top-right corner of the canvas — or hit ⌘P — to reveal what’s called Desktop Preview. A window will appear, mirroring our wireframe.

Desktop Preview

Attempt to click-through as if it were the real thing — this is our self-test.

If we click a non-interactive object, all interactive elements will flash blue. This is done to highlight the objects that are interactive, as Studio assumes you’ve clicked a non-interactive object because you’re lost or confused. If something doesn’t seem right, change it while keeping the Preview window open (the design will update in realtime).

If needed, hit ⌘R to return to the home screen (i.e. the first artboard). If the home screen isn’t correct, right-click on another artboard and select “Set Artboard As Home”.

Responsive Resizing

Since we have the Preview window open, this is an ideal time to make our mockups responsive because Desktop Preview also allows us to see how our mockups look on other devices and screen sizes while we make changes in realtime. Naturally, this isn’t necessary in all cases, since only websites and universal apps need to be responsive.

Percentage Units

First of all, we can declare widths and heights using % units, so if we were to set the Width of an object to 100%, it would then span the full width of the artboard, even if it’s nested. Next, click the cog icon in the top-right corner of the Preview window, then choose a larger device under the “Viewport” setting to observe the fluidity in realtime.

Fluid widths

Anchoring Objects

Anchoring — what’s this? 🤔

Anchoring an object ensures that when we resize the artboard (or view it on a different-sized screen), the object remains fixed to whichever side of the artboard it’s set to be anchored to, and by anchoring to opposite sides of the artboard (for instance, both the left and right sides), we can make objects responsive in a fluid/stretchy way.

Anchors can be applied via the keyboard:

  • Anchor Left: ⌥⌃←
  • Anchor Right: ⌥⌃→
  • Anchor Top: ⌥⌃↑
  • Anchor Bottom: ⌥⌃↓
Responsive anchors

Also, with the Middle/Center anchors, we can align objects vertically/horizontally:

  • Anchor Middle (vertical): ⌥⌃M
  • Anchor Center (horizontal): ⌥⌃H
Horizontal and vertical centering

And finally, we can also anchor objects via the inspector:

Responsive resizing

Speaking of, if we toggle the top or bottom anchors and click the Fix Position icon in the inspector, we can create sticky objects (i.e. fixed headers, footers, and navbars).

Fixed objects

BTW: if by anchoring a Group its nested objects then become unaligned, then this Group likely needs to be a Container. Let’s take a quick look at their differences.

Containers

Containers are essentially Groups, however, the objects inside them act a little differently. For example, the navbar items are currently anchored relative to the artboard, but if we converted the navbar’s Group to a Container, the navbar items would then learn to respect the boundaries of the navbar instead of the artboard.

Simply switch from “Group” to “Container” in the inspector.

Containers can be even resized — they’re like artboards within artboards, and nested objects inside Containers can be anchored to the Container instead of the artboard.

Groups vs. containers

While these features don’t offer a complete responsive solution, they do help make mockups responsive enough that they can be tested on similar screen sizes. When certain screen sizes require more significant changes in order to be responsive, copy the artboards to a new “Page” (⌘⇧N) after making them as responsive as they can be.

After that we can then tweak the mockups for different responsive breakpoints.

Coming up next: in the next tutorial we’ll learn how to collaborate on prototypes by testing them on real devices and allowing feedback from stakeholders. Get the book!

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.