Webinar Recap

Prototyping from Sketch App

by

on

View all posts

Keeping your agile workflow, well, agile, can be a process in itself. That’s why we hosted a webinar with Laurence Adrian, Senior Designer at Dom & Tom, on how to create clickable prototypes from Sketch App, the best techniques to use in an agency setting for rapid prototyping, and time-saving strategies you can incorporate into Sketch to optimize your design flow.

Watch the full recording below, or read on for our short recap on Laurence’s tips for working agile.


Agile in practice

Using agile methodology increases the speed and mobility of your design process. The first part of the process is discovery, where UX designers, programmers, project managers, and clients unpack the process by user story mapping and sketching.

“Agile methodology increases the speed and mobility of your design process.”

The process continues with daily reviews to prioritize which user stories to explore using prototypes, and feedback from those prototypes brings the process back to the prioritization phase as long as the sprint continues.

Epics and user stories

Let’s start small and work our way larger. A user story is a sentence or 2 that defines a function needed from a product from the perspective of a user. An example: “As a user, I need to use ‘guest checkout’ because I don’t feel comfortable creating an account.”

Each user story is a part of a collection of related user stories called an epic. So, under the epic of “log in” there are a couple of user stories: “I need to enter in my username” and “I need to enter in my password.” Use epics to help your team understand the scope of the project.

“Use epics to help your team understand the scope of the project.”

Exploring all epics and user stories during the initial discovery phase is vital to your project’s success.

Paper sketches and Sketch App

When your team agrees on the epics and user stories, allow each team member to interpret them independently through sketching on paper. By working solo this early in the project, you can avoid groupthink, reveal missed opportunities, expose flaws, and gain a variety of approaches and strategies that solve the same needs.

sketching

The next step is for designers to share what they’ve come up with. Get creative—sketches from different designers can be mixed and matched. Once you explore all opportunities, the team should decide which sketches to prototype. This creates a mutual understanding of which strategy will be pursued first and why.

Then, start translating those sketches into Sketch App. A few tips: each Sketch page should be reserved for artboards belonging to an epic. You can separate epics based on device size, user flow, or user type. For example, mobile user checkout and desktop user checkout are different epics and should be different pages.

More tips:

  • Each epic should be contained within a page
  • Each page should hold a series of related artboards
  • Don’t mix and match artboard sizes on the same page
  • Artboards should represent the full height of the webpage

Make Bootstrap your friend

Using Bootstrap as your framework helps you design and build responsively. Bootstrap is traditionally laid out into 12 columns—the advantage being that there can be 5 different symmetrical layouts with varying widths and heights.

In the video recap above, Laurence gives a detailed explanation of how to set up your Sketch artboards for desktop, tablet, and mobile layouts that respect Bootstrap’s conditions; tips and techniques to use to export your work from Sketch rapidly; and other strategies to incorporate into your design workflow.


more-talks
CTA for those not in hs to DO UI kit
Author

Margaret Kelsey
Content + community at InVision. Newly Bostonian.

Keep up with me on and .

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.