Rapid prototyping with Sketch + InVision

4 min read
Daniel Schwarz
  •  Jul 24, 2017
Link copied to clipboard

Accelerate your design process by harnessing the power of Sketch and InVision. With Sketch’s world-class digital product design toolset and the rapid prototyping power of InVision, you’ll create better projects faster than ever.

This is an excerpt from Sketch + InVision: A guide to high-speed design, an InVision book by Daniel Schwarz at SitePoint. Download the entire book here—it’s completely free. Keep reading this post to jump right into rapid prototyping with Sketch and InVision.

To follow along, you’ll need:

Once you’re all set up, it’s time to open Sketch and use Craft to design something. I’m not going to beat around the bush—we’re going to dive right into the tools, so by the end of this post you’ll be familiar with how Craft works.

After this, we’ll descend into much more detail, but for now we’re going to breeze over the features to create a low-fidelity mockup. First, let’s confirm what that actually means.

What’s low-fidelity prototyping?

Low-fidelity prototyping is about taking a rough concept and trying to prove (or disprove) its effectiveness, because there’s not much use in designing something to completion without ever considering whether the design offers an optimum user experience. Our current aim is to rapidly mock up our idea without going into detail, to see if it might work.

A low-fidelity prototype should resemble a reasonably basic wireframe. Styles like colors and font families shouldn’t be a concern at this stage. Instead, we need to focus on how the design and layout impacts the user’s overall experience.

If you’re not overly confident on how to use Sketch, you might benefit from trying out the Switch to Sketch video course first—videos #2-6 will cover the finer aspects of using Sketch. That being said, if you’re a keen learner, you should be able to follow along without issue (and I’ll try to be super-clear about things).

Diving into Sketch, part 1

For those who aren’t completely familiar with Sketch, don’t worry—we’ll discuss the core features of the app as we go along. Start by creating an Artboard with the keyboard shortcut A and drawing it out on the canvas (using the mouse or Trackpad).

We need the dimensions of the Artboard to be 750px x 1334px (these are the dimensions for designing an iPhone 6 app, and the dimensions will appear alongside the mouse cursor as you draw).

You can use the Inspector (on the right-hand side) to change the width and height styles of this Artboard, but since Sketch is very keyboard-friendly you can also hold command while tapping the up, down, left or right arrows. If you throw the shift key into the shortcut you can resize an object by increments of 10px. As you’ll soon see, this is one of the many ways that you can design using the keyboard in Sketch.

Creating an Artboard.

Since visual styles aren’t a concern right now, we won’t be using the Inspector for anything other than resizing and repositioning at the moment—although as I said before, resizing and repositioning can be easily accomplished using the keyboard.

Now let’s start designing a sign-up screen.

Diving into Sketch, part 2

Begin by creating a rectangle using the keyboard shortcut R; similarly to how we created the artboard, ensure that the rectangle is 550px x 1014px. Repeat this step with another rectangle that’s 440px x 120px, and finally one more time with 550px x 370px. You should have 3 rectangles total.

Building the foundation.

Reposition the largest rectangle (by dragging it) so that it becomes horizontally centered and fixed to the bottom of the Artboard with a margin of 100px. If you hold option while hovering over the Artboard you can activate Smart Guides, which will indicate exactly how much space exists between the rectangle and the Artboard. You can move the rectangle (with the arrow keys) while using the Smart Guides to help you reposition layers with accuracy. Pretty cool, right?

Aligning objects with Smart Guides.

For the smallest rectangle, drag it to the bottom-right corner of the largest rectangle (until it automatically “snaps” to the corner) and “nudge” (shift + arrow keys) it a little further to create an offset of 40px. Now repeat these steps with the final, medium-sized rectangle, although this time offset from the top-left corner. You should have something like this:

Repositioning objects with Smart Guides.

Diving into Craft, part 1

Let’s break this next step down a little:

  1. Press T for Text, then click on the canvas
  2. Enter “NAME” as the text value
  3. Press command + D to Duplicate the layer
  4. Press esc to exit editing mode
  5. Move the layer underneath the other text layer
  6. Press command + option + P to open Craft
  7. Select the Data tab from the Craft toolbar
  8. Navigate to Custom → Type → Names → Female
Bringing real data into the design.

What we’ve done here is design an input field label, and an input field with a user-defined value. We’ve used Craft to create the input field value for us, meaning we can now choose an appropriate font size and font weight from the Inspector knowing that the input field contains a text value that a user would realistically choose. As for the actual font sizes, font weights, and spacing between layers, that’s your call. You need to think about readability, spacing, and emphasis while resisting the urge to play to around with colors and font families.

In short, real data helps us design realistically.Twitter Logo It ensures that the content we’re using in our designs near-enough reflects the content that would appear in our actual, final design.

Diving into Craft, part 2

In the following steps, we’ll use the Inspector:

  1. Make sure the Color of both text layers is “#000000”
  2. Select the label and tap 5 to make the Opacity “50%”
  3. Make a rectangle separator with dimensions of “450px x 2px”
  4. Make the Fill “#000000” and Opacity “25%”
  5. Reposition the layers until they feel right to you
  6. Select all 3 layers and ready yourself for the next step

Styling all text layers black (#000000) and establishing visual hierarchy using opacity is a terrific way to prototype without concerning yourself with which colors you’re going to use.

Quickly mocking up our design.

Now that our input field is reasonably spaced, the more important areas are emphasized clearly, and the font sizes are large enough that they can be read without squinting, we need to advance with 2 more input fields. With all 3 layers still selected (simply click each layer in succession while holding shift), choose the Duplicate tab from the Craft toolbar.

Once again, let’s break this down:

  1. Make sure the “Vertical” checkbox is checked
  2. Insert “3” as the first value (i.e. 3 rows)
  3. Insert “41” as the second value (i.e. 41px between each row)
Vertically duplicating the input fields.

We now have 3 rows of input fields. However, the text values aren’t quite what they should be. We first need the labels to read: “NAME”, “EMAIL”, “PASSWORD”—in that order. Double-click the layer or tap return to enter editing mode.

Press Esc to leave editing mode.

After that we need to use Craft to create a fake but realistic email address for us (Data → Custom → Type → Email).

Generating fake emails using Craft.

Lastly, navigate to Custom → Photos → Unsplash after selecting the medium-sized rectangle to have Craft source a random image.

Generating images with Unsplash.

Quick-tip: How to organize the Layer List

Because the art of creating user flows sometimes involves linking deeply-nested components to another screen, it’s important to keep the Layer List relatively clean to ensure that we can understand and access the finer details of our design with ease. For example, you could Rename (command + R) the smallest rectangle to “Button” for better search visibility.

It’s also important that you delete unused/unnecessary layers and Group (command + G) related layers together.

You can also drag objects (or use command + option + ↑↓) in the Layer List to reorder them according to sensible logic.

Keeping the Layer List organized.

And now, the million-dollar question…

Does our design work?

Now that we have a low-fidelity mockup of our screen, it’s time to debate whether the layout works. If it doesn’t work, then we need to iterate over the design and improve it. If it does work, then awesome—we can move onto designing another screen. Since we’re not focusing on the intricate details of the design (i.e. the visual aesthetics), we can iterate as many times as needed without wasting serious amounts of our time.

Right now I’m not using Craft (or Sketch) in all its glory, but that’s okay. You don’t need to have a colorful, fully thought-out design to know whether it will work. At this stage we’re only prototyping quick ideas—the question we need to answer right now is, “Is this idea worth exploring, or should we go back to the drawing board?”

Here are some of the things you should be thinking about when designing low-fidelity prototypes:

  1. Is the layout cluttered or confusing?
  2. Does the user know what to do on this screen?
  3. Is the user able to advance onto other screens with ease?

In order to answer these questions, you need to stop being a designer and start being a user. But in order to validate your answers, you need to ask for feedback from your teammates.

Getting instant feedback with Craft Freehand

Which brings me to Craft Freehand.

Craft Freehand takes your Artboards into the browser where you can collaborate with your teammates by freehand sketching on top of the screen. It’s instant, it’s easy, and it’s an effective way of receiving feedback with contextual annotations.

Let’s try it out. Click on the Freehand tab in Craft, decide whether you want to sketch-collaborate on the “Selected Artboards” or “All Artboards,” and then click “Create Freehand.”

Starting a Freehand.

Your design will then open up in the browser. Start by clicking on the green “Share” button to receive a share link, then share the link with your teammates to invite them to collaborate.

First look at Freehand.

As you’ll quickly discover, Freehand will let you:

  1. Sketch (freehand)
  2. Add text
  3. Add images

So that you can:

  1. Demonstrate where you’re going with the design
  2. Ask your teammates where you should go with the design

Simplicity really is the beauty of this tool!

Click the ? icon to see a list of keyboard shortcuts that can help you speed up your workflow. Many of these shortcuts are exactly what you’d expected (undo, redo, zoom, etc.), but command will let you switch to the Pointer Tool temporarily. And that’s pretty much it—Freehand is super-easy!

Tip: if you make changes to the design, click “Update Freehand” in Sketch to show off your new iteration immediately!

Keep reading

This was an excerpt from How to use Sketch + InVision to supercharge your workflow, an InVision book by Daniel Schwarz at SitePoint. Get the whole thing—completely free—here.