Prototype with Cloud Kicks

Learning Objectives

After completing this unit, you’ll be able to:

  • Explain how using a pre-rendered design system accelerates design.
  • Use InVision Studio and the Salesforce Lightning Design System components for rapid prototyping.

In this unit, Linda Rosenberg, Salesforce administrator for Cloud Kicks, builds her high-fidelity prototype using InVision. To follow along, make sure you have a free InVision account. (Just follow the steps in the next section.) If you already have an account, feel free to skip to Get InVision Studio.

Create an InVision Account

If you don’t have one, the first step is to create a free account with InVision.

  1. Sign up for a free InVision account here. You may be prompted to retrieve a one-time verification code from the email address you used, especially if you use a personal email address. If so, retrieve the code from the email you used and enter it at the prompt. 
  2. InVision asks “How do you want to work today?” Even though design is strengthened when you work as a team, select Solo so you can get right to work in this unit. The Solo button that says: Dive straight into a document now—you can add teammates anytime

Excellent, you’re now set up with a free InVision account. It’s time to get InVision’s prototyping tool, Studio.

Get InVision Studio

Navigate to the Home screen of your new InVision account. You can get there easily by signing in. Then, click Download Studio at the bottom of the Home screen.

the InVision Studio prompt on the Home page

Once the app is downloaded, go ahead and install it on your machine. 

Alright, you’re all set up.

Design Systems and Rapid Prototyping in Action

It’s rare that a single tool will help you build a high-fidelity prototype and keep you flexible enough to iterate quickly. Rapid prototyping is simpler with sketches and wireframes—all you have to do is tear off another sheet of paper, erase part of a whiteboard, or rearrange boxes on-screen. 

When you need to add fine details like color scheme, font, buttons, and so on, then weave in interactions and click-paths, things can get complicated really fast. This is where the design system works its magic. With the library of standard assets, like buttons, icons, and formats, you can simply reuse the assets you need instead of making everything from scratch.

For prototyping her high-fidelity mockup, Linda integrates the Salesforce Lightning Design System with InVision Studio. That way, she quickly develops her screens and shares them with her manager and the sales director. Since they’re already aligned on the bigger picture, this process runs smoothly.

Import the Design System

There are several options for integrating design systems with prototyping tools, including the manual import of files. The Salesforce Lightning Design System contains many elements. The best approach for this design system is to take the elements you intend to use and prepare them in an app like Photoshop or Sketch. That way, you’re efficiently pulling in only the relevant assets like a specific button, set of icons, or formating.

This also makes you flexible—at this time you can prepare custom images, colors, and other elements specific to your business. Then, when everything is ready, you click a few buttons to select the right file(s), pulling everything into InVision Studio to build your prototype all at once.

Linda has already done some of that work. If you’re interested in how to prepare and migrate design elements, check out the Resources section in this unit. 

Get Linda’s Studio File

You can import her Kicks Mobile design assets with this InVision Studio kit. Download it. Double-click on it to open the kit in InVision Studio so you can follow along.  

The kit contains a couple of things:

  • A collection of Components—the assets Linda prepared so you can drag and position it into your Artboard. Think of an Artboard as your canvas for prototyping.
  • An Artboard entitled Guide—a pre-made screen you can use to compare your work with Linda’s. It’s currently invisible so it won’t distract your work.

Linda opens InVision Studio and gets right to work.

Add an Artboard 

  1. Add an Artboard to the file.
    1. Click plus to open the dropdown.
    2. Click on Artboardthe plus sign dropdown open and Artboard highlighted with a red boxThis opens an interface selection pane on the right of InVision Studio.
    3. Select iPad Pro 12.9” under the Tablet section.
  2. Now, it’s time to format the Artboard so that it meets Linda’s design needs.
    1. Select the new Artboard by clicking on the blank canvas.
    2. Click orientation switch arrows in the right side panel to switch the orientation to landscape.
    3. Then, control-click, or right-click, on the Artboard layer and select Set Artboard as Home. This makes the current selection your main Artboard. the Artboard option dropdown open and Set Artboard as Home is highlighted with a red box
    4. Click on the text of the Artboard and rename it Product Select Screen.
  3. Save your work.

Now it’s time for Linda to bring the prototype to life!

Position The Header

The Artboard is blank, but not for long. InVision Studio gives Linda an easy way to pull all the design assets together and position them with pixel precision. Walk through positioning the MobileKick’s main asset, the header, then use the table below to try it on your own.

  1. In the left hand panel, click Libraries to open the Libraries dropdown.
  2. Then click Document to show the list of all the components that have been prepared using the Salesforce Lightning Design System and company art. the left pane with Libraries and Components highlighted with a red box, and the list of components showing
  3. Find Global Header from the list and drag it onto the blank Artboard.
  4. Now, you can go through the challenging way of positioning the header by dragging it around on the screen. But there’s an easier, and more precise way using the X and Y axis.
    1. With the Global Header that you dragged onto the Artboard selected, find its positioning in the right pane. the positioning panel on the right highlighted with a red box
    2. Enter 16px for the X axis position.
    3. Enter 12px for the Y axis position.

Perfect, the header, which includes the app’s logo and search field, is in position. Now it’s time to position the other components.

Note

Note

Remember, your Component list shows what’s available to you in your project. You can import more components as you progress, and you can re-use components and have multiple of the same kind (like buttons) throughout your Artboard.

Position the Components

Follow the table below to position the rest of your components. If you run into some trouble, here are some tips:

  • Make sure to drag the component into the Artboard. Even if it’s on top of a component you’ve already positioned, that’s OK. Putting a component into your Artboard allows you to get it into place with the X and Y axis.
  • If the positioning information for a component disappears, click on the component in your Artboard and it will show up again.
Component
Position
Breadcrumb
X = 16px, Y = 56px
Filter
X = 1142px , Y = 31px
Product Card - Ultra kicks 3
X = 241px , Y = 835px
Product Card - Cloud Cushion
X = 240px , Y = 336px
Product Card - Fashion Mesh 1
X = 804px , Y = 587px
Product Card - Fashion Mesh 2
X = 804px , Y = 832px
Product Card - Fast boost
X = 804px, Y = 91px
Product Card - Kick Max
X = 804px, Y = 339px
Product Card - Ultra kicks 1
X = 241px, Y = 91px
Product Card - Ultra kicks 2
X = 212px, Y = 587px
Vertical Navigation
X = 0px, Y = 88px

Position Your Buttons

Are buttons special? No. Why is there a separate section for positioning buttons? Because, you re-use the pink ones. To do so, simply drag the same component into the Artboard multiple times. See the table below.

Component
Position
Stateful Button (Blue)
X = 579px, Y = 272px
Stateful Button (Pink)
X = 1142px, Y = 1019px
X = 579px, Y = 1019px
X = 1142px, Y = 771px
X = 579px, Y = 771px
X = 1142px, Y = 523px
X = 579px, Y = 523px
X = 1142px, Y = 275px

Great work! You just created the Product Selection prototype screen for the KicksMobile app. 

Check and Share Your Work

You can check your work by making the Guide Artboard visible.

  1. Click App on the left pane.
  2. Hover over the Guide Artboard and click eye to make it visible. the product select screen

Now, Linda shares the design to get critical feedback. Recall that it’s best to share early and share often during the design process. InVision offers several tools that enable and control sharing.

  1. Click shareat the top of the Artboard. This generates an image of the prototype as seen on the device.
  2. Click Publish to generate a link you can email or share on instant message. Product Select Screen preview with published link

When your stakeholder opens the link, they can view and interact with the the prototype.

Prototype web viewer with Product Select Screen

What You Just Did

This unit focuses on creating one Artboard in InVision Studio and using elements of the Salesforce Lightning Design System. These steps are essential for understanding how high-fidelity prototypes are made.

There is still work to be done—Linda needs to create a few more Artboards to capture the rest of the sales rep’s journey. Some of that work is repetitive, like moving assets around on the page. Some of the work we don’t cover in this module.

If you want to learn more about InVision Studio’s features, you can check out the Resources section. To finish the review of app design and prototyping basics, in the next unit, you learn about typical roles and responsibilities within the design process, based on the size of your project or company.

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities