Published on | Prototyping: From UX to Front End — Medium Tyler Burgett

The companion posts to the 360iDev talk.

When preparing for the talk, Sketch was the first tool I used to design Octo, primarily because it is the tool I am most familiar with. To kick off this project I made a copy of the latest Apple iOS 11 Sketch file and added a page for Octo, this way I was able to make use of all of the symbols and text styles they provide.

For the ingredient cards, recipe cards, orders, and ingredients in the list, I created symbols so that I could reuse those components.

The ingredient and recipe cards as symbols. Note the names: Octo / Cards / <card type>. This will help you keep things organized in the insert Symbol menu.

If you look at the Sketch file, there are several copies of the recipe art board. Since artboards are static, to show different states you use multiple copies of it with changes to the UI elements.

Normal, in purchase mode, ordered but not favorited, ordered and favorited.

What is there to say about Sketch that hasn’t already been said. It’s a great tool. Since switching to it, I have saved a lot of time and have produced higher quality designs.

As mentioned in the previous post, I wanted to try out the new look and feel that the iOS 11 App Store as a template for Octo. To make sure I have the proportions right I use the tracing trick that can be seen in the WWDC 2016 talk on iterative design on a screenshot of the new store. I use rectangles to measure out the margins between the edge of the screen and the next element. In this case, it was 23.5 pixels on the sides and 30 pixels between the cards. I do this on a scratch page, and name the layers with the dimensions so I can quickly refer back to it later. For the rounded corners, I again drag out a rectangle, match it over the size of the card, and tweak the corner radius until they line up, in this case the magic number was 16.

Even though I use the tool almost every day, there are some features that I had not used before, and one of those is Sketch Cloud. It is pretty neat, it uploads up each of your pages and allows you to share them with others. If you have several pages filled with symbols or the colors and style master, you can cut a bit of the noise by selecting which page you want to see from the dropdown menu in the upper left hand corner.

Once you are looking at an artboard you can leave comments in a panel on the right side of the screen. You can use the arrow buttons to cycle through the screens. There is no click interactivity on the artboards themselves yet, but I would not be surprised to see that feature before too long.

One of the great things about Sketch is that it has such a large community that creates plugins and reusable resources (linked below). When I first found out about Sketch plugins, it quickly reminded me of the time I heard about World of Warcraft interface addons.

Not my WoW UI, but it was for sure in the neighborhood. From /u/Kbeamski on Reddit.

Just like that fateful weekend, I installed way too many things at once and made things “literally unplayable.” There are three plugins that I really like to use: Craft, Autolayout, and Sketch Arrange Artboards. I add and remove others as needed.

Craft is from InVision. In addition to letting you sync your designs to their site (more on that later), you can very easily pull in real data from a JSON API, including images. This is huge! There have been many times over the years where a placeholder in one of my designs winds up handling real data less than gracefully.

Something they recently added is prototyping. Clicking the lightening bolt at the bottom of the Craft plugin enables or disables this. When enabled you can select a layer, hit C, point the arrow at another artboard and choose your gesture and transition. After pushing the changes to InVision, and you load up their app on your phone you can tap around, and it really starts to give you a feel for how the design would work in the hands of your users.

Prototyping with Craft.

Going through and making this design in Sketch was good practice for the tools to follow, and it gave me a good handle on the measurements so I could hit the ground running in the other apps.

Links

Sketch has a free trial, so if you don’t already have it, go check it out.

There is already a boatload of great content out there for Sketch, so here are some of my favorites.

Apple’s iOS Sketch file.

Plugins: Craft, Autolayout, and Sketch Arrange Artboards.

Heaps of free UI kits and tools, lots to learn from pulling some of these apart.

UX Power Tools, these folks have some very smart posts and resources that can save you time.

Download the Octo Sketch file here.

Further Reading

Harnessing vector awesomeness in Sketch

Introducing autolayout for Sketch

Harness the power of symbols

Saving time in Sketch — lots of great shortcuts and tips in this one.

5 ways to keep your Sketch kitchen clean — some solid practices that will make your life easier when working on large projects.

Other posts in this series

Intro
Sketch — you are here
InVision
Figma
Keynote
Framer
Which tool(s) should I use?

The right 🛠s for the job — Sketch was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The right s for the job — Sketch

Cool stuff, every week

More Articles