Prototyping from Sketch App

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.

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

Learning more about Bootstrap to make devs happy 😉 @codelittinc #invisionwebinar pic.twitter.com/T3RTDB51Xc

— Vicky Jaime (@vickyjaime) September 1, 2015

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.