From Sketch to App: Mobile Design to Development Workflow

Written by David Ortinau

I delivered this presentation at Xamarin Evolve 2016 in Orlando, Florida. As you will see from my slides, they don’t communicate much useful information by themselves. I tend to use visual slides and speak from an outline. Even after rehearsing several times, it’s the ad hoc stories that come to mind in the moment that I find most useful. Or so I hope.

The video of this session is now online if you’d like to experience that. Be aware, the article below contains more detail, and fewer lame jokes.

What I’ll attempt to do here is deliver that presentation as an article, and embelish in areas that I cut short due to time constraints.

If you’re interested in something specific:

Workflow

evolve.001

During the conference Keynote, Xamarin Co-Founder and CEO Nat Friedman outlined the seamless devops lifecycle they are now able to deliver with existing tools such as Xamarin, Visual Studio, TestCloud, and the announced addition of Microsoft’s HockeyApp. It’s a smooth trip from Development, Testing, and Building on through to Distribution and Monitoring for mobile apps.

Isn’t this the age-old mistake most developers make? They start at Develop when really there are a LOT of valuable things that should happen before that. It’s that part of the product workflow that I want to explore.

“Ultimately, we are deluding ourselves if we think that the products that we design are the ‘things’ that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name.”

Bill Buxton

slide.005

An interesting thing to know about Buxton is that he is by training a computer scientist, and yet he is most well known for his influence in design. I highly recommend his book Sketching User Experiences.

We are all designers.

When as a developer we make a decision about a color, a transition, an animation, a layout, a font, a sizing, we are designing. We just may not always be very good at it.

I like to say “code is not what we do, it’s how we do”.

slide.006

At Rendr, before we get to Develop we have a number of activities we can leverage. Put together these become our design workflow.

We often begin by quickly iterating over ideas by doing hand sketches. Next we’ll start exploring implemenation details using a rough wireframing design tool, then begin prototyping to validate UI and UX design. When we have a design that works, we us a fantastic production asset tool to deliver our development team the assets, styles, and layout details they need to quickly build out the iOS and Android apps.

Not every project will travel through each step or implement every activity. And it’s important to not focus on the artifacts generated by each activity as a deliverable or achieving some artificial milestone that you can tick “complete” on a gant chart. Our focus is on crafting an outcome, a user experience that delivers value and impact. Each activity and artifact is only useful insomuch as it produces a better understanding of something or someone along the path to the final product.

Is It Worth It?

A common concern is that there’s no time in a tight project timeline to spend on these things, and we should be able to lean on past experience to deliver a quality product. Leaning on experience is good, but it also limits us to what we have done in the past. To improve, we should be open to growth and explore new territory.

Yes, some time is required to work through any variation of a design workflow. There is also potential time savings to be found here. Changes at this stage to a sketch, a wireframe, or a prototype is much less costly than at the latter stages of a project when code and infrastructure is under way.

The cost argument may resonate with some, but to me the biggest win is in setting my projects up for greater success in terms of value and impact.

Hand Sketching

“The fundamental thing about sketching is that it is about asking not telling.”

Bill Buxton

When it comes to sketching, I find it useful to pretend like I’ll never be responsible to implement any of it. That frees me up to dream and explore a wide variety of ideas that can focus most on what will delight and satisfy a user of the experience.

“If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.“

yep…Bill Buxton

For the longest time I hesitated to sketch. Whenever I would hear it taught, the examples looked something like this.

slide.011

Or this

slide.012

But this is what my sketching looks like.

slide.013

Right… pretty pathetic artisticly.

When I finally gave in to it I realized sketching is more about the process and the ideas that can be generated. It’s about changing my own perspective, working through my pet ideas, and realizing there are some amazing ideas “out there” waiting to be discovered on the other side of a series of mediocre ideas.

slide.015

Have you ever participated in an egg drop exercise? The goal is to drop a raw egg unharmed by designing a protective container. Sometimes it’s a fixed height and sometimes it’s a competition to see who can succeed from the heighest point.

This is typically a time-boxed event with two groups of participants. One group works the entire time on a design and at the end executes a single drop. The other group can iterate freely and drop as many times as they wish.

The results are always the same: the group that iterates is able to drop successfully more frequently and from higher than the non-iteration group.

Another interesting finding is that someone that has never before done the exercise will perform just as well as someone with prior experience in the non-iteration group.

One such study

Some tips for useful sketching:

  • Don’t sweat the implementation. Dream a little.
  • Go through the exercise of multiple variations to see surprises appear.
  • At the end of the sketching process, expect to have a number of questions that need answering and assumptions that need validating.

slide.017

UI Stencils

What about code sketching? I’ve found sketching with code to be useful for working out interaction possibilities. With Xamarin Sketches and Workbooks, it’s really easy to lay down some code and see exactly what it’s going to do without building out a ton of architecture.

Brax_Facebook

Rendr co-founder Ben Bishop has produced a series of short videos for Brax.tv that demostrate some of the cool features of Xamarin Workbooks. Check it out.

 

Wireframing

slide.021

Usually I won’t create a sketch for every single screen or interaction. When it comes to wireframes, it’s time to start filling in the gaps with something actionable. A visual designer should be able to take a wireframe and know what each screen requires in terms of UI implementation, information, and interactions.

slide.022

While not everything is sized to final scale in a wireframe, I begin to identify what information each screen and control requires, and how it might layout based on user needs. I should have a clearer idea now of the purpose for each screen and control.

slide.023

Wireframes are an opportunity to start filling in the gaps of any activity flows. In this example a user is choosing a goal such as “Become a Better Dev”. They then choose from a curated list of routines that bring them closer to that goal. Once choosing a routine, they have the option to customize it by managing the routine’s micro-tasks (steps). When saved, the user receives a confirmation with recommended next steps.

Building this out, we can begin to identify dead ends, missing or confusing wayfinding clues, and interactions we hadn’t considered previously (deleting, reordering, etc).

Screenshot 2016-04-26 15.02.46

Our favorite tool for the longest time has been Balsamiq Mockups. The platform has a good range of components and flexibility to build out a UI quickly. Nobody is going to mistake these for “final” designs. It’s easy to create a clickable prototype to be shared via PDF or to demo in presentation mode. Easy is the name of the game, and you just can’t get carried away into designing anything beyond a wireframe.

GIF

Here are some other popular tools you may want to explore if Balsamiq doesn’t strike your fancy.

Prototyping

When talking to developers and designers alike about the most useful tools at our disposal, the king of the list is always Sketch by Bohemian Coding. Combine that with InVision and you have the dream team for prototyping. Let’s dig in to some of our favorite features.

Sketch

Sketch is a vector focused design tool for web and mobile applications. It excels at quickly designing with a rich ecosystem of common controls and design patterns. It will not directly replace Photoshop or Illustrator for advanced effects, but it really does most of what anyone needs. And it does it quickly. I’ve had great success copying/pasting from Illustrator into Sketch.

Organizing Your Sketch Documents

Pages are groupings of screens that you can use as it makes the most sense to you. Within a page you’ll add artboards at the size and resolution desired. I tend to favor the largest device size to make sure the assets I’m generating later will max out properly. For vector assets this really doesn’t matter. If you want to design the same screen at each device size to make sure your layout will hold up across form factors, you only need to add a few more artboards.

One trick we use to restrict what eventually exports to InVision is to prefix hidden pages and artboards with –. Those will be ignored during export or sync.

Symbols

Take any reusable piece of UI, a button or table cell for example, and turn it into a symbol. Now you can place that symbol anywhere you need it and any update to the layout and design of the element will be immediately updated everything. Instance based things such as text and images can be customized per use via the Overrides panel.

Sketch now also creates a page called Symbols where you can easily see them all together.

Shared Styles

As you’d expect, any styling can be made into a shared profile and applied to other elements of a similar kind.

Exporting Assets

Setting up your assets for export is powerful. Let’s pick an icon for example. Hit the “Make Exportable” button in the properties panel and it’ll generate the 1x asset. Add another and another and another and watch as Sketch creates profiles at all the different resolutions for iOS. Ready to generate that asset? Hit the export and there you go.

What about Android? Yeh, that’s a bit harder but several plugins are available to address this issue. My preferred method is to generate additional export profiles and use the suffix option to differentiate them.

GIF

I then use a shell script to create the appropriate subfolders, and rename and move the files. I can then merge that with my Android project.

To export all images at once from Sketch, use the File > Export option.

If you’ve a fan of SVG, check out the Edit menu. Select any asset and choose “Copy SVG Code”. Cool, eh?

For more options, be sure to check out the Zeplin integration which I’ll discuss in the Production section below.

Another useful trick I use related to the Export functionality is to duplicate an artboard. When I need to represent another screen, but display perhaps a modal above it, I will export the entire artboard by dragging the export preview to a new artboard. Yay!

GIF

Favorite Sketch Key Combinations

Key Combo Action
Z Zoom In
Alt+Z Zoom Out
Cmd + 1 View all artboards
Cmd + 2 Focus on selected
Cmd + Alt + Shift + Track Scroll Smooth zoom in/out
Space + Drag Move canvas
Alt + Hover Show spacing details
Alt + Drag Duplicate
Alt + Cmd + ↑ Bring forward
Control + Alt + Cmd + ↑ Bring to front
Alt + Cmd + ↓ Send backward
Control + Alt + Cmd + ↓ Send to back

Check out those and mange more on sketchshortcuts.com.

Favorite Sketch Plugins

We recently discovered Craft, a powerful plugin from the team at InVision. With Craft you can generate placeholder content for text and photos. It also has a powerful “duplicate” feature to layout repeating content.

We regularly use the InVision and Zeplin plugins to send art to those services. InVision also provides a sync app if that appeals to you. As you save your changes they’ll appear in your InVision prototype.

Icon Font and Font Awesome plugins provide quick access to those resources.

Sketch Exports Generator is useful for quickly creating the many size profiles you need for iOS and Android.

Favorite InVision Resources

For quickly finding and adding plugins, I use Sketch Toolbox. It’s like a nuget package manager for your Sketch plugins.

Also checkout:

InVision

Once we have enough design work done to start building out a prototype that can be shared with everyone on the team, and even tested with any random stranger, it’s time to export or sync the designs to InVision. InVision is a web based service that really boils down to some very intelligent image maps. Every screen of your app is exported as a single png.

To get Sketch designs into InVision, I use the InVision Sync desktop app that pushes changes as I save them. InVision will also import Sketch files directly, or via other file syncing like Dropbox.

The InVision editor gives you tools to add hotspots to buttons, which is how you wire up the majority of interactions. Triggering a button can do just about any transition you’d expect. Select your target, the transition, and any special options.

GIF

If your screen has a stationary header and/or footer with a scrolling list, use the slider to mark those points in the screen and when run in the viewer the content will scroll. Make sure your design is taller than the device screen.

GIF

When you have a button, like the back button that needs to go to the previous screen regardless of which screen came before, choose that option instead of specifying a specific screen.

When you’re ready to share the prototype, you can grab a short url or use the cool SMS feature. On device the app will run as a simple web app from the home screen. This removes the typical browser chrome and gives you the nice illusion that you’re in a real app.

InVision also provides some useful collaboration features for discussion points of concern and addressing issues that you may want to deal with. Enter the Comment Mode and click anywhere to start a conversation. Need to make a visual note? No sweat, you can draw on the screen and add comments to that.

There are a lot more features on InVision that you can explore and leverage. We love InVision and have used it on nearly every project over the past year.

How to Use a Prototype

Putting this in the hands of your team communicates intended behavior and design. InVision can’t do everything you might have in your mind, but it certainly answers a lot of questions. Unlike a hand sketch, you don’t want to leave much to the imagination at this point in the workflow.

We like to deliver a fairly complete prototype to users. Often I’ll meet someone up at Starbucks or cajole a family member into being my guinea pig. After providing a little context about the app, I let them fly solo. Something I learned early on is that observed behavior trumps everything else. Despite our feelings to the contrary, most of us are not altogether self aware. We think we will act or have acted one way that matches up with our sanitized view of ourself, but when in the moment we may act differently.

When it comes to validating a UX to meet user needs, the behavior you observe means more than the behavior a user may describe through an interview or survey. In most cases a user isn’t lying to you; they just aren’t very self aware. We all fall prey to one cognitive bias or another.

Production

At this stage I have a design and a UX I like and I’m ready to launch into development. What does the development team need to get rolling?

  • Style Guide
  • Fonts
  • Image assets at multiple resolutions
  • Layout guidance
  • Interaction guidance

In days gone by, design would be a Photoshop or Illustrator document. If the designer was amazing, the document would have layer comps that provided direction about what was what. Usually though the document was a long, probably unorganized collection of layers that provided little direction.

The mechanism our team has found to be extremely useful in delivering most of that is called Zeplin. Zeplin is a web based service with a native app that delivers all that at more.

Sketch designs are exported to Zeplin via a plugin. Selecting one or more artboards, I hit Cmd+E and Zeplin launches to receive.

GIF

Zeplin automatically generates a style guide with colors and text styles. Colors are given reasonable names that you can override at will. Any colors not reflected can be added manuallly by selecting a representative asset and hitting the droplet icon.

If all the export profiles are properly configured in Sketch, the development team has access to download the PNGs at the defined target resolutions as well as a PDF vector version when available. If the developer targets the xcassets directory of an Xcode or Xamarin iOS project, Zeplin will also generate the imageset bundle. In the case of Xcode, Zeplin will also update the project file so those assets are immediately available.

I’m hopeful that Zeplin will shortly support Xamarin iOS (and Android) projects. I’ve put Xamarin and Zeplin together, so here’s hoping!

Wrap Up

I realize Rendr may not be like most mobile shops in that we encourage developers to be heavily involved in the design process. We believe the more developers understand about design, the more designers understand about development, and the more we all work together towards the ultimate goal of crafting experiences that deliver value and impact, all the better.

Whether a tool, a process, or a role, let us not forget these are all levers or cogs in the service of delivering value to people. The more we can remind ourselves of this and adopt workflows that align with that outcome, the greater our chances of succeeding.

Slides

The presentation slides: