UI Prototyping with Sketch

When creating prototypes that should support the validation of screen-flows, visuals or the data content, it is less important to have fully functional prototypes rather than having prototypes that can be changed quickly and easily to reflect user feedback and conduct a number of iterations in a short amount of time. We love to use Sketch to create these kind of UI prototypes. But before stepping into the details of HOW to build a prototype with Sketch, it universally important to consider the prototyping rules outlined in this article and to make sure you properly understand the context of your prototype's target group. This includes the objectives on what they would want to achieve using your application or page and it also includes a sound understanding of the testing context (guided / un-guided, attended / un-attended, devices used, time available, etc.).

There are many tools available to support UI prototyping including Sketch, Balsamiq or Marvel that we have been using with our  teams in the past. While the overall workflow to create a UI prototypes with these tools is quite similar across the tools, they all have differences in capabilities and detailed features. We focus on how to get started with Sketch in this article and provide an overview of features and capabilities compared to Marvel.

Getting Started

When creating UI prototypes with Sketch, we follow the steps explained below:

1. Screen Design

During the screen design you define the layout, structure and content (incl. graphics) of the screens you require to visualize the workflow inside the prototype. You also would specify certain screen parameters or target devices as screen design and later-on appearance is heavily dependent on the screen parameters (like resolution, aspect-ratio, orientation, target platform, etc.). Sketch allows to use build-in wireframe libraries.

INPUT: Screen design sketches, scribbles, design guides, logo graphics and general graphical elements, corporate CI guidelines, target devices.

OUTPUT: Exportable screen designs that can be used as screen mock-up for the prototype.

2. Click Area Definition

During this step, pure graphics / screen designs created during the previous step will be extended with a) a definition of graphic areas that should be able to respond to clicks and b) a reference between these clickable areas and other screens of the prototype. This is generating a defined screen flow that is representing one or many user journeys that can be visualized with the prototype.

INPUT: Screen design graphics, logical user journeys and associated screen representations per step in the journey. Description of clickable areas in the screen designs.

OUTPUT: Screen designs and associated user journey defined into user paths that represent the links between clickable areas and screens.

3. Play & Test 

Test and replay of the prototype is important to ensure that the defined user journey works as intended and the references between the screens function correctly. This step now also enables us to play the prototype to the user and get an impression about how the prototype works outside the design / development context. Depending on the intended target group of the prototype and the contextual environment the prototype needs to work in to generate the intended results, the prototyping apps play a more important role. Capabilities demonstrating the prototype and collecting feedback differ substantially. While some limit the play & testing capabilities to browser-based versions only, some other apps come with "prototype players" that allow for prototype testing on end-user devices. 

INPUT: Screen designs and technically (click-areas and screen references) defined user journeys.

OUTPUT: Play-able prototype and test protocol.

4. Collection of User Feedback

Collecting user feedback finally is the step the whole prototyping intends to. Feedback can be collected offline and online depending on the tools capabilities and the requirements of the situation. 

INPUT: Working prototype.

OUTPUT: Collected user feedback on functional-, logical-, esthetical-level.

Feature Comparison Sketch / Marvel (prioritized)

Capability

Sketch

Marvel

General

Designer

Mac OS & Windows desktop application

Web-based Marvel Studio

Sync & Sharing

Sketch Cloud account included in yearly license. Allows for central storage and team sharing.

Marvel native cloud for sync and sharing between team members.

Community

Huge community supporting and building wireframes or libraries.

Limited community rather on the Dev-Side for building integrations.

API

No open API available.

Open API allows to create own integrations.

Plug-Ins / Integrations

Very limited integrations and Plug-Ins with focus on enhancing local app features.

Integrations available for a number of modern tools such as Slack, Jira, Confluence, Dropbox and LookBack.

Step 1: Screen Design

Pre-build Wireframes and Designs

Not available in Sketch but plenty of free libraries are available to be integrated.

Simple pre-build wireframes are available. Simple screen designs can be created using either the Marvel mobile or cloud app. 

Integration of Libraries

Huge amount of 3rd party libraries having everything from pre-build screens to screen components are available.

Unsplash stock photo library integrated.

Own libraries can be created and shared with the team. No external libraries available.

Unsplash stock photo library integrated.

Scribble based screen-design

Cannot be directly integrated and using photos as screens does not allow linkage of control elements to mock up a navigation.

Photos of paper sketches can be uploaded as screen designs. The Marvel mobile app can be used to directly feed pictures of sketches into the prototype.

Step 2: Definition of click-areas

Page / screen flow design

Easy building even complex screen flows with good visibility of linked screens.

Simple to create but not so easy to keep track of more complex screen flows due to a lack of visibility.

Can be done integrating with "UserFlows" 3rd Party integration.

Screen transitions

Transitions between screens can be created for a smooth transition between screens.

Transitions can be created in the web-editor but not in the mobile version.

Actions / Tap-Styles

Different tap styles (tap, click, swipe, etc.) can be configured.

Different tap styles (tap, click, swipe, etc.) can be created in the web-editor.

Step 3: (Re-) Play & Test

Browser based testing

Yes. Fully supports browser-based testing. Access for testers requires Sketch cloud.

Yes. Fully supports browser-based testing. Access to prototypes can directly be shared with testers via "invite" links.

Mobile device testing

Yes. Using the Sketch-Mirror app for iOS. (USB / local Wi-Fi connection required)

Yes. Using the Marvel app for iOS and Android. Works in online and offline mode.

Step 4: Collect Feedback

Online feedback collection

No

Yes. Testers can comment & discuss screens while testing the prototype in the browser.

Re-integration of user feedback

No

User comments are available at design-time to incorporate and comment changes.

Instructions for Coaches

  1. Decide in your team who is responsible for creating the prototype in Sketch. If you need help, contact our prototyping engineers for help. They are familiar with Sketch.

  2. Have the team record basic visual guidelines (if not available as a separate document) and specific key points about the visual appearance. But keep in mind - content and structure are higher priority than visuals.

  3. Instruct the teams to be very clear on the UI elements to be used for a certain functions. In modern software there is a very limited number of key UI elements (sliders, toggle-buttons, input fields, dropdown menus, etc.) that users have become familiar with. With very limited exceptions, prototypes should be constructed from the most commonly known set in the social context of the prototype. Again, point the team to the fact that in most cases it's about efficient delivery of information or availability of functions and NOT about fancy new UI models.  

Q&A

  • What is the more easy to start with tool for UI prototyping? Marvel is an easy start with no software installation required and a free account to get started with your first two prototypes. The drawback is, that functions are limited and it complexity quickly grows if prototypes get more sophisticated. Sketch is the "Photoshop" type of tool which suits the expert and supports even most complex prototypes. If you or someone in the team is familiar with Adobe products he/she will find it easy to work with Sketch.

  • What kind of prototypes can I create with Sketch? Sketch is limited to "non-functional" UI prototypes and have pre-configured canvases for the most common web and mobile formats (web-pages, mobile phones and tablets for iOS and Android as well as some wearables like the Apple Watch or Pebble).

  • Can we share links to the created prototypes and invite people for feedback with Sketch? No, only Marvel can be used to do this as prototypes are hosted in the Marvel cloud. Sketch prototypes can be shared and viewed as long as everyone is in the same local network. There is a seamless integration between Sketch and Marvel (Marvel PlugIN for Sketch) which creates an easy workflow bringing more complex Sketch prototypes into the Marvel cloud for feedback and sharing.