UX DesignNEW InVision Studio

InVision Studio Tutorial: Low-Fidelity Prototyping

Learn the basics of screen design with InVision Studio — or read this article and more in our ebook: InVision Studio Pocketbook. Read offline, any time, on any device 🎉

Pre-order (free)

Quick summary

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

What you'll learn

  • Basic screen design
  • Prototyping interactions
  • Desktop preview/quick testing

Storyboard » Low-Fidelity Prototype

Following on from our InVision Freehand tutorial, where we utilized rapid iteration techniques to sketch initial ideas (and eventually a storyboard of our best idea), the natural next step is to create low-fidelity mockups of each scene in our storyboard. In this InVision Studio tutorial for beginners, we’ll learn the basics of screen design and low-fidelity prototyping as we convert our storyboarded idea into an actual mockup—and then add interactions to turn this mockup into an interactive low-fidelity prototype.

Storyboard to low-fidelity

Low-Fidelity Prototyping: What & Why

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

Additionally, it helps us make our storyboard more tangible, equipping ourselves with something that we can actually hold (and therefore test) in 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, but this time around we’ll create our first artboard manually.

Hence, begin by choosing “Blank Canvas” from the welcome screen.

Starting with a blank canvas

Other Ways to Start a Project

We can also create new projects via:

  • ⌘N
  • File » New

Or open existing projects via:

  • ⌘O
  • File » Open

Or import .sketch projects via:

  • ⌘⇧O
  • File » Import…

Creating Artboards

Press A to reveal the list of artboards.

Select your first artboard.

Since we’re designing a mobile website and the most common mobile screen size in North America (as of Aug 2018) is 360x640 with 27.22% of the market share, we’re using the Galaxy S6 artboard in our examples (obviously there are more devices with this screen size, but the Galaxy S6 is the most notable, hence why Galaxy S6 is the codename for this artboard). Choose whatever artboard is applicable to your scenario.

Creating artboards

Don’t worry too much about how the design will adapt to slightly smaller or slightly larger devices, because we’ll learn how to create responsive layouts soon enough.

Available Artboards

Available artboards include:

  • Phone
    • iPhone X
    • iPhone 8 Plus
    • iPhone 8
    • iPhone SE
    • Galaxy S6
    • Google Pixel
  • Tablet
    • iPad Air / Mini
    • iPad Pro
    • Nexus 9
  • Desktop
    • iMac
    • Macbook Pro / Air
    • Dell XPS 15
  • Watch
    • Apple Watch 44mm
    • Apple Watch 38mm
    • Samsung Gear
  • Web
    • Desktop HD
    • Desktop
    • Tablet Portrait
    • Mobile Portrait

Duplicating Objects

We’ll need one artboard for each scene in our storyboard, so advance by duplicating the initial artboard. We can duplicate artboards (and any other objects) in three ways:

  • ⌘D (after selecting the object)
  • ⌘C then ⌘V (the classic method)
  • ⌥ + mouse-drag (essentially this is duplicate + move combined)
Duplicating objects

Zooming

Via the keyboard:

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

Via the menu:

  • View » [choose option]

Via the canvas:

  • Click the zoom dropdown
Zooming the canvas

Hiding Interfaces

We can also free up canvas space by hiding the interface:

Via the menu:

  • View » [choose option]

Via the keyboard:

  • Toggle Layer List: ⌘⌥1
  • Toggle Inspector: ⌘⌥2
  • Hide Layers & Inspector: ⌘⌥3
  • Toggle Interface: ⌘. (hidden shortcut!)

Saving Projects

Because it’s the sensible thing to do, right? 😉

Via the menu:

  • File » Save
  • File » Save As

Via the keyboard:

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

Creating Shapes

Next, let’s begin mocking up our screen design using our storyboard as a roadmap. If you’re reading these tutorials as a Sketch user (or similar), you’ll be familiar with the concept of single-key shortcuts for switching between different tools/shapes quickly.

Select a shape to begin.

Via the menu:

  • Tools » [select tool]

Via the keyboard:

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

Via the canvas:

  • Click the tool dropdown
Selecting shape tools

Drawing Shapes

Once a shape has been chosen, simply use the mouse to draw it on the artboard.

While drawing:

  • Draw from center:
  • Maintain aspect ratio:
  • Both at the same time: ⌥⇧
Creating shape layers

Don’t worry about how the shapes look for now. Remember: no visuals.

Warning: when drawing custom-sized artboards, the shortcuts above do not apply.

Resizing Objects

Visuals aside, the only degree of detail we need to be focusing on right now is proportion. This means that we need to know how to resize objects on the canvas.

With the mouse (while dragging the draggable handles):

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

With the keyboard:

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

Manually:

  • Specify exact dimensions using the Width and/or Height property
Resizing objects with the inspector

Rotating Objects

With the keyboard:

  • Rotate by 1°: ⌘ + drag handles
  • Rotate by 15°: ⌘⇧ + drag handles

Manually:

  • Specify exact dimensions using the Rotate property
Rotating objects with the inspector

Moving Objects

With the keyboard:

  • Move by 1px: ↑→↓←
  • Move by 10px: ⇧ + ↑→↓←

Manually:

  • Simply drag the object across the canvas

Smart Guides

I’m sure you’ve noticed by now that when we draw, move, resize, or otherwise engage with an object on the canvas, bubblegum-colored lines appear. These are called smart guides, and they tell us (among other things, which we’ll discuss in a moment) when an object snaps to or aligns with other objects, making it easy to arrange them correctly.

We can also initiate smart guides manually by selecting an object, holding , and then hovering over another object to better understand their physical relation to one another.

Smart Guides

Grouping Objects

Sometimes, when moving multiple objects at once, or simply for the intent of organizing or exporting related objects, we might want to group them together.

Via the menu:

  • Arrange » Group
  • Arrange » Ungroup

Via the keyboard:

  • Group: ⌘G
  • Ungroup: ⌘⇧G

Groups are represented by a toggleable folder icon in the layer list.

Grouping objects

Note: smart guides work with groups too, however, to use smart guides with objects inside groups we need to hold and together. We call this “clicking through”.

Selecting Multiple Objects

Grouping objects first requires us to select multiple objects at once.

If we can select objects by clicking on them (either from the canvas, or from the layer list), then we can select multiple objects by simultaneously holding while we select them. Remember to hold to click-through to objects that are nested inside groups.

We can also drag-to-select.

Selecting multiple objects

Deselecting Objects

  • esc (we can also use this to traverse upwards, e.g. from layergroup)

Deselecting Tools

  • V (or rather, it switches us back to selector tool)

Deleting Objects

With the keyboard:

With the mouse:

  • 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 mockup.

Press T to create text layers.

Like with shapes, the visual styles of our typographic elements are also not important right now, although we will want to specify an approximate font size so that our mockup makes sense and displays well in terms of visual hierarchy and readability.

With the keyboard:

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

Manually:

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

Importing Images

Next, images.

Via importing:

  • I (eye, not el)
  • Tools » Image

Via filling an object with an image:

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

Note: there’s also the masking approach, but we’ll talk more about that another time, because it’s not a technique that’s commonly used during low-fidelity prototyping.

Rapid Screen Design…Say What?

Even though we’ve covered a lot of different concepts in this InVision Studio tutorial, they’re fairly basic concepts, and with continued use of Studio, the keyboard shortcuts mentioned above will quickly become second nature, allowing you to visualize your ideas at the speed of light, and immediately share them with teams and stakeholders.

Here’s where we’re at with our design:

A low-fidelity mockup made with InVision Studio

With the same tools and keyboard shortcuts mentioned above, we were able to convert our storyboard into a low-fidelity mockup 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 concept. And…because InVision Studio enables it to happen quickly.

Next step? Piecing it all together with transitions! 🎉

Creating Transitions

Let’s create our first connection, connecting one screen to another via an interaction.

First of all, we need to select the object that is to be the trigger for our transition, and then we need to sway our attention to the Interactions tab in the inspector. There are a handful of notable settings here that impact our transition, the first of which is Trigger.

Creating interactions

Trigger

Trigger refers to the way that we interact with the object.

  • 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, the transition will be triggered by a keypress)
    • Key Down (defines which key triggers the transition)
  • Timer (meaning, the transition will start automatically after [x] seconds)
    • Timeout (defines the amount of delay before the transition starts)

Navigate to Screen

Super simple: choose a screen. Where does the interaction take us?

Alternatively: select the trigger, hit C, then choose the screen.

InVision Studio keyboard shortcut for interactions
  • Toggle Connections: X
Show connections

Transition

Choose Preset. Motion is for complex animations, we’ll work up to that much later.

Type

Type refers to the way that the screen animates as it transitions out of view. These transitions are somewhat synonymous with the transitions that are built into mobile operating systems, although Instant is reserved for web designs since transitions are fairly uncommon on the web, due to the fact that websites have to be downloaded.

Here are the different types of transitions:

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

Repeat these steps until all of the screens make up a single user flow.

A user flow created with InVision Studio

Next step? Testing it! 🎉

Desktop Preview

Before we test our mockup on a real device, we’ll want to test on desktop first. For mobile prototypes, this doesn’t really contribute towards our validation efforts (after all, we interact on mobile via taps, not clicks), but it does enable us to make sure that our interactions and connections work as expected before sending them off for feedback.

Hit the play icon near the top-right corner of the canvas to activate Desktop Preview.

Or use the shortcut: ⌘P.

A “device” window will appear.

Note: if designing a responsive website, we can quite literally resize this window and watch our design adapt, however, we’ll talk more about responsive resizing much later.

Desktop preview

Previewing Interactions

For now, let’s test our interactions.

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).

Press ⌘R to return to the home screen (the first screen created), if needed.

What’s Next?

Stay tuned, because in the next InVision Studio tutorial we’ll be testing on real devices as we start to understand how collaboration is absolutely vital to our success, and also how InVision Studio makes collaboration quick, easy, productive, and most of all…fun!

See you soon 👋.

Subscribe to 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.